├── .gitignore
├── Notes.PNG
├── README.md
├── db.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── slide images
    ├── 0- Front_Back work flow.jpg
    ├── 1 - Twitter 1.png
    ├── 10 - State.PNG
    ├── 11 - CBC vs FBC.jpg
    ├── 12 - Life Cyce Methods.jpg
    ├── 2 -Twitter 2.png
    ├── 3 - Twitter 3.png
    ├── 4 - A component.PNG
    ├── 5 - React Nested.PNG
    ├── 6 - react FBC.PNG
    ├── 7 - MPA.png
    ├── 8 - SPA.png
    └── 9 - Root component.jpg
└── src
    ├── App.css
    ├── App.js
    ├── assets
        ├── add.svg
        ├── arrow-left.svg
        ├── data.js
        └── db.json
    ├── components
        ├── AddButton.js
        ├── Header.js
        └── ListItem.js
    ├── index.js
    └── pages
        ├── Note.js
        └── Notes.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/Notes.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/Notes.PNG


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## Cloning and starting application
 3 | 1. - git clone https://github.com/divanov11/notes-app
 4 | 1. - cd notes-app
 5 | 2. - npm install
 6 | 3. - npm run server //STARTS JSON SERVER ON PORT 5000
 7 | 4. - npm start  //STARTS REACT SERVER
 8 | 
 9 | 
10 | # Notes List
11 | <img src="./Notes.PNG">  
12 | 
13 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "notes": [
 3 |     {
 4 |       "id": 1,
 5 |       "body": "Todays Agenda\n- Chamber of commerce meeting\n- Standup meeting\n- Dinner",
 6 |       "updated": "2021-08-31T16:18:41.809Z"
 7 |     },
 8 |     {
 9 |       "id": 2,
10 |       "body": "Take out trash\n",
11 |       "updated": "2021-08-30T21:34:55.203Z"
12 |     },
13 |     {
14 |       "id": 3,
15 |       "body": "Wash car",
16 |       "updated": "2021-07-13T19:46:12.187306Z"
17 |     }
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.14.1",
 7 |     "@testing-library/react": "^11.2.7",
 8 |     "@testing-library/user-event": "^12.8.3",
 9 |     "react": "^17.0.2",
10 |     "react-dom": "^17.0.2",
11 |     "react-router-dom": "^5.2.1",
12 |     "react-scripts": "4.0.3",
13 |     "web-vitals": "^1.1.2"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject",
20 |     "server": "json-server --watch db.json --port 5000"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": [
24 |       "react-app",
25 |       "react-app/jest"
26 |     ]
27 |   },
28 |   "browserslist": {
29 |     "production": [
30 |       ">0.2%",
31 |       "not dead",
32 |       "not op_mini all"
33 |     ],
34 |     "development": [
35 |       "last 1 chrome version",
36 |       "last 1 firefox version",
37 |       "last 1 safari version"
38 |     ]
39 |   }
40 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <meta name="theme-color" content="#000000" />
 9 |   <meta name="description" content="Web site created using create-react-app" />
10 |   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11 |   <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |   <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |   <title>React App</title>
26 | </head>
27 | 
28 | <body>
29 |   <noscript>You need to enable JavaScript to run this app.</noscript>
30 |   <div id="root"></div>
31 | 
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/slide images/0- Front_Back work flow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/0- Front_Back work flow.jpg


--------------------------------------------------------------------------------
/slide images/1 - Twitter 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/1 - Twitter 1.png


--------------------------------------------------------------------------------
/slide images/10 - State.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/10 - State.PNG


--------------------------------------------------------------------------------
/slide images/11 - CBC vs FBC.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/11 - CBC vs FBC.jpg


--------------------------------------------------------------------------------
/slide images/12 - Life Cyce Methods.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/12 - Life Cyce Methods.jpg


--------------------------------------------------------------------------------
/slide images/2 -Twitter 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/2 -Twitter 2.png


--------------------------------------------------------------------------------
/slide images/3 - Twitter 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/3 - Twitter 3.png


--------------------------------------------------------------------------------
/slide images/4 - A component.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/4 - A component.PNG


--------------------------------------------------------------------------------
/slide images/5 - React Nested.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/5 - React Nested.PNG


--------------------------------------------------------------------------------
/slide images/6 - react FBC.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/6 - react FBC.PNG


--------------------------------------------------------------------------------
/slide images/7 - MPA.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/7 - MPA.png


--------------------------------------------------------------------------------
/slide images/8 - SPA.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/8 - SPA.png


--------------------------------------------------------------------------------
/slide images/9 - Root component.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/notes-app/ef248643173ee21ee95adf567ef56895a8c03e5f/slide images/9 - Root component.jpg


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600;700&display=swap');
  2 | 
  3 | 
  4 | 
  5 | :root {
  6 |   --color-main: #f68657;
  7 |   --color-text: #383a3f;
  8 |   --color-dark: #1f2124;
  9 |   --color-gray: #677;
 10 |   --color-bg: #f3f6f9;
 11 |   --color-light: #acb4bd;
 12 |   --color-lighter: #f9f9f9;
 13 |   --color-white: #fff;
 14 |   --color-border:#e0e3e6;
 15 | }
 16 | 
 17 | .dark {
 18 |   --color-main: #f68657;
 19 |   --color-text: #d6d1d1;
 20 |   --color-dark: #f5f6f7;
 21 |   --color-gray: #999;
 22 |   --color-bg: #1f2124;
 23 |   --color-lighter: #292a2c;
 24 |   --color-white: #2e3235;
 25 |   --color-border:#252629;
 26 | }
 27 | 
 28 | /* BASE STYLES */
 29 | 
 30 | 
 31 | *{
 32 |   margin: 0;
 33 |   padding: 0;
 34 |   box-sizing: border-box;
 35 |   font-family: 'Lexend', sans-serif;
 36 |   color: inherit;
 37 |   font-size: inherit;
 38 |   scroll-behavior: smooth;
 39 | }
 40 | 
 41 | 
 42 | body{
 43 |   line-height: 1.8em;
 44 |   font-weight: 400;
 45 |   font-size: 16px;
 46 | }
 47 | 
 48 | a {
 49 |   text-decoration: none;
 50 | }
 51 | 
 52 | /* APP STYLES */
 53 | 
 54 | 
 55 | .container {
 56 |   width: 100%;
 57 |   height: 100vh;
 58 |   color: var(--color-text);
 59 |   background-color: var(--color-bg);
 60 |   display: flex;
 61 |   align-items: center;
 62 | }
 63 | 
 64 | 
 65 | .app {
 66 |   width: 100%;
 67 |   max-width: 480px;
 68 |   height: 88vh;
 69 |   margin: 0 auto;
 70 |   background-color: var(--color-white);
 71 |   box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
 72 |   position: relative;
 73 | }
 74 | 
 75 | 
 76 | .app-header {
 77 |   display: flex;
 78 |   align-items: center;
 79 |   padding: 16px;
 80 |   justify-content: space-between;
 81 |   background-color: var(--color-lighter);
 82 |   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 83 | }
 84 | 
 85 | .app-header h1 {
 86 |   font-size: 30px;
 87 |   color: var(--color-dark);
 88 |   font-weight: 800;
 89 |   text-align: center;
 90 | }
 91 | 
 92 | .app-header button {
 93 |   border: 0;
 94 |   background: transparent;
 95 |   cursor: pointer;
 96 | }
 97 | 
 98 | .app-header button > svg {
 99 |   fill: var(--color-dark);
100 |   height: 25px;
101 |   width: 25px;
102 |   object-fit: cover;
103 | }
104 | 
105 | .app-body {
106 |   padding: 16px;
107 | }
108 | 
109 | 
110 | /* NOTES STYLES */
111 | 
112 | .notes-header {
113 |   display: flex;
114 |   align-items: center;
115 |   justify-content: space-between;
116 |   padding: 10px 16px;
117 | }
118 | 
119 | .notes-title,
120 | .notes-count {
121 |   color: var(--color-main);
122 |   font-size: 24px;
123 |   font-weight: 600;
124 | }
125 | 
126 | .notes-count {
127 |   font-size: 18px;
128 |   color: var(--color-gray);
129 | }
130 | 
131 | 
132 | .notes-list {
133 |   padding: 0;
134 |   margin: 16px 0;
135 |   height: 70vh;
136 |   overflow-y: auto;
137 |   scrollbar-width: none; /* Firefox */
138 | }
139 | 
140 | .notes-list::-webkit-scrollbar {
141 |   display: none;
142 | }
143 | 
144 | .notes-list-item {
145 |   border-bottom: 1px solid  var(--color-border);
146 |   margin-bottom: 12px;
147 |   padding: 8px 16px;
148 |   transition: all 0.2s ease-in-out;
149 | }
150 | 
151 | .notes-list-item:hover {
152 |   background-color: var(--color-bg);
153 |   cursor: pointer;
154 | }
155 | 
156 | .notes-list-item h3,
157 | .notes-list-item p span {
158 |   font-weight: 600;
159 | }
160 | 
161 | 
162 | .notes-list-item p span {
163 |   color: var(--color-gray);
164 |   display: inline-block;
165 |   margin-right: 8px;
166 | }
167 | 
168 | .notes-list-item p {
169 |   font-size: 14px;
170 |   color: var(--color-light);
171 | }
172 | 
173 | .floating-button {
174 |   font-size: 48px;
175 |   position: absolute;
176 |   bottom: 24px;
177 |   right: 16px;
178 |   background: var(--color-main);
179 |   border: none;
180 |   width: 60px;
181 |   height: 60px;
182 |   border-radius: 50%;
183 |   display: flex;
184 |   align-items: center;
185 |   justify-content: center;
186 |   cursor: pointer;
187 |   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
188 | }
189 | 
190 | 
191 | .floating-button > svg {
192 |   fill: var(--color-bg);
193 | }
194 | 
195 | 
196 | 
197 | /*==============================
198 | =>  Note Styles
199 | ================================*/
200 | 
201 | .note-header {
202 |   display: flex;
203 |   align-items: center;
204 |   justify-content: space-between;
205 |   color: var(--color-main);
206 |   padding: 10px;
207 | }
208 | 
209 | .note-header h3 {
210 |   display: flex;
211 |   align-items: center;
212 |   font-size: 24px;
213 |   cursor: pointer;
214 | }
215 | 
216 | .note-header h3 svg {
217 |   fill: var(--color-main);
218 |   width: 20px;
219 |   margin-right: 8px;
220 | }
221 | 
222 | .note-header button {
223 |   border: none;
224 |   outline: none;
225 |   font-weight: 600;
226 |   background-color: transparent;
227 |   font-size: 18px;
228 |   cursor: pointer;
229 | }
230 | 
231 | .note textarea {
232 |   background-color: var(--color-white);
233 |   border: none;
234 |   padding: 16px 12px;
235 |   width: 100%;
236 |   height: 70vh;
237 |   resize: none;
238 |   scrollbar-width: none; /* Firefox */
239 | }
240 | 
241 | .note textarea:active,
242 | .note textarea:focus {
243 |   outline: none;
244 |   border: none;
245 | }
246 | 
247 | .note textarea::-webkit-scrollbar {
248 |   display: none;
249 | }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   BrowserRouter as Router,
 3 |   Switch,
 4 |   Route,
 5 |   Link
 6 | } from "react-router-dom";
 7 | 
 8 | import './App.css';
 9 | import Header from './components/Header'
10 | import Notes from './pages/Notes'
11 | import Note from './pages/Note'
12 | 
13 | function App() {
14 | 
15 |   return (
16 |     <Router>
17 |       <div className="container dark">
18 |         <div className="app">
19 |           <Header />
20 |           <Route path="/" exact component={Notes} />
21 |           <Route path="/note/:id" component={Note} />
22 |         </div>
23 |       </div>
24 |     </Router>
25 |   );
26 | }
27 | 
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/src/assets/add.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
2 | <title>add</title>
3 | <path d="M16.943 0.943h-1.885v14.115h-14.115v1.885h14.115v14.115h1.885v-14.115h14.115v-1.885h-14.115v-14.115z"></path>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/assets/arrow-left.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
2 | <title>chevron-left</title>
3 | <path d="M11 16l13-13v-3l-16 16 16 16v-3l-13-13z"></path>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/assets/data.js:
--------------------------------------------------------------------------------
 1 | let notes = [
 2 |     {
 3 |         "id": 1,
 4 |         "body": "Todays Agenda\n\n- Walk Dog\n- Feed fish\n- Play basketball\n- Eat a salad",
 5 |         "updated": "2021-07-14T13:49:02.078653Z",
 6 |         "created": "2021-07-13T21:54:16.235392Z"
 7 |     },
 8 |     {
 9 |         "id": 2,
10 |         "body": "Bob from bar down the \n\n- Take out trash\n- Eat food",
11 |         "updated": "2021-07-13T20:43:18.550058Z",
12 |         "created": "2021-07-13T00:17:13.289897Z"
13 |     },
14 |     {
15 |         "id": 3,
16 |         "body": "Wash car",
17 |         "updated": "2021-07-13T19:46:12.187306Z",
18 |         "created": "2021-07-13T00:16:22.399841Z"
19 |     }
20 | ]
21 | 
22 | 
23 | export default notes;


--------------------------------------------------------------------------------
/src/assets/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "notes": [
 3 |     {
 4 |       "body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to\n\n make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum",
 5 |       "updated": "2021-08-30T20:33:47.404Z",
 6 |       "id": 2
 7 |     },
 8 |     {
 9 |       "body": "Why do we use it?\n\nIt is a long established fact that a reader will be distracted by the readable \n\ncontent of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of\n\n letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web pa",
10 |       "updated": "2021-08-30T20:33:46.119Z",
11 |       "id": 3
12 |     }
13 |   ]
14 | }


--------------------------------------------------------------------------------
/src/components/AddButton.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from 'react-router-dom'
 3 | import { ReactComponent as AddIcon } from '../assets/add.svg'
 4 | 
 5 | const AddButton = () => {
 6 |     return (
 7 |         <Link to="/note/new/" className="floating-button">
 8 |             <AddIcon />
 9 |         </Link>
10 |     )
11 | }
12 | 
13 | export default AddButton
14 | 


--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | const Header = () => {
 4 |     return (
 5 |         <div className="app-header">
 6 |             <h1>Note List</h1>
 7 |         </div>
 8 |     )
 9 | }
10 | 
11 | export default Header;


--------------------------------------------------------------------------------
/src/components/ListItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from 'react-router-dom'
 3 | 
 4 | 
 5 | let getTime = (note) => {
 6 |     return new Date(note.updated).toLocaleDateString()
 7 | }
 8 | 
 9 | 
10 | let getTitle = (note) => {
11 |     //spit by new lines and just get the first line
12 |     //split will make a list of each line and will only pull on the first line by index zero
13 |     const title = note.body.split('\n')[0]
14 |     if (title.length > 45) {
15 |         return title.slice(0, 45)
16 |     }
17 |     return title
18 | }
19 | 
20 | 
21 | let getContent = (note) => {
22 |     //Get content after title
23 |     let title = getTitle(note)
24 |     let content = note.body.replaceAll('\n', '')
25 |     content = content.replaceAll(title, '')
26 | 
27 |     //Slice content and add three dots in over 45 characters to show there is more
28 |     if (content.length > 45) {
29 |         return content.slice(0, 45) + '...'
30 |     } else {
31 |         return content
32 |     }
33 | 
34 | }
35 | 
36 | 
37 | const ListItem = ({ note }) => {
38 |     return (
39 |         <Link to={`/note/${note.id}`}>
40 |             <div className="notes-list-item">
41 |                 <h3>{getTitle(note)}</h3>
42 |                 <p><span>{getTime(note)}</span>{getContent(note)}</p>
43 |             </div>
44 |         </Link>
45 |     )
46 | }
47 | 
48 | export default ListItem
49 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>,
 9 |   document.getElementById('root')
10 | );
11 | 
12 | //TESTING CONTINUOUS DEPLPOYMENT ON NETLIFY
13 | 


--------------------------------------------------------------------------------
/src/pages/Note.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | //import notes from '../assets/data'
 3 | import { ReactComponent as ArrowLeft } from '../assets/arrow-left.svg'
 4 | import { Link } from 'react-router-dom'
 5 | 
 6 | 
 7 | const Note = ({ match, history }) => {
 8 |     let noteId = match.params.id
 9 | 
10 |     let [note, setNote] = useState(null)
11 | 
12 |     //let note = notes.find(note => note.id == noteId)
13 | 
14 |     useEffect(() => {
15 | 
16 |         getNote()
17 |     }, [noteId])
18 | 
19 |     let getNote = async () => {
20 |         if (noteId == 'new') return
21 |         let response = await fetch(`http://127.0.0.1:5000/notes/${noteId}`)
22 |         let data = await response.json()
23 |         setNote(data)
24 |     }
25 | 
26 |     const createNote = async () => {
27 | 
28 | 
29 |         await fetch(`http://127.0.0.1:5000/notes/`, {
30 |             method: 'POST',
31 |             headers: {
32 |                 'Content-Type': 'application/json'
33 |             },
34 |             body: JSON.stringify({ ...note, 'updated': new Date() })
35 |         })
36 |     }
37 | 
38 | 
39 |     const updateNote = async () => {
40 |         await fetch(`http://127.0.0.1:5000/notes/${noteId}/`, {
41 |             method: 'PUT',
42 |             headers: {
43 |                 'Content-Type': 'application/json'
44 |             },
45 |             body: JSON.stringify({ ...note, 'updated': new Date() })
46 |         })
47 |     }
48 | 
49 |     const deleteNote = async () => {
50 |         await fetch(`http://127.0.0.1:5000/notes/${noteId}/`, {
51 |             method: 'DELETE',
52 |             headers: {
53 |                 'Content-Type': 'application/json'
54 |             },
55 |             body: JSON.stringify(note)
56 |         })
57 |         history.push('/')
58 |     }
59 | 
60 |     let handleSubmit = () => {
61 |         if (noteId != "new" && !note.body) {
62 |             deleteNote()
63 |         } else if (noteId != "new") {
64 |             updateNote()
65 |         } else if (noteId === 'new' && note !== null) {
66 |             createNote()
67 |         }
68 | 
69 |         history.push('/')
70 |     }
71 | 
72 | 
73 |     return (
74 |         <div className="note">
75 |             <div className="note-header">
76 |                 <h3>
77 |                     <Link to={'/'}>
78 |                         <ArrowLeft onClick={handleSubmit} />
79 |                     </Link>
80 |                 </h3>
81 |                 {noteId != 'new' ? (
82 |                     <button onClick={deleteNote}>Delete</button>
83 |                 ) : (
84 |                     <button onClick={handleSubmit}>Done</button>
85 |                 )}
86 | 
87 |             </div>
88 |             <textarea onChange={(e) => { setNote({ ...note, 'body': e.target.value }) }} placeholder="Edit note" value={note?.body}></textarea>
89 |         </div >
90 |     )
91 | }
92 | 
93 | export default Note
94 | 


--------------------------------------------------------------------------------
/src/pages/Notes.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react'
 2 | //import notes from '../assets/data'
 3 | import ListItem from '../components/ListItem'
 4 | import AddButton from '../components/AddButton'
 5 | 
 6 | 
 7 | 
 8 | 
 9 | const Notes = () => {
10 | 
11 |     let [notes, setNotes] = useState([])
12 | 
13 |     useEffect(() => {
14 |         getNotes()
15 | 
16 |     }, [])
17 | 
18 | 
19 |     let getNotes = async () => {
20 |         let response = await fetch('http://127.0.0.1:5000/notes/')
21 |         let data = await response.json()
22 |         setNotes(data)
23 |     }
24 | 
25 |     return (
26 |         <div className="notes">
27 |             <div className="notes-header">
28 |                 <h2 className="notes-title">&#9782; Notes</h2>
29 |                 <p className="notes-count">{notes.length}</p>
30 |             </div>
31 | 
32 |             <div className="notes-list">
33 |                 {notes.map((note, index) => (
34 |                     <ListItem key={index} note={note} />
35 |                 ))}
36 |             </div>
37 | 
38 |             <AddButton />
39 |         </div >
40 |     )
41 | }
42 | 
43 | export default Notes
44 | 


--------------------------------------------------------------------------------