Editando uma nota

Author: acmesquita

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 }} />

src/components/ComponentList/styles.css

@@ -6,7 +6,7 @@
   justify-content: center;
 }
 
-.content-add textarea {
+.textarea {
   padding: 10px;
   font-size: 18px;
   border-radius: 3px;

src/components/ItemList/index.js

@@ -1,29 +1,68 @@
-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() {
     let id = item.id
     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>
   );
 }

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%;
 }

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
 })