Adicionando Preview

Author: acmesquita

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",

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>

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 {

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">

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"