├── 1. Setup Our React Project - Part 2
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── index.css
    │   └── index.js
├── 10. Todo Component - Part 11
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 11. Edit Todo Component - Part 12
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 12. React Context - Part 13
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 13. useEffect hook & TodoForm Update - Part 14
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 14. Firebase Firestore & Custom Hooks - Part 15
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 15. Run effect once & firestore quota exceeded - Part 16
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 16. Add a new todo or project to firestore database - Part 17
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 17. Next 7 days Component - Part 18
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 18. Filter Todos - Part 19
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 19. Delete Todo or Project from firestore database - Part 20
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 2. Create Functional Component - Part 3
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Header.js
    │       ├── Main.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Todo.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── index.css
    │   └── index.js
├── 20. Rename a Project - Part 21
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 21. Check & Repeat a Todo - Part 22
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 22. Edit a Todo - Part 23
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 23. Animations With React Spring - Part 24
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── TodoForm.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   ├── context
    │       └── index.js
    │   ├── firebase
    │       └── index.js
    │   ├── hooks
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 3. Style Our React App - Part 4
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── Todos.js
    │       └── User.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 4. Create a Modal - Part 5
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── Todos.js
    │       └── User.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 5. Controlled Component - Part 6
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── Todos.js
    │       └── User.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 6. Array map in React - Part 7
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 7. Projects Component - Part 8
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 8. Add New Project & Rename Project Components - Part 9
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
├── 9. Todos Component - Part 10
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── components
    │       ├── AddNewProject.js
    │       ├── AddNewTodo.js
    │       ├── Calendar.js
    │       ├── EditTodo.js
    │       ├── Main.js
    │       ├── Modal.js
    │       ├── Next7Days.js
    │       ├── Project.js
    │       ├── ProjectForm.js
    │       ├── Projects.js
    │       ├── RenameProject.js
    │       ├── Sidebar.js
    │       ├── Todo.js
    │       ├── Todos.js
    │       └── User.js
    │   ├── constants
    │       └── index.js
    │   └── images
    │       ├── bg.jpg
    │       └── logo.jpg
└── README.md


/1. Setup Our React Project - Part 2/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.9",
 7 |     "@testing-library/react": "^11.2.5",
 8 |     "@testing-library/user-event": "^12.7.1",
 9 |     "react": "^17.0.1",
10 |     "react-dom": "^17.0.1",
11 |     "react-scripts": "4.0.2",
12 |     "web-vitals": "^1.1.0"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/1. Setup Our React Project - Part 2/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/1. Setup Our React Project - Part 2/src/App.css:
--------------------------------------------------------------------------------
1 | /* CSS */


--------------------------------------------------------------------------------
/1. Setup Our React Project - Part 2/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | 
 3 | function App() {
 4 |   return (
 5 |     <div>
 6 |       Hi
 7 |     </div>
 8 |   );
 9 | }
10 | 
11 | export default App;
12 | 


--------------------------------------------------------------------------------
/1. Setup Our React Project - Part 2/src/index.css:
--------------------------------------------------------------------------------
1 | /* CSS */


--------------------------------------------------------------------------------
/1. Setup Our React Project - Part 2/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import reactDom from 'react-dom'
3 | import App from './App'
4 | 
5 | reactDom.render(
6 |     <App/>
7 |     , document.getElementById('root')
8 | )


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@date-io/date-fns": "^1.3.13",
 7 |     "@material-ui/core": "^4.11.3",
 8 |     "@material-ui/pickers": "^3.2.10",
 9 |     "@testing-library/jest-dom": "^5.11.9",
10 |     "@testing-library/react": "^11.2.5",
11 |     "@testing-library/user-event": "^12.7.1",
12 |     "bootstrap-icons": "^1.4.0",
13 |     "date-fns": "^2.17.0",
14 |     "react": "^17.0.1",
15 |     "react-bootstrap-icons": "^1.3.0",
16 |     "react-dom": "^17.0.1",
17 |     "react-scripts": "4.0.2",
18 |     "web-vitals": "^1.1.0"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import Modal from './Modal'
 3 | import ProjectForm from './ProjectForm'
 4 | import { Plus } from 'react-bootstrap-icons'
 5 | 
 6 | function AddNewProject(){
 7 |     const [showModal, setShowModal] = useState(false)
 8 |     const [projectName, setProjectName] = useState('')
 9 |     function handleSubmit(e){
10 | 
11 |     }
12 | 
13 |     return (
14 |         <div className='AddNewProject'>
15 |             <div className="add-button">
16 |                 <span onClick={() => setShowModal(true)}>
17 |                     <Plus size="20" />
18 |                 </span>
19 |             </div>
20 |             <Modal showModal={showModal} setShowModal={setShowModal}>
21 |                 <ProjectForm
22 |                     handleSubmit={handleSubmit}
23 |                     heading='New project!'
24 |                     value={projectName}
25 |                     setValue={setProjectName}
26 |                     setShowModal={setShowModal}
27 |                     confirmButtonText='+ Add Project'
28 |                 />
29 |             </Modal>
30 |         </div>
31 |     )
32 | }
33 | 
34 | export default AddNewProject


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { CalendarDate, CaretUp } from 'react-bootstrap-icons'
 3 | import { calendarItems } from '../constants'
 4 | 
 5 | function Calendar(){
 6 |     
 7 |     return (
 8 |         <div className='Calendar'>
 9 |             <div className="header">
10 |                 <div className="title">
11 |                     <CalendarDate size="18"/>
12 |                     <p>Calendar</p>
13 |                 </div>
14 |                 <div className="btns">
15 |                     <span>
16 |                         <CaretUp size="20" />
17 |                     </span>
18 |                 </div>
19 |             </div>
20 |             <div className="items">
21 |                 {
22 |                     calendarItems.map( item => 
23 |                         <div className="item" key={item}>
24 |                             {item}
25 |                         </div>
26 |                     )
27 |                 }
28 |             </div>
29 |         </div>
30 |     )
31 | }
32 | 
33 | export default Calendar


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/EditTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function EditTodo(){
 4 | 
 5 |     return (
 6 |         <div className='EditTodo'>
 7 |             EditTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default EditTodo


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/10. Todo Component - Part 11/src/images/bg.jpg


--------------------------------------------------------------------------------
/10. Todo Component - Part 11/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/10. Todo Component - Part 11/src/images/logo.jpg


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@date-io/date-fns": "^1.3.13",
 7 |     "@material-ui/core": "^4.11.3",
 8 |     "@material-ui/pickers": "^3.2.10",
 9 |     "@testing-library/jest-dom": "^5.11.9",
10 |     "@testing-library/react": "^11.2.5",
11 |     "@testing-library/user-event": "^12.7.1",
12 |     "bootstrap-icons": "^1.4.0",
13 |     "date-fns": "^2.17.0",
14 |     "react": "^17.0.1",
15 |     "react-bootstrap-icons": "^1.3.0",
16 |     "react-dom": "^17.0.1",
17 |     "react-scripts": "4.0.2",
18 |     "web-vitals": "^1.1.0"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import Modal from './Modal'
 3 | import ProjectForm from './ProjectForm'
 4 | import { Plus } from 'react-bootstrap-icons'
 5 | 
 6 | function AddNewProject(){
 7 |     const [showModal, setShowModal] = useState(false)
 8 |     const [projectName, setProjectName] = useState('')
 9 |     function handleSubmit(e){
10 | 
11 |     }
12 | 
13 |     return (
14 |         <div className='AddNewProject'>
15 |             <div className="add-button">
16 |                 <span onClick={() => setShowModal(true)}>
17 |                     <Plus size="20" />
18 |                 </span>
19 |             </div>
20 |             <Modal showModal={showModal} setShowModal={setShowModal}>
21 |                 <ProjectForm
22 |                     handleSubmit={handleSubmit}
23 |                     heading='New project!'
24 |                     value={projectName}
25 |                     setValue={setProjectName}
26 |                     setShowModal={setShowModal}
27 |                     confirmButtonText='+ Add Project'
28 |                 />
29 |             </Modal>
30 |         </div>
31 |     )
32 | }
33 | 
34 | export default AddNewProject


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { CalendarDate, CaretUp } from 'react-bootstrap-icons'
 3 | import { calendarItems } from '../constants'
 4 | 
 5 | function Calendar(){
 6 |     
 7 |     return (
 8 |         <div className='Calendar'>
 9 |             <div className="header">
10 |                 <div className="title">
11 |                     <CalendarDate size="18"/>
12 |                     <p>Calendar</p>
13 |                 </div>
14 |                 <div className="btns">
15 |                     <span>
16 |                         <CaretUp size="20" />
17 |                     </span>
18 |                 </div>
19 |             </div>
20 |             <div className="items">
21 |                 {
22 |                     calendarItems.map( item => 
23 |                         <div className="item" key={item}>
24 |                             {item}
25 |                         </div>
26 |                     )
27 |                 }
28 |             </div>
29 |         </div>
30 |     )
31 | }
32 | 
33 | export default Calendar


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/11. Edit Todo Component - Part 12/src/images/bg.jpg


--------------------------------------------------------------------------------
/11. Edit Todo Component - Part 12/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/11. Edit Todo Component - Part 12/src/images/logo.jpg


--------------------------------------------------------------------------------
/12. React Context - Part 13/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@date-io/date-fns": "^1.3.13",
 7 |     "@material-ui/core": "^4.11.3",
 8 |     "@material-ui/pickers": "^3.2.10",
 9 |     "@testing-library/jest-dom": "^5.11.9",
10 |     "@testing-library/react": "^11.2.5",
11 |     "@testing-library/user-event": "^12.7.1",
12 |     "bootstrap-icons": "^1.4.0",
13 |     "date-fns": "^2.17.0",
14 |     "react": "^17.0.1",
15 |     "react-bootstrap-icons": "^1.3.0",
16 |     "react-dom": "^17.0.1",
17 |     "react-scripts": "4.0.2",
18 |     "web-vitals": "^1.1.0"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/12. React Context - Part 13/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import Modal from './Modal'
 3 | import ProjectForm from './ProjectForm'
 4 | import { Plus } from 'react-bootstrap-icons'
 5 | 
 6 | function AddNewProject(){
 7 |     const [showModal, setShowModal] = useState(false)
 8 |     const [projectName, setProjectName] = useState('')
 9 |     function handleSubmit(e){
10 | 
11 |     }
12 | 
13 |     return (
14 |         <div className='AddNewProject'>
15 |             <div className="add-button">
16 |                 <span onClick={() => setShowModal(true)}>
17 |                     <Plus size="20" />
18 |                 </span>
19 |             </div>
20 |             <Modal showModal={showModal} setShowModal={setShowModal}>
21 |                 <ProjectForm
22 |                     handleSubmit={handleSubmit}
23 |                     heading='New project!'
24 |                     value={projectName}
25 |                     setValue={setProjectName}
26 |                     setShowModal={setShowModal}
27 |                     confirmButtonText='+ Add Project'
28 |                 />
29 |             </Modal>
30 |         </div>
31 |     )
32 | }
33 | 
34 | export default AddNewProject


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | 
 3 | const TodoContext = createContext()
 4 | 
 5 | function TodoContextProvider({children}){
 6 |     const defaultProject = 'today'
 7 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 8 | 
 9 |     return (
10 |         <TodoContext.Provider
11 |             value={
12 |                 {
13 |                     selectedProject,
14 |                     setSelectedProject
15 |                 }
16 |             }
17 |         >
18 |             {children}
19 |         </TodoContext.Provider>
20 |     )
21 | }
22 | 
23 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/12. React Context - Part 13/src/images/bg.jpg


--------------------------------------------------------------------------------
/12. React Context - Part 13/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/12. React Context - Part 13/src/images/logo.jpg


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | 
 3 | const TodoContext = createContext()
 4 | 
 5 | function TodoContextProvider({children}){
 6 |     const defaultProject = 'today'
 7 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 8 | 
 9 |     return (
10 |         <TodoContext.Provider
11 |             value={
12 |                 {
13 |                     selectedProject,
14 |                     setSelectedProject
15 |                 }
16 |             }
17 |         >
18 |             {children}
19 |         </TodoContext.Provider>
20 |     )
21 | }
22 | 
23 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/13. useEffect hook & TodoForm Update - Part 14/src/images/bg.jpg


--------------------------------------------------------------------------------
/13. useEffect hook & TodoForm Update - Part 14/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/13. useEffect hook & TodoForm Update - Part 14/src/images/logo.jpg


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | import { useTodos, useProjects } from '../hooks'
 3 | 
 4 | const TodoContext = createContext()
 5 | 
 6 | function TodoContextProvider({children}){
 7 |     const defaultProject = 'today'
 8 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 9 | 
10 |     const todos = useTodos()
11 |     const projects = useProjects(todos)
12 | 
13 |     return (
14 |         <TodoContext.Provider
15 |             value={
16 |                 {
17 |                     selectedProject,
18 |                     setSelectedProject,
19 |                     todos,
20 |                     projects
21 |                 }
22 |             }
23 |         >
24 |             {children}
25 |         </TodoContext.Provider>
26 |     )
27 | }
28 | 
29 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     // paste your firebase config here
 6 | }
 7 | 
 8 | firebase.initializeApp(firebaseConfig)
 9 | 
10 | export default firebase


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/14. Firebase Firestore & Custom Hooks - Part 15/src/images/bg.jpg


--------------------------------------------------------------------------------
/14. Firebase Firestore & Custom Hooks - Part 15/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/14. Firebase Firestore & Custom Hooks - Part 15/src/images/logo.jpg


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | import { useTodos, useProjects } from '../hooks'
 3 | 
 4 | const TodoContext = createContext()
 5 | 
 6 | function TodoContextProvider({children}){
 7 |     const defaultProject = 'today'
 8 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 9 | 
10 |     const todos = useTodos()
11 |     const projects = useProjects(todos)
12 | 
13 |     return (
14 |         <TodoContext.Provider
15 |             value={
16 |                 {
17 |                     selectedProject,
18 |                     setSelectedProject,
19 |                     todos,
20 |                     projects
21 |                 }
22 |             }
23 |         >
24 |             {children}
25 |         </TodoContext.Provider>
26 |     )
27 | }
28 | 
29 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     apiKey: "AIzaSyBZMPl1Huw4zI1qbqLR5m5QRMKTzIeT-40",
 6 |     authDomain: "todo-app-54dd4.firebaseapp.com",
 7 |     projectId: "todo-app-54dd4",
 8 |     storageBucket: "todo-app-54dd4.appspot.com",
 9 |     messagingSenderId: "770504022143",
10 |     appId: "1:770504022143:web:3415b9ed582bd72e35874a"
11 |   }
12 | 
13 | firebase.initializeApp(firebaseConfig)
14 | 
15 | export default firebase


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/15. Run effect once & firestore quota exceeded - Part 16/src/images/bg.jpg


--------------------------------------------------------------------------------
/15. Run effect once & firestore quota exceeded - Part 16/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/15. Run effect once & firestore quota exceeded - Part 16/src/images/logo.jpg


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | import { useTodos, useProjects } from '../hooks'
 3 | 
 4 | const TodoContext = createContext()
 5 | 
 6 | function TodoContextProvider({children}){
 7 |     const defaultProject = 'today'
 8 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 9 | 
10 |     const todos = useTodos()
11 |     const projects = useProjects(todos)
12 | 
13 |     return (
14 |         <TodoContext.Provider
15 |             value={
16 |                 {
17 |                     selectedProject,
18 |                     setSelectedProject,
19 |                     todos,
20 |                     projects
21 |                 }
22 |             }
23 |         >
24 |             {children}
25 |         </TodoContext.Provider>
26 |     )
27 | }
28 | 
29 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     apiKey: "AIzaSyBZMPl1Huw4zI1qbqLR5m5QRMKTzIeT-40",
 6 |     authDomain: "todo-app-54dd4.firebaseapp.com",
 7 |     projectId: "todo-app-54dd4",
 8 |     storageBucket: "todo-app-54dd4.appspot.com",
 9 |     messagingSenderId: "770504022143",
10 |     appId: "1:770504022143:web:3415b9ed582bd72e35874a"
11 |   }
12 | 
13 | firebase.initializeApp(firebaseConfig)
14 | 
15 | export default firebase


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/16. Add a new todo or project to firestore database - Part 17/src/images/bg.jpg


--------------------------------------------------------------------------------
/16. Add a new todo or project to firestore database - Part 17/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/16. Add a new todo or project to firestore database - Part 17/src/images/logo.jpg


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | import { useTodos, useProjects } from '../hooks'
 3 | 
 4 | const TodoContext = createContext()
 5 | 
 6 | function TodoContextProvider({children}){
 7 |     const defaultProject = 'today'
 8 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 9 | 
10 |     const todos = useTodos()
11 |     const projects = useProjects(todos)
12 | 
13 |     return (
14 |         <TodoContext.Provider
15 |             value={
16 |                 {
17 |                     selectedProject,
18 |                     setSelectedProject,
19 |                     todos,
20 |                     projects
21 |                 }
22 |             }
23 |         >
24 |             {children}
25 |         </TodoContext.Provider>
26 |     )
27 | }
28 | 
29 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     apiKey: "AIzaSyBZMPl1Huw4zI1qbqLR5m5QRMKTzIeT-40",
 6 |     authDomain: "todo-app-54dd4.firebaseapp.com",
 7 |     projectId: "todo-app-54dd4",
 8 |     storageBucket: "todo-app-54dd4.appspot.com",
 9 |     messagingSenderId: "770504022143",
10 |     appId: "1:770504022143:web:3415b9ed582bd72e35874a"
11 |   }
12 | 
13 | firebase.initializeApp(firebaseConfig)
14 | 
15 | export default firebase


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/17. Next 7 days Component - Part 18/src/images/bg.jpg


--------------------------------------------------------------------------------
/17. Next 7 days Component - Part 18/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/17. Next 7 days Component - Part 18/src/images/logo.jpg


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | import { useTodos, useProjects, useFilterTodos } from '../hooks'
 3 | 
 4 | const TodoContext = createContext()
 5 | 
 6 | function TodoContextProvider({children}){
 7 |     const defaultProject = 'today'
 8 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 9 | 
10 |     const todos = useTodos()
11 |     const projects = useProjects(todos)
12 |     const filteredTodos = useFilterTodos(todos, selectedProject)
13 | 
14 |     return (
15 |         <TodoContext.Provider
16 |             value={
17 |                 {
18 |                     selectedProject,
19 |                     setSelectedProject,
20 |                     todos : filteredTodos,
21 |                     projects
22 |                 }
23 |             }
24 |         >
25 |             {children}
26 |         </TodoContext.Provider>
27 |     )
28 | }
29 | 
30 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     apiKey: "AIzaSyBZMPl1Huw4zI1qbqLR5m5QRMKTzIeT-40",
 6 |     authDomain: "todo-app-54dd4.firebaseapp.com",
 7 |     projectId: "todo-app-54dd4",
 8 |     storageBucket: "todo-app-54dd4.appspot.com",
 9 |     messagingSenderId: "770504022143",
10 |     appId: "1:770504022143:web:3415b9ed582bd72e35874a"
11 |   }
12 | 
13 | firebase.initializeApp(firebaseConfig)
14 | 
15 | export default firebase


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/18. Filter Todos - Part 19/src/images/bg.jpg


--------------------------------------------------------------------------------
/18. Filter Todos - Part 19/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/18. Filter Todos - Part 19/src/images/logo.jpg


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | import { useTodos, useProjects, useFilterTodos } from '../hooks'
 3 | 
 4 | const TodoContext = createContext()
 5 | 
 6 | function TodoContextProvider({children}){
 7 |     const defaultProject = 'today'
 8 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 9 | 
10 |     const todos = useTodos()
11 |     const projects = useProjects(todos)
12 |     const filteredTodos = useFilterTodos(todos, selectedProject)
13 | 
14 |     return (
15 |         <TodoContext.Provider
16 |             value={
17 |                 {
18 |                     defaultProject,
19 |                     selectedProject,
20 |                     setSelectedProject,
21 |                     todos : filteredTodos,
22 |                     projects
23 |                 }
24 |             }
25 |         >
26 |             {children}
27 |         </TodoContext.Provider>
28 |     )
29 | }
30 | 
31 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     apiKey: "AIzaSyBZMPl1Huw4zI1qbqLR5m5QRMKTzIeT-40",
 6 |     authDomain: "todo-app-54dd4.firebaseapp.com",
 7 |     projectId: "todo-app-54dd4",
 8 |     storageBucket: "todo-app-54dd4.appspot.com",
 9 |     messagingSenderId: "770504022143",
10 |     appId: "1:770504022143:web:3415b9ed582bd72e35874a"
11 |   }
12 | 
13 | firebase.initializeApp(firebaseConfig)
14 | 
15 | export default firebase


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/19. Delete Todo or Project from firestore database - Part 20/src/images/bg.jpg


--------------------------------------------------------------------------------
/19. Delete Todo or Project from firestore database - Part 20/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/19. Delete Todo or Project from firestore database - Part 20/src/images/logo.jpg


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.9",
 7 |     "@testing-library/react": "^11.2.5",
 8 |     "@testing-library/user-event": "^12.7.1",
 9 |     "react": "^17.0.1",
10 |     "react-dom": "^17.0.1",
11 |     "react-scripts": "4.0.2",
12 |     "web-vitals": "^1.1.0"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/App.css:
--------------------------------------------------------------------------------
1 | /* CSS */


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Header from './components/Header'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Header>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Header>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function AddNewProject(){
 4 | 
 5 |     return (
 6 |         <div className='AddNewProject'>
 7 |             AddNewProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default AddNewProject


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/AddNewTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function AddNewTodo(){
 4 | 
 5 |     return (
 6 |         <div className='AddNewTodo'>
 7 |             AddNewTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default AddNewTodo


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Calendar(){
 4 | 
 5 |     return (
 6 |         <div className='Calendar'>
 7 |             Calendar
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Calendar


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/EditTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function EditTodo(){
 4 | 
 5 |     return (
 6 |         <div className='EditTodo'>
 7 |             EditTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default EditTodo


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Header({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Header'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Header


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/Project.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import RenameProject from './RenameProject'
 3 | 
 4 | function Project(){
 5 | 
 6 |     return (
 7 |         <div className='Project'>
 8 |             <RenameProject />
 9 |         </div>
10 |     )
11 | }
12 | 
13 | export default Project


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/Projects.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AddNewProject from './AddNewProject'
 3 | import Project from './Project'
 4 | 
 5 | function Projects(){
 6 | 
 7 |     return (
 8 |         <div className='Projects'>
 9 |             <AddNewProject />
10 |             <Project />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Projects


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function RenameProject(){
 4 | 
 5 |     return (
 6 |         <div className='RenameProject'>
 7 |             RenameProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default RenameProject


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Todo(){
 4 | 
 5 |     return (
 6 |         <div className='Todo'>
 7 |             Todo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Todo


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | 
 5 | function Todos(){
 6 | 
 7 |     return (
 8 |         <div className='Todos'>
 9 |             <Todo />
10 |             <Next7Days />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Todos


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function User(){
 4 | 
 5 |     return (
 6 |         <div className='User'>
 7 |             User
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default User


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/index.css:
--------------------------------------------------------------------------------
1 | /* CSS */


--------------------------------------------------------------------------------
/2. Create Functional Component - Part 3/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import reactDom from 'react-dom'
3 | import App from './App'
4 | 
5 | reactDom.render(
6 |     <App/>
7 |     , document.getElementById('root')
8 | )


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | import { useTodos, useProjects, useFilterTodos } from '../hooks'
 3 | 
 4 | const TodoContext = createContext()
 5 | 
 6 | function TodoContextProvider({children}){
 7 |     const defaultProject = 'today'
 8 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 9 | 
10 |     const todos = useTodos()
11 |     const projects = useProjects(todos)
12 |     const filteredTodos = useFilterTodos(todos, selectedProject)
13 | 
14 |     return (
15 |         <TodoContext.Provider
16 |             value={
17 |                 {
18 |                     defaultProject,
19 |                     selectedProject,
20 |                     setSelectedProject,
21 |                     todos : filteredTodos,
22 |                     projects
23 |                 }
24 |             }
25 |         >
26 |             {children}
27 |         </TodoContext.Provider>
28 |     )
29 | }
30 | 
31 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     apiKey: "AIzaSyBZMPl1Huw4zI1qbqLR5m5QRMKTzIeT-40",
 6 |     authDomain: "todo-app-54dd4.firebaseapp.com",
 7 |     projectId: "todo-app-54dd4",
 8 |     storageBucket: "todo-app-54dd4.appspot.com",
 9 |     messagingSenderId: "770504022143",
10 |     appId: "1:770504022143:web:3415b9ed582bd72e35874a"
11 |   }
12 | 
13 | firebase.initializeApp(firebaseConfig)
14 | 
15 | export default firebase


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/20. Rename a Project - Part 21/src/images/bg.jpg


--------------------------------------------------------------------------------
/20. Rename a Project - Part 21/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/20. Rename a Project - Part 21/src/images/logo.jpg


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/context/index.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState } from 'react'
 2 | import { useTodos, useProjects, useFilterTodos, useProjectsWithStats } from '../hooks'
 3 | 
 4 | const TodoContext = createContext()
 5 | 
 6 | function TodoContextProvider({children}){
 7 |     const defaultProject = 'today'
 8 |     const [selectedProject, setSelectedProject] = useState(defaultProject)
 9 | 
10 |     const todos = useTodos()
11 |     const projects = useProjects()
12 |     const projectsWithStats = useProjectsWithStats(projects, todos)
13 |     const filteredTodos = useFilterTodos(todos, selectedProject)
14 | 
15 |     return (
16 |         <TodoContext.Provider
17 |             value={
18 |                 {
19 |                     defaultProject,
20 |                     selectedProject,
21 |                     setSelectedProject,
22 |                     todos : filteredTodos,
23 |                     projects : projectsWithStats
24 |                 }
25 |             }
26 |         >
27 |             {children}
28 |         </TodoContext.Provider>
29 |     )
30 | }
31 | 
32 | export { TodoContextProvider, TodoContext }


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     apiKey: "AIzaSyBZMPl1Huw4zI1qbqLR5m5QRMKTzIeT-40",
 6 |     authDomain: "todo-app-54dd4.firebaseapp.com",
 7 |     projectId: "todo-app-54dd4",
 8 |     storageBucket: "todo-app-54dd4.appspot.com",
 9 |     messagingSenderId: "770504022143",
10 |     appId: "1:770504022143:web:3415b9ed582bd72e35874a"
11 |   }
12 | 
13 | firebase.initializeApp(firebaseConfig)
14 | 
15 | export default firebase


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/21. Check & Repeat a Todo - Part 22/src/images/bg.jpg


--------------------------------------------------------------------------------
/21. Check & Repeat a Todo - Part 22/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/21. Check & Repeat a Todo - Part 22/src/images/logo.jpg


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useEffect, useRef } from 'react'
 2 | import { TodoContext } from '../context'
 3 | 
 4 | function Sidebar({ children }){
 5 |     // CONTEXT
 6 |     const { setSelectedTodo } = useContext(TodoContext)
 7 | 
 8 |     // REF
 9 |     const sidebarRef = useRef()
10 | 
11 |     useEffect(() => {
12 |         document.addEventListener('click', handleClick)
13 | 
14 |         return () => document.removeEventListener('click', handleClick)
15 |     })
16 | 
17 |     const handleClick = e => {
18 |         if(e.target === sidebarRef.current || sidebarRef.current.contains(e.target)){
19 |             setSelectedTodo(undefined)
20 |         }
21 |     }
22 | 
23 |     return (
24 |         <div
25 |             className='Sidebar'
26 |             ref={sidebarRef}
27 |         >
28 |             {children}
29 |         </div>
30 |     )
31 | }
32 | 
33 | export default Sidebar


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     apiKey: "AIzaSyBZMPl1Huw4zI1qbqLR5m5QRMKTzIeT-40",
 6 |     authDomain: "todo-app-54dd4.firebaseapp.com",
 7 |     projectId: "todo-app-54dd4",
 8 |     storageBucket: "todo-app-54dd4.appspot.com",
 9 |     messagingSenderId: "770504022143",
10 |     appId: "1:770504022143:web:3415b9ed582bd72e35874a"
11 |   }
12 | 
13 | firebase.initializeApp(firebaseConfig)
14 | 
15 | export default firebase


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/22. Edit a Todo - Part 23/src/images/bg.jpg


--------------------------------------------------------------------------------
/22. Edit a Todo - Part 23/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/22. Edit a Todo - Part 23/src/images/logo.jpg


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/README.md:
--------------------------------------------------------------------------------
1 | # Go to src/firebase/index.js
2 | 
3 | # And paste your firebase configuration.


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | import { useSpring, animated } from 'react-spring'
 3 | 
 4 | function Modal({children, showModal, setShowModal}){
 5 |     const modalRef = useRef()
 6 | 
 7 |     const closeModal = (e) => {
 8 |         if(e.target === modalRef.current){
 9 |             setShowModal(false)
10 |         }
11 |     }
12 | 
13 |     // ANIMATION
14 |     const modalAnimation = useSpring({
15 |         opacity : showModal ? 1 : 0,
16 |         top : showModal ? '25%' : '0%',
17 |         config : { friction : 10 }
18 |     })
19 |     
20 |     return (
21 |         showModal &&
22 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
23 |             <animated.div style={modalAnimation} className="container">
24 |                 {children}
25 |             </animated.div>
26 |         </div>
27 |     )
28 | }
29 | 
30 | export default Modal


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useEffect, useRef } from 'react'
 2 | import { TodoContext } from '../context'
 3 | 
 4 | function Sidebar({ children }){
 5 |     // REF
 6 |     const sidebarRef = useRef()
 7 | 
 8 |     // CONTEXT
 9 |     const { setSelectedTodo } = useContext(TodoContext)
10 | 
11 |     // DOCUMENT CLICK LISTENER
12 |     useEffect(() => {
13 |         document.addEventListener('click', handleClick)
14 |         
15 |         return () => document.removeEventListener('click', handleClick)
16 |     }, [])
17 |     
18 |     // HANDLE CLICK
19 |     const handleClick = e => {
20 |         if( e.target === sidebarRef.current || sidebarRef.current.contains(e.target)){
21 |             setSelectedTodo(false)
22 |         }
23 |     }
24 | 
25 |     return (
26 |         <div
27 |             className='Sidebar'
28 |             ref={sidebarRef}
29 |         >
30 |             {children}
31 |         </div>
32 |     )
33 | }
34 | 
35 | export default Sidebar


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | import { TodoContext } from '../context'
 5 | 
 6 | function Todos(){
 7 |     const { todos, selectedProject } = useContext(TodoContext)
 8 | 
 9 |     return (
10 |         <div className='Todos'>
11 |             <div className='selected-project'>
12 |                 {selectedProject}
13 |             </div>
14 |             <div className="todos">
15 |             {
16 |                 selectedProject === "next 7 days" ?
17 |                 <Next7Days todos={todos} />
18 |                 :
19 |                 todos.map( todo => 
20 |                     <Todo todo={todo} key={todo.id} />    
21 |                 )
22 |             }
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 
28 | export default Todos


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/firebase/index.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/firestore'
 3 | 
 4 | const firebaseConfig = {
 5 |     apiKey: "AIzaSyBZMPl1Huw4zI1qbqLR5m5QRMKTzIeT-40",
 6 |     authDomain: "todo-app-54dd4.firebaseapp.com",
 7 |     projectId: "todo-app-54dd4",
 8 |     storageBucket: "todo-app-54dd4.appspot.com",
 9 |     messagingSenderId: "770504022143",
10 |     appId: "1:770504022143:web:3415b9ed582bd72e35874a"
11 |   }
12 | 
13 | firebase.initializeApp(firebaseConfig)
14 | 
15 | export default firebase


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/23. Animations With React Spring - Part 24/src/images/bg.jpg


--------------------------------------------------------------------------------
/23. Animations With React Spring - Part 24/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/23. Animations With React Spring - Part 24/src/images/logo.jpg


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.9",
 7 |     "@testing-library/react": "^11.2.5",
 8 |     "@testing-library/user-event": "^12.7.1",
 9 |     "react": "^17.0.1",
10 |     "react-dom": "^17.0.1",
11 |     "react-scripts": "4.0.2",
12 |     "web-vitals": "^1.1.0"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/App.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap");
 2 | 
 3 | * {
 4 |   padding: 0;
 5 |   margin: 0;
 6 |   box-sizing: border-box;
 7 |   font-family: "Ubuntu", sans-serif;
 8 | }
 9 | /* App */
10 | .App {
11 |   display: flex;
12 |   width: 100vw;
13 |   height: 100vh;
14 |   overflow: hidden;
15 | }
16 | 
17 | /* Sidebar */
18 | .Sidebar {
19 |   width: 300px;
20 |   min-width: 210px;
21 |   height: 100%;
22 | }
23 | 
24 | /* Main */
25 | .Main {
26 |   width: 100%;
27 |   height: 100%;
28 |   background-image: url("./images/bg.jpg");
29 |   background-repeat: no-repeat;
30 |   background-size: cover;
31 | }
32 | 
33 | /* User */
34 | .User {
35 |   display: flex;
36 |   align-items: center;
37 |   justify-content: space-around;
38 |   padding: 1rem;
39 |   border: 1px solid #ebebeb;
40 | }
41 | 
42 | .User .logo img {
43 |   width: 50px;
44 |   border-radius: 50%;
45 |   border: 1px solid #000;
46 | }
47 | 
48 | .User .info p {
49 |   font-size: 1.1rem;
50 |   font-weight: bold;
51 | }
52 | 
53 | .User .info a {
54 |   text-decoration: none;
55 |   display: flex;
56 |   justify-content: flex-end;
57 | }
58 | 


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function AddNewProject(){
 4 | 
 5 |     return (
 6 |         <div className='AddNewProject'>
 7 |             AddNewProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default AddNewProject


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/AddNewTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function AddNewTodo(){
 4 | 
 5 |     return (
 6 |         <div className='AddNewTodo'>
 7 |             AddNewTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default AddNewTodo


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Calendar(){
 4 | 
 5 |     return (
 6 |         <div className='Calendar'>
 7 |             Calendar
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Calendar


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/EditTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function EditTodo(){
 4 | 
 5 |     return (
 6 |         <div className='EditTodo'>
 7 |             EditTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default EditTodo


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/Project.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import RenameProject from './RenameProject'
 3 | 
 4 | function Project(){
 5 | 
 6 |     return (
 7 |         <div className='Project'>
 8 |             <RenameProject />
 9 |         </div>
10 |     )
11 | }
12 | 
13 | export default Project


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/Projects.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AddNewProject from './AddNewProject'
 3 | import Project from './Project'
 4 | 
 5 | function Projects(){
 6 | 
 7 |     return (
 8 |         <div className='Projects'>
 9 |             <AddNewProject />
10 |             <Project />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Projects


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function RenameProject(){
 4 | 
 5 |     return (
 6 |         <div className='RenameProject'>
 7 |             RenameProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default RenameProject


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Todo(){
 4 | 
 5 |     return (
 6 |         <div className='Todo'>
 7 |             Todo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Todo


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | 
 5 | function Todos(){
 6 | 
 7 |     return (
 8 |         <div className='Todos'>
 9 |             <Todo />
10 |             <Next7Days />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Todos


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/3. Style Our React App - Part 4/src/images/bg.jpg


--------------------------------------------------------------------------------
/3. Style Our React App - Part 4/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/3. Style Our React App - Part 4/src/images/logo.jpg


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.9",
 7 |     "@testing-library/react": "^11.2.5",
 8 |     "@testing-library/user-event": "^12.7.1",
 9 |     "react": "^17.0.1",
10 |     "react-dom": "^17.0.1",
11 |     "react-scripts": "4.0.2",
12 |     "web-vitals": "^1.1.0"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function AddNewProject(){
 4 | 
 5 |     return (
 6 |         <div className='AddNewProject'>
 7 |             AddNewProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default AddNewProject


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/AddNewTodo.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import Modal from './Modal'
 3 | 
 4 | function AddNewTodo(){
 5 |     const [showModal, setShowModal] = useState(false)
 6 | 
 7 |     return (
 8 |         <div className='AddNewTodo'>
 9 |             <div className="btn">
10 |                 <button onClick={() => setShowModal(true)}>
11 |                     + New Todo
12 |                 </button>
13 |             </div>
14 |             <Modal showModal={showModal} setShowModal={setShowModal}>
15 |                 <div>
16 |                     Hello World
17 |                     <button
18 |                     onClick={() => setShowModal(false)}>
19 |                         hide
20 |                     </button>
21 |                 </div>
22 |             </Modal>
23 |         </div>
24 |     )
25 | }
26 | 
27 | export default AddNewTodo


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Calendar(){
 4 | 
 5 |     return (
 6 |         <div className='Calendar'>
 7 |             Calendar
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Calendar


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/EditTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function EditTodo(){
 4 | 
 5 |     return (
 6 |         <div className='EditTodo'>
 7 |             EditTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default EditTodo


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/Project.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import RenameProject from './RenameProject'
 3 | 
 4 | function Project(){
 5 | 
 6 |     return (
 7 |         <div className='Project'>
 8 |             <RenameProject />
 9 |         </div>
10 |     )
11 | }
12 | 
13 | export default Project


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/Projects.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AddNewProject from './AddNewProject'
 3 | import Project from './Project'
 4 | 
 5 | function Projects(){
 6 | 
 7 |     return (
 8 |         <div className='Projects'>
 9 |             <AddNewProject />
10 |             <Project />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Projects


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function RenameProject(){
 4 | 
 5 |     return (
 6 |         <div className='RenameProject'>
 7 |             RenameProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default RenameProject


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Todo(){
 4 | 
 5 |     return (
 6 |         <div className='Todo'>
 7 |             Todo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Todo


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | 
 5 | function Todos(){
 6 | 
 7 |     return (
 8 |         <div className='Todos'>
 9 |             <Todo />
10 |             <Next7Days />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Todos


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/4. Create a Modal - Part 5/src/images/bg.jpg


--------------------------------------------------------------------------------
/4. Create a Modal - Part 5/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/4. Create a Modal - Part 5/src/images/logo.jpg


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@date-io/date-fns": "^1.3.13",
 7 |     "@material-ui/core": "^4.11.3",
 8 |     "@material-ui/pickers": "^3.2.10",
 9 |     "@testing-library/jest-dom": "^5.11.9",
10 |     "@testing-library/react": "^11.2.5",
11 |     "@testing-library/user-event": "^12.7.1",
12 |     "bootstrap-icons": "^1.4.0",
13 |     "date-fns": "^2.17.0",
14 |     "react": "^17.0.1",
15 |     "react-bootstrap-icons": "^1.3.0",
16 |     "react-dom": "^17.0.1",
17 |     "react-scripts": "4.0.2",
18 |     "web-vitals": "^1.1.0"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function AddNewProject(){
 4 | 
 5 |     return (
 6 |         <div className='AddNewProject'>
 7 |             AddNewProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default AddNewProject


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Calendar(){
 4 | 
 5 |     return (
 6 |         <div className='Calendar'>
 7 |             Calendar
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Calendar


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/EditTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function EditTodo(){
 4 | 
 5 |     return (
 6 |         <div className='EditTodo'>
 7 |             EditTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default EditTodo


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/Project.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import RenameProject from './RenameProject'
 3 | 
 4 | function Project(){
 5 | 
 6 |     return (
 7 |         <div className='Project'>
 8 |             <RenameProject />
 9 |         </div>
10 |     )
11 | }
12 | 
13 | export default Project


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/Projects.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AddNewProject from './AddNewProject'
 3 | import Project from './Project'
 4 | 
 5 | function Projects(){
 6 | 
 7 |     return (
 8 |         <div className='Projects'>
 9 |             <AddNewProject />
10 |             <Project />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Projects


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function RenameProject(){
 4 | 
 5 |     return (
 6 |         <div className='RenameProject'>
 7 |             RenameProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default RenameProject


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Todo(){
 4 | 
 5 |     return (
 6 |         <div className='Todo'>
 7 |             Todo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Todo


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | 
 5 | function Todos(){
 6 | 
 7 |     return (
 8 |         <div className='Todos'>
 9 |             <Todo />
10 |             <Next7Days />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Todos


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/5. Controlled Component - Part 6/src/images/bg.jpg


--------------------------------------------------------------------------------
/5. Controlled Component - Part 6/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/5. Controlled Component - Part 6/src/images/logo.jpg


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@date-io/date-fns": "^1.3.13",
 7 |     "@material-ui/core": "^4.11.3",
 8 |     "@material-ui/pickers": "^3.2.10",
 9 |     "@testing-library/jest-dom": "^5.11.9",
10 |     "@testing-library/react": "^11.2.5",
11 |     "@testing-library/user-event": "^12.7.1",
12 |     "bootstrap-icons": "^1.4.0",
13 |     "date-fns": "^2.17.0",
14 |     "react": "^17.0.1",
15 |     "react-bootstrap-icons": "^1.3.0",
16 |     "react-dom": "^17.0.1",
17 |     "react-scripts": "4.0.2",
18 |     "web-vitals": "^1.1.0"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function AddNewProject(){
 4 | 
 5 |     return (
 6 |         <div className='AddNewProject'>
 7 |             AddNewProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default AddNewProject


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { CalendarDate, CaretUp } from 'react-bootstrap-icons'
 3 | import { calendarItems } from '../constants'
 4 | 
 5 | function Calendar(){
 6 |     
 7 |     return (
 8 |         <div className='Calendar'>
 9 |             <div className="header">
10 |                 <div className="title">
11 |                     <CalendarDate size="18"/>
12 |                     <p>Calendar</p>
13 |                 </div>
14 |                 <div className="btns">
15 |                     <span>
16 |                         <CaretUp size="20" />
17 |                     </span>
18 |                 </div>
19 |             </div>
20 |             <div className="items">
21 |                 {
22 |                     calendarItems.map( item => 
23 |                         <div className="item" key={item}>
24 |                             {item}
25 |                         </div>
26 |                     )
27 |                 }
28 |             </div>
29 |         </div>
30 |     )
31 | }
32 | 
33 | export default Calendar


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/EditTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function EditTodo(){
 4 | 
 5 |     return (
 6 |         <div className='EditTodo'>
 7 |             EditTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default EditTodo


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/Project.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import RenameProject from './RenameProject'
 3 | 
 4 | function Project(){
 5 | 
 6 |     return (
 7 |         <div className='Project'>
 8 |             <RenameProject />
 9 |         </div>
10 |     )
11 | }
12 | 
13 | export default Project


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/Projects.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AddNewProject from './AddNewProject'
 3 | import Project from './Project'
 4 | 
 5 | function Projects(){
 6 | 
 7 |     return (
 8 |         <div className='Projects'>
 9 |             <AddNewProject />
10 |             <Project />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Projects


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function RenameProject(){
 4 | 
 5 |     return (
 6 |         <div className='RenameProject'>
 7 |             RenameProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default RenameProject


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Todo(){
 4 | 
 5 |     return (
 6 |         <div className='Todo'>
 7 |             Todo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Todo


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | 
 5 | function Todos(){
 6 | 
 7 |     return (
 8 |         <div className='Todos'>
 9 |             <Todo />
10 |             <Next7Days />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Todos


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/6. Array map in React - Part 7/src/images/bg.jpg


--------------------------------------------------------------------------------
/6. Array map in React - Part 7/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/6. Array map in React - Part 7/src/images/logo.jpg


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@date-io/date-fns": "^1.3.13",
 7 |     "@material-ui/core": "^4.11.3",
 8 |     "@material-ui/pickers": "^3.2.10",
 9 |     "@testing-library/jest-dom": "^5.11.9",
10 |     "@testing-library/react": "^11.2.5",
11 |     "@testing-library/user-event": "^12.7.1",
12 |     "bootstrap-icons": "^1.4.0",
13 |     "date-fns": "^2.17.0",
14 |     "react": "^17.0.1",
15 |     "react-bootstrap-icons": "^1.3.0",
16 |     "react-dom": "^17.0.1",
17 |     "react-scripts": "4.0.2",
18 |     "web-vitals": "^1.1.0"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Plus } from 'react-bootstrap-icons'
 3 | 
 4 | function AddNewProject(){
 5 | 
 6 |     return (
 7 |         <div className='AddNewProject'>
 8 |             <div className="add-button">
 9 |                 <span>
10 |                     <Plus size="20" />
11 |                 </span>
12 |             </div>
13 |         </div>
14 |     )
15 | }
16 | 
17 | export default AddNewProject


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { CalendarDate, CaretUp } from 'react-bootstrap-icons'
 3 | import { calendarItems } from '../constants'
 4 | 
 5 | function Calendar(){
 6 |     
 7 |     return (
 8 |         <div className='Calendar'>
 9 |             <div className="header">
10 |                 <div className="title">
11 |                     <CalendarDate size="18"/>
12 |                     <p>Calendar</p>
13 |                 </div>
14 |                 <div className="btns">
15 |                     <span>
16 |                         <CaretUp size="20" />
17 |                     </span>
18 |                 </div>
19 |             </div>
20 |             <div className="items">
21 |                 {
22 |                     calendarItems.map( item => 
23 |                         <div className="item" key={item}>
24 |                             {item}
25 |                         </div>
26 |                     )
27 |                 }
28 |             </div>
29 |         </div>
30 |     )
31 | }
32 | 
33 | export default Calendar


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/EditTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function EditTodo(){
 4 | 
 5 |     return (
 6 |         <div className='EditTodo'>
 7 |             EditTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default EditTodo


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function RenameProject(){
 4 | 
 5 |     return (
 6 |         <div className='RenameProject'>
 7 |             RenameProject
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default RenameProject


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Todo(){
 4 | 
 5 |     return (
 6 |         <div className='Todo'>
 7 |             Todo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Todo


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | 
 5 | function Todos(){
 6 | 
 7 |     return (
 8 |         <div className='Todos'>
 9 |             <Todo />
10 |             <Next7Days />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Todos


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/7. Projects Component - Part 8/src/images/bg.jpg


--------------------------------------------------------------------------------
/7. Projects Component - Part 8/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/7. Projects Component - Part 8/src/images/logo.jpg


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { CalendarDate, CaretUp } from 'react-bootstrap-icons'
 3 | import { calendarItems } from '../constants'
 4 | 
 5 | function Calendar(){
 6 |     
 7 |     return (
 8 |         <div className='Calendar'>
 9 |             <div className="header">
10 |                 <div className="title">
11 |                     <CalendarDate size="18"/>
12 |                     <p>Calendar</p>
13 |                 </div>
14 |                 <div className="btns">
15 |                     <span>
16 |                         <CaretUp size="20" />
17 |                     </span>
18 |                 </div>
19 |             </div>
20 |             <div className="items">
21 |                 {
22 |                     calendarItems.map( item => 
23 |                         <div className="item" key={item}>
24 |                             {item}
25 |                         </div>
26 |                     )
27 |                 }
28 |             </div>
29 |         </div>
30 |     )
31 | }
32 | 
33 | export default Calendar


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/EditTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function EditTodo(){
 4 | 
 5 |     return (
 6 |         <div className='EditTodo'>
 7 |             EditTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default EditTodo


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Todo(){
 4 | 
 5 |     return (
 6 |         <div className='Todo'>
 7 |             Todo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Todo


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/Todos.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Todo from './Todo'
 3 | import Next7Days from './Next7Days'
 4 | 
 5 | function Todos(){
 6 | 
 7 |     return (
 8 |         <div className='Todos'>
 9 |             <Todo />
10 |             <Next7Days />
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Todos


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/8. Add New Project & Rename Project Components - Part 9/src/images/bg.jpg


--------------------------------------------------------------------------------
/8. Add New Project & Rename Project Components - Part 9/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/8. Add New Project & Rename Project Components - Part 9/src/images/logo.jpg


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@date-io/date-fns": "^1.3.13",
 7 |     "@material-ui/core": "^4.11.3",
 8 |     "@material-ui/pickers": "^3.2.10",
 9 |     "@testing-library/jest-dom": "^5.11.9",
10 |     "@testing-library/react": "^11.2.5",
11 |     "@testing-library/user-event": "^12.7.1",
12 |     "bootstrap-icons": "^1.4.0",
13 |     "date-fns": "^2.17.0",
14 |     "react": "^17.0.1",
15 |     "react-bootstrap-icons": "^1.3.0",
16 |     "react-dom": "^17.0.1",
17 |     "react-scripts": "4.0.2",
18 |     "web-vitals": "^1.1.0"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/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
 8 |       name="description"
 9 |       content="to do app"
10 |     />
11 |     <title>React App</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Sidebar from './components/Sidebar'
 3 | import Main from './components/Main'
 4 | import User from './components/User'
 5 | import AddNewTodo from './components/AddNewTodo'
 6 | import Calendar from './components/Calendar'
 7 | import Projects from './components/Projects'
 8 | import Todos from './components/Todos'
 9 | import EditTodo from './components/EditTodo'
10 | 
11 | 
12 | function App() {
13 |   return (
14 |     <div className="App">
15 |       <Sidebar>
16 |         <User />
17 |         <AddNewTodo />
18 |         <Calendar />
19 |         <Projects />
20 |       </Sidebar>
21 |       <Main>
22 |         <Todos />
23 |         <EditTodo />
24 |       </Main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/AddNewProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import Modal from './Modal'
 3 | import ProjectForm from './ProjectForm'
 4 | import { Plus } from 'react-bootstrap-icons'
 5 | 
 6 | function AddNewProject(){
 7 |     const [showModal, setShowModal] = useState(false)
 8 |     const [projectName, setProjectName] = useState('')
 9 |     function handleSubmit(e){
10 | 
11 |     }
12 | 
13 |     return (
14 |         <div className='AddNewProject'>
15 |             <div className="add-button">
16 |                 <span onClick={() => setShowModal(true)}>
17 |                     <Plus size="20" />
18 |                 </span>
19 |             </div>
20 |             <Modal showModal={showModal} setShowModal={setShowModal}>
21 |                 <ProjectForm
22 |                     handleSubmit={handleSubmit}
23 |                     heading='New project!'
24 |                     value={projectName}
25 |                     setValue={setProjectName}
26 |                     setShowModal={setShowModal}
27 |                     confirmButtonText='+ Add Project'
28 |                 />
29 |             </Modal>
30 |         </div>
31 |     )
32 | }
33 | 
34 | export default AddNewProject


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { CalendarDate, CaretUp } from 'react-bootstrap-icons'
 3 | import { calendarItems } from '../constants'
 4 | 
 5 | function Calendar(){
 6 |     
 7 |     return (
 8 |         <div className='Calendar'>
 9 |             <div className="header">
10 |                 <div className="title">
11 |                     <CalendarDate size="18"/>
12 |                     <p>Calendar</p>
13 |                 </div>
14 |                 <div className="btns">
15 |                     <span>
16 |                         <CaretUp size="20" />
17 |                     </span>
18 |                 </div>
19 |             </div>
20 |             <div className="items">
21 |                 {
22 |                     calendarItems.map( item => 
23 |                         <div className="item" key={item}>
24 |                             {item}
25 |                         </div>
26 |                     )
27 |                 }
28 |             </div>
29 |         </div>
30 |     )
31 | }
32 | 
33 | export default Calendar


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/EditTodo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function EditTodo(){
 4 | 
 5 |     return (
 6 |         <div className='EditTodo'>
 7 |             EditTodo
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default EditTodo


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Main({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Main'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Main


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/Modal.js:
--------------------------------------------------------------------------------
 1 | import React, {useRef} from 'react'
 2 | 
 3 | function Modal({children, showModal, setShowModal}){
 4 |     const modalRef = useRef()
 5 | 
 6 |     const closeModal = (e) => {
 7 |         if(e.target === modalRef.current){
 8 |             setShowModal(false)
 9 |         }
10 |     }
11 |     
12 |     return (
13 |         showModal &&
14 |         <div className="Modal" ref={modalRef} onClick={closeModal}>
15 |             <div className="container">
16 |                 {children}
17 |             </div>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Modal


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/Next7Days.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Next7Days(){
 4 | 
 5 |     return (
 6 |         <div className='Next7Days'>
 7 |             Next7Days
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Next7Days


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/ProjectForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProjectForm({handleSubmit, heading, value, setValue, setShowModal, confirmButtonText}){
 4 | 
 5 |     return (
 6 |         <form onSubmit={handleSubmit} className='ProjectForm'>
 7 |             <h3>{heading}</h3>
 8 |             <input
 9 |                 value={value}
10 |                 onChange={(e) => setValue(e.target.value)}
11 |                 type='text'
12 |                 placeholder='project name...'
13 |                 autoFocus
14 |             />
15 |             <button className='cancel' role='button' onClick={() => setShowModal(false)}>
16 |                 cancel
17 |             </button>
18 |             <button className="confirm">
19 |                 {confirmButtonText}
20 |             </button>
21 |         </form>
22 |     )
23 | }
24 | 
25 | export default ProjectForm


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/RenameProject.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import ProjectForm from './ProjectForm'
 3 | 
 4 | function RenameProject({project, setShowModal}){
 5 |     const [newProjectName, setNewProjectName] = useState(project.name)
 6 | 
 7 |     function handleSubmit(e){
 8 | 
 9 |     }
10 | 
11 |     return (
12 |         <div className='RenameProject'>
13 |             <ProjectForm
14 |                 handleSubmit={handleSubmit}
15 |                 heading='Edit project name!'
16 |                 value={newProjectName}
17 |                 setValue={setNewProjectName}
18 |                 setShowModal={setShowModal}
19 |                 confirmButtonText='Confirm'
20 |             />
21 |         </div>
22 |     )
23 | }
24 | 
25 | export default RenameProject


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Sidebar({ children }){
 4 | 
 5 |     return (
 6 |         <div className='Sidebar'>
 7 |             {children}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Sidebar


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/Todo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Todo({todo}){
 4 | 
 5 |     return (
 6 |         <div className='Todo'>
 7 |             {todo.text}
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default Todo


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/components/User.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logo from "../images/logo.jpg"
 3 | 
 4 | function User(){
 5 | 
 6 |     return (
 7 |         <div className='User'>
 8 |             <div className="logo">
 9 |                 <img src={logo} alt="logo" />
10 |             </div>
11 |             <div className='info'>
12 |                 <p>Code Explained</p>
13 |                 <a href="#">Logout!</a>
14 |             </div>
15 |         </div>
16 |     )
17 | }
18 | 
19 | export default User


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const calendarItems = ['today', 'next 7 days', 'all days']


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/9. Todos Component - Part 10/src/images/bg.jpg


--------------------------------------------------------------------------------
/9. Todos Component - Part 10/src/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Build-Todo-App-With-React-And-Firebase/55b428fbfcc58592c0efa8705a5c6d769ea6318f/9. Todos Component - Part 10/src/images/logo.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Build-Todo-App-With-React-And-Firebase
2 | Build Todo App With React And Firebase
3 | 


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