diff --git a/package.json b/package.json index 27e33f4..6f01df5 100644 --- 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 index c240d2c..de32371 100644 --- a/public/index.html +++ b/public/index.html @@ -1,14 +1,12 @@ + - + - React App + Notes App +
@@ -40,4 +39,5 @@ To create a production bundle, use `npm run build` or `yarn build`. --> - + + \ 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 ( - +
); } diff --git a/src/components/ComponentList/index.js b/src/components/ComponentList/index.js index c3e6885..512ce95 100644 --- 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 ( <> -
    - {list.map( item =>
  • {item}
    • )} -
- +
+
+