acmesquita · dependabot · Apr 4, 2020 · Apr 4, 2020 · Apr 4, 2020 · Apr 4, 2020
diff --git a/package.json b/package.json
@@ -1,10 +1,13 @@
 {
-  "name": "templete-redux",
+  "name": "notes-app",
   "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-icons": "^3.9.0",
     "react-redux": "^7.1.0-rc.1",
     "react-scripts": "3.2.0",
     "redux": "^4.0.4",

diff --git 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>
diff --git 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/index.js b/src/components/ComponentList/index.js
@@ -1,26 +1,89 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import marked from 'marked';
+import { sanitize } from 'dompurify';
+import { MdDone, MdVisibility, MdCode } from 'react-icons/md';
+
 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
+  const [text, setText] = useState('')
+  const [previewText, setPreviewText] = 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() {
+    if (text.length > 0) {
+      let note = new Note(text)
+      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 (
     <>
-      <ul>
-        {list.map( item => <li key={item}>{item}</li>)}
-      </ul>
-      <button type="button" onClick={add}>ADD</button>
+      <div className="content-add">
+        <div className={show()}>
+          <textarea
+            autoFocus
+            cols={100}
+            rows={10}
+            value={text}
+            onChange={e => setText(e.target.value)}
+            placeholder="Digite sua nota"
+            className="textarea"
+          />
+        </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() ? <MdVisibility width={24} /> : <MdCode width={24} />}
+          </button>
+        </div>
+      </div>
+      <div className="content-list">
+        <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
@@ -0,0 +1,85 @@
+.content-add {
+  width: 100%;
+  margin: 50px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.textarea {
+  padding: 10px;
+  font-size: 18px;
+  border-radius: 3px;
+  border: 1px solid #20336be6;
+  resize: vertical;
+  overflow: auto;
+}
+
+.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 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.list {
+  width: 80%;
+  padding: 30px;
+}
+
+.list .item {
+  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;
+
+  position: relative;
+}
diff --git a/src/components/Header/index.js 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
@@ -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;
+}
diff --git a/src/components/ItemList/index.js b/src/components/ItemList/index.js
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Types } from '../../store/reducer/example-reducer';
+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>
+      {!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>
+  );
+}