From db4a119ed7fe6aca5b4c2c2183fbc9fb6b56ad31 Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 11:47:39 -0300
Subject: [PATCH 01/11] Criando o projeto

---
 package.json                          |  2 +-
 src/components/ComponentList/index.js | 19 +++++++++++++------
 src/store/reducer/example-reducer.js  |  8 ++------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 27e33f4..70b0398 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "templete-redux",
+  "name": "notes-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
diff --git a/src/components/ComponentList/index.js b/src/components/ComponentList/index.js
index c3e6885..8a4bbd7 100644
--- a/src/components/ComponentList/index.js
+++ b/src/components/ComponentList/index.js
@@ -1,26 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Types } from '../../store/reducer/example-reducer';
 
 export default function ComponentList() {
 
   const qty = 20
+  const [text, setText] = useState('')
 
   const list = useSelector(
-      state => state.exampleReducer.data.slice(0, qty)
+    state => state.exampleReducer.data.slice(0, qty)
     , [qty]);
   const dispatch = useDispatch();
 
-  function add(){
-    dispatch({ type: Types.ADD, title: 'GrafQL'})
+  function add() {
+    dispatch({ type: Types.ADD, title: text })
   }
 
   return (
     <>
+      <textarea
+        cols={100}
+        rows={10}
+        value={text}
+        onChange={e => setText(e.target.value)}
+      />
+      <button type="button" onClick={add}>ADD</button>
       <ul>
-        {list.map( item => <li key={item}>{item}</li>)}
+        {list.map(item => <li key={item}>{item}</li>)}
       </ul>
-      <button type="button" onClick={add}>ADD</button>
     </>
   );
 }
diff --git a/src/store/reducer/example-reducer.js b/src/store/reducer/example-reducer.js
index b497fc4..6dee344 100644
--- a/src/store/reducer/example-reducer.js
+++ b/src/store/reducer/example-reducer.js
@@ -9,15 +9,11 @@ export const { Types, Creators } = createActions({
 })
 
 const INITIAL_STATE = {
-  data: [
-    'React Native',
-    'ReactJS',
-    'NodeJS'
-  ]
+  data: []
 }
 
 const add = (state = INITIAL_STATE, action) => {
-  return { ...state, data: [ ...state.data, action.title ]}
+  return { ...state, data: [...state.data, action.title] }
 }
 
 /**

From 7beaaf09de51e5d9d617effdd364d01ea7b5d6be Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 12:01:54 -0300
Subject: [PATCH 02/11] =?UTF-8?q?Criando=20modelo=20Nota=20e=20separando?=
 =?UTF-8?q?=20a=20exibi=C3=A7=C3=A3o=20em=20um=20novo=20componente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComponentList/index.js |  9 +++++++--
 src/components/ItemList/index.js      | 11 +++++++++++
 src/models/Note.js                    | 11 +++++++++++
 src/store/reducer/example-reducer.js  |  4 ++--
 4 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ItemList/index.js
 create mode 100644 src/models/Note.js

diff --git a/src/components/ComponentList/index.js b/src/components/ComponentList/index.js
index 8a4bbd7..3088da3 100644
--- a/src/components/ComponentList/index.js
+++ b/src/components/ComponentList/index.js
@@ -2,6 +2,9 @@ import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Types } from '../../store/reducer/example-reducer';
 
+import Note from '../../models/Note';
+import ItemList from '../ItemList'
+
 export default function ComponentList() {
 
   const qty = 20
@@ -13,7 +16,9 @@ export default function ComponentList() {
   const dispatch = useDispatch();
 
   function add() {
-    dispatch({ type: Types.ADD, title: text })
+    let note = new Note(text)
+    dispatch({ type: Types.ADD, note })
+    setText('')
   }
 
   return (
@@ -26,7 +31,7 @@ export default function ComponentList() {
       />
       <button type="button" onClick={add}>ADD</button>
       <ul>
-        {list.map(item => <li key={item}>{item}</li>)}
+        {list.map(item => <li key={item.id}><ItemList item={item} /> </li>)}
       </ul>
     </>
   );
diff --git a/src/components/ItemList/index.js b/src/components/ItemList/index.js
new file mode 100644
index 0000000..1827def
--- /dev/null
+++ b/src/components/ItemList/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+// import { Container } from './styles';
+
+export default function ItemList({ item }) {
+  return (
+    <span>
+      {item.text} - {item.createAt}
+    </span>
+  );
+}
diff --git a/src/models/Note.js b/src/models/Note.js
new file mode 100644
index 0000000..d5d6608
--- /dev/null
+++ b/src/models/Note.js
@@ -0,0 +1,11 @@
+import crypto from 'crypto';
+
+export default class Note {
+
+  constructor(text) {
+    this.id = crypto.randomBytes(4).toString('HEX')
+    this.text = text
+    this.createAt = new Date().toLocaleDateString()
+  }
+
+}
\ No newline at end of file
diff --git a/src/store/reducer/example-reducer.js b/src/store/reducer/example-reducer.js
index 6dee344..9bcf3f1 100644
--- a/src/store/reducer/example-reducer.js
+++ b/src/store/reducer/example-reducer.js
@@ -5,7 +5,7 @@ import { createActions, createReducer } from 'reduxsauce';
  *  Ex.: Type.ADD e add = { type: Type.ADD, params }
  */
 export const { Types, Creators } = createActions({
-  add: ["title"]
+  add: ["note"]
 })
 
 const INITIAL_STATE = {
@@ -13,7 +13,7 @@ const INITIAL_STATE = {
 }
 
 const add = (state = INITIAL_STATE, action) => {
-  return { ...state, data: [...state.data, action.title] }
+  return { ...state, data: [...state.data, action.note] }
 }
 
 /**

From 5f214bcb929457edd3078fcad88c88634cfa6178 Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 12:11:32 -0300
Subject: [PATCH 03/11] =?UTF-8?q?Implementando=20fun=C3=A7=C3=A3o=20de=20d?=
 =?UTF-8?q?eletar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ItemList/index.js     | 12 +++++++++++-
 src/store/reducer/example-reducer.js |  8 +++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/ItemList/index.js b/src/components/ItemList/index.js
index 1827def..3ecea93 100644
--- a/src/components/ItemList/index.js
+++ b/src/components/ItemList/index.js
@@ -1,11 +1,21 @@
 import React from 'react';
-
+import { useDispatch } from 'react-redux';
+import { Types } from '../../store/reducer/example-reducer';
 // import { Container } from './styles';
 
 export default function ItemList({ item }) {
+
+  const dispatch = useDispatch();
+
+  function remove() {
+    let id = item.id
+    dispatch({ type: Types.REMOVE, id })
+  }
+
   return (
     <span>
       {item.text} - {item.createAt}
+      <button type="button" onClick={remove}>DELETE</button>
     </span>
   );
 }
diff --git a/src/store/reducer/example-reducer.js b/src/store/reducer/example-reducer.js
index 9bcf3f1..a2b8636 100644
--- a/src/store/reducer/example-reducer.js
+++ b/src/store/reducer/example-reducer.js
@@ -5,7 +5,8 @@ import { createActions, createReducer } from 'reduxsauce';
  *  Ex.: Type.ADD e add = { type: Type.ADD, params }
  */
 export const { Types, Creators } = createActions({
-  add: ["note"]
+  add: ["note"],
+  remove: ["id"]
 })
 
 const INITIAL_STATE = {
@@ -16,6 +17,10 @@ const add = (state = INITIAL_STATE, action) => {
   return { ...state, data: [...state.data, action.note] }
 }
 
+const remove = (state = INITIAL_STATE, action) => {
+  return { ...state, data: state.data.filter(note => note.id !== action.id) }
+}
+
 /**
  * Criando os reducers
  * Ex.: [Types.ADD]: add == switch actions.type
@@ -27,4 +32,5 @@ const add = (state = INITIAL_STATE, action) => {
 
 export default createReducer(INITIAL_STATE, {
   [Types.ADD]: add,
+  [Types.REMOVE]: remove
 })

From bf9ea8a7924269d3fe56b33382d719a93d25d501 Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 12:48:04 -0300
Subject: [PATCH 04/11] Adicionando um style

---
 src/components/ComponentList/index.js   | 18 +++++++-----
 src/components/ComponentList/styles.css | 38 +++++++++++++++++++++++++
 src/components/ItemList/index.js        |  7 +++--
 src/components/ItemList/styles.css      |  0
 4 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ComponentList/styles.css
 create mode 100644 src/components/ItemList/styles.css

diff --git a/src/components/ComponentList/index.js b/src/components/ComponentList/index.js
index 3088da3..9b71016 100644
--- a/src/components/ComponentList/index.js
+++ b/src/components/ComponentList/index.js
@@ -5,6 +5,8 @@ import { Types } from '../../store/reducer/example-reducer';
 import Note from '../../models/Note';
 import ItemList from '../ItemList'
 
+import './styles.css'
+
 export default function ComponentList() {
 
   const qty = 20
@@ -23,13 +25,15 @@ export default function ComponentList() {
 
   return (
     <>
-      <textarea
-        cols={100}
-        rows={10}
-        value={text}
-        onChange={e => setText(e.target.value)}
-      />
-      <button type="button" onClick={add}>ADD</button>
+      <div className="content-add">
+        <textarea
+          cols={100}
+          rows={10}
+          value={text}
+          onChange={e => setText(e.target.value)}
+        />
+        <button type="button" onClick={add}>ADD</button>
+      </div>
       <ul>
         {list.map(item => <li key={item.id}><ItemList item={item} /> </li>)}
       </ul>
diff --git a/src/components/ComponentList/styles.css b/src/components/ComponentList/styles.css
new file mode 100644
index 0000000..46b5e24
--- /dev/null
+++ b/src/components/ComponentList/styles.css
@@ -0,0 +1,38 @@
+.content-add {
+  width: 100%;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content-add textarea {
+  padding: 10px;
+  font-size: 18px;
+}
+
+.content-add button {
+  padding: 10px;
+  margin: 10px;
+}
+
+ul {
+  width: 100%;
+  margin: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+ul li {
+  margin: 10px;
+  padding: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid #717180;
+  border-radius: 8px;
+}
\ No newline at end of file
diff --git a/src/components/ItemList/index.js b/src/components/ItemList/index.js
index 3ecea93..d9e3e7a 100644
--- a/src/components/ItemList/index.js
+++ b/src/components/ItemList/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { Types } from '../../store/reducer/example-reducer';
-// import { Container } from './styles';
+import './styles.css';
 
 export default function ItemList({ item }) {
 
@@ -14,8 +14,9 @@ export default function ItemList({ item }) {
 
   return (
     <span>
-      {item.text} - {item.createAt}
-      <button type="button" onClick={remove}>DELETE</button>
+      <div>{item.text}</div>
+      <small>{item.createAt}</small>
+      <button type="button" onClick={remove} className="trach">DEL</button>
     </span>
   );
 }
diff --git a/src/components/ItemList/styles.css b/src/components/ItemList/styles.css
new file mode 100644
index 0000000..e69de29

From ee804451c1536b3220c4203405c1fc180a2a3375 Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 13:54:45 -0300
Subject: [PATCH 05/11] Adicionando markdown e estilizando a listagem

---
 package.json                            |  2 ++
 src/components/ComponentList/index.js   | 20 ++++++++----
 src/components/ComponentList/styles.css | 29 ++++++++++++-----
 src/components/ItemList/index.js        | 14 ++++++---
 src/components/ItemList/styles.css      | 41 +++++++++++++++++++++++++
 yarn.lock                               | 10 ++++++
 6 files changed, 97 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 70b0398..be429ef 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "dompurify": "^2.0.8",
+    "marked": "^0.8.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.1.0-rc.1",
diff --git a/src/components/ComponentList/index.js b/src/components/ComponentList/index.js
index 9b71016..2f16bf4 100644
--- a/src/components/ComponentList/index.js
+++ b/src/components/ComponentList/index.js
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import marked from 'marked';
+import { sanitize } from 'dompurify'
 import { Types } from '../../store/reducer/example-reducer';
 
 import Note from '../../models/Note';
@@ -18,9 +20,12 @@ export default function ComponentList() {
   const dispatch = useDispatch();
 
   function add() {
-    let note = new Note(text)
-    dispatch({ type: Types.ADD, note })
-    setText('')
+    if (text.length > 0) {
+      let mdText = sanitize(marked.parse(text))
+      let note = new Note(mdText)
+      dispatch({ type: Types.ADD, note })
+      setText('')
+    }
   }
 
   return (
@@ -31,12 +36,15 @@ export default function ComponentList() {
           rows={10}
           value={text}
           onChange={e => setText(e.target.value)}
+          placeholder="Digite sua nota"
         />
         <button type="button" onClick={add}>ADD</button>
       </div>
-      <ul>
-        {list.map(item => <li key={item.id}><ItemList item={item} /> </li>)}
-      </ul>
+      <div className="content-list">
+        <ul>
+          {list.map(item => <li key={item.id}><ItemList item={item} /> </li>)}
+        </ul>
+      </div>
     </>
   );
 }
diff --git a/src/components/ComponentList/styles.css b/src/components/ComponentList/styles.css
index 46b5e24..dd86475 100644
--- a/src/components/ComponentList/styles.css
+++ b/src/components/ComponentList/styles.css
@@ -9,6 +9,8 @@
 .content-add textarea {
   padding: 10px;
   font-size: 18px;
+  border-radius: 3px;
+  border: 1px solid #ccc;
 }
 
 .content-add button {
@@ -16,23 +18,34 @@
   margin: 10px;
 }
 
-ul {
-  width: 100%;
-  margin: 30px;
+.content-list {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }
 
-ul li {
-  margin: 10px;
+ul {
+  width: 80%;
   padding: 30px;
-  height: 30px;
+}
+
+ul li {
+  margin: 20px;
+  padding: 20px;
+  min-height: 200px;
+  height: auto;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  list-style: none;
+  
+  -webkit-box-shadow: 0px 0px 7px 1px rgba(209,209,209,1);
+  -moz-box-shadow: 0px 0px 7px 1px rgba(209,209,209,1);
+  box-shadow: 0px 0px 7px 1px rgba(209,209,209,1);
+  
+  border-radius: 3px;
 
-  border: 1px solid #717180;
-  border-radius: 8px;
+  position: relative;
 }
\ No newline at end of file
diff --git a/src/components/ItemList/index.js b/src/components/ItemList/index.js
index d9e3e7a..cbeea77 100644
--- a/src/components/ItemList/index.js
+++ b/src/components/ItemList/index.js
@@ -13,10 +13,14 @@ export default function ItemList({ item }) {
   }
 
   return (
-    <span>
-      <div>{item.text}</div>
-      <small>{item.createAt}</small>
-      <button type="button" onClick={remove} className="trach">DEL</button>
-    </span>
+    <div className="content-wrapper">
+      <div className="head">
+        <button type="button" onClick={remove} className="trach">x</button>
+      </div>
+      <div className="content" dangerouslySetInnerHTML={{ __html: item.text }} />
+      <div className="footer">
+        <small>Criado em: {item.createAt}</small>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/ItemList/styles.css b/src/components/ItemList/styles.css
index e69de29..3f122c4 100644
--- a/src/components/ItemList/styles.css
+++ b/src/components/ItemList/styles.css
@@ -0,0 +1,41 @@
+span {
+  width: 100%;
+}
+.content {
+  padding-bottom: 30px;
+}
+
+.trach {
+  text-decoration: none;
+  border: none;
+  padding: 7px 10px;
+  
+  -webkit-box-shadow: -1px 3px 15px -2px rgba(209,209,209,1);
+  -moz-box-shadow: -1px 3px 15px -2px rgba(209,209,209,1);
+  box-shadow: -1px 3px 15px -2px rgba(209,209,209,1);
+
+  margin: 3px;
+  border-radius: 21px;
+  color: #e02041;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.content-wrapper {
+  width: 100%;
+}
+
+.head {
+  position: absolute;
+  top: -20px;
+  right: -20px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index ae82819..f568309 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3579,6 +3579,11 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
+dompurify@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.0.8.tgz#6ef89d2d227d041af139c7b01d9f67ed59c2eb3c"
+  integrity sha512-vIOSyOXkMx81ghEalh4MLBtDHMx1bhKlaqHDMqM2yeitJ996SLOk5mGdDpI9ifJAgokred8Rmu219fX4OltqXw==
+
 domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
@@ -6375,6 +6380,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
+  integrity sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"

From bcb19fb3e3209c9bbcfb1ce47a5cf6a11e61d562 Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 14:52:34 -0300
Subject: [PATCH 06/11] Adicionando Preview

---
 package.json                            |  1 +
 src/components/ComponentList/index.js   | 57 +++++++++++++++++++++----
 src/components/ComponentList/styles.css | 40 +++++++++++++++--
 src/components/ItemList/index.js        |  5 ++-
 yarn.lock                               |  7 +++
 5 files changed, 97 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index be429ef..6f01df5 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "marked": "^0.8.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-icons": "^3.9.0",
     "react-redux": "^7.1.0-rc.1",
     "react-scripts": "3.2.0",
     "redux": "^4.0.4",
diff --git a/src/components/ComponentList/index.js b/src/components/ComponentList/index.js
index 2f16bf4..fc20f5d 100644
--- a/src/components/ComponentList/index.js
+++ b/src/components/ComponentList/index.js
@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import marked from 'marked';
-import { sanitize } from 'dompurify'
+import { sanitize } from 'dompurify';
+import { MdDone, MdDvr, MdEdit } from 'react-icons/md';
+
 import { Types } from '../../store/reducer/example-reducer';
 
 import Note from '../../models/Note';
@@ -13,6 +15,7 @@ export default function ComponentList() {
 
   const qty = 20
   const [text, setText] = useState('')
+  const [previewText, setPreviewText] = useState('')
 
   const list = useSelector(
     state => state.exampleReducer.data.slice(0, qty)
@@ -25,20 +28,56 @@ export default function ComponentList() {
       let note = new Note(mdText)
       dispatch({ type: Types.ADD, note })
       setText('')
+      setPreviewText('')
+    }
+  }
+
+  function preview() {
+    if (previewText.length > 0) {
+      setPreviewText('')
+    } else {
+      setPreviewText(`${sanitize(marked.parse(text))}`)
+    }
+  }
+
+  function show() {
+    if (previewText.length > 0) {
+      return 'hide'
+    } else {
+      return ''
+    }
+  }
+
+  function hide() {
+    if (previewText.length > 0) {
+      return ''
+    } else {
+      return 'hide'
     }
   }
 
   return (
     <>
       <div className="content-add">
-        <textarea
-          cols={100}
-          rows={10}
-          value={text}
-          onChange={e => setText(e.target.value)}
-          placeholder="Digite sua nota"
-        />
-        <button type="button" onClick={add}>ADD</button>
+        <div className={show()}>
+          <textarea
+            autoFocus
+            cols={100}
+            rows={10}
+            value={text}
+            onChange={e => setText(e.target.value)}
+            placeholder="Digite sua nota"
+          />
+        </div>
+        <div className={`preview ${hide()}`} dangerouslySetInnerHTML={{ __html: previewText }} />
+        <div className="actions">
+          <button type="button" className="color-success" onClick={add}>
+            <MdDone width={24} />
+          </button>
+          <button type="button" onClick={preview}>
+            {hide() ? <MdDvr width={24} /> : <MdEdit width={24} />}
+          </button>
+        </div>
       </div>
       <div className="content-list">
         <ul>
diff --git a/src/components/ComponentList/styles.css b/src/components/ComponentList/styles.css
index dd86475..81d043f 100644
--- a/src/components/ComponentList/styles.css
+++ b/src/components/ComponentList/styles.css
@@ -1,8 +1,8 @@
 .content-add {
   width: 100%;
-  margin: 10px;
+  margin: 50px;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
 }
 
@@ -11,11 +11,45 @@
   font-size: 18px;
   border-radius: 3px;
   border: 1px solid #ccc;
+  resize: vertical;
+  overflow: auto;
 }
 
-.content-add button {
+.content-add .actions button {
   padding: 10px;
   margin: 10px;
+
+  border: none;
+  font-size: 24px;
+  color: #434343;
+
+  cursor: pointer;
+}
+
+.color-success {
+  color: #008002 !important;
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column-reverse;
+  height: 100%;
+}
+
+.preview {
+  border: 1px solid #cccccc;
+  min-height: 235px;
+  height: auto;
+  width: 65%;
+  margin-left: 0;
+  border-radius: 3px;
+  padding: 10px;
+}
+
+.hide {
+  display: none;
 }
 
 .content-list {
diff --git a/src/components/ItemList/index.js b/src/components/ItemList/index.js
index cbeea77..ad9f313 100644
--- a/src/components/ItemList/index.js
+++ b/src/components/ItemList/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { Types } from '../../store/reducer/example-reducer';
+import { MdDeleteForever } from 'react-icons/md';
 import './styles.css';
 
 export default function ItemList({ item }) {
@@ -15,7 +16,9 @@ export default function ItemList({ item }) {
   return (
     <div className="content-wrapper">
       <div className="head">
-        <button type="button" onClick={remove} className="trach">x</button>
+        <button type="button" onClick={remove} className="trach">
+          <MdDeleteForever width={16} />
+        </button>
       </div>
       <div className="content" dangerouslySetInnerHTML={{ __html: item.text }} />
       <div className="footer">
diff --git a/yarn.lock b/yarn.lock
index f568309..e27b65c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8407,6 +8407,13 @@ react-error-overlay@^6.0.3:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.3.tgz#c378c4b0a21e88b2e159a3e62b2f531fd63bf60d"
   integrity sha512-bOUvMWFQVk5oz8Ded9Xb7WVdEi3QGLC8tH7HmYP0Fdp4Bn3qw0tRFmr5TW6mvahzvmrK4a6bqWGfCevBflP+Xw==
 
+react-icons@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.9.0.tgz#89a00f20a0e02e6bfd899977eaf46eb4624239d5"
+  integrity sha512-gKbYKR+4QsD3PmIHLAM9TDDpnaTsr3XZeK1NTAb6WQQ+gxEdJ0xuCgLq0pxXdS7Utg2AIpcVhM1ut/jlDhcyNg==
+  dependencies:
+    camelcase "^5.0.0"
+
 react-is@^16.7.0, react-is@^16.8.6:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"

From fa28a236aa0b858603db02f897bac5e4373c95ef Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 15:03:49 -0300
Subject: [PATCH 07/11] Adicionando lista no local storage

---
 src/store/reducer/example-reducer.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/store/reducer/example-reducer.js b/src/store/reducer/example-reducer.js
index a2b8636..4ae4541 100644
--- a/src/store/reducer/example-reducer.js
+++ b/src/store/reducer/example-reducer.js
@@ -10,15 +10,21 @@ export const { Types, Creators } = createActions({
 })
 
 const INITIAL_STATE = {
-  data: []
+  data: JSON.parse(localStorage.getItem('list')) || []
 }
 
 const add = (state = INITIAL_STATE, action) => {
-  return { ...state, data: [...state.data, action.note] }
+  let newData = [...state.data, action.note]
+  localStorage.clear()
+  localStorage.setItem('list', JSON.stringify(newData))
+  return { ...state, data: newData }
 }
 
 const remove = (state = INITIAL_STATE, action) => {
-  return { ...state, data: state.data.filter(note => note.id !== action.id) }
+  let newData = state.data.filter(note => note.id !== action.id)
+  localStorage.clear()
+  localStorage.setItem('list', JSON.stringify(newData))
+  return { ...state, data: newData }
 }
 
 /**

From ddfc1280a918a2420741179f166cfab8f54bb1e1 Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 15:18:19 -0300
Subject: [PATCH 08/11] Alterando os componentes de visualizar e editar antes
 de salvar

---
 src/components/ComponentList/index.js   | 8 ++++----
 src/components/ComponentList/styles.css | 4 ++--
 src/styles/global.css                   | 5 +++++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/ComponentList/index.js b/src/components/ComponentList/index.js
index fc20f5d..d58e2ff 100644
--- a/src/components/ComponentList/index.js
+++ b/src/components/ComponentList/index.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import marked from 'marked';
 import { sanitize } from 'dompurify';
-import { MdDone, MdDvr, MdEdit } from 'react-icons/md';
+import { MdDone, MdVisibility, MdCode } from 'react-icons/md';
 
 import { Types } from '../../store/reducer/example-reducer';
 
@@ -75,13 +75,13 @@ export default function ComponentList() {
             <MdDone width={24} />
           </button>
           <button type="button" onClick={preview}>
-            {hide() ? <MdDvr width={24} /> : <MdEdit width={24} />}
+            {hide() ? <MdVisibility width={24} /> : <MdCode width={24} />}
           </button>
         </div>
       </div>
       <div className="content-list">
-        <ul>
-          {list.map(item => <li key={item.id}><ItemList item={item} /> </li>)}
+        <ul className="list">
+          {list.map(item => <li className="item" key={item.id}><ItemList item={item} /> </li>)}
         </ul>
       </div>
     </>
diff --git a/src/components/ComponentList/styles.css b/src/components/ComponentList/styles.css
index 81d043f..a572829 100644
--- a/src/components/ComponentList/styles.css
+++ b/src/components/ComponentList/styles.css
@@ -59,12 +59,12 @@
   flex-direction: column;
 }
 
-ul {
+.list {
   width: 80%;
   padding: 30px;
 }
 
-ul li {
+.list .item {
   margin: 20px;
   padding: 20px;
   min-height: 200px;
diff --git a/src/styles/global.css b/src/styles/global.css
index bd08c62..347f996 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -18,4 +18,9 @@ body {
 
 ul {
   list-style: none;
+}
+
+li, ol {
+  padding-left: 10px;
+  line-height: 24px;
 }
\ No newline at end of file

From 0f046cc931e14cc8ca66a1acd6e1d459156a0084 Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 15:45:12 -0300
Subject: [PATCH 09/11] Editando uma nota

---
 src/components/ComponentList/index.js   |  4 +-
 src/components/ComponentList/styles.css |  2 +-
 src/components/ItemList/index.js        | 51 ++++++++++++++++++++++---
 src/components/ItemList/styles.css      | 36 +++++++++++++++++
 src/store/reducer/example-reducer.js    | 18 ++++++++-
 5 files changed, 100 insertions(+), 11 deletions(-)

diff --git a/src/components/ComponentList/index.js b/src/components/ComponentList/index.js
index d58e2ff..512ce95 100644
--- a/src/components/ComponentList/index.js
+++ b/src/components/ComponentList/index.js
@@ -24,8 +24,7 @@ export default function ComponentList() {
 
   function add() {
     if (text.length > 0) {
-      let mdText = sanitize(marked.parse(text))
-      let note = new Note(mdText)
+      let note = new Note(text)
       dispatch({ type: Types.ADD, note })
       setText('')
       setPreviewText('')
@@ -67,6 +66,7 @@ export default function ComponentList() {
             value={text}
             onChange={e => setText(e.target.value)}
             placeholder="Digite sua nota"
+            className="textarea"
           />
         </div>
         <div className={`preview ${hide()}`} dangerouslySetInnerHTML={{ __html: previewText }} />
diff --git a/src/components/ComponentList/styles.css b/src/components/ComponentList/styles.css
index a572829..b2592e4 100644
--- a/src/components/ComponentList/styles.css
+++ b/src/components/ComponentList/styles.css
@@ -6,7 +6,7 @@
   justify-content: center;
 }
 
-.content-add textarea {
+.textarea {
   padding: 10px;
   font-size: 18px;
   border-radius: 3px;
diff --git a/src/components/ItemList/index.js b/src/components/ItemList/index.js
index ad9f313..beb1e02 100644
--- a/src/components/ItemList/index.js
+++ b/src/components/ItemList/index.js
@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Types } from '../../store/reducer/example-reducer';
-import { MdDeleteForever } from 'react-icons/md';
+import { MdDeleteForever, MdEdit, MdDone } from 'react-icons/md';
+import { parse } from 'marked';
+import { sanitize } from 'dompurify'
 import './styles.css';
 
 export default function ItemList({ item }) {
 
+  const [newText, setNewText] = useState(item.text)
+  const [optionEdit, setOptionEdit] = useState(false)
   const dispatch = useDispatch();
 
   function remove() {
@@ -13,17 +17,52 @@ export default function ItemList({ item }) {
     dispatch({ type: Types.REMOVE, id })
   }
 
+  function edit() {
+    setOptionEdit(!optionEdit)
+  }
+
+  function save() {
+    setOptionEdit(!optionEdit)
+    let id = item.id
+    dispatch({ type: Types.EDIT, data: { id, newText } })
+  }
+
   return (
     <div className="content-wrapper">
       <div className="head">
         <button type="button" onClick={remove} className="trach">
           <MdDeleteForever width={16} />
         </button>
+        {!optionEdit &&
+          <button type="button" onClick={edit} className="edit">
+            <MdEdit width={16} />
+          </button>
+        }
+        {optionEdit &&
+          <button type="button" onClick={save} className="save">
+            <MdDone width={16} />
+          </button>
+        }
       </div>
-      <div className="content" dangerouslySetInnerHTML={{ __html: item.text }} />
-      <div className="footer">
-        <small>Criado em: {item.createAt}</small>
-      </div>
+      {!optionEdit &&
+        (<span>
+          <div className="content" dangerouslySetInnerHTML={{ __html: sanitize(parse(item.text)) }} />
+          <div className="footer">
+            <small>Criado em: {item.createAt}</small>
+          </div>
+        </span>
+        )
+      }
+      {optionEdit &&
+        <textarea
+          cols={100}
+          rows={10}
+          value={newText}
+          onChange={e => setNewText(e.target.value)}
+          placeholder="Digite sua nota"
+          className="textarea"
+        />
+      }
     </div>
   );
 }
diff --git a/src/components/ItemList/styles.css b/src/components/ItemList/styles.css
index 3f122c4..8176ca3 100644
--- a/src/components/ItemList/styles.css
+++ b/src/components/ItemList/styles.css
@@ -23,6 +23,42 @@ span {
   font-weight: bold;
 }
 
+.edit {
+  text-decoration: none;
+  border: none;
+  padding: 7px 10px;
+  
+  -webkit-box-shadow: -1px 3px 15px -2px rgba(209,209,209,1);
+  -moz-box-shadow: -1px 3px 15px -2px rgba(209,209,209,1);
+  box-shadow: -1px 3px 15px -2px rgba(209,209,209,1);
+
+  margin: 3px;
+  border-radius: 21px;
+  color: #434343;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.save {
+  text-decoration: none;
+  border: none;
+  padding: 7px 10px;
+  
+  -webkit-box-shadow: -1px 3px 15px -2px rgba(209,209,209,1);
+  -moz-box-shadow: -1px 3px 15px -2px rgba(209,209,209,1);
+  box-shadow: -1px 3px 15px -2px rgba(209,209,209,1);
+
+  margin: 3px;
+  border-radius: 21px;
+  color: #008002;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: bold;
+}
+
 .content-wrapper {
   width: 100%;
 }
diff --git a/src/store/reducer/example-reducer.js b/src/store/reducer/example-reducer.js
index 4ae4541..5ed8273 100644
--- a/src/store/reducer/example-reducer.js
+++ b/src/store/reducer/example-reducer.js
@@ -6,7 +6,8 @@ import { createActions, createReducer } from 'reduxsauce';
  */
 export const { Types, Creators } = createActions({
   add: ["note"],
-  remove: ["id"]
+  remove: ["id"],
+  edit: ["data"]
 })
 
 const INITIAL_STATE = {
@@ -27,6 +28,18 @@ const remove = (state = INITIAL_STATE, action) => {
   return { ...state, data: newData }
 }
 
+const edit = (state = INITIAL_STATE, action) => {
+  let newData = state.data.map(note => {
+    if (action.data.id === note.id) {
+      note.text = action.data.newText
+    }
+    return note
+  })
+  localStorage.clear()
+  localStorage.setItem('list', JSON.stringify(newData))
+  return { ...state, data: newData }
+}
+
 /**
  * Criando os reducers
  * Ex.: [Types.ADD]: add == switch actions.type
@@ -38,5 +51,6 @@ const remove = (state = INITIAL_STATE, action) => {
 
 export default createReducer(INITIAL_STATE, {
   [Types.ADD]: add,
-  [Types.REMOVE]: remove
+  [Types.REMOVE]: remove,
+  [Types.EDIT]: edit
 })

From da0442ebd6eedb93c8645c82c03ab09761d48087 Mon Sep 17 00:00:00 2001
From: Catharina Mesquita <catha.ana.1994@gmail.com>
Date: Sat, 4 Apr 2020 18:07:40 -0300
Subject: [PATCH 10/11] Adicioando navbar

---
 public/index.html                       | 12 ++++-----
 src/App.js                              |  8 +++---
 src/components/ComponentList/styles.css |  2 +-
 src/components/Header/index.js          | 20 +++++++++++++++
 src/components/Header/styles.css        | 34 +++++++++++++++++++++++++
 src/pages/Main/index.js                 | 14 ++++++++++
 6 files changed, 79 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Header/index.js
 create mode 100644 src/components/Header/styles.css
 create mode 100644 src/pages/Main/index.js

diff --git a/public/index.html b/public/index.html
index c240d2c..de32371 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,14 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,8 +22,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Notes App</title>
   </head>
+
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
@@ -40,4 +39,5 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 631f8b5..1b8a3f6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 
-import './styles/global.css'
+import './styles/global.css';
 
-import store from './store'
-import ComponentList from './components/ComponentList';
+import store from './store';
+import Main from './pages/Main';
 
 function App() {
   return (
     <Provider store={store}>
-      <ComponentList />
+      <Main />
     </Provider>
   );
 }
diff --git a/src/components/ComponentList/styles.css b/src/components/ComponentList/styles.css
index b2592e4..4b43382 100644
--- a/src/components/ComponentList/styles.css
+++ b/src/components/ComponentList/styles.css
@@ -10,7 +10,7 @@
   padding: 10px;
   font-size: 18px;
   border-radius: 3px;
-  border: 1px solid #ccc;
+  border: 1px solid #20336be6;
   resize: vertical;
   overflow: auto;
 }
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
new file mode 100644
index 0000000..ff3fbbd
--- /dev/null
+++ b/src/components/Header/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { GiBookmark } from 'react-icons/gi';
+import { GoMarkGithub } from 'react-icons/go';
+
+import './styles.css';
+
+export default function Header() {
+  return (
+    <div className="nav-bar">
+      <div className="title-with-logo">
+        < GiBookmark size={32} />
+        <div className="title">
+          <h2>Notes App</h2>
+          <small>Desevolvido por Catharina Mesquita</small>
+        </div>
+      </div>
+      <a href="https://github.com/acmesquita/notes-app"><GoMarkGithub size={18} /> Acesso ao repositório</a>
+    </div>
+  );
+}
diff --git a/src/components/Header/styles.css b/src/components/Header/styles.css
new file mode 100644
index 0000000..6ca90fa
--- /dev/null
+++ b/src/components/Header/styles.css
@@ -0,0 +1,34 @@
+.nav-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+
+  border-bottom: 1px solid #e3e3e3;
+  background-color: #20336be6;
+  
+  font-family: sans-serif;
+  color: #f3f3f3;
+}
+
+.title-with-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  padding-left: 10px;
+}
+
+a {
+  color: #f3f3f3;
+  text-decoration: none;
+  vertical-align: middle;
+  display: flex;
+  align-items: center;
+}
+
+a svg{
+  margin-right: 5px;
+}
\ No newline at end of file
diff --git a/src/pages/Main/index.js b/src/pages/Main/index.js
new file mode 100644
index 0000000..f226879
--- /dev/null
+++ b/src/pages/Main/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import ComponentList from '../../components/ComponentList';
+import Header from '../../components/Header';
+
+// import { Container } from './styles';
+
+export default function Main() {
+  return (
+    <>
+      <Header />
+      <ComponentList />
+    </>
+  );
+}

From 370eba099c924340ee5a02cc94ffdcd12d5ab2da Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 12 Apr 2020 19:41:32 +0000
Subject: [PATCH 11/11] Bump acorn from 5.7.3 to 5.7.4

Bumps [acorn](https://github.com/acornjs/acorn) from 5.7.3 to 5.7.4.
- [Release notes](https://github.com/acornjs/acorn/releases)
- [Commits](https://github.com/acornjs/acorn/compare/5.7.3...5.7.4)

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e27b65c..d9638d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1759,9 +1759,9 @@ acorn-walk@^6.0.1:
   integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
 acorn@^5.5.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
-  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
 
 acorn@^6.0.1, acorn@^6.0.4, acorn@^6.0.7, acorn@^6.2.1:
   version "6.3.0"