├── .gitignore
├── .prettierrc
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── 404.html
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.css
    ├── App.test.js
    ├── AppOriginal.css
    ├── components
        ├── Another.jsx
        ├── App.jsx
        ├── AppClass.jsx
        ├── AppOriginal.jsx
        ├── NavigationBar.jsx
        ├── NoTodos.jsx
        ├── Root.jsx
        ├── TodoClearCompleted.jsx
        ├── TodoCompleteAllTodos.jsx
        ├── TodoFilters.jsx
        ├── TodoForm.jsx
        ├── TodoItemsRemaining.jsx
        ├── TodoList.jsx
        ├── api
        │   ├── Joke.jsx
        │   ├── Reddit.jsx
        │   └── useFetch.js
        ├── github-markdown.css
        └── pages
        │   ├── Comments.jsx
        │   ├── Details.jsx
        │   ├── IconClosed.jsx
        │   ├── IconOpen.jsx
        │   ├── Issues.jsx
        │   ├── NoMatch.jsx
        │   └── api.jsx
    ├── context
        └── TodosContext.js
    ├── hooks
        ├── useLocalStorage.js
        └── useToggle.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    ├── reset.css
    └── setupTests.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 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "arrowParens": "avoid"
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Todo App
 2 | 
 3 | 
 4 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 5 | 
 6 | ## Getting Started
 7 |  [Live Demo](https://ismaildasci.github.io/react-todo/)
 8 | 
 9 | 
10 | ### Installation
11 | Follow the steps below to run this project on your local machine.
12 | 
13 | Prerequisites
14 | 
15 | Node.js and NPM (comes with Node.js)
16 | 
17 | 1. Clone the Repository
18 | 
19 | Clone the repository to your local machine:
20 |    ```sh
21 |  git clone https://github.com/ismaildasci/react-todo.git
22 |  cd react-todo
23 | 
24 |    ```
25 | 
26 |    2.  Install Dependencies
27 |    Install the project dependencies:
28 |    ```sh
29 | npm install
30 | 
31 |    ```
32 | 
33 | 1. Run the Application
34 | 
35 | Start the application:
36 |    ```sh
37 | npm start
38 | 
39 |    ```
40 | This command runs the app in development mode. Open http://localhost:3000/react-todo to view it in the browser.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lc-react",
 3 |   "version": "0.1.0",
 4 |   "homepage": "https://ismaildasci.github.io/react-todo",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@testing-library/jest-dom": "^5.16.5",
 8 |     "@testing-library/react": "^13.4.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "date-fns": "^2.30.0",
11 |     "prop-types": "^15.8.1",
12 |     "react": "^18.2.0",
13 |     "react-dom": "^18.2.0",
14 |     "react-markdown": "^8.0.7",
15 |     "react-query": "^3.39.3",
16 |     "react-router-dom": "^6.14.0",
17 |     "react-scripts": "5.0.1",
18 |     "react-transition-group": "^4.4.5",
19 |     "web-vitals": "^2.1.4"
20 |   },
21 |   "scripts": {
22 |     "start": "react-scripts start --public-url /react-todo/",
23 |     "build": "react-scripts build",
24 |     "test": "react-scripts test",
25 |     "eject": "react-scripts eject",
26 |     "predeploy": "npm run build",
27 |     "deploy": "gh-pages -d build"
28 |   },
29 |   "eslintConfig": {
30 |     "extends": [
31 |       "react-app",
32 |       "react-app/jest"
33 |     ]
34 |   },
35 |   "browserslist": {
36 |     "production": [
37 |       ">0.2%",
38 |       "not dead",
39 |       "not op_mini all"
40 |     ],
41 |     "development": [
42 |       "last 1 chrome version",
43 |       "last 1 firefox version",
44 |       "last 1 safari version"
45 |     ]
46 |   },
47 |   "devDependencies": {
48 |     "gh-pages": "^5.0.0"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <title>Redirecting</title>
 7 |   <script>
 8 |     window.location.replace("https://ismaildasci.github.io/react-todo/");
 9 |   </script>
10 | </head>
11 | 
12 | <body></body>
13 | 
14 | </html>
15 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ismaildasci/react-todo/01816e6a4762f12870d128f9a9cdb276b39e1c5a/public/favicon.ico


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


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ismaildasci/react-todo/01816e6a4762f12870d128f9a9cdb276b39e1c5a/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ismaildasci/react-todo/01816e6a4762f12870d128f9a9cdb276b39e1c5a/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 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::before,
  3 | *::after {
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   margin: 0;
  9 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 10 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 11 |     sans-serif;
 12 |   -webkit-font-smoothing: antialiased;
 13 |   -moz-osx-font-smoothing: grayscale;
 14 | }
 15 | 
 16 | .todo-app-container {
 17 |   min-height: 100vh;
 18 |   background: #f3f4f6;
 19 | }
 20 | 
 21 | .container {
 22 |   margin: auto;
 23 |   padding-top: 24px;
 24 |   max-width: 48rem;
 25 | }
 26 | 
 27 | .todo-app {
 28 |   margin: auto;
 29 |   margin-top: 30px;
 30 |   padding: 2rem;
 31 |   background: white;
 32 |   border-radius: 0.25rem;
 33 |   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 34 |   max-width: 32rem;
 35 |   color: #374151;
 36 | }
 37 | 
 38 | h2 {
 39 |   font-size: 24px;
 40 |   font-weight: bold;
 41 | }
 42 | 
 43 | .todo-input {
 44 |   width: 100%;
 45 |   border: none;
 46 |   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 47 |   padding: 14px;
 48 |   font-size: 16px;
 49 |   margin-top: 16px;
 50 | }
 51 | 
 52 | .todo-list {
 53 |   margin-top: 32px;
 54 | }
 55 | 
 56 | .todo-item-container {
 57 |   display: flex;
 58 |   justify-content: space-between;
 59 |   align-items: center;
 60 |   margin-top: 24px;
 61 | }
 62 | 
 63 | .todo-item {
 64 |   display: flex;
 65 |   align-items: center;
 66 |   flex: 1;
 67 |   font-size: 18px;
 68 |   margin-right: 24px;
 69 | }
 70 | 
 71 | .todo-item-label {
 72 |   margin-left: 16px;
 73 | }
 74 | 
 75 | .todo-item-input {
 76 |   margin-left: 8px;
 77 |   width: 100%;
 78 |   border: none;
 79 |   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 80 |   padding: 6px 8px;
 81 |   font-size: 18px;
 82 | }
 83 | 
 84 | .line-through {
 85 |   text-decoration: line-through;
 86 | }
 87 | 
 88 | .x-button {
 89 |   background: white;
 90 |   color: #6B7280;
 91 |   border: none;
 92 |   cursor: pointer;
 93 | }
 94 | 
 95 | .x-button:hover {
 96 |   color: #1F2937;
 97 | }
 98 | 
 99 | .x-button-icon {
100 |   width: 1.5rem;
101 |   height: 1.5rem;
102 | }
103 | 
104 | .button {
105 |   color: #6B7280;
106 |   font-size: 14px;
107 |   background: white;
108 |   border: 1px solid lightgray;
109 |   padding: 6px;
110 |   border-radius: 5px;
111 |   cursor: pointer;
112 | }
113 | 
114 | .button:hover {
115 |   border: 1px solid lightgray;
116 | }
117 | 
118 | .filter-button {
119 |   border: 1px solid white;
120 | }
121 | 
122 | .filter-button-active {
123 |   border: 1px solid lightgray;
124 | }
125 | 
126 | .check-all-container {
127 |   display: flex;
128 |   justify-content: space-between;
129 |   align-items: center;
130 |   color: #6B7280;
131 |   margin-top: 22px;
132 |   padding-top: 16px;
133 |   border-top: 1px solid lightgray;
134 | }
135 | 
136 | .other-buttons-container {
137 |   display: flex;
138 |   justify-content: space-between;
139 |   align-items: center;
140 |   color: #6B7280;
141 |   margin-top: 22px;
142 |   padding-top: 16px;
143 |   border-top: 1px solid lightgray;
144 | }
145 | 
146 | .no-todos-container {
147 |   width: 300px;
148 |   margin: 30px auto;
149 | }
150 | 
151 | .no-todos-container p {
152 |   margin-top: 20px;
153 |   text-align: center;
154 | }
155 | 
156 | .name-container {
157 |   margin-bottom: 40px;
158 | }
159 | 
160 | .name-label {
161 |   margin-top: 15px;
162 | }
163 | 
164 | .toggles-container {
165 |   margin: 20px 0;
166 | }
167 | 
168 | nav {
169 |   background: white;
170 |   padding: 16px;
171 | }
172 | 
173 | nav ul {
174 |   display: flex;
175 |   justify-content: center;
176 |   margin: auto;
177 | }
178 | 
179 | nav ul li:not(:first-child) {
180 |   margin-left: 16px;
181 | }
182 | 
183 | .active {
184 |   font-weight: bold;
185 | }
186 | 
187 | /* Transitions  */
188 | 
189 | .slide-vertical-enter {
190 |   opacity: 0;
191 |   transform: translateY(-20px);
192 | }
193 | 
194 | .slide-vertical-enter-active {
195 |   opacity: 1;
196 |   transform: translateY(0);
197 |   transition: all 300ms;
198 | }
199 | 
200 | .slide-vertical-exit {
201 |   opacity: 1;
202 |   transform: translateY(0);
203 | }
204 | 
205 | .slide-vertical-exit-active {
206 |   opacity: 0;
207 |   transition: all 300ms;
208 |   transform: translateY(-20px);
209 | }
210 | 
211 | .slide-horizontal-enter {
212 |   opacity: 0;
213 |   transform: translateX(20px);
214 | }
215 | 
216 | .slide-horizontal-enter-active {
217 |   opacity: 1;
218 |   transform: translateX(0);
219 |   transition: all 300ms;
220 | }
221 | 
222 | .slide-horizontal-exit {
223 |   opacity: 1;
224 |   transform: translateX(0);
225 | }
226 | 
227 | .slide-horizontal-exit-active {
228 |   opacity: 0;
229 |   transition: all 300ms;
230 |   transform: translateX(20px);
231 | }
232 | 
233 | *,
234 | *::before,
235 | *::after {
236 |   box-sizing: border-box;
237 | }
238 | 
239 | body {
240 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
241 |   color: #111827;
242 | }
243 | 
244 | a {
245 |   color: #0265d6;
246 |   text-decoration: none;
247 | }
248 | 
249 | .container {
250 |   max-width: 54rem;
251 |   margin: 32px auto;
252 | }
253 | 
254 | .font-bold {
255 |   font-weight: bold;
256 | }
257 | 
258 | .issues-heading {
259 |   background: #f5f8fa;
260 |   padding: 15px 15px;
261 |   border-top-left-radius: 10px;
262 |   border-top-right-radius: 10px;
263 |   border: 1px solid #e1e4e8;
264 |   border-bottom: none;
265 | }
266 | 
267 | .issues-heading a {
268 |   font-weight: bold;
269 |   font-size: 20px;
270 | }
271 | 
272 | .issues-heading a:hover {
273 |   text-decoration: underline;
274 | }
275 | 
276 | .issues-entry {
277 |   display: flex;
278 |   justify-content: space-between;
279 |   align-items: center;
280 |   border: 1px solid #e1e4e8;
281 |   padding: 12px 8px;
282 | }
283 | 
284 | .issues-entry:last-child {
285 |   border-bottom-left-radius: 10px;
286 |   border-bottom-right-radius: 10px;
287 | }
288 | 
289 | .issues-entry:hover {
290 |   background: #f5f8fa;
291 | }
292 | 
293 | .issues-entry-title-container {
294 |   display: flex;
295 | }
296 | 
297 | 
298 | .issues-entry-title-container {
299 |   display: flex;
300 | }
301 | 
302 | .issues-title {
303 |   margin-left: 8px;
304 |   font-weight: bold;
305 | }
306 | 
307 | .issues-title a {
308 |   color: #111827;
309 |   text-decoration: none;
310 | }
311 | 
312 | .issues-title a:hover {
313 |   color: #0265d6;
314 | }
315 | 
316 | .issues-title-details {
317 |   font-size: 12px;
318 |   font-weight: normal;
319 |   margin-top: 8px;
320 |   color: #374151;
321 | }
322 | 
323 | .comments-count-container {
324 |   display: flex;
325 |   text-decoration: none;
326 |   color: #374151;
327 | }
328 | 
329 | .comments-count-container:hover {
330 |   color: #0265d6;
331 | }
332 | 
333 | .comments-count {
334 |   text-decoration: none;
335 |   margin-left: 4px;
336 |   font-size: 14px;
337 | }
338 | 
339 | .open-closed-buttons {
340 |   margin-top: 12px;
341 | }
342 | 
343 | .open-closed-buttons button {
344 |   display: inline-flex;
345 |   align-items: center;
346 |   border: none;
347 |   background: none;
348 |   padding: 0;
349 |   cursor: pointer;
350 | }
351 | 
352 | .open-closed-buttons button:last-child {
353 |   margin-left: 14px;
354 | }
355 | 
356 | .open-closed-buttons span {
357 |   margin-left: 4px;
358 |   font-size: 14px;
359 | }
360 | 
361 | svg {
362 |   fill: currentColor;
363 | }
364 | 
365 | .open {
366 |   color: #22863a;
367 | }
368 | 
369 | .closed {
370 |   color: #e5534b;
371 | }
372 | 
373 | /* Comments */
374 | 
375 | .comments-container {
376 |   margin-top: 48px;
377 | }
378 | 
379 | .comments-container h2 {
380 |   font-size: 24px;
381 |   font-weight: bold;
382 | }
383 | 
384 | .comments-container h2 span {
385 |   color: #374151;
386 |   font-weight: normal;
387 | }
388 | 
389 | .issue-details {
390 |   font-size: 14px;
391 |   margin-top: 12px;
392 |   color: #374151;
393 | }
394 | 
395 | .issue-details a {
396 |   color: #374151;
397 |   font-weight: bold;
398 | }
399 | 
400 | .issue-details a:hover {
401 |   color: #0265d6;
402 | }
403 | 
404 | .comment-container {
405 |   display: flex;
406 | }
407 | 
408 | .comment-container:not(:first-child) {
409 |   margin-top: 32px;
410 | }
411 | 
412 | .avatar {
413 |   width: 42px;
414 |   border-radius: 50%;
415 | }
416 | 
417 | .comment {
418 |   margin-left: 18px;
419 |   flex: 1;
420 |   max-width: 100%;
421 | }
422 | 
423 | .comment-heading {
424 |   font-size: 14px;
425 |   background: #f5f8fa;
426 |   padding: 15px 15px;
427 |   border-top-left-radius: 10px;
428 |   border-top-right-radius: 10px;
429 |   border: 1px solid #e1e4e8;
430 |   border-bottom: none;
431 | }
432 | 
433 | .comment-heading a {
434 |   color: #111827;
435 |   font-weight: bold;
436 | }
437 | 
438 | .comment-heading a:hover {
439 |   color: #0265d6;
440 |   text-decoration: underline;
441 | }
442 | 
443 | .comment-body {
444 |   border-bottom-left-radius: 10px;
445 |   border-bottom-right-radius: 10px;
446 |   border: 1px solid #e1e4e8;
447 |   padding: 16px;
448 |   line-height: 1.5;
449 | }
450 | 
451 | .border {
452 |   padding-top: 32px;
453 |   border-bottom: 1px solid #F3F4F6;
454 | }
455 | .navbar {
456 |   background-color: #2f3640;
457 |   overflow: hidden;
458 |   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
459 | }
460 | 
461 | .navbar ul {
462 |   list-style: none;
463 |   margin: 0;
464 |   padding: 0;
465 |   display: flex;
466 |   align-items: center;
467 | }
468 | 
469 | .navbar li {
470 |   padding: 15px 25px;
471 | }
472 | 
473 | .navbar a {
474 |   color: #ecf0f1;
475 |   text-decoration: none;
476 |   font-size: 16px;
477 |   font-family: 'Roboto', sans-serif;
478 |   transition: color 0.3s ease-in-out;
479 | }
480 | 
481 | .navbar a:hover,
482 | .navbar a.active {
483 |   color: #3498db;
484 | }
485 | .api-button {
486 |   background-color: #34495e;
487 |   border: none;
488 |   color: white;
489 |   text-align: center;
490 |   text-decoration: none;
491 |   display: inline-block;
492 |   font-size: 16px;
493 |   margin: 10px;
494 |   padding: 15px 30px;
495 |   cursor: pointer;
496 |   border-radius: 8px;
497 |   transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
498 | }
499 | 
500 | .buttons {
501 |   display: flex;
502 |   justify-content: center;
503 |   margin: 20px;
504 | }
505 | 
506 | .api-button {
507 |   background-color: #2f3640;
508 |   border: 1px solid #444;
509 |   color: #fff;
510 |   text-align: center;
511 |   text-decoration: none;
512 |   display: inline-block;
513 |   font-size: 14px;
514 |   margin: 10px;
515 |   padding: 10px 20px;
516 |   cursor: pointer;
517 |   border-radius: 4px;
518 | }
519 | 
520 | .api-button:hover {
521 |   background-color: #3498db;
522 | }
523 | 
524 | .content {
525 |   display: flex;
526 |   flex-direction: column;
527 |   align-items: center;
528 |   margin: 20px;
529 | }
530 | 
531 | .reddit-content,
532 | .joke-content {
533 |   background-color: #f9f9f9;
534 |   padding: 20px;
535 |   border-radius: 4px;
536 |   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
537 |   width: 100%;
538 |   max-width: 800px;
539 |   margin: 10px;
540 |   text-align: left;
541 | }
542 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/AppOriginal.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     /* animation: App-logo-spin infinite 20s linear; */
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 | 
36 |   to {
37 |     transform: rotate(360deg);
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/Another.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | export default function Another(props) {
4 |   return <div>Another Component, {props.name}</div>;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/App.jsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState, useRef } from 'react';
  2 | import NoTodos from './NoTodos';
  3 | import TodoForm from './TodoForm';
  4 | import TodoList from './TodoList';
  5 | import useLocalStorage from '../hooks/useLocalStorage';
  6 | import '../reset.css';
  7 | import '../App.css';
  8 | import { TodosContext } from '../context/TodosContext';
  9 | import { CSSTransition, SwitchTransition } from 'react-transition-group';
 10 | 
 11 | function App() {
 12 |   const [name, setName] = useLocalStorage('name', '');
 13 | 
 14 |   const nameInputEl = useRef(null);
 15 |   const [todos, setTodos] = useLocalStorage('todos', []);
 16 | 
 17 |   const [idForTodo, setIdForTodo] = useLocalStorage('idForTodo', 1);
 18 | 
 19 |   const [filter, setFilter] = useState('all');
 20 | 
 21 |   function todosFiltered() {
 22 |     if (filter === 'all') {
 23 |       return todos;
 24 |     } else if (filter === 'active') {
 25 |       return todos.filter(todo => !todo.isComplete);
 26 |     } else if (filter === 'completed') {
 27 |       return todos.filter(todo => todo.isComplete);
 28 |     }
 29 |   }
 30 | 
 31 |   useEffect(() => {
 32 |     // console.log('use effect running');
 33 |     nameInputEl.current.focus();
 34 | 
 35 |     // setName(JSON.parse(localStorage.getItem('name')) ?? '');
 36 | 
 37 |     return function cleanup() {
 38 |       // console.log('cleaning up');
 39 |     };
 40 |   }, []);
 41 | 
 42 |   function handleNameInput(event) {
 43 |     setName(event.target.value);
 44 |     // localStorage.setItem('name', JSON.stringify(event.target.value));
 45 |   }
 46 | 
 47 |   return (
 48 |     <TodosContext.Provider
 49 |       value={{
 50 |         todos,
 51 |         setTodos,
 52 |         idForTodo,
 53 |         setIdForTodo,
 54 |         todosFiltered,
 55 |         filter,
 56 |         setFilter,
 57 |       }}
 58 |     >
 59 |       <div className="todo-app">
 60 |         <div className="name-container">
 61 |           <h2>What is your name?</h2>
 62 |           <form action="#">
 63 |             <input
 64 |               type="text"
 65 |               ref={nameInputEl}
 66 |               className="todo-input"
 67 |               placeholder="What is your name"
 68 |               value={name}
 69 |               onChange={handleNameInput}
 70 |             />
 71 |           </form>
 72 | 
 73 |           <CSSTransition
 74 |             in={name.length > 0}
 75 |             timeout={300}
 76 |             classNames="slide-vertical"
 77 |             unmountOnExit
 78 |           >
 79 |             <p className="name-label">Hello, {name}</p>
 80 |           </CSSTransition>
 81 |         </div>
 82 |         <h2>Todo App</h2>
 83 |         <TodoForm />
 84 | 
 85 |         <SwitchTransition mode="out-in">
 86 |           <CSSTransition
 87 |             key={todos.length > 0}
 88 |             timeout={300}
 89 |             classNames="slide-vertical"
 90 |             unmountOnExit
 91 |           >
 92 |             {todos.length > 0 ? <TodoList /> : <NoTodos />}
 93 |           </CSSTransition>
 94 |         </SwitchTransition>
 95 | 
 96 |         {/* <CSSTransition
 97 |             in={todos.length > 0}
 98 |             timeout={300}
 99 |             classNames="slide-vertical"
100 |             unmountOnExit
101 |           >
102 |             <TodoList />
103 |           </CSSTransition>
104 | 
105 |           <CSSTransition
106 |             in={todos.length === 0}
107 |             timeout={300}
108 |             classNames="slide-vertical"
109 |             unmountOnExit
110 |           >
111 |             <NoTodos />
112 |           </CSSTransition> */}
113 |       </div>
114 |     </TodosContext.Provider>
115 |   );
116 | }
117 | 
118 | export default App;
119 | 


--------------------------------------------------------------------------------
/src/components/AppClass.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | 
  3 | export default class AppClass extends Component {
  4 |   constructor(props) {
  5 |     super(props);
  6 |     this.state = {
  7 |       idForTodo: 4,
  8 |       todos: [
  9 |         {
 10 |           id: 1,
 11 |           title: 'Finish React Series',
 12 |           isComplete: false,
 13 |         },
 14 |         {
 15 |           id: 2,
 16 |           title: 'Go Grocery',
 17 |           isComplete: true,
 18 |         },
 19 |         {
 20 |           id: 3,
 21 |           title: 'Take over world',
 22 |           isComplete: false,
 23 |         },
 24 |       ],
 25 |     };
 26 |   }
 27 | 
 28 |   addTodo = event => {
 29 |     event.preventDefault();
 30 | 
 31 |     this.setState(prevState => {
 32 |       const newTodos = [
 33 |         ...prevState.todos,
 34 |         {
 35 |           id: 4,
 36 |           title: 'This is class based components',
 37 |           isComplete: false,
 38 |         },
 39 |       ];
 40 | 
 41 |       return { todos: newTodos };
 42 |     });
 43 |   };
 44 | 
 45 |   render() {
 46 |     return (
 47 |       <div className="todo-app-container">
 48 |         <div className="todo-app">
 49 |           <h2>Todo App</h2>
 50 |           <form action="#" onSubmit={this.addTodo}>
 51 |             <input
 52 |               type="text"
 53 |               className="todo-input"
 54 |               placeholder="What do you need to do?"
 55 |             />
 56 |           </form>
 57 | 
 58 |           <ul className="todo-list">
 59 |             {this.state.todos.map((todo, index) => (
 60 |               <li key={todo.id} className="todo-item-container">
 61 |                 <div className="todo-item">
 62 |                   <input type="checkbox" />
 63 |                   <span className="todo-item-label">{todo.title}</span>
 64 |                   {/* <input type="text" className="todo-item-input" value="Finish React Series" /> */}
 65 |                 </div>
 66 |                 <button className="x-button">
 67 |                   <svg
 68 |                     className="x-button-icon"
 69 |                     fill="none"
 70 |                     viewBox="0 0 24 24"
 71 |                     stroke="currentColor"
 72 |                   >
 73 |                     <path
 74 |                       strokeLinecap="round"
 75 |                       strokeLinejoin="round"
 76 |                       strokeWidth={2}
 77 |                       d="M6 18L18 6M6 6l12 12"
 78 |                     />
 79 |                   </svg>
 80 |                 </button>
 81 |               </li>
 82 |             ))}
 83 |           </ul>
 84 | 
 85 |           <div className="check-all-container">
 86 |             <div>
 87 |               <div className="button">Check All</div>
 88 |             </div>
 89 | 
 90 |             <span>3 items remaining</span>
 91 |           </div>
 92 | 
 93 |           <div className="other-buttons-container">
 94 |             <div>
 95 |               <button className="button filter-button filter-button-active">
 96 |                 All
 97 |               </button>
 98 |               <button className="button filter-button">Active</button>
 99 |               <button className="button filter-button">Completed</button>
100 |             </div>
101 |             <div>
102 |               <button className="button">Clear completed</button>
103 |             </div>
104 |           </div>
105 |         </div>
106 |       </div>
107 |     );
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/src/components/AppOriginal.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import Another from './Another';
 3 | import logo from './logo.svg';
 4 | import '../App.css';
 5 | 
 6 | function App() {
 7 |   const [count, setCount] = useState(0);
 8 | 
 9 |   function decrement() {
10 |     setCount(prevCount => prevCount - 1);
11 |   }
12 | 
13 |   function increment() {
14 |     setCount(prevCount => prevCount + 1);
15 |   }
16 | 
17 |   const someStyle = {
18 |     background: 'blue',
19 |     color: 'white',
20 |     fontSize: '28px',
21 |     fontWeight: 'bold',
22 |   };
23 | 
24 |   return (
25 |     <div className="App">
26 |       <header className="App-header">
27 |         <Another name="Andre" />
28 |         <div>
29 |           <span>{count}</span>
30 |           <button onClick={decrement}>-</button>
31 |           <button onClick={increment}>+</button>
32 |         </div>
33 |         <img src={logo} className="App-logo" alt="logo" />
34 |         <p>
35 |           Edit <code>src/App.js</code> and save to reload.
36 |         </p>
37 |         {true && <p style={someStyle}>{3 + 2}</p>}
38 |         <a
39 |           className="App-link"
40 |           href="https://reactjs.org"
41 |           target="_blank"
42 |           rel="noopener noreferrer"
43 |         >
44 |           Learn React
45 |         </a>
46 |       </header>
47 |     </div>
48 |   );
49 | }
50 | 
51 | export default App;
52 | 


--------------------------------------------------------------------------------
/src/components/NavigationBar.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { NavLink } from 'react-router-dom';
 3 | 
 4 | export default function NavigationBar() {
 5 |   return (
 6 |     <nav className="navbar">
 7 |       <ul>
 8 |         <li>
 9 |           <NavLink to="/" activeClassName="active" exact>
10 |             Home
11 |           </NavLink>
12 |         </li>
13 |         <li>
14 |           <NavLink to="/api" activeClassName="active" exact>
15 |             API
16 |           </NavLink>
17 |         </li>
18 |         <li>
19 |           <NavLink to="/issues" activeClassName="active" exact>
20 |             Issues
21 |           </NavLink>
22 |         </li>
23 |       </ul>
24 |     </nav>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/NoTodos.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function NoTodos() {
 4 |   return (
 5 |     <div className="no-todos-container">
 6 |       <svg
 7 |         width="247"
 8 |         height="241"
 9 |         fill="none"
10 |         xmlns="http://www.w3.org/2000/svg"
11 |       >
12 |         <g clipPath="url(#clip0)">
13 |           <path
14 |             d="M156.806 54.2H90.25a5.729 5.729 0 00-5.72 5.718v147.858l-.764.233-16.327 4.998a3.057 3.057 0 01-3.81-2.025L15.063 52.412a3.05 3.05 0 012.025-3.808l25.16-7.701 72.941-22.317 25.16-7.7a3.048 3.048 0 013.81 2.02l12.414 40.532.233.762z"
15 |             fill="#F2F2F2"
16 |           />
17 |           <path
18 |             d="M171.329 53.438l-14.961-48.85A6.475 6.475 0 00153.21.761a6.477 6.477 0 00-4.939-.473L112.897 11.11 39.961 33.43 4.587 44.259a6.489 6.489 0 00-4.302 8.094L51.42 219.3a6.494 6.494 0 006.202 4.586 6.408 6.408 0 001.895-.285l24.249-7.419.763-.236v-.797l-.763.232-24.474 7.491a5.729 5.729 0 01-7.143-3.793L1.017 52.127a5.708 5.708 0 013.795-7.14L40.186 34.16l72.936-22.317 35.374-10.827a5.783 5.783 0 011.682-.252 5.728 5.728 0 015.461 4.045l14.893 48.63.237.762h.793l-.233-.763z"
19 |             fill="#3F3D56"
20 |           />
21 |           <path
22 |             d="M46.789 48.728a3.44 3.44 0 01-3.284-2.427l-4.913-16.039a3.43 3.43 0 012.278-4.285l67.1-20.534a3.438 3.438 0 014.287 2.276l4.913 16.04a3.435 3.435 0 01-2.277 4.285L47.792 48.578c-.325.1-.663.15-1.003.15z"
23 |             fill="#C7C7C7"
24 |           />
25 |           <path
26 |             d="M72.522 17.138a7.626 7.626 0 007.628-7.625 7.626 7.626 0 00-7.628-7.624 7.626 7.626 0 00-7.628 7.624 7.626 7.626 0 007.628 7.625z"
27 |             fill="#C7C7C7"
28 |           />
29 |           <path
30 |             d="M72.522 14.341a4.83 4.83 0 100-9.656 4.83 4.83 0 100 9.656z"
31 |             fill="#fff"
32 |           />
33 |           <path
34 |             d="M229.838 221.939H100.929a3.248 3.248 0 01-3.242-3.241V64.302a3.243 3.243 0 013.242-3.24h128.909a3.247 3.247 0 013.241 3.24v154.396a3.245 3.245 0 01-3.241 3.241z"
35 |             fill="#E6E6E6"
36 |           />
37 |           <path
38 |             d="M170.532 53.438H90.25a6.494 6.494 0 00-6.484 6.48v155.464l.763-.233V59.919A5.724 5.724 0 0190.25 54.2h80.518l-.236-.762zm69.984 0H90.25a6.494 6.494 0 00-6.484 6.48V234.52A6.489 6.489 0 0090.25 241h150.266a6.491 6.491 0 006.484-6.481v-174.6a6.494 6.494 0 00-6.484-6.48v-.001zm5.721 181.081a5.727 5.727 0 01-5.721 5.719H90.25a5.73 5.73 0 01-5.72-5.719v-174.6a5.724 5.724 0 015.72-5.719h150.266a5.726 5.726 0 015.721 5.718V234.52z"
39 |             fill="#3F3D56"
40 |           />
41 |           <path
42 |             d="M200.471 70.212h-70.175a3.437 3.437 0 01-3.433-3.432V50.007a3.432 3.432 0 013.433-3.431h70.175a3.438 3.438 0 013.432 3.43V66.78a3.436 3.436 0 01-3.432 3.431z"
43 |             fill="#C7C7C7"
44 |           />
45 |           <path
46 |             d="M165.383 47.72a7.626 7.626 0 007.628-7.625 7.626 7.626 0 00-7.628-7.625 7.627 7.627 0 00-7.628 7.625 7.627 7.627 0 007.628 7.624z"
47 |             fill="#C7C7C7"
48 |           />
49 |           <path
50 |             d="M165.383 44.739a4.645 4.645 0 100-9.288 4.645 4.645 0 100 9.288z"
51 |             fill="#fff"
52 |           />
53 |         </g>
54 |         <defs>
55 |           <clipPath id="clip0">
56 |             <path fill="#fff" d="M0 0h247v241H0z" />
57 |           </clipPath>
58 |         </defs>
59 |       </svg>
60 |       <p>Add some todos...</p>
61 |     </div>
62 |   );
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/Root.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import App from './App';
 3 | import NavigationBar from './NavigationBar';
 4 | import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 5 | import About from './pages/api';
 6 | import Issues from './pages/Issues';
 7 | import Details from './pages/Details';
 8 | import NoMatch from './pages/NoMatch';
 9 | 
10 | // const basename = process.env.NODE_ENV === 'development' ? '/' : '/react-todo';
11 | 
12 | export default function Root() {
13 |   return (
14 |     <Router basename="/react-todo">
15 |       <div className="todo-app-container">
16 |         <NavigationBar />
17 |         <div className="content">
18 |           <Routes>
19 |             <Route path="/" element={<App />} exact />
20 |             <Route path="/api" element={<About />} />
21 |             <Route path="/issues" element={<Issues />} />
22 |             <Route path="/issues/:id" element={<Details />} />
23 |             <Route path="*" element={<NoMatch />} />
24 |           </Routes>
25 |         </div>
26 |       </div>
27 |     </Router>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/TodoClearCompleted.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { TodosContext } from '../context/TodosContext';
 3 | 
 4 | function TodoClearCompleted() {
 5 |   const { todos, setTodos } = useContext(TodosContext);
 6 | 
 7 |   function clearCompleted() {
 8 |     setTodos([...todos].filter(todo => !todo.isComplete));
 9 |   }
10 | 
11 |   return (
12 |     <button onClick={clearCompleted} className="button">
13 |       Clear completed
14 |     </button>
15 |   );
16 | }
17 | 
18 | export default TodoClearCompleted;
19 | 


--------------------------------------------------------------------------------
/src/components/TodoCompleteAllTodos.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { TodosContext } from '../context/TodosContext';
 3 | 
 4 | function TodoCompleteAllTodos() {
 5 |   const { todos, setTodos } = useContext(TodosContext);
 6 | 
 7 |   function completeAllTodos() {
 8 |     const updatedTodos = todos.map(todo => {
 9 |       todo.isComplete = true;
10 | 
11 |       return todo;
12 |     });
13 | 
14 |     setTodos(updatedTodos);
15 |   }
16 | 
17 |   return (
18 |     <div>
19 |       <div onClick={completeAllTodos} className="button">
20 |         Check All
21 |       </div>
22 |     </div>
23 |   );
24 | }
25 | 
26 | export default TodoCompleteAllTodos;
27 | 


--------------------------------------------------------------------------------
/src/components/TodoFilters.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { TodosContext } from '../context/TodosContext';
 3 | 
 4 | function TodoFilters() {
 5 |   const { filter, setFilter, todosFiltered } = useContext(TodosContext);
 6 | 
 7 |   return (
 8 |     <div>
 9 |       <button
10 |         onClick={() => {
11 |           setFilter('all');
12 |           todosFiltered();
13 |         }}
14 |         className={`button filter-button ${
15 |           filter === 'all' ? 'filter-button-active' : ''
16 |         }`}
17 |       >
18 |         All
19 |       </button>
20 |       <button
21 |         onClick={() => {
22 |           setFilter('active');
23 |           todosFiltered();
24 |         }}
25 |         className={`button filter-button ${
26 |           filter === 'active' ? 'filter-button-active' : ''
27 |         }`}
28 |       >
29 |         Active
30 |       </button>
31 |       <button
32 |         onClick={() => {
33 |           setFilter('completed');
34 |           todosFiltered();
35 |         }}
36 |         className={`button filter-button ${
37 |           filter === 'completed' ? 'filter-button-active' : ''
38 |         }`}
39 |       >
40 |         Completed
41 |       </button>
42 |     </div>
43 |   );
44 | }
45 | 
46 | export default TodoFilters;
47 | 


--------------------------------------------------------------------------------
/src/components/TodoForm.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState } from 'react';
 2 | import { TodosContext } from '../context/TodosContext';
 3 | 
 4 | function TodoForm() {
 5 |   const { todos, setTodos, idForTodo, setIdForTodo } = useContext(TodosContext);
 6 | 
 7 |   const [todoInput, setTodoInput] = useState('');
 8 | 
 9 |   function handleInput(event) {
10 |     setTodoInput(event.target.value);
11 |   }
12 | 
13 |   function addTodo(event) {
14 |     event.preventDefault();
15 | 
16 |     if (todoInput.trim().length === 0) {
17 |       return;
18 |     }
19 | 
20 |     setTodos([
21 |       ...todos,
22 |       {
23 |         id: idForTodo,
24 |         title: todoInput,
25 |         isComplete: false,
26 |       },
27 |     ]);
28 | 
29 |     setIdForTodo(prevIdForTodo => prevIdForTodo + 1);
30 | 
31 |     setTodoInput('');
32 |   }
33 | 
34 |   return (
35 |     <form action="#" onSubmit={addTodo}>
36 |       <input
37 |         type="text"
38 |         value={todoInput}
39 |         onChange={handleInput}
40 |         className="todo-input"
41 |         placeholder="What do you need to do?"
42 |       />
43 |     </form>
44 |   );
45 | }
46 | 
47 | export default TodoForm;
48 | 


--------------------------------------------------------------------------------
/src/components/TodoItemsRemaining.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useMemo } from 'react';
 2 | import { TodosContext } from '../context/TodosContext';
 3 | 
 4 | function TodoItemsRemaining() {
 5 |   const { todos } = useContext(TodosContext);
 6 | 
 7 |   function remainingCalculation() {
 8 |     // console.log('calculating remaining todos. This is slow.');
 9 |     // for (let index = 0; index < 2000000000; index++) {}
10 |     return todos.filter(todo => !todo.isComplete).length;
11 |   }
12 | 
13 |   const remaining = useMemo(remainingCalculation, [todos]);
14 | 
15 |   return <span>{remaining} items remaining</span>;
16 | }
17 | 
18 | export default TodoItemsRemaining;
19 | 


--------------------------------------------------------------------------------
/src/components/TodoList.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useContext } from 'react';
  2 | import TodoItemsRemaining from './TodoItemsRemaining';
  3 | import TodoClearCompleted from './TodoClearCompleted';
  4 | import TodoCompleteAllTodos from './TodoCompleteAllTodos';
  5 | import TodoFilters from './TodoFilters';
  6 | import useToggle from '../hooks/useToggle';
  7 | import { TodosContext } from '../context/TodosContext';
  8 | import { CSSTransition, TransitionGroup } from 'react-transition-group';
  9 | 
 10 | function TodoList() {
 11 |   const { todos, setTodos, todosFiltered } = useContext(TodosContext);
 12 |   const [isFeaturesOneVisible, setFeaturesOneVisible] = useToggle();
 13 |   const [isFeaturesTwoVisible, setFeaturesTwoVisible] = useToggle();
 14 | 
 15 |   function deleteTodo(id) {
 16 |     setTodos([...todos].filter(todo => todo.id !== id));
 17 |   }
 18 | 
 19 |   function completeTodo(id) {
 20 |     const updatedTodos = todos.map(todo => {
 21 |       if (todo.id === id) {
 22 |         todo.isComplete = !todo.isComplete;
 23 |       }
 24 | 
 25 |       return todo;
 26 |     });
 27 | 
 28 |     setTodos(updatedTodos);
 29 |   }
 30 | 
 31 |   function markAsEditing(id) {
 32 |     const updatedTodos = todos.map(todo => {
 33 |       if (todo.id === id) {
 34 |         todo.isEditing = true;
 35 |       }
 36 | 
 37 |       return todo;
 38 |     });
 39 | 
 40 |     setTodos(updatedTodos);
 41 |   }
 42 | 
 43 |   function updateTodo(event, id) {
 44 |     const updatedTodos = todos.map(todo => {
 45 |       if (todo.id === id) {
 46 |         if (event.target.value.trim().length === 0) {
 47 |           todo.isEditing = false;
 48 |           return todo;
 49 |         }
 50 |         todo.title = event.target.value;
 51 |         todo.isEditing = false;
 52 |       }
 53 | 
 54 |       return todo;
 55 |     });
 56 | 
 57 |     setTodos(updatedTodos);
 58 |   }
 59 | 
 60 |   function cancelEdit(event, id) {
 61 |     const updatedTodos = todos.map(todo => {
 62 |       if (todo.id === id) {
 63 |         todo.isEditing = false;
 64 |       }
 65 | 
 66 |       return todo;
 67 |     });
 68 | 
 69 |     setTodos(updatedTodos);
 70 |   }
 71 | 
 72 |   return (
 73 |     <>
 74 |       <TransitionGroup component="ul" className="todo-list">
 75 |         {todosFiltered().map((todo, index) => (
 76 |           <CSSTransition
 77 |             key={todo.id}
 78 |             timeout={300}
 79 |             classNames="slide-horizontal"
 80 |           >
 81 |             <li className="todo-item-container">
 82 |               <div className="todo-item">
 83 |                 <input
 84 |                   type="checkbox"
 85 |                   onChange={() => completeTodo(todo.id)}
 86 |                   checked={todo.isComplete ? true : false}
 87 |                 />
 88 | 
 89 |                 {!todo.isEditing ? (
 90 |                   <span
 91 |                     onDoubleClick={() => markAsEditing(todo.id)}
 92 |                     className={`todo-item-label ${
 93 |                       todo.isComplete ? 'line-through' : ''
 94 |                     }`}
 95 |                   >
 96 |                     {todo.title}
 97 |                   </span>
 98 |                 ) : (
 99 |                   <input
100 |                     type="text"
101 |                     onBlur={event => updateTodo(event, todo.id)}
102 |                     onKeyDown={event => {
103 |                       if (event.key === 'Enter') {
104 |                         updateTodo(event, todo.id);
105 |                       } else if (event.key === 'Escape') {
106 |                         cancelEdit(event, todo.id);
107 |                       }
108 |                     }}
109 |                     className="todo-item-input"
110 |                     defaultValue={todo.title}
111 |                     autoFocus
112 |                   />
113 |                 )}
114 |               </div>
115 |               <button onClick={() => deleteTodo(todo.id)} className="x-button">
116 |                 <svg
117 |                   className="x-button-icon"
118 |                   fill="none"
119 |                   viewBox="0 0 24 24"
120 |                   stroke="currentColor"
121 |                 >
122 |                   <path
123 |                     strokeLinecap="round"
124 |                     strokeLinejoin="round"
125 |                     strokeWidth={2}
126 |                     d="M6 18L18 6M6 6l12 12"
127 |                   />
128 |                 </svg>
129 |               </button>
130 |             </li>
131 |           </CSSTransition>
132 |         ))}
133 |       </TransitionGroup>
134 | 
135 |       <div className="toggles-container">
136 |         <button onClick={setFeaturesOneVisible} className="button">
137 |           Features One Toggle
138 |         </button>
139 |         <button onClick={setFeaturesTwoVisible} className="button">
140 |           Features Two Toggle
141 |         </button>
142 |       </div>
143 | 
144 |       <CSSTransition
145 |         in={isFeaturesOneVisible}
146 |         timeout={300}
147 |         classNames="slide-vertical"
148 |         unmountOnExit
149 |       >
150 |         <div className="check-all-container">
151 |           <TodoCompleteAllTodos />
152 | 
153 |           <TodoItemsRemaining />
154 |         </div>
155 |       </CSSTransition>
156 | 
157 |       <CSSTransition
158 |         in={isFeaturesTwoVisible}
159 |         timeout={300}
160 |         classNames="slide-vertical"
161 |         unmountOnExit
162 |       >
163 |         <div className="other-buttons-container">
164 |           <TodoFilters />
165 |           <div>
166 |             <TodoClearCompleted />
167 |           </div>
168 |         </div>
169 |       </CSSTransition>
170 |     </>
171 |   );
172 | }
173 | 
174 | export default TodoList;
175 | 


--------------------------------------------------------------------------------
/src/components/api/Joke.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useQuery } from 'react-query';
 3 | 
 4 | export default function Joke() {
 5 |   const {
 6 |     data: joke,
 7 |     isLoading,
 8 |     isError,
 9 |     error,
10 |     isSuccess,
11 |   } = useQuery('joke', fetchJoke, {
12 |     // staleTime: 6000,
13 |     refetchOnWindowFocus: false,
14 |   });
15 | 
16 |   function fetchJoke() {
17 |     return fetch('https://official-joke-api.appspot.com/jokes/random').then(
18 |       response => response.json()
19 |     );
20 |   }
21 | 
22 |   // const {
23 |   //   data: joke,
24 |   //   isLoading,
25 |   //   errorMessage,
26 |   // } = useFetch('https://official-joke-api.appspot.com/jokes/random');
27 | 
28 |   return (
29 |     <div>
30 |       <h2>Joke API</h2>
31 |       {isLoading && <div>Loading...</div>}
32 |       {isSuccess && <div>{joke.setup + ' ' + joke.punchline}</div>}
33 |       {isError && <div>{error.message}</div>}
34 |     </div>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/src/components/api/Reddit.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useQuery } from 'react-query';
 3 | 
 4 | export default function Reddit() {
 5 |   // const {
 6 |   //   data: posts,
 7 |   //   isLoading,
 8 |   //   errorMessage,
 9 |   // } = useFetch('https://www.reddit.com/r/aww.json');
10 | 
11 |   const {
12 |     data: posts,
13 |     isLoading,
14 |     isError,
15 |     error,
16 |     isSuccess,
17 |   } = useQuery('posts', fetchPosts, {
18 |     retry: false,
19 |   });
20 | 
21 |   function fetchPosts() {
22 |     return fetch('https://www.reddit.com/r/aww.json').then(response =>
23 |       response.json()
24 |     );
25 |   }
26 | 
27 |   return (
28 |     <div>
29 |       <h2>Reddit API</h2>
30 |       {isLoading && <div>Loading...</div>}
31 |       {isSuccess && (
32 |         <ul>
33 |           {posts.data.children.map(post => (
34 |             <li key={post.data.id}>
35 |               <a href={`https://reddit.com${post.data.permalink}`}>
36 |                 {post.data.title}
37 |               </a>
38 |             </li>
39 |           ))}
40 |         </ul>
41 |       )}
42 |       {isError && <div>{error.message}</div>}
43 |     </div>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/api/useFetch.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | 
 3 | function useFetch(url) {
 4 |   const [data, setData] = useState(null);
 5 |   const [isLoading, setIsLoading] = useState(true);
 6 |   const [errorMessage, setErrorMessage] = useState(null);
 7 | 
 8 |   useEffect(() => {
 9 |     fetch(url)
10 |       .then(response => response.json())
11 |       .then(results => {
12 |         setIsLoading(false);
13 |         setData(results);
14 |       })
15 |       .catch(error => {
16 |         setIsLoading(false);
17 |         setErrorMessage('There was an error');
18 |       });
19 |   }, [url]);
20 | 
21 |   return { data, isLoading, errorMessage };
22 | }
23 | 
24 | export default useFetch;
25 | 


--------------------------------------------------------------------------------
/src/components/github-markdown.css:
--------------------------------------------------------------------------------
  1 | .markdown-body .octicon {
  2 |   display: inline-block;
  3 |   fill: currentColor;
  4 |   vertical-align: text-bottom;
  5 | }
  6 | 
  7 | .markdown-body .anchor {
  8 |   float: left;
  9 |   line-height: 1;
 10 |   margin-left: -20px;
 11 |   padding-right: 4px;
 12 | }
 13 | 
 14 | .markdown-body .anchor:focus {
 15 |   outline: none;
 16 | }
 17 | 
 18 | .markdown-body h1 .octicon-link,
 19 | .markdown-body h2 .octicon-link,
 20 | .markdown-body h3 .octicon-link,
 21 | .markdown-body h4 .octicon-link,
 22 | .markdown-body h5 .octicon-link,
 23 | .markdown-body h6 .octicon-link {
 24 |   color: #1b1f23;
 25 |   vertical-align: middle;
 26 |   visibility: hidden;
 27 | }
 28 | 
 29 | .markdown-body h1:hover .anchor,
 30 | .markdown-body h2:hover .anchor,
 31 | .markdown-body h3:hover .anchor,
 32 | .markdown-body h4:hover .anchor,
 33 | .markdown-body h5:hover .anchor,
 34 | .markdown-body h6:hover .anchor {
 35 |   text-decoration: none;
 36 | }
 37 | 
 38 | .markdown-body h1:hover .anchor .octicon-link,
 39 | .markdown-body h2:hover .anchor .octicon-link,
 40 | .markdown-body h3:hover .anchor .octicon-link,
 41 | .markdown-body h4:hover .anchor .octicon-link,
 42 | .markdown-body h5:hover .anchor .octicon-link,
 43 | .markdown-body h6:hover .anchor .octicon-link {
 44 |   visibility: visible;
 45 | }
 46 | 
 47 | .markdown-body h1:hover .anchor .octicon-link:before,
 48 | .markdown-body h2:hover .anchor .octicon-link:before,
 49 | .markdown-body h3:hover .anchor .octicon-link:before,
 50 | .markdown-body h4:hover .anchor .octicon-link:before,
 51 | .markdown-body h5:hover .anchor .octicon-link:before,
 52 | .markdown-body h6:hover .anchor .octicon-link:before {
 53 |   width: 16px;
 54 |   height: 16px;
 55 |   content: ' ';
 56 |   display: inline-block;
 57 |   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'%3E%3C/path%3E%3C/svg%3E");
 58 | }
 59 | 
 60 | .markdown-body {
 61 |   -ms-text-size-adjust: 100%;
 62 |   -webkit-text-size-adjust: 100%;
 63 |   line-height: 1.5;
 64 |   color: #24292e;
 65 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
 66 |   font-size: 16px;
 67 |   line-height: 1.5;
 68 |   word-wrap: break-word;
 69 | }
 70 | 
 71 | .markdown-body details {
 72 |   display: block;
 73 | }
 74 | 
 75 | .markdown-body summary {
 76 |   display: list-item;
 77 | }
 78 | 
 79 | .markdown-body a {
 80 |   background-color: initial;
 81 | }
 82 | 
 83 | .markdown-body a:active,
 84 | .markdown-body a:hover {
 85 |   outline-width: 0;
 86 | }
 87 | 
 88 | .markdown-body strong {
 89 |   font-weight: inherit;
 90 |   font-weight: bolder;
 91 | }
 92 | 
 93 | .markdown-body h1 {
 94 |   font-size: 2em;
 95 |   margin: .67em 0;
 96 | }
 97 | 
 98 | .markdown-body img {
 99 |   border-style: none;
100 | }
101 | 
102 | .markdown-body code,
103 | .markdown-body kbd,
104 | .markdown-body pre {
105 |   font-family: monospace, monospace;
106 |   font-size: 1em;
107 | }
108 | 
109 | .markdown-body hr {
110 |   box-sizing: initial;
111 |   height: 0;
112 |   overflow: visible;
113 | }
114 | 
115 | .markdown-body input {
116 |   font: inherit;
117 |   margin: 0;
118 | }
119 | 
120 | .markdown-body input {
121 |   overflow: visible;
122 | }
123 | 
124 | .markdown-body [type=checkbox] {
125 |   box-sizing: border-box;
126 |   padding: 0;
127 | }
128 | 
129 | .markdown-body * {
130 |   box-sizing: border-box;
131 | }
132 | 
133 | .markdown-body input {
134 |   font-family: inherit;
135 |   font-size: inherit;
136 |   line-height: inherit;
137 | }
138 | 
139 | .markdown-body a {
140 |   color: #0366d6;
141 |   text-decoration: none;
142 | }
143 | 
144 | .markdown-body a:hover {
145 |   text-decoration: underline;
146 | }
147 | 
148 | .markdown-body strong {
149 |   font-weight: 600;
150 | }
151 | 
152 | .markdown-body hr {
153 |   height: 0;
154 |   margin: 15px 0;
155 |   overflow: hidden;
156 |   background: transparent;
157 |   border: 0;
158 |   border-bottom: 1px solid #dfe2e5;
159 | }
160 | 
161 | .markdown-body hr:after,
162 | .markdown-body hr:before {
163 |   display: table;
164 |   content: "";
165 | }
166 | 
167 | .markdown-body hr:after {
168 |   clear: both;
169 | }
170 | 
171 | .markdown-body table {
172 |   border-spacing: 0;
173 |   border-collapse: collapse;
174 | }
175 | 
176 | .markdown-body td,
177 | .markdown-body th {
178 |   padding: 0;
179 | }
180 | 
181 | .markdown-body details summary {
182 |   cursor: pointer;
183 | }
184 | 
185 | .markdown-body kbd {
186 |   display: inline-block;
187 |   padding: 3px 5px;
188 |   font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
189 |   line-height: 10px;
190 |   color: #444d56;
191 |   vertical-align: middle;
192 |   background-color: #fafbfc;
193 |   border: 1px solid #d1d5da;
194 |   border-radius: 3px;
195 |   box-shadow: inset 0 -1px 0 #d1d5da;
196 | }
197 | 
198 | .markdown-body h1,
199 | .markdown-body h2,
200 | .markdown-body h3,
201 | .markdown-body h4,
202 | .markdown-body h5,
203 | .markdown-body h6 {
204 |   margin-top: 0;
205 |   margin-bottom: 0;
206 | }
207 | 
208 | .markdown-body h1 {
209 |   font-size: 32px;
210 | }
211 | 
212 | .markdown-body h1,
213 | .markdown-body h2 {
214 |   font-weight: 600;
215 | }
216 | 
217 | .markdown-body h2 {
218 |   font-size: 24px;
219 | }
220 | 
221 | .markdown-body h3 {
222 |   font-size: 20px;
223 | }
224 | 
225 | .markdown-body h3,
226 | .markdown-body h4 {
227 |   font-weight: 600;
228 | }
229 | 
230 | .markdown-body h4 {
231 |   font-size: 16px;
232 | }
233 | 
234 | .markdown-body h5 {
235 |   font-size: 14px;
236 | }
237 | 
238 | .markdown-body h5,
239 | .markdown-body h6 {
240 |   font-weight: 600;
241 | }
242 | 
243 | .markdown-body h6 {
244 |   font-size: 12px;
245 | }
246 | 
247 | .markdown-body p {
248 |   margin-top: 0;
249 |   margin-bottom: 10px;
250 | }
251 | 
252 | .markdown-body blockquote {
253 |   margin: 0;
254 | }
255 | 
256 | .markdown-body ol,
257 | .markdown-body ul {
258 |   padding-left: 0;
259 |   margin-top: 0;
260 |   margin-bottom: 0;
261 | }
262 | 
263 | .markdown-body ol ol,
264 | .markdown-body ul ol {
265 |   list-style-type: lower-roman;
266 | }
267 | 
268 | .markdown-body ol ol ol,
269 | .markdown-body ol ul ol,
270 | .markdown-body ul ol ol,
271 | .markdown-body ul ul ol {
272 |   list-style-type: lower-alpha;
273 | }
274 | 
275 | .markdown-body dd {
276 |   margin-left: 0;
277 | }
278 | 
279 | .markdown-body code,
280 | .markdown-body pre {
281 |   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
282 |   font-size: 12px;
283 | }
284 | 
285 | .markdown-body pre {
286 |   margin-top: 0;
287 |   margin-bottom: 0;
288 | }
289 | 
290 | .markdown-body input::-webkit-inner-spin-button,
291 | .markdown-body input::-webkit-outer-spin-button {
292 |   margin: 0;
293 |   -webkit-appearance: none;
294 |   appearance: none;
295 | }
296 | 
297 | .markdown-body :checked+.radio-label {
298 |   position: relative;
299 |   z-index: 1;
300 |   border-color: #0366d6;
301 | }
302 | 
303 | .markdown-body .border {
304 |   border: 1px solid #e1e4e8 !important;
305 | }
306 | 
307 | .markdown-body .border-0 {
308 |   border: 0 !important;
309 | }
310 | 
311 | .markdown-body .border-bottom {
312 |   border-bottom: 1px solid #e1e4e8 !important;
313 | }
314 | 
315 | .markdown-body .rounded-1 {
316 |   border-radius: 3px !important;
317 | }
318 | 
319 | .markdown-body .bg-white {
320 |   background-color: #fff !important;
321 | }
322 | 
323 | .markdown-body .bg-gray-light {
324 |   background-color: #fafbfc !important;
325 | }
326 | 
327 | .markdown-body .text-gray-light {
328 |   color: #6a737d !important;
329 | }
330 | 
331 | .markdown-body .mb-0 {
332 |   margin-bottom: 0 !important;
333 | }
334 | 
335 | .markdown-body .my-2 {
336 |   margin-top: 8px !important;
337 |   margin-bottom: 8px !important;
338 | }
339 | 
340 | .markdown-body .pl-0 {
341 |   padding-left: 0 !important;
342 | }
343 | 
344 | .markdown-body .py-0 {
345 |   padding-top: 0 !important;
346 |   padding-bottom: 0 !important;
347 | }
348 | 
349 | .markdown-body .pl-1 {
350 |   padding-left: 4px !important;
351 | }
352 | 
353 | .markdown-body .pl-2 {
354 |   padding-left: 8px !important;
355 | }
356 | 
357 | .markdown-body .py-2 {
358 |   padding-top: 8px !important;
359 |   padding-bottom: 8px !important;
360 | }
361 | 
362 | .markdown-body .pl-3,
363 | .markdown-body .px-3 {
364 |   padding-left: 16px !important;
365 | }
366 | 
367 | .markdown-body .px-3 {
368 |   padding-right: 16px !important;
369 | }
370 | 
371 | .markdown-body .pl-4 {
372 |   padding-left: 24px !important;
373 | }
374 | 
375 | .markdown-body .pl-5 {
376 |   padding-left: 32px !important;
377 | }
378 | 
379 | .markdown-body .pl-6 {
380 |   padding-left: 40px !important;
381 | }
382 | 
383 | .markdown-body .f6 {
384 |   font-size: 12px !important;
385 | }
386 | 
387 | .markdown-body .lh-condensed {
388 |   line-height: 1.25 !important;
389 | }
390 | 
391 | .markdown-body .text-bold {
392 |   font-weight: 600 !important;
393 | }
394 | 
395 | .markdown-body .pl-c {
396 |   color: #6a737d;
397 | }
398 | 
399 | .markdown-body .pl-c1,
400 | .markdown-body .pl-s .pl-v {
401 |   color: #005cc5;
402 | }
403 | 
404 | .markdown-body .pl-e,
405 | .markdown-body .pl-en {
406 |   color: #6f42c1;
407 | }
408 | 
409 | .markdown-body .pl-s .pl-s1,
410 | .markdown-body .pl-smi {
411 |   color: #24292e;
412 | }
413 | 
414 | .markdown-body .pl-ent {
415 |   color: #22863a;
416 | }
417 | 
418 | .markdown-body .pl-k {
419 |   color: #d73a49;
420 | }
421 | 
422 | .markdown-body .pl-pds,
423 | .markdown-body .pl-s,
424 | .markdown-body .pl-s .pl-pse .pl-s1,
425 | .markdown-body .pl-sr,
426 | .markdown-body .pl-sr .pl-cce,
427 | .markdown-body .pl-sr .pl-sra,
428 | .markdown-body .pl-sr .pl-sre {
429 |   color: #032f62;
430 | }
431 | 
432 | .markdown-body .pl-smw,
433 | .markdown-body .pl-v {
434 |   color: #e36209;
435 | }
436 | 
437 | .markdown-body .pl-bu {
438 |   color: #b31d28;
439 | }
440 | 
441 | .markdown-body .pl-ii {
442 |   color: #fafbfc;
443 |   background-color: #b31d28;
444 | }
445 | 
446 | .markdown-body .pl-c2 {
447 |   color: #fafbfc;
448 |   background-color: #d73a49;
449 | }
450 | 
451 | .markdown-body .pl-c2:before {
452 |   content: "^M";
453 | }
454 | 
455 | .markdown-body .pl-sr .pl-cce {
456 |   font-weight: 700;
457 |   color: #22863a;
458 | }
459 | 
460 | .markdown-body .pl-ml {
461 |   color: #735c0f;
462 | }
463 | 
464 | .markdown-body .pl-mh,
465 | .markdown-body .pl-mh .pl-en,
466 | .markdown-body .pl-ms {
467 |   font-weight: 700;
468 |   color: #005cc5;
469 | }
470 | 
471 | .markdown-body .pl-mi {
472 |   font-style: italic;
473 |   color: #24292e;
474 | }
475 | 
476 | .markdown-body .pl-mb {
477 |   font-weight: 700;
478 |   color: #24292e;
479 | }
480 | 
481 | .markdown-body .pl-md {
482 |   color: #b31d28;
483 |   background-color: #ffeef0;
484 | }
485 | 
486 | .markdown-body .pl-mi1 {
487 |   color: #22863a;
488 |   background-color: #f0fff4;
489 | }
490 | 
491 | .markdown-body .pl-mc {
492 |   color: #e36209;
493 |   background-color: #ffebda;
494 | }
495 | 
496 | .markdown-body .pl-mi2 {
497 |   color: #f6f8fa;
498 |   background-color: #005cc5;
499 | }
500 | 
501 | .markdown-body .pl-mdr {
502 |   font-weight: 700;
503 |   color: #6f42c1;
504 | }
505 | 
506 | .markdown-body .pl-ba {
507 |   color: #586069;
508 | }
509 | 
510 | .markdown-body .pl-sg {
511 |   color: #959da5;
512 | }
513 | 
514 | .markdown-body .pl-corl {
515 |   text-decoration: underline;
516 |   color: #032f62;
517 | }
518 | 
519 | .markdown-body .mb-0 {
520 |   margin-bottom: 0 !important;
521 | }
522 | 
523 | .markdown-body .my-2 {
524 |   margin-bottom: 8px !important;
525 | }
526 | 
527 | .markdown-body .my-2 {
528 |   margin-top: 8px !important;
529 | }
530 | 
531 | .markdown-body .pl-0 {
532 |   padding-left: 0 !important;
533 | }
534 | 
535 | .markdown-body .py-0 {
536 |   padding-top: 0 !important;
537 |   padding-bottom: 0 !important;
538 | }
539 | 
540 | .markdown-body .pl-1 {
541 |   padding-left: 4px !important;
542 | }
543 | 
544 | .markdown-body .pl-2 {
545 |   padding-left: 8px !important;
546 | }
547 | 
548 | .markdown-body .py-2 {
549 |   padding-top: 8px !important;
550 |   padding-bottom: 8px !important;
551 | }
552 | 
553 | .markdown-body .pl-3 {
554 |   padding-left: 16px !important;
555 | }
556 | 
557 | .markdown-body .pl-4 {
558 |   padding-left: 24px !important;
559 | }
560 | 
561 | .markdown-body .pl-5 {
562 |   padding-left: 32px !important;
563 | }
564 | 
565 | .markdown-body .pl-6 {
566 |   padding-left: 40px !important;
567 | }
568 | 
569 | .markdown-body .pl-7 {
570 |   padding-left: 48px !important;
571 | }
572 | 
573 | .markdown-body .pl-8 {
574 |   padding-left: 64px !important;
575 | }
576 | 
577 | .markdown-body .pl-9 {
578 |   padding-left: 80px !important;
579 | }
580 | 
581 | .markdown-body .pl-10 {
582 |   padding-left: 96px !important;
583 | }
584 | 
585 | .markdown-body .pl-11 {
586 |   padding-left: 112px !important;
587 | }
588 | 
589 | .markdown-body .pl-12 {
590 |   padding-left: 128px !important;
591 | }
592 | 
593 | .markdown-body hr {
594 |   border-bottom-color: #eee;
595 | }
596 | 
597 | .markdown-body kbd {
598 |   display: inline-block;
599 |   padding: 3px 5px;
600 |   font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
601 |   line-height: 10px;
602 |   color: #444d56;
603 |   vertical-align: middle;
604 |   background-color: #fafbfc;
605 |   border: 1px solid #d1d5da;
606 |   border-radius: 3px;
607 |   box-shadow: inset 0 -1px 0 #d1d5da;
608 | }
609 | 
610 | .markdown-body:after,
611 | .markdown-body:before {
612 |   display: table;
613 |   content: "";
614 | }
615 | 
616 | .markdown-body:after {
617 |   clear: both;
618 | }
619 | 
620 | .markdown-body>:first-child {
621 |   margin-top: 0 !important;
622 | }
623 | 
624 | .markdown-body>:last-child {
625 |   margin-bottom: 0 !important;
626 | }
627 | 
628 | .markdown-body a:not([href]) {
629 |   color: inherit;
630 |   text-decoration: none;
631 | }
632 | 
633 | .markdown-body blockquote,
634 | .markdown-body details,
635 | .markdown-body dl,
636 | .markdown-body ol,
637 | .markdown-body p,
638 | .markdown-body pre,
639 | .markdown-body table,
640 | .markdown-body ul {
641 |   margin-top: 0;
642 |   margin-bottom: 16px;
643 | }
644 | 
645 | .markdown-body hr {
646 |   height: .25em;
647 |   padding: 0;
648 |   margin: 24px 0;
649 |   background-color: #e1e4e8;
650 |   border: 0;
651 | }
652 | 
653 | .markdown-body blockquote {
654 |   padding: 0 1em;
655 |   color: #6a737d;
656 |   border-left: .25em solid #dfe2e5;
657 | }
658 | 
659 | .markdown-body blockquote>:first-child {
660 |   margin-top: 0;
661 | }
662 | 
663 | .markdown-body blockquote>:last-child {
664 |   margin-bottom: 0;
665 | }
666 | 
667 | .markdown-body h1,
668 | .markdown-body h2,
669 | .markdown-body h3,
670 | .markdown-body h4,
671 | .markdown-body h5,
672 | .markdown-body h6 {
673 |   margin-top: 24px;
674 |   margin-bottom: 16px;
675 |   font-weight: 600;
676 |   line-height: 1.25;
677 | }
678 | 
679 | .markdown-body h1 {
680 |   font-size: 2em;
681 | }
682 | 
683 | .markdown-body h1,
684 | .markdown-body h2 {
685 |   padding-bottom: .3em;
686 |   border-bottom: 1px solid #eaecef;
687 | }
688 | 
689 | .markdown-body h2 {
690 |   font-size: 1.5em;
691 | }
692 | 
693 | .markdown-body h3 {
694 |   font-size: 1.25em;
695 | }
696 | 
697 | .markdown-body h4 {
698 |   font-size: 1em;
699 | }
700 | 
701 | .markdown-body h5 {
702 |   font-size: .875em;
703 | }
704 | 
705 | .markdown-body h6 {
706 |   font-size: .85em;
707 |   color: #6a737d;
708 | }
709 | 
710 | .markdown-body ol,
711 | .markdown-body ul {
712 |   padding-left: 2em;
713 | }
714 | 
715 | .markdown-body ol ol,
716 | .markdown-body ol ul,
717 | .markdown-body ul ol,
718 | .markdown-body ul ul {
719 |   margin-top: 0;
720 |   margin-bottom: 0;
721 | }
722 | 
723 | .markdown-body li {
724 |   word-wrap: break-all;
725 | }
726 | 
727 | .markdown-body li>p {
728 |   margin-top: 16px;
729 | }
730 | 
731 | .markdown-body li+li {
732 |   margin-top: .25em;
733 | }
734 | 
735 | .markdown-body dl {
736 |   padding: 0;
737 | }
738 | 
739 | .markdown-body dl dt {
740 |   padding: 0;
741 |   margin-top: 16px;
742 |   font-size: 1em;
743 |   font-style: italic;
744 |   font-weight: 600;
745 | }
746 | 
747 | .markdown-body dl dd {
748 |   padding: 0 16px;
749 |   margin-bottom: 16px;
750 | }
751 | 
752 | .markdown-body table {
753 |   display: block;
754 |   width: 100%;
755 |   overflow: auto;
756 | }
757 | 
758 | .markdown-body table th {
759 |   font-weight: 600;
760 | }
761 | 
762 | .markdown-body table td,
763 | .markdown-body table th {
764 |   padding: 6px 13px;
765 |   border: 1px solid #dfe2e5;
766 | }
767 | 
768 | .markdown-body table tr {
769 |   background-color: #fff;
770 |   border-top: 1px solid #c6cbd1;
771 | }
772 | 
773 | .markdown-body table tr:nth-child(2n) {
774 |   background-color: #f6f8fa;
775 | }
776 | 
777 | .markdown-body img {
778 |   max-width: 100%;
779 |   box-sizing: initial;
780 |   background-color: #fff;
781 | }
782 | 
783 | .markdown-body img[align=right] {
784 |   padding-left: 20px;
785 | }
786 | 
787 | .markdown-body img[align=left] {
788 |   padding-right: 20px;
789 | }
790 | 
791 | .markdown-body code {
792 |   padding: .2em .4em;
793 |   margin: 0;
794 |   font-size: 85%;
795 |   background-color: rgba(27, 31, 35, .05);
796 |   border-radius: 3px;
797 | }
798 | 
799 | .markdown-body pre {
800 |   word-wrap: normal;
801 | }
802 | 
803 | .markdown-body pre>code {
804 |   padding: 0;
805 |   margin: 0;
806 |   font-size: 100%;
807 |   word-break: normal;
808 |   white-space: pre;
809 |   background: transparent;
810 |   border: 0;
811 | }
812 | 
813 | .markdown-body .highlight {
814 |   margin-bottom: 16px;
815 | }
816 | 
817 | .markdown-body .highlight pre {
818 |   margin-bottom: 0;
819 |   word-break: normal;
820 | }
821 | 
822 | .markdown-body .highlight pre,
823 | .markdown-body pre {
824 |   padding: 16px;
825 |   overflow: auto;
826 |   font-size: 85%;
827 |   line-height: 1.45;
828 |   background-color: #f6f8fa;
829 |   border-radius: 3px;
830 | }
831 | 
832 | .markdown-body pre code {
833 |   display: inline;
834 |   max-width: auto;
835 |   padding: 0;
836 |   margin: 0;
837 |   overflow: visible;
838 |   line-height: inherit;
839 |   word-wrap: normal;
840 |   background-color: initial;
841 |   border: 0;
842 | }
843 | 
844 | .markdown-body .commit-tease-sha {
845 |   display: inline-block;
846 |   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
847 |   font-size: 90%;
848 |   color: #444d56;
849 | }
850 | 
851 | .markdown-body .full-commit .btn-outline:not(:disabled):hover {
852 |   color: #005cc5;
853 |   border-color: #005cc5;
854 | }
855 | 
856 | .markdown-body .blob-wrapper {
857 |   overflow-x: auto;
858 |   overflow-y: hidden;
859 | }
860 | 
861 | .markdown-body .blob-wrapper-embedded {
862 |   max-height: 240px;
863 |   overflow-y: auto;
864 | }
865 | 
866 | .markdown-body .blob-num {
867 |   width: 1%;
868 |   min-width: 50px;
869 |   padding-right: 10px;
870 |   padding-left: 10px;
871 |   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
872 |   font-size: 12px;
873 |   line-height: 20px;
874 |   color: rgba(27, 31, 35, .3);
875 |   text-align: right;
876 |   white-space: nowrap;
877 |   vertical-align: top;
878 |   cursor: pointer;
879 |   -webkit-user-select: none;
880 |   -moz-user-select: none;
881 |   -ms-user-select: none;
882 |   user-select: none;
883 | }
884 | 
885 | .markdown-body .blob-num:hover {
886 |   color: rgba(27, 31, 35, .6);
887 | }
888 | 
889 | .markdown-body .blob-num:before {
890 |   content: attr(data-line-number);
891 | }
892 | 
893 | .markdown-body .blob-code {
894 |   position: relative;
895 |   padding-right: 10px;
896 |   padding-left: 10px;
897 |   line-height: 20px;
898 |   vertical-align: top;
899 | }
900 | 
901 | .markdown-body .blob-code-inner {
902 |   overflow: visible;
903 |   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
904 |   font-size: 12px;
905 |   color: #24292e;
906 |   word-wrap: normal;
907 |   white-space: pre;
908 | }
909 | 
910 | .markdown-body .pl-token.active,
911 | .markdown-body .pl-token:hover {
912 |   cursor: pointer;
913 |   background: #ffea7f;
914 | }
915 | 
916 | .markdown-body .tab-size[data-tab-size="1"] {
917 |   -moz-tab-size: 1;
918 |   tab-size: 1;
919 | }
920 | 
921 | .markdown-body .tab-size[data-tab-size="2"] {
922 |   -moz-tab-size: 2;
923 |   tab-size: 2;
924 | }
925 | 
926 | .markdown-body .tab-size[data-tab-size="3"] {
927 |   -moz-tab-size: 3;
928 |   tab-size: 3;
929 | }
930 | 
931 | .markdown-body .tab-size[data-tab-size="4"] {
932 |   -moz-tab-size: 4;
933 |   tab-size: 4;
934 | }
935 | 
936 | .markdown-body .tab-size[data-tab-size="5"] {
937 |   -moz-tab-size: 5;
938 |   tab-size: 5;
939 | }
940 | 
941 | .markdown-body .tab-size[data-tab-size="6"] {
942 |   -moz-tab-size: 6;
943 |   tab-size: 6;
944 | }
945 | 
946 | .markdown-body .tab-size[data-tab-size="7"] {
947 |   -moz-tab-size: 7;
948 |   tab-size: 7;
949 | }
950 | 
951 | .markdown-body .tab-size[data-tab-size="8"] {
952 |   -moz-tab-size: 8;
953 |   tab-size: 8;
954 | }
955 | 
956 | .markdown-body .tab-size[data-tab-size="9"] {
957 |   -moz-tab-size: 9;
958 |   tab-size: 9;
959 | }
960 | 
961 | .markdown-body .tab-size[data-tab-size="10"] {
962 |   -moz-tab-size: 10;
963 |   tab-size: 10;
964 | }
965 | 
966 | .markdown-body .tab-size[data-tab-size="11"] {
967 |   -moz-tab-size: 11;
968 |   tab-size: 11;
969 | }
970 | 
971 | .markdown-body .tab-size[data-tab-size="12"] {
972 |   -moz-tab-size: 12;
973 |   tab-size: 12;
974 | }
975 | 
976 | .markdown-body .task-list-item {
977 |   list-style-type: none;
978 | }
979 | 
980 | .markdown-body .task-list-item+.task-list-item {
981 |   margin-top: 3px;
982 | }
983 | 
984 | .markdown-body .task-list-item input {
985 |   margin: 0 .2em .25em -1.6em;
986 |   vertical-align: middle;
987 | }
988 | 


--------------------------------------------------------------------------------
/src/components/pages/Comments.jsx:
--------------------------------------------------------------------------------
 1 | import { formatDistance } from 'date-fns';
 2 | import React from 'react';
 3 | import ReactMarkdown from 'react-markdown';
 4 | import { useQuery } from 'react-query';
 5 | 
 6 | export default function Comments({ issueNumber }) {
 7 |   const {
 8 |     isLoading,
 9 |     isSuccess,
10 |     data: comments,
11 |   } = useQuery(['comments', issueNumber], fetchComments);
12 | 
13 |   function fetchComments() {
14 |     return fetch(
15 |       `https://api.github.com/repos/facebook/create-react-app/issues/${issueNumber}/comments`
16 |     ).then(response => response.json());
17 |   }
18 | 
19 |   return (
20 |     <>
21 |       {isLoading && <div>Loading...</div>}
22 |       {isSuccess && (
23 |         <>
24 |           {comments.map(comment => (
25 |             <div key={comment.id} className="comment-container">
26 |               <a href={comment.user.html_url}>
27 |                 <img
28 |                   src={comment.user.avatar_url}
29 |                   alt="avatar"
30 |                   className="avatar"
31 |                 />
32 |               </a>
33 |               <div className="comment">
34 |                 <div className="comment-heading">
35 |                   <a href={comment.user.html_url}>{comment.user.login}</a>{' '}
36 |                   commented{' '}
37 |                   {formatDistance(new Date(comment.created_at), new Date(), {
38 |                     addSuffix: true,
39 |                   })}
40 |                 </div>
41 |                 <div className="comment-body markdown-body">
42 |                   <ReactMarkdown children={comment.body} />
43 |                 </div>
44 |               </div>
45 |             </div>
46 |           ))}
47 |         </>
48 |       )}
49 |     </>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/src/components/pages/Details.jsx:
--------------------------------------------------------------------------------
 1 | import { formatDistance } from 'date-fns';
 2 | import React from 'react';
 3 | import ReactMarkdown from 'react-markdown';
 4 | import { useQuery } from 'react-query';
 5 | import { useParams } from 'react-router-dom';
 6 | import Comments from './Comments';
 7 | 
 8 | export default function Details() {
 9 |   const params = useParams();
10 | 
11 |   const {
12 |     isLoading,
13 |     isSuccess,
14 |     data: issue,
15 |   } = useQuery(['issue', params.id], fetchIssue);
16 | 
17 |   function fetchIssue() {
18 |     return fetch(
19 |       `https://api.github.com/repos/facebook/create-react-app/issues/${params.id}`
20 |     ).then(response => response.json());
21 |   }
22 | 
23 |   return (
24 |     <div className="comments-container">
25 |       {isLoading && <div>Loading...</div>}
26 |       {isSuccess && (
27 |         <>
28 |           <h2>
29 |             {issue.title} <span>#{issue.number}</span>
30 |           </h2>
31 |           <div className="issue-details">
32 |             <a href={issue.user.html_url}>{issue.user.login}</a> opened this
33 |             issue{' '}
34 |             {formatDistance(new Date(issue.created_at), new Date(), {
35 |               addSuffix: true,
36 |             })}
37 |           </div>
38 |         </>
39 |       )}
40 | 
41 |       {isSuccess && (
42 |         <div className="comment-container">
43 |           <a href={issue.user.html_url}>
44 |             <img src={issue.user.avatar_url} alt="avatar" className="avatar" />
45 |           </a>
46 |           <div className="comment">
47 |             <div className="comment-heading">
48 |               <a href={issue.user.html_url}>mdaj06</a> commented{' '}
49 |               {formatDistance(new Date(issue.created_at), new Date(), {
50 |                 addSuffix: true,
51 |               })}
52 |             </div>
53 |             <div className="comment-body markdown-body">
54 |               <ReactMarkdown children={issue.body} />
55 |             </div>
56 |           </div>
57 |         </div>
58 |       )}
59 | 
60 |       <div className="border"></div>
61 |       {isSuccess && <Comments issueNumber={issue.number} />}
62 |     </div>
63 |   );
64 | }
65 | 


--------------------------------------------------------------------------------
/src/components/pages/IconClosed.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function IconClosed() {
 4 |   return (
 5 |     <svg
 6 |       className="closed"
 7 |       viewBox="0 0 16 16"
 8 |       version="1.1"
 9 |       width="16"
10 |       height="16"
11 |       aria-hidden="true"
12 |     >
13 |       <path d="M11.28 6.78a.75.75 0 00-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l3.5-3.5z"></path>
14 |       <path
15 |         fillRule="evenodd"
16 |         d="M16 8A8 8 0 110 8a8 8 0 0116 0zm-1.5 0a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"
17 |       ></path>
18 |     </svg>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/pages/IconOpen.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function IconOpen() {
 4 |   return (
 5 |     <svg
 6 |       className="open"
 7 |       viewBox="0 0 16 16"
 8 |       version="1.1"
 9 |       width="16"
10 |       height="16"
11 |       aria-hidden="true"
12 |     >
13 |       <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
14 |       <path
15 |         fillRule="evenodd"
16 |         d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
17 |       ></path>
18 |     </svg>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/pages/Issues.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { useQuery } from 'react-query';
  3 | import IconOpen from './IconOpen';
  4 | import IconClosed from './IconClosed';
  5 | import { formatDistance } from 'date-fns';
  6 | import { Link } from 'react-router-dom';
  7 | 
  8 | export default function Contact() {
  9 |   const [filter, setFilter] = useState('open');
 10 | 
 11 |   const {
 12 |     isLoading,
 13 |     isSuccess,
 14 |     data: issues,
 15 |   } = useQuery(['issues', filter], fetchIssues);
 16 | 
 17 |   const { isSuccess: isSuccessIssuesOpen, data: issuesOpen } = useQuery(
 18 |     'issuesOpen',
 19 |     fetchIssuesOpen
 20 |   );
 21 | 
 22 |   const { isSuccess: isSuccessIssuesClosed, data: issuesClosed } = useQuery(
 23 |     'issuesClosed',
 24 |     fetchIssuesClosed
 25 |   );
 26 | 
 27 |   function fetchIssues() {
 28 |     return fetch(
 29 |       `https://api.github.com/repos/facebook/create-react-app/issues?per_page=10&state=${filter}`
 30 |     ).then(response => response.json());
 31 |   }
 32 | 
 33 |   function fetchIssuesOpen() {
 34 |     return fetch(
 35 |       `https://api.github.com/search/issues?q=repo:facebook/create-react-app+type:issue+state:open&per_page=1`
 36 |     ).then(response => response.json());
 37 |   }
 38 | 
 39 |   function fetchIssuesClosed() {
 40 |     return fetch(
 41 |       `https://api.github.com/search/issues?q=repo:facebook/create-react-app+type:issue+state:closed&per_page=1`
 42 |     ).then(response => response.json());
 43 |   }
 44 | 
 45 |   return (
 46 |     <div>
 47 |       {isLoading && <div>Loading...</div>}
 48 | 
 49 |       {isSuccess && (
 50 |         <div className="issues-container">
 51 |           <div className="issues-heading">
 52 |             <a href="https://github.com/facebook/create-react-app">
 53 |               facebook / create-react-app
 54 |             </a>
 55 |             <div className="open-closed-buttons">
 56 |               <button onClick={() => setFilter('open')}>
 57 |                 <IconOpen />
 58 |                 <span className={filter === 'open' ? 'font-bold' : ''}>
 59 |                   {isSuccessIssuesOpen && (
 60 |                     <span>{issuesOpen.total_count} Open</span>
 61 |                   )}
 62 |                 </span>
 63 |               </button>
 64 |               <button onClick={() => setFilter('closed')}>
 65 |                 <IconClosed />
 66 |                 <span className={filter === 'closed' ? 'font-bold' : ''}>
 67 |                   {isSuccessIssuesClosed && (
 68 |                     <span>{issuesClosed.total_count} Closed</span>
 69 |                   )}
 70 |                 </span>
 71 |               </button>
 72 |             </div>
 73 |           </div>
 74 |           <div className="issues-table">
 75 |             {issues.map(issue => (
 76 |               <div key={issue.number} className="issues-entry">
 77 |                 <div className="issues-entry-title-container">
 78 |                   {issue.state === 'open' && <IconOpen />}
 79 |                   {issue.state === 'closed' && <IconClosed />}
 80 |                   <div className="issues-title">
 81 |                     <Link to={`/issues/${issue.number}`}>{issue.title}</Link>
 82 |                     <div className="issues-title-details">
 83 |                       #{issue.number} opened{' '}
 84 |                       {formatDistance(new Date(issue.created_at), new Date(), {
 85 |                         addSuffix: true,
 86 |                       })}{' '}
 87 |                       by {issue.user.login}
 88 |                     </div>
 89 |                   </div>
 90 |                 </div>
 91 |                 {issue.comments > 0 && (
 92 |                   <Link
 93 |                     to={`/issues/${issue.number}`}
 94 |                     className="comments-count-container"
 95 |                   >
 96 |                     <svg
 97 |                       className="octicon octicon-comment v-align-middle"
 98 |                       viewBox="0 0 16 16"
 99 |                       version="1.1"
100 |                       width="16"
101 |                       height="16"
102 |                       aria-hidden="true"
103 |                     >
104 |                       <path
105 |                         fill-rule="evenodd"
106 |                         d="M2.75 2.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h4.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25H2.75zM1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0113.25 12H9.06l-2.573 2.573A1.457 1.457 0 014 13.543V12H2.75A1.75 1.75 0 011 10.25v-7.5z"
107 |                       ></path>
108 |                     </svg>
109 |                     <div className="comments-count">{issue.comments}</div>
110 |                   </Link>
111 |                 )}
112 |               </div>
113 |             ))}
114 |           </div>
115 |         </div>
116 |       )}
117 |     </div>
118 |   );
119 | }
120 | 


--------------------------------------------------------------------------------
/src/components/pages/NoMatch.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | export default function NoMatch() {
4 |   return <div className="container">404 Page Not Found!</div>;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/pages/api.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import Reddit from '../api/Reddit';
 3 | import Joke from '../api/Joke';
 4 | 
 5 | export default function About() {
 6 |   const [redditVisible, setRedditVisible] = useState(false);
 7 |   const [jokeVisible, setJokeVisible] = useState(false);
 8 | 
 9 |   return (
10 |     <div>
11 |       <div className="buttons">
12 |         <button
13 |           className="api-button"
14 |           onClick={() => setRedditVisible(!redditVisible)}
15 |         >
16 |           Show Reddit Content
17 |         </button>
18 |         <button
19 |           className="api-button"
20 |           onClick={() => setJokeVisible(!jokeVisible)}
21 |         >
22 |           Show Joke Content
23 |         </button>
24 |       </div>
25 |       <div className="content">
26 |         {redditVisible && (
27 |           <div className="reddit-content">
28 |             <Reddit />
29 |           </div>
30 |         )}
31 |         {jokeVisible && (
32 |           <div className="joke-content">
33 |             <Joke />
34 |           </div>
35 |         )}
36 |       </div>
37 |     </div>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/src/context/TodosContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | 
3 | export const TodosContext = createContext();
4 | 


--------------------------------------------------------------------------------
/src/hooks/useLocalStorage.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | 
 3 | function useLocalStorage(key, initialValue) {
 4 |   const [value, setValue] = useState(() => {
 5 |     const item = localStorage.getItem(key);
 6 |     return item ? JSON.parse(item) : initialValue;
 7 |   });
 8 | 
 9 |   useEffect(() => {
10 |     localStorage.setItem(key, JSON.stringify(value));
11 |   }, [key, value]);
12 |   return [value, setValue];
13 | }
14 | 
15 | export default useLocalStorage;
16 | 


--------------------------------------------------------------------------------
/src/hooks/useToggle.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | function useToggle(initialState = true) {
 4 |   const [visible, setVisible] = useState(initialState);
 5 | 
 6 |   function toggle() {
 7 |     setVisible(prevVisible => !prevVisible);
 8 |   }
 9 |   return [visible, toggle];
10 | }
11 | 
12 | export default useToggle;
13 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client';
 3 | import './index.css';
 4 | import Root from './components/Root';
 5 | import { QueryClient, QueryClientProvider } from 'react-query';
 6 | import { ReactQueryDevtools } from 'react-query/devtools';
 7 | 
 8 | const root = document.getElementById('root');
 9 | const queryClient = new QueryClient();
10 | createRoot(root).render(
11 |   <React.StrictMode>
12 |     <QueryClientProvider client={queryClient}>
13 |       <Root />
14 |       <ReactQueryDevtools />
15 |     </QueryClientProvider>
16 |   </React.StrictMode>
17 | );
18 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | 	margin: 0;
20 | 	padding: 0;
21 | 	border: 0;
22 | 	font-size: 100%;
23 | 	font: inherit;
24 | 	vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | 	display: block;
30 | }
31 | body {
32 | 	line-height: 1;
33 | }
34 | ol, ul {
35 | 	list-style: none;
36 | }
37 | blockquote, q {
38 | 	quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | 	content: '';
43 | 	content: none;
44 | }
45 | table {
46 | 	border-collapse: collapse;
47 | 	border-spacing: 0;
48 | }
49 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


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