Adicionando markdown e estilizando a listagem

Author: acmesquita

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

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

src/components/ComponentList/styles.css

@@ -9,30 +9,43 @@
 .content-add textarea {
   padding: 10px;
   font-size: 18px;
+  border-radius: 3px;
+  border: 1px solid #ccc;
 }
 
 .content-add button {
   padding: 10px;
   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;
 }

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

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

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"