├── .gitignore
├── README.md
├── demo.mp4
├── demo.webm
├── package.json
├── public
    └── index.html
├── src
    ├── App.tsx
    ├── Components
    │   ├── AddModal
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   ├── AddTask
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   ├── Categorie
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   ├── DeleteModal
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   ├── ExpandSidebarItem
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   ├── FilterTag
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   ├── SidebarItem
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   └── TaskCard
    │   │   ├── index.tsx
    │   │   └── styles.ts
    ├── Contexts
    │   ├── addContext.tsx
    │   ├── addType.ts
    │   ├── authContext.tsx
    │   ├── categoriesContext.tsx
    │   ├── categoriesType.ts
    │   ├── deleteContext.tsx
    │   ├── deleteType.ts
    │   ├── taskListContext.tsx
    │   └── taskType.ts
    ├── Img
    │   ├── Logo.png
    │   ├── add.svg
    │   ├── arrow.svg
    │   ├── edit.svg
    │   ├── erase.svg
    │   ├── filter.svg
    │   ├── folder.svg
    │   ├── folderFill.svg
    │   ├── logout.svg
    │   ├── settings.svg
    │   ├── settingsFill.svg
    │   ├── task.png
    │   └── taskFill.png
    ├── Pages
    │   ├── Categorie
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   ├── Home
    │   │   ├── index.tsx
    │   │   └── styles.ts
    │   └── Login
    │   │   ├── index.tsx
    │   │   └── styles.ts
    ├── Routes
    │   └── Route.tsx
    ├── contextProviders.tsx
    ├── global.ts
    ├── index.tsx
    └── react-app-env.d.ts
├── tsconfig.json
└── yarn.lock


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ReactJS-ToDoList
 2 | ## Introduction
 3 | This project implements the Front-End for a simple To-Do List web application, using the React JS library, and also Styled Components replacing pure CSS.<br/>
 4 | It includes the login page and the general UI of the app. <br/>
 5 | The login authentication logic and the tasks database for each user are not implemented, since this project aims to be a Front-End study only.
 6 | 
 7 | ## Demonstration
 8 | 
 9 | 
10 | https://user-images.githubusercontent.com/122649188/214991561-d29b14eb-560a-4ba4-aa12-0656278d3fc8.mp4
11 | 
12 | 
13 | 
14 | ## Inspiration
15 | The login page was inspired in [this design](https://dribbble.com/shots/17564792-Log-in-page-Untitled-UI/attachments/12710737?mode=media) by Jordan Hughes.
16 | The home page was inspired in [this design](https://dribbble.com/shots/14440819-KosmoTime-Task-Manager/attachments/6121947?mode=media) by Mik Skuza.
17 | 
18 | ## Features
19 | • Login page, including Sign In button, which redirects to the main application; <br/>
20 | • Application UI with navigation sidebar and area for the to-do list; <br/>
21 | • Add new task, setting name and categorie properties; <br/>
22 | • Delete task, with a modal for confirming the action; <br/>
23 | • Check task as done via checkbox; <br/>
24 | • Filter tasks showing in the to-do list by "done", "not done" or "all"; <br/>
25 | • Filter tasks showing in the to-do list by their categorie, via selecting on the sidebar; <br/>
26 | • Authorization: user cannot access home page before login, neither login page after logged. <br/>
27 | 
28 | Obs.: currently, the "edit task" and adding or removing categories functionalities are not implemented, since I considered it wouldn't contribute that much to my personal learning, and would be very time consuming. Maybe I'll implement this later on.
29 | 
30 | ## Usage
31 | If you want to try this project yourself:
32 | 1. Install Node on your machine, via https://nodejs.org/en/.
33 | 2. Install Yarn on your machine via terminal command: `sudo npm install -g yarn`
34 | 3. Install Git on your machine, via https://git-scm.com/downloads.
35 | 4. Clone this repository to your machine. (more on how to do this [here](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository))
36 | 5. Run ```yarn install``` on the terminal, inside the folder where you downloaded the project, to install all used dependencies.
37 | 6. Run `yarn start` to run the project on your browser.
38 | 
39 | 
40 | 
41 | 
42 | 


--------------------------------------------------------------------------------
/demo.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MatheusCavini/ReactJS-ToDoList/89d62d130e6e9ae5ad3f58cdda7f6810abcf7a74/demo.mp4


--------------------------------------------------------------------------------
/demo.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MatheusCavini/ReactJS-ToDoList/89d62d130e6e9ae5ad3f58cdda7f6810abcf7a74/demo.webm


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todolist",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "-": "^0.0.1",
 7 |     "@testing-library/jest-dom": "^5.14.1",
 8 |     "@testing-library/react": "^13.0.0",
 9 |     "@testing-library/user-event": "^13.2.1",
10 |     "@types/jest": "^27.0.1",
11 |     "@types/node": "^16.7.13",
12 |     "@types/react": "^18.0.0",
13 |     "@types/react-dom": "^18.0.0",
14 |     "D": "^1.0.0",
15 |     "gh-pages": "^5.0.0",
16 |     "react": "^18.2.0",
17 |     "react-dom": "^18.2.0",
18 |     "react-router-dom": "^6.7.0",
19 |     "react-scripts": "5.0.1",
20 |     "react-select": "^5.7.0",
21 |     "styled-components": "^5.3.6",
22 |     "typescript": "^4.4.2",
23 |     "web-vitals": "^2.1.0"
24 |   },
25 |   "scripts": {
26 |     "start": "react-scripts start",
27 |     "build": "react-scripts build",
28 |     "test": "react-scripts test",
29 |     "eject": "react-scripts eject"
30 |   },
31 |   "eslintConfig": {
32 |     "extends": [
33 |       "react-app",
34 |       "react-app/jest"
35 |     ]
36 |   },
37 |   "browserslist": {
38 |     "production": [
39 |       ">0.2%",
40 |       "not dead",
41 |       "not op_mini all"
42 |     ],
43 |     "development": [
44 |       "last 1 chrome version",
45 |       "last 1 firefox version",
46 |       "last 1 safari version"
47 |     ]
48 |   },
49 |   "devDependencies": {
50 |     "@types/styled-components": "^5.1.26"
51 |   }
52 | }
53 | 


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


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import GlobalStyle from './global'
 4 | import ContextProviders from './contextProviders';
 5 | 
 6 | import { BrowserRouter, Routes, Route } from 'react-router-dom';
 7 | import Login from './Pages/Login';
 8 | import Home from './Pages/Home';
 9 | import CategoriePage from './Pages/Categorie';
10 | import ProtectedRoute from './Routes/Route';
11 | 
12 | 
13 | function App() {
14 |   return (
15 |     <ContextProviders>
16 |       <BrowserRouter>
17 |         <Routes>
18 | 			    <Route path="/" element={<ProtectedRoute priv={true}><Home/></ProtectedRoute>} />
19 | 	        <Route path="/login" element={<ProtectedRoute priv={false}><Login/></ProtectedRoute>} />
20 |           <Route path='/categorie/:name' element = {<ProtectedRoute priv={true}><CategoriePage/></ProtectedRoute>}></Route>
21 | 		    </Routes>
22 |       </BrowserRouter>
23 |       <GlobalStyle/>
24 |     </ContextProviders>
25 |      
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/src/Components/AddModal/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState } from "react";
 2 | import * as S from "./styles"
 3 | import { AddContext } from "../../Contexts/addContext";
 4 | import { AddType } from "../../Contexts/addType";
 5 | import { TaskListContext } from "../../Contexts/taskListContext";
 6 | import {  TaskProps, TaskListType } from "../../Contexts/taskType";
 7 | import { CategoriesContext } from "../../Contexts/categoriesContext";
 8 | import { CategorieContextType } from "../../Contexts/categoriesType";
 9 | import { ActionMeta, InputActionMeta } from "react-select";
10 | import Select from "react-select/dist/declarations/src/Select";
11 | 
12 | 
13 | const AddModal:React.FC =()=>{
14 |     const{ addTask } = useContext(TaskListContext) as TaskListType;
15 |     const{categList} = useContext(CategoriesContext) as CategorieContextType;
16 |     const{ setShowAdd,} = useContext(AddContext) as AddType;
17 | 
18 | 
19 |     const [taskName, setTaskName ]= useState("");
20 |     const [taskCat, setTaskCat] = useState(categList.findIndex((cat)=>cat.name == "None"));
21 | 
22 |     function handleTyping(event: React.ChangeEvent<HTMLInputElement>){
23 |         setTaskName(event.target.value);
24 |     };
25 | 
26 |     function handleCancel(){
27 |         setShowAdd(false);
28 |     };
29 | 
30 |     function handleAdd(){
31 |         const newTask:TaskProps ={
32 |             id: Math.random(),
33 |             title: taskName,
34 |             categorie: categList[taskCat].name,
35 |             color: categList[taskCat].color,
36 |             done: false,
37 |         }
38 | 
39 |         setShowAdd(false);
40 | 
41 |         addTask(newTask);
42 | 
43 |     }
44 | 
45 |     var e= document.getElementById("select") as HTMLSelectElement;
46 | 
47 |     function handleChange(){
48 |         setTaskCat(Number(e.options[(e.selectedIndex)].value));
49 |     }
50 | 
51 |     
52 | 
53 | 
54 | 
55 |     return(
56 |         <S.Background>
57 |             <S.Container>
58 |                 <S.Text>Insert name</S.Text>
59 |                 <S.TitleInput placeholder="Task name" onChange={handleTyping} value={taskName}/>
60 |                 <S.Text>Select a categorie</S.Text>
61 |                 <S.Select id="select" onChange={handleChange}>
62 |                     {categList.map((cat)=><option value={cat.id}>{cat.name}</option>)}
63 |                 </S.Select>
64 |             <S.Buttons>
65 |                 <S.CancelButton onClick={handleCancel} >Cancel</S.CancelButton>
66 |                 <S.DeletButton onClick={handleAdd}>Add</S.DeletButton>
67 |             </S.Buttons>
68 |             </S.Container>
69 |         </S.Background>
70 |     )
71 | };
72 | 
73 | export default AddModal;


--------------------------------------------------------------------------------
/src/Components/AddModal/styles.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | import styled from "styled-components";
  3 | 
  4 | export const Background = styled.div`
  5 |     width:100vw;
  6 |     height:100vh;
  7 |     position:fixed;
  8 |     z-index:3;
  9 |     display:flex;
 10 |     align-items:center;
 11 |     justify-content:center;
 12 |     background: rgba(0,0,0,0.6);
 13 | `
 14 | 
 15 | export const Container=styled.div`
 16 |     width: 40vw;
 17 |     height: 40vh;
 18 |     background: white;
 19 |     border-radius:16px;
 20 |     opacity: 1;
 21 |     display: flex;
 22 |     flex-direction:column;
 23 |     align-items:center;
 24 |     justify-content: space-between;
 25 |     padding-top:32px;
 26 | 
 27 | `
 28 | 
 29 | export const Buttons = styled.div`
 30 | height: 80px;
 31 | display: flex;
 32 | justify-content:space-around;
 33 | align-items:center;
 34 | `
 35 | 
 36 | export const CancelButton = styled.button`
 37 | background: white;
 38 | border: 1px solid blue;
 39 | color: blue;
 40 | width: 120px;
 41 | height: 40px;
 42 | border-radius: 8px;
 43 | font-size: 20px;
 44 | margin: 8px;
 45 | 
 46 | &:hover{
 47 |     border:2px solid blue;
 48 |     font-weight:500;
 49 |     background: #eee;
 50 | }
 51 | `
 52 | 
 53 | export const DeletButton = styled.button`
 54 | background: white;
 55 | border: 1px solid green;
 56 | color:green;
 57 | width: 120px;
 58 | height: 40px;
 59 | border-radius: 8px;
 60 | font-size: 20px;
 61 | margin: 8px;
 62 | 
 63 | &:hover{
 64 |     border:2px solid green;
 65 |     font-weight:500;
 66 |     background: #eee;
 67 | }
 68 | `
 69 | 
 70 | export const TitleInput = styled.input`
 71 |     width: 32vw;
 72 |     height: 40px;
 73 |     border-radius: 8px;
 74 |     border: 1px solid #999;
 75 |     padding-left:8px;
 76 |     font-size: 20px;
 77 |     color: #555;
 78 |     box-sizing: border-box;
 79 |     
 80 | 
 81 | 
 82 |     &:focus{
 83 |         border: 1px solid #999;
 84 |         outline:none;
 85 |     }
 86 | 
 87 |     &::placeholder{
 88 |         color: #bbb;
 89 |     }
 90 | 
 91 | `
 92 | 
 93 | export const Select = styled.select`
 94 |     
 95 |     width: 32vw;
 96 |     height: 40px;
 97 |     border-radius: 8px;
 98 |     border: 1px solid #999;
 99 |     padding-left:8px;
100 |     font-size: 20px;
101 |     color: #555;
102 |     box-sizing: border-box;
103 | 
104 |     &:focus{
105 |         border: 1px solid #999;
106 |         outline:none;
107 |     }
108 | 
109 |     &::placeholder{
110 |         color: #bbb;
111 |     }
112 | `
113 | 
114 | 
115 | export const Text = styled.p`
116 | font-size:20px;
117 | color:#555;
118 | `
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 


--------------------------------------------------------------------------------
/src/Components/AddTask/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import * as S from "./styles";
 3 | import Add from "../../Img/add.svg";
 4 | import { AddType } from "../../Contexts/addType";
 5 | import { AddContext } from "../../Contexts/addContext";
 6 | 
 7 | const AddTask:React.FC = ()=>{
 8 |     const{setShowAdd} = useContext(AddContext) as AddType;
 9 | 
10 |     function handleClick(){
11 |         setShowAdd(true);
12 |     };
13 | 
14 |     return(
15 |         <S.Container onClick={handleClick}>
16 |             <S.Icon src={Add}/>
17 |             <S.Text>Add a task</S.Text>
18 |         </S.Container> 
19 |     );
20 | };
21 | 
22 | export default AddTask;


--------------------------------------------------------------------------------
/src/Components/AddTask/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | export const Container =styled.div`
 4 |     height: 50px;
 5 |     width: 70vw;
 6 |     border: 1px solid #ccc;
 7 |     border-radius: 16px;
 8 |     display: flex;
 9 |     margin: 8px;
10 |     box-sizing:border-box;
11 |     align-items: center;
12 |     justify-content: center;
13 | 
14 |     &:hover{
15 |         background: #eee;
16 |         cursor: pointer;
17 |     }
18 | `
19 | 
20 | export const Icon = styled.img` 
21 |     width:24px;
22 | `
23 | 
24 | export const Text =  styled.p`
25 |     color: #ccc;
26 |     font-size: 20px;
27 |     font-weight:400;
28 |     margin:16px;
29 | `


--------------------------------------------------------------------------------
/src/Components/Categorie/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import * as S from "./styles"
 3 | import { Link } from "react-router-dom";
 4 | 
 5 | interface CategorieItemProps{
 6 |     name:string;
 7 |     color:string;
 8 | }
 9 | 
10 | const CategorieItem:React.FC<CategorieItemProps> =({name,color})=>{
11 | 
12 |     return(
13 |         <Link  to={"/categorie/"+name} style={{ textDecoration: 'none' }}>
14 |             <S.Categorie>
15 |                 <S.ColorTag color={color}/>
16 |                 <S.ListName>{name}</S.ListName>
17 |             </S.Categorie>
18 |         </Link>
19 | )};
20 | 
21 | export default CategorieItem;


--------------------------------------------------------------------------------
/src/Components/Categorie/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | interface ColorTagProps{
 4 |     color:string;
 5 | }
 6 | 
 7 | export const Categorie = styled.div`
 8 |     height: 20px;
 9 |     margin: 4px 0 4px 52px;
10 |     display: flex;
11 |     align-items: center;
12 |     background: #f5f5f5;
13 | `
14 | 
15 | export const ColorTag = styled.div<ColorTagProps>` 
16 |     height: 14px;
17 |     width: 14px;
18 |     border-radius: 4px;
19 |     background: ${props=> props.color};
20 | `
21 | 
22 | export const ListName = styled.p`
23 |     font-size: 16px;
24 |     color: #777;
25 |     margin-left:8px;
26 |     font-weight:400; 
27 | `


--------------------------------------------------------------------------------
/src/Components/DeleteModal/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import * as S from "./styles";
 3 | import { DeleteType } from "../../Contexts/deleteType";
 4 | import { DeleteContext } from "../../Contexts/deleteContext";
 5 | import { useContext } from "react";
 6 | import { TaskListContext } from "../../Contexts/taskListContext";
 7 | import { TaskListType } from "../../Contexts/taskType";
 8 | 
 9 | 
10 | 
11 | 
12 | const DeleteModal:React.FC =()=>{
13 |     const { setShowDelete, id, setId }= useContext(DeleteContext) as DeleteType;
14 |     const{deleteTask} = useContext(TaskListContext) as TaskListType;
15 | 
16 |     function handleCancel(){
17 |         setShowDelete(false);
18 |     };
19 | 
20 |     function handleConfirm(){
21 |         deleteTask(id);
22 |         setId(0);
23 |         setShowDelete(false);
24 |         
25 |     }
26 | 
27 | 
28 |     return(
29 |         <S.Background>
30 |             <S.Container>
31 |                 <S.Text>Are you sure you want to delete this task?</S.Text>
32 |                 <S.Buttons>
33 |                     <S.CancelButton onClick={handleCancel}>Cancel</S.CancelButton>
34 |                     <S.DeletButton onClick={handleConfirm}>Delete</S.DeletButton>
35 |                 </S.Buttons>
36 |             </S.Container>
37 |         </S.Background>
38 |     )
39 | };
40 | 
41 | export default DeleteModal;


--------------------------------------------------------------------------------
/src/Components/DeleteModal/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | 
 4 | export const Background = styled.div`
 5 |     width:100vw;
 6 |     height:100vh;
 7 |     position:fixed;
 8 |     z-index:3;
 9 |     display:flex;
10 |     align-items:center;
11 |     justify-content:center;
12 |     background: rgba(0,0,0,0.6);
13 | `
14 | 
15 | export const Container=styled.div`
16 |     width: 25vw;
17 |     height: 25vh;
18 |     background: white;
19 |     border-radius:16px;
20 |     opacity: 1;
21 |     display: flex;
22 |     flex-direction:column;
23 |     align-items:center;
24 |     justify-content: space-between;
25 | 
26 | `
27 | 
28 | export const Text = styled.p`
29 |     font-size:24px;
30 |     color: #555;
31 |     wrap: wrap;
32 |     text-align:center;
33 |     padding:20px;
34 | `
35 | 
36 | export const Buttons = styled.div`
37 |     height: 80px;
38 |     display: flex;
39 |     justify-content:space-around;
40 |     align-items:center;
41 | `
42 | 
43 | export const CancelButton = styled.button`
44 |     background: white;
45 |     border: 1px solid blue;
46 |     color: blue;
47 |     width: 120px;
48 |     height: 40px;
49 |     border-radius: 8px;
50 |     font-size: 20px;
51 |     margin: 8px;
52 | 
53 |     &:hover{
54 |         border:2px solid blue;
55 |         font-weight:500;
56 |         background: #eee;
57 |     }
58 | `
59 | 
60 | export const DeletButton = styled.button`
61 |     background: white;
62 |     border: 1px solid red;
63 |     color:red;
64 |     width: 120px;
65 |     height: 40px;
66 |     border-radius: 8px;
67 |     font-size: 20px;
68 |     margin: 8px;
69 | 
70 |     &:hover{
71 |         border:2px solid red;
72 |         font-weight:500;
73 |         background: #eee;
74 |     }
75 |     
76 | `


--------------------------------------------------------------------------------
/src/Components/ExpandSidebarItem/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useState, useContext} from "react";
 2 | import * as S from "./styles"
 3 | import Arrow from "../../Img/arrow.svg"
 4 | import CategorieItem from "../Categorie";
 5 | import Add from "../../Img/add.svg";
 6 | import { CategoriesContext } from "../../Contexts/categoriesContext";
 7 | import { CategorieContextType } from "../../Contexts/categoriesType";
 8 | 
 9 | interface SidebarItemProps{
10 |     name: string;
11 |     icon: string;
12 |     
13 | }
14 | 
15 | 
16 | 
17 | const ExpandSidebarItem:React.FC<SidebarItemProps> =({name, icon})=>{
18 |     const [active, setActive] = useState(false);
19 |     const {categList}= useContext(CategoriesContext) as CategorieContextType;
20 | 
21 |     function handleActivate(){
22 |         setActive(!active);
23 |     }
24 | 
25 |     return(
26 |         <S.OuterContainer isActive={active}>
27 |             <S.Container isActive={active} onClick={handleActivate}>
28 |                 <S.Icon src={icon}/>
29 |                 <S.Name>{name}</S.Name>
30 |                 <S.Arrow isActive={active} src={Arrow}/>
31 |             </S.Container>
32 |             <S.CatArea isActive={active}>
33 |                 {categList.map(cat=><CategorieItem name={cat.name} color={cat.color} />)}
34 |                 <S.AddArea>
35 |                     <S.AddIcon src={Add}/>
36 |                     <S.AddText>Add new</S.AddText>
37 |                 </S.AddArea>
38 |             </S.CatArea>
39 | 
40 |         </S.OuterContainer>
41 |     );
42 | };
43 | 
44 | 
45 | export default ExpandSidebarItem;


--------------------------------------------------------------------------------
/src/Components/ExpandSidebarItem/styles.ts:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import styled from "styled-components";
  3 | import { css } from "styled-components";
  4 | 
  5 | interface ContainerProps{
  6 |     isActive: boolean;
  7 | }
  8 | 
  9 | 
 10 | export const Name = styled.h3`
 11 |     font-size:16px;
 12 |     font-weight:500;
 13 | `
 14 | export const OuterContainer = styled.div<ContainerProps>`
 15 |     height: auto;
 16 |     width: 15vw;
 17 |     border-radius:
 18 |     display: flex;
 19 |     flex-direction:column;
 20 |     align-items:center;
 21 |     justify-content: top;
 22 |     color:#777;
 23 |     font-weight:100;
 24 |     margin: 4px 0;
 25 |     
 26 |     border-radius:8px;
 27 | 
 28 |     ${props =>
 29 | 	    props.isActive &&
 30 | 	    css`
 31 | 	      background: #f5f5f5;
 32 |     `};
 33 |     margin: 0;
 34 | `
 35 | 
 36 | export const Container = styled.div<ContainerProps>`
 37 |     height: 40px;
 38 |     width: 15vw;
 39 |     border-radius:8px;
 40 |     display: flex;
 41 |     align-items:center;
 42 |     justify-content: left;
 43 |     color:#777;
 44 |     font-weight:100;
 45 |     ${props =>
 46 | 	    props.isActive &&
 47 | 	    css`
 48 | 	      background: #f5f5f5;
 49 |     `};
 50 |     margin: 0;
 51 | 
 52 |     &:hover{
 53 |         cursor:pointer;
 54 |         ${props =>
 55 | 	    props.isActive ?
 56 | 	    css`
 57 | 	      background: #f5f5f5;
 58 |     `: css`
 59 | 	      background: #fafafa;
 60 |     `};
 61 |     }
 62 | 
 63 | `
 64 | 
 65 | 
 66 | 
 67 | export const Icon = styled.img`
 68 |     width: 20px;
 69 |     margin: 8px 16px;
 70 | `
 71 | 
 72 | export const Arrow = styled.img<ContainerProps>`
 73 |     width: 14px;
 74 |     margin: 8px 16px;
 75 | 
 76 |     ${props =>
 77 | 	    props.isActive &&
 78 | 	    css`
 79 | 	      transform:rotate(180deg);
 80 |     `};
 81 |     margin: 4px 24px;
 82 | `
 83 | 
 84 | export const CatArea = styled.div<ContainerProps>`
 85 |     display: flex;
 86 |     width:15vw;
 87 |     height: auto;
 88 |     background: #f5f5f5;
 89 |     border-radius:8px;
 90 |     flex-direction:column;
 91 |     padding-bottom: 8px;
 92 | 
 93 |     ${props =>
 94 | 	    !props.isActive &&
 95 | 	    css`
 96 | 	      display:none;
 97 |     `};
 98 | 
 99 | `
100 | 
101 | export const AddArea = styled.div`
102 |     height: 20px;
103 |     margin: 4px 0 4px 52px;
104 |     display: flex;
105 |     align-items: center;
106 |     background: #f5f5f5;
107 | `
108 | 
109 | 
110 | export const AddText = styled.p`
111 |     font-size: 16px;
112 |     color: #ccc;
113 |     margin-left:8px;
114 |     font-weight:400; 
115 | `
116 | 
117 | export const AddIcon = styled.img`
118 |     height: 16px;
119 | `
120 | 
121 | 
122 | 


--------------------------------------------------------------------------------
/src/Components/FilterTag/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import * as S from "./styles";
 3 | 
 4 | 
 5 | interface tagProps  {
 6 |     name:string;
 7 |     active:boolean; 
 8 | }
 9 | 
10 | 
11 | const FilterTag:React.FC<tagProps> =({name, active})=>{
12 |     return (
13 |         <S.Container active={active}>
14 |             <S.TagName active={active}>{name}</S.TagName>
15 |         </S.Container>
16 |     );
17 | }
18 | 
19 | export default FilterTag;


--------------------------------------------------------------------------------
/src/Components/FilterTag/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled, {css} from "styled-components";
 2 | 
 3 | interface activeProps{
 4 |     active: boolean;
 5 | }
 6 | 
 7 | export const Container = styled.div<activeProps>`
 8 |     width: 80px;
 9 |     height: 24px;
10 |     border-radius:8px;
11 |     border: 1px solid #ccc;
12 |     display: flex;
13 |     align-items:center;
14 |     justify-content:center;
15 |     margin:0 2px;
16 | 
17 |     &:hover{
18 |         cursor:pointer;
19 |         background: #eee;
20 |     }
21 | 
22 |     ${props => props.active && css`
23 |         background: white;
24 |         border:0;
25 |         box-shadow: 0 1px 2px #ccc;
26 |     ` }
27 | `
28 | 
29 | export const TagName = styled.h3<activeProps>`
30 |     font-size: 16px;
31 |     color:#ccc;
32 | 
33 |     ${props => props.active && css`
34 |         color: #333;
35 |     ` }
36 | `


--------------------------------------------------------------------------------
/src/Components/SidebarItem/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import * as S from "./styles"
 3 | 
 4 | interface SidebarItemProps{
 5 |     name: string;
 6 |     icon: string;
 7 |     isActive: boolean;
 8 | }
 9 | 
10 | const SidebarItem:React.FC<SidebarItemProps> =({name, icon, isActive})=>{
11 |     return(
12 |         <S.Container isActive={isActive}>
13 |             <S.Icon src={icon}/>
14 |             <S.Name>{name}</S.Name>
15 |         </S.Container>
16 |     );
17 | };
18 | 
19 | 
20 | export default SidebarItem;


--------------------------------------------------------------------------------
/src/Components/SidebarItem/styles.ts:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import { css } from "styled-components";
 4 | 
 5 | interface ContainerProps{
 6 |     isActive: boolean;
 7 | }
 8 | 
 9 | 
10 | export const Name = styled.h3`
11 |     font-size:16px;
12 |     font-weight:500;
13 | `
14 | 
15 | export const Container = styled.div<ContainerProps>`
16 |     height: 40px;
17 |     width: 15vw;
18 |     border-radius:8px;
19 |     display: flex;
20 |     align-items:center;
21 |     justify-content: left;
22 |     color:#777;
23 |     font-weight:100;
24 |     ${props =>
25 | 	    props.isActive &&
26 | 	    css`
27 | 	      background: #f5f5f5;
28 |           color:#7f56da;
29 |     `};
30 |     margin: 4px 0;
31 | 
32 |     &:hover{
33 |         cursor:pointer;
34 |         ${props =>
35 | 	    props.isActive ?
36 | 	    css`
37 | 	      background: #f5f5f5;
38 |     `: css`
39 | 	      background: #fafafa;
40 |     `};
41 |     }
42 | 
43 | `
44 | 
45 | 
46 | 
47 | export const Icon = styled.img`
48 |     width: 20px;
49 |     margin: 8px 16px;
50 | `
51 | 
52 | 
53 | 
54 | 
55 | 


--------------------------------------------------------------------------------
/src/Components/TaskCard/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useState, useContext} from "react";
 2 | import * as S from "./styles";
 3 | import Edit from "../../Img/edit.svg";
 4 | import Erase from "../../Img/erase.svg";
 5 | import { TaskListContext } from "../../Contexts/taskListContext";
 6 | import { TaskListType } from "../../Contexts/taskType";
 7 | import { DeleteContext } from "../../Contexts/deleteContext";
 8 | import { DeleteType } from "../../Contexts/deleteType";
 9 | 
10 | 
11 | 
12 | interface TaskCardProps{
13 |     id:number;
14 |     name: string;
15 |     list: string;
16 |     color: string;
17 |     done: boolean;
18 | };
19 | 
20 | const TaskCard: React.FC<TaskCardProps> =({id, name,list, color, done})=>{
21 | 
22 |     const{setShowDelete,setId} = useContext(DeleteContext) as DeleteType;
23 |     const{checkTask} = useContext(TaskListContext) as TaskListType;
24 |     
25 |     function handleCheck(){
26 |         checkTask(id);
27 |     }
28 | 
29 |     function handleDelete(){
30 |         setShowDelete(true);
31 |         setId(id);
32 |     }
33 | 
34 |     return(
35 |         <S.Container>
36 |             <S.CheckField>
37 |                 <S.CheckboxRing onClick={handleCheck}><S.CheckFill done={done}/></S.CheckboxRing>
38 |             </S.CheckField>
39 |             <S.Description>
40 |                 <S.Name done={done}>{name}</S.Name>
41 |                 <S.ListBelong>
42 |                     <S.ColorTag color={color}/>
43 |                     <S.ListName>{list}</S.ListName>
44 |                 </S.ListBelong>
45 |             </S.Description>
46 |             
47 |             <S.Icon src={Edit}/><S.Icon src={Erase} onClick={handleDelete}/>
48 |         </S.Container>
49 |     );
50 | };
51 | 
52 | export default TaskCard;


--------------------------------------------------------------------------------
/src/Components/TaskCard/styles.ts:
--------------------------------------------------------------------------------
  1 | import styled, {css} from "styled-components";
  2 | 
  3 | interface ColorTagProps{
  4 |     color:string;
  5 | }
  6 | 
  7 | interface DoneProps{
  8 |     done:boolean;
  9 | }
 10 | 
 11 | export const Container =styled.div`
 12 |     height: 80px;
 13 |     width: 70vw;
 14 |     background: white;
 15 |     border-radius: 16px;
 16 |     box-shadow: 0 3px 3px #ccc;
 17 |     display: flex;
 18 |     margin: 8px;
 19 |     box-sizing:border-box;
 20 | `
 21 | export const Name = styled.h2<DoneProps>`
 22 |     font-size: 22px;
 23 |     color: #555;
 24 |     margin: 8px 16px;
 25 |     font-weight:500;
 26 | 
 27 |     ${props => props.done &&
 28 |     css`
 29 |         color:#bbb;
 30 |         font-weight:400;
 31 |         text-decoration: line-through;`}
 32 | `
 33 | export const Icon = styled.img`
 34 |     width: 24px;
 35 |     margin: 24px;
 36 |     background: white;
 37 | 
 38 |     &:hover{
 39 |         cursor:pointer;
 40 |     }
 41 | `
 42 | export const CheckField = styled.div`
 43 |     width: 80px;
 44 |     height: 80px;
 45 |     border-right: 2px solid #eee ;
 46 |     display: flex;
 47 |     align-items:center;
 48 |     justify-content:center;
 49 | `
 50 | export const Description = styled.div`
 51 |     height: 80px;
 52 |     width: 50vw;
 53 |     padding: 6px 8px;
 54 |     box-sizing: border-box;
 55 | `
 56 | export const ListBelong = styled.div`
 57 |     height: 20px;
 58 |     margin: 0 16px;
 59 |     display: flex;
 60 |     align-items: center;
 61 | `
 62 | 
 63 | export const ColorTag = styled.div<ColorTagProps>` 
 64 |     height: 16px;
 65 |     width: 16px;
 66 |     border-radius: 6px;
 67 |     background: ${props=> props.color};
 68 | `
 69 | 
 70 | export const ListName = styled.p`
 71 |     font-size: 16px;
 72 |     color: #999;
 73 |     margin-left:8px;
 74 |     font-weight:400; 
 75 | `
 76 | 
 77 | export const InvisibleCheck = styled.input.attrs({type:'checkbox'})`
 78 |     display: none;
 79 | `
 80 | 
 81 | export const CheckboxRing = styled.div`
 82 |     background: white;
 83 |     height: 24px;
 84 |     width: 24px;
 85 |     border: 1px solid #7f56da;
 86 |     border-radius:12px;
 87 |     display: flex;
 88 |     align-items: center;
 89 |     justify-content: center;
 90 | 
 91 |     &:hover{
 92 |         cursor: pointer;
 93 |     }
 94 | 
 95 | `
 96 | export const CheckFill = styled.div<DoneProps>`
 97 |     background: #7f56da;
 98 |     height: 20px;
 99 |     width: 20px;
100 |     border-radius:10px;
101 |     ${props => !props.done &&
102 |     css`display:none;`}
103 | `


--------------------------------------------------------------------------------
/src/Contexts/addContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useState, createContext, ReactNode} from "react";
 2 | import { AddType } from "./addType";
 3 | 
 4 | export interface ChildrenProps {
 5 |     children: React.ReactNode;
 6 | }
 7 | 
 8 | export const AddContext = createContext<AddType|null>(null);
 9 | 
10 | export const AddContextProvider: React.FC<ChildrenProps> = ({children}) =>{
11 |     const [showAdd, setShowAdd] = useState(false);
12 |     const [id, setId] = useState(0);
13 | 
14 |     return(
15 |         <AddContext.Provider value={{showAdd, setShowAdd, id, setId}}>
16 |             {children}
17 |         </AddContext.Provider>
18 |     );
19 | 
20 | }


--------------------------------------------------------------------------------
/src/Contexts/addType.ts:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | 
 4 | 
 5 | export type AddType ={
 6 |     showAdd:boolean;
 7 |     setShowAdd: Function;
 8 |     id: number;
 9 |     setId: Function;
10 | }


--------------------------------------------------------------------------------
/src/Contexts/authContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useState, createContext} from "react";
 2 | import { ChildrenProps } from "./deleteContext";
 3 | 
 4 | export interface UserDataProps{
 5 |     email: string,
 6 | }
 7 | 
 8 | export type AuthType = {
 9 |     userData: UserDataProps,
10 |     setUserData: Function
11 | }
12 | 
13 | const AuthContext = createContext<AuthType|null>(null);
14 | 
15 | export const AuthProvider:React.FC<ChildrenProps> = ({ children }) => {
16 | 
17 | 	const [userData, setUserData] = useState(() => {
18 |         const email = localStorage.getItem('@Project:email');
19 | 
20 |         if (email) {
21 |             return { email: JSON.parse(email) };
22 |         }else{
23 |             return {email:""} };
24 | 	});
25 | 
26 |     return(
27 | 		<AuthContext.Provider value={{userData, setUserData}} > 
28 | 		    {children} 
29 | 		</AuthContext.Provider>
30 | 	);
31 | 
32 | }
33 | 
34 | export default AuthContext;


--------------------------------------------------------------------------------
/src/Contexts/categoriesContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, {createContext, useState, ReactNode} from "react";
 2 | import { CategorieProps, CategorieContextType } from "./categoriesType";
 3 | 
 4 | interface ChildrenProps {
 5 |     children: React.ReactNode;
 6 |   };
 7 | 
 8 | export const CategoriesContext = createContext<CategorieContextType|null>(null);
 9 | 
10 | export const CategoriesContextProvider:React.FC<ChildrenProps> = ({children})=>{
11 | 
12 |     const [categList, setCategList] = useState<CategorieProps[]>([
13 |         {
14 |             id:0,
15 |             name: "None",
16 |             color: "#afafaf"
17 |         },
18 |         {
19 |             id:1,
20 |             name: "Home",
21 |             color: "#FF9C9C"
22 |         },
23 |         {   id:2,
24 |             name:"School",
25 |             color: "#FFD79C"
26 |         },
27 |         {
28 |             id:3,
29 |             name:"Shopping list",
30 |             color: "#9CD0FF"
31 |         },
32 |     ])
33 | 
34 |     return(
35 |         <CategoriesContext.Provider value={{categList}}>
36 |             {children}
37 |         </CategoriesContext.Provider>
38 |     )
39 | };
40 | 
41 | 


--------------------------------------------------------------------------------
/src/Contexts/categoriesType.ts:
--------------------------------------------------------------------------------
 1 | export interface CategorieProps{
 2 |     id:number;
 3 |     name:string;
 4 |     color:string;
 5 | };
 6 | 
 7 | export type CategorieContextType = {
 8 |     categList: CategorieProps[];
 9 |     
10 | }


--------------------------------------------------------------------------------
/src/Contexts/deleteContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useState, createContext, ReactNode} from "react";
 2 | import { DeleteType } from "./deleteType";
 3 | 
 4 | export interface ChildrenProps {
 5 |     children: React.ReactNode;
 6 | 
 7 |   }
 8 | 
 9 | export const DeleteContext = createContext<DeleteType|null>(null);
10 | 
11 | export const DeleteContextProvider: React.FC<ChildrenProps> = ({children}) =>{
12 |     const [showDelete, setShowDelete] = useState(false);
13 |     const [id, setId] = useState(0);
14 | 
15 |     return(
16 |         <DeleteContext.Provider value={{showDelete, setShowDelete, id, setId}}>
17 |             {children}
18 |         </DeleteContext.Provider>
19 |     );
20 | 
21 | }


--------------------------------------------------------------------------------
/src/Contexts/deleteType.ts:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | 
 4 | 
 5 | export type DeleteType ={
 6 |     showDelete:boolean;
 7 |     setShowDelete: Function;
 8 |     id: number;
 9 |     setId: Function;
10 | }


--------------------------------------------------------------------------------
/src/Contexts/taskListContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useState, createContext, ReactNode} from "react";
 2 | import { TaskProps, TaskListType } from "./taskType";
 3 | 
 4 | interface ChildrenProps {
 5 |     children: React.ReactNode;
 6 |   }
 7 | 
 8 | export const TaskListContext = createContext<TaskListType|null>(null);
 9 | 
10 | export const TaskListContextProvider: React.FC<ChildrenProps> = ({children}) =>{
11 |     const [taskList, setTaskList] = useState<TaskProps[]>([
12 |         {
13 |             id:1,
14 |             title: "Example task",
15 |             done: false,
16 |             categorie: "Home",
17 |             color: "#FF9C9C",
18 |         },
19 |         {
20 |             id:2,
21 |             title: "Example task 2",
22 |             done: false,
23 |             categorie: "Home",
24 |             color: "#FF9C9C",
25 |         },
26 |         {
27 |             id:3,
28 |             title: "Example task 3",
29 |             done: true,
30 |             categorie: "Home",
31 |             color: "#FF9C9C",
32 |         },
33 | 
34 |     ]);
35 |     const [doneTasks, setDoneTasks]=  useState<TaskProps[]>(taskList.filter((task:TaskProps) => task.done==true));
36 |     const [notDoneTasks, setNotDoneTasks] = useState<TaskProps[]>(taskList.filter((task:TaskProps) => task.done==false));
37 | 
38 |     const addTask = (task: TaskProps)=>{
39 |     
40 |         taskList.push(task)
41 |         setTaskList([...taskList]);
42 |         console.log(taskList)
43 |         setNotDoneTasks([...notDoneTasks, task]);
44 | 
45 |         
46 |     };
47 | 
48 |     const checkTask = (id:number)=>{
49 |         taskList.filter((task: TaskProps) => {
50 |             if (task.id === id) {
51 |               task.done = !task.done
52 |               setTaskList([...taskList]);
53 |               setDoneTasks(taskList.filter((task:TaskProps) => task.done==true));
54 |               setNotDoneTasks(taskList.filter((task:TaskProps) => task.done!=true));
55 |             }
56 |         });
57 |     };
58 | 
59 |     const deleteTask = (id:number)=>{
60 |         const index = taskList.findIndex((task:TaskProps)=>task.id == id);
61 |         taskList.splice(index,1);
62 |         setTaskList([...taskList]);
63 |         console.log(taskList);
64 |         setDoneTasks(taskList.filter((task:TaskProps) => task.done==true));
65 |         setNotDoneTasks(taskList.filter((task:TaskProps) => task.done!=true));
66 |     };
67 | 
68 |     return(
69 |         <TaskListContext.Provider value={{taskList, doneTasks,notDoneTasks, addTask, checkTask, deleteTask}}>
70 |             {children}
71 |         </TaskListContext.Provider>
72 |     )
73 | }
74 | 
75 | 


--------------------------------------------------------------------------------
/src/Contexts/taskType.ts:
--------------------------------------------------------------------------------
 1 | export interface TaskProps{
 2 |     id:number;
 3 |     title: string;
 4 |     done:boolean;
 5 |     categorie: string;
 6 |     color: string;
 7 | };
 8 | 
 9 | export type TaskListType = {
10 |     taskList: TaskProps[];
11 |     doneTasks: TaskProps[];
12 |     notDoneTasks: TaskProps[];
13 |     addTask:(task: TaskProps)=>void;
14 |     checkTask: (id:number) =>void;
15 |     deleteTask: (id:number)=>void;
16 | }


--------------------------------------------------------------------------------
/src/Img/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MatheusCavini/ReactJS-ToDoList/89d62d130e6e9ae5ad3f58cdda7f6810abcf7a74/src/Img/Logo.png


--------------------------------------------------------------------------------
/src/Img/add.svg:
--------------------------------------------------------------------------------
1 | <svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M31 16.7143V45.5524M45.2857 31H16.7143M59.5714 50.0476V11.9524C59.5714 9.4265 58.568 7.00408 56.782 5.21802C54.9959 3.43196 52.5735 2.42856 50.0476 2.42856H11.9524C9.4265 2.42856 7.00408 3.43196 5.21802 5.21802C3.43196 7.00408 2.42856 9.4265 2.42856 11.9524V50.0476C2.42856 52.5735 3.43196 54.9959 5.21802 56.782C7.00408 58.568 9.4265 59.5714 11.9524 59.5714H50.0476C52.5735 59.5714 54.9959 58.568 56.782 56.782C58.568 54.9959 59.5714 52.5735 59.5714 50.0476Z" stroke="#CCCCCC" stroke-width="4.7619" stroke-linecap="round" stroke-linejoin="round"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/Img/arrow.svg:
--------------------------------------------------------------------------------
1 | <svg width="80" height="46" viewBox="0 0 80 46" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M78.2917 9.35417L43.2917 44.4583C42.875 44.875 42.4236 45.1694 41.9375 45.3417C41.4514 45.5167 40.9306 45.6042 40.375 45.6042C39.8195 45.6042 39.2986 45.5167 38.8125 45.3417C38.3264 45.1694 37.875 44.875 37.4583 44.4583L2.35418 9.35417C1.38195 8.38194 0.895844 7.16667 0.895844 5.70833C0.895844 4.25 1.41668 3 2.45834 1.95833C3.50001 0.916668 4.71529 0.395835 6.10418 0.395835C7.49307 0.395835 8.70834 0.916668 9.75001 1.95833L40.375 32.5833L71 1.95833C71.9722 0.986113 73.1695 0.5 74.5917 0.5C76.0167 0.5 77.25 1.02083 78.2917 2.0625C79.3333 3.10417 79.8542 4.31944 79.8542 5.70833C79.8542 7.09722 79.3333 8.3125 78.2917 9.35417Z" fill="#777777"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/Img/edit.svg:
--------------------------------------------------------------------------------
1 | <svg width="77" height="77" viewBox="0 0 77 77" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M68.4167 26.1875L50.7083 8.68751L56.5417 2.85418C58.1389 1.25695 60.1014 0.458344 62.4292 0.458344C64.7542 0.458344 66.7153 1.25695 68.3125 2.85418L74.1458 8.68751C75.7431 10.2847 76.5764 12.2125 76.6458 14.4708C76.7153 16.7264 75.9514 18.6528 74.3542 20.25L68.4167 26.1875ZM62.375 32.3333L18.2083 76.5H0.500002V58.7917L44.6667 14.625L62.375 32.3333Z" fill="#CCCCCC"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/Img/erase.svg:
--------------------------------------------------------------------------------
1 | <svg width="60" height="76" viewBox="0 0 60 76" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M5 67.1667C5 71.75 8.75 75.5 13.3333 75.5H46.6667C51.25 75.5 55 71.75 55 67.1667V17.1667H5V67.1667ZM59.1667 4.66667H44.5833L40.4167 0.5H19.5833L15.4167 4.66667H0.833336V13H59.1667V4.66667Z" fill="#CCCCCC"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/Img/filter.svg:
--------------------------------------------------------------------------------
1 | <svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M29.2517 66.6667C28.0712 66.6667 27.0823 66.2667 26.2851 65.4667C25.4851 64.6694 25.0851 63.6806 25.0851 62.5V37.5L0.918397 6.66667C-0.123269 5.27778 -0.278825 3.81945 0.451731 2.29167C1.17951 0.76389 2.44618 0 4.25173 0H62.5851C64.3906 0 65.6587 0.76389 66.3892 2.29167C67.117 3.81945 66.9601 5.27778 65.9184 6.66667L41.7517 37.5V62.5C41.7517 63.6806 41.3531 64.6694 40.5559 65.4667C39.7559 66.2667 38.7656 66.6667 37.5851 66.6667H29.2517Z" fill="#AAAAAA"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/Img/folder.svg:
--------------------------------------------------------------------------------
1 | <svg width="82" height="70" viewBox="0 0 82 70" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M75.375 13.125H42.2891L31.625 2.46094C31.047 1.87851 30.3593 1.41639 29.6017 1.10126C28.8441 0.786143 28.0315 0.624272 27.2109 0.625002H6.625C4.9674 0.625002 3.37768 1.28348 2.20558 2.45558C1.03348 3.62769 0.375 5.2174 0.375 6.875V63.3594C0.375 64.9548 1.00879 66.4849 2.13694 67.6131C3.26508 68.7412 4.79518 69.375 6.39063 69.375H75.7266C77.2878 69.3648 78.7821 68.74 79.8861 67.6361C80.99 66.5321 81.6148 65.0378 81.625 63.4766V19.375C81.625 17.7174 80.9665 16.1277 79.7944 14.9556C78.6223 13.7835 77.0326 13.125 75.375 13.125ZM27.2109 6.875L33.4609 13.125H6.625V6.875H27.2109ZM75.375 63.125H6.625V19.375H75.375V63.125Z" fill="#777777"/>
3 | <path d="M28.5 41.25C28.5 42.0788 28.8292 42.8737 29.4153 43.4597C30.0013 44.0458 30.7962 44.375 31.625 44.375H50.375C51.2038 44.375 51.9987 44.0458 52.5847 43.4597C53.1708 42.8737 53.5 42.0788 53.5 41.25C53.5 40.4212 53.1708 39.6263 52.5847 39.0403C51.9987 38.4542 51.2038 38.125 50.375 38.125H31.625C30.7962 38.125 30.0013 38.4542 29.4153 39.0403C28.8292 39.6263 28.5 40.4212 28.5 41.25Z" fill="#777777"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/Img/folderFill.svg:
--------------------------------------------------------------------------------
1 | <svg width="82" height="70" viewBox="0 0 82 70" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M75.375 13.125H42.2891L31.625 2.46094C31.047 1.87851 30.3593 1.41639 29.6017 1.10126C28.8441 0.786143 28.0315 0.624272 27.2109 0.625002H6.625C4.9674 0.625002 3.37768 1.28348 2.20558 2.45558C1.03348 3.62769 0.375 5.2174 0.375 6.875V63.3594C0.375 64.9548 1.00879 66.4849 2.13694 67.6131C3.26508 68.7412 4.79518 69.375 6.39063 69.375H75.7266C77.2878 69.3648 78.7821 68.74 79.8861 67.6361C80.99 66.5321 81.6148 65.0378 81.625 63.4766V19.375C81.625 17.7174 80.9665 16.1277 79.7944 14.9556C78.6223 13.7835 77.0326 13.125 75.375 13.125ZM6.625 6.875H27.2109L33.4609 13.125H6.625V6.875ZM50.375 44.375H31.625C30.7962 44.375 30.0013 44.0458 29.4153 43.4597C28.8292 42.8737 28.5 42.0788 28.5 41.25C28.5 40.4212 28.8292 39.6263 29.4153 39.0403C30.0013 38.4542 30.7962 38.125 31.625 38.125H50.375C51.2038 38.125 51.9987 38.4542 52.5847 39.0403C53.1708 39.6263 53.5 40.4212 53.5 41.25C53.5 42.0788 53.1708 42.8737 52.5847 43.4597C51.9987 44.0458 51.2038 44.375 50.375 44.375Z" fill="#7F56DA"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/Img/logout.svg:
--------------------------------------------------------------------------------
1 | <svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M67.1667 75.5C69.4583 75.5 71.4208 74.6847 73.0542 73.0542C74.6847 71.4208 75.5 69.4583 75.5 67.1667V8.83333C75.5 6.54167 74.6847 4.57917 73.0542 2.94583C71.4208 1.31528 69.4583 0.5 67.1667 0.5H38V8.83333H67.1667V67.1667H38V75.5H67.1667ZM21.3333 58.8333L27.0625 52.7917L16.4375 42.1667H50.5V33.8333H16.4375L27.0625 23.2083L21.3333 17.1667L0.500003 38L21.3333 58.8333Z" fill="#777777"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/Img/settings.svg:
--------------------------------------------------------------------------------
1 | <svg width="86" height="88" viewBox="0 0 86 88" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M77.375 46.375V41.5938L83.375 36.3438C84.481 35.3689 85.2068 34.0345 85.4241 32.5763C85.6414 31.118 85.3362 29.63 84.5625 28.375L77.1875 15.875C76.6395 14.9258 75.8515 14.1374 74.9026 13.5889C73.9537 13.0405 72.8773 12.7511 71.7812 12.75C71.102 12.7448 70.4265 12.8504 69.7812 13.0625L62.1875 15.625C60.8764 14.7538 59.5088 13.9708 58.0937 13.2813L56.5 5.40625C56.2142 3.96752 55.4315 2.67513 54.2889 1.75532C53.1463 0.835517 51.7166 0.346899 50.25 0.375004H35.625C34.1584 0.346899 32.7287 0.835517 31.5861 1.75532C30.4435 2.67513 29.6608 3.96752 29.375 5.40625L27.7812 13.2813C26.356 13.9706 24.978 14.7536 23.6562 15.625L16.2187 12.9375C15.5665 12.7676 14.8912 12.7043 14.2187 12.75C13.1227 12.7511 12.0463 13.0405 11.0974 13.5889C10.1485 14.1374 9.3605 14.9258 8.8125 15.875L1.4375 28.375C0.70808 29.6281 0.437032 31.0958 0.670775 32.5268C0.904517 33.9577 1.62851 35.2629 2.71875 36.2188L8.625 41.625V46.4063L2.71875 51.6563C1.59771 52.6188 0.853919 53.9473 0.619366 55.4061C0.384814 56.8649 0.67467 58.3596 1.4375 59.625L8.8125 72.125C9.3605 73.0742 10.1485 73.8626 11.0974 74.4111C12.0463 74.9596 13.1227 75.2489 14.2187 75.25C14.898 75.2552 15.5735 75.1497 16.2187 74.9375L23.8125 72.375C25.1236 73.2462 26.4912 74.0292 27.9062 74.7188L29.5 82.5938C29.7858 84.0325 30.5685 85.3249 31.7111 86.2447C32.8537 87.1645 34.2834 87.6531 35.75 87.625H50.5C51.9666 87.6531 53.3963 87.1645 54.5389 86.2447C55.6815 85.3249 56.4642 84.0325 56.75 82.5938L58.3437 74.7188C59.769 74.0294 61.147 73.2464 62.4687 72.375L70.0312 74.9375C70.6765 75.1497 71.352 75.2552 72.0312 75.25C73.1273 75.2489 74.2037 74.9596 75.1526 74.4111C76.1015 73.8626 76.8895 73.0742 77.4375 72.125L84.5625 59.625C85.2919 58.3719 85.563 56.9042 85.3292 55.4732C85.0955 54.0423 84.3715 52.7371 83.2812 51.7813L77.375 46.375ZM71.7812 69L61.0625 65.375C58.5533 67.5003 55.6856 69.1617 52.5937 70.2813L50.375 81.5H35.625L33.4062 70.4063C30.3388 69.2549 27.4866 67.5964 24.9687 65.5L14.2187 69L6.84375 56.5L15.3437 49C14.7659 45.7652 14.7659 42.4536 15.3437 39.2188L6.84375 31.5L14.2187 19L24.9375 22.625C27.4467 20.4997 30.3144 18.8383 33.4062 17.7188L35.625 6.5H50.375L52.5937 17.5938C55.6612 18.7451 58.5134 20.4036 61.0312 22.5L71.7812 19L79.1562 31.5L70.6562 39C71.2341 42.2348 71.2341 45.5464 70.6562 48.7813L79.1562 56.5L71.7812 69Z" fill="#777777"/>
3 | <path d="M43 62.75C39.2916 62.75 35.6665 61.6503 32.5831 59.5901C29.4996 57.5298 27.0964 54.6014 25.6773 51.1753C24.2581 47.7492 23.8868 43.9792 24.6103 40.3421C25.3338 36.7049 27.1195 33.364 29.7418 30.7417C32.364 28.1195 35.7049 26.3337 39.3421 25.6103C42.9792 24.8868 46.7492 25.2581 50.1753 26.6773C53.6014 28.0964 56.5298 30.4996 58.5901 33.5831C60.6503 36.6665 61.75 40.2916 61.75 44C61.7751 46.4693 61.3072 48.9187 60.3738 51.2049C59.4404 53.491 58.0602 55.568 56.3141 57.3141C54.568 59.0602 52.4911 60.4404 50.2049 61.3738C47.9187 62.3072 45.4693 62.7751 43 62.75ZM43 31.5C41.348 31.4615 39.7053 31.7585 38.1713 32.3731C36.6373 32.9877 35.244 33.907 34.0755 35.0755C32.907 36.244 31.9877 37.6373 31.3731 39.1713C30.7585 40.7053 30.4615 42.348 30.5 44C30.4615 45.652 30.7585 47.2947 31.3731 48.8287C31.9877 50.3627 32.907 51.756 34.0755 52.9245C35.244 54.093 36.6373 55.0123 38.1713 55.6269C39.7053 56.2415 41.348 56.5385 43 56.5C44.6521 56.5385 46.2947 56.2415 47.8287 55.6269C49.3627 55.0123 50.756 54.093 51.9245 52.9245C53.093 51.756 54.0124 50.3627 54.6269 48.8287C55.2415 47.2947 55.5385 45.652 55.5 44C55.5385 42.348 55.2415 40.7053 54.6269 39.1713C54.0124 37.6373 53.093 36.244 51.9245 35.0755C50.756 33.907 49.3627 32.9877 47.8287 32.3731C46.2947 31.7585 44.6521 31.4615 43 31.5Z" fill="#777777"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/Img/settingsFill.svg:
--------------------------------------------------------------------------------
1 | <svg width="88" height="90" viewBox="0 0 88 90" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M44 29.375C40.9097 29.375 37.8887 30.2914 35.3192 32.0083C32.7497 33.7252 30.747 36.1655 29.5644 39.0206C28.3818 41.8757 28.0723 45.0173 28.6752 48.0483C29.2781 51.0792 30.7663 53.8633 32.9514 56.0485C35.1366 58.2337 37.9208 59.7219 40.9517 60.3248C43.9827 60.9277 47.1243 60.6182 49.9794 59.4356C52.8345 58.253 55.2748 56.2503 56.9917 53.6808C58.7086 51.1113 59.625 48.0903 59.625 45C59.6126 40.8598 57.9625 36.8927 55.0349 33.9651C52.1073 31.0375 48.1402 29.3874 44 29.375ZM77.7344 45C77.7262 46.46 77.6192 47.9178 77.4141 49.3633L86.9238 56.8086C87.338 57.1506 87.6171 57.6287 87.7112 58.1575C87.8053 58.6864 87.7083 59.2314 87.4375 59.6953L78.4414 75.2266C78.1679 75.6863 77.7411 76.0349 77.2359 76.2111C76.7308 76.3872 76.1797 76.3795 75.6797 76.1895L64.498 71.6973C62.1697 73.4902 59.6217 74.9782 56.916 76.125L55.2441 87.9961C55.1506 88.5278 54.8752 89.0106 54.4652 89.3618C54.0552 89.7131 53.5359 89.911 52.9961 89.9219H35.0039C34.4739 89.9116 33.9631 89.7219 33.5548 89.3838C33.1465 89.0458 32.8649 88.5793 32.7559 88.0605L31.084 76.1895C28.3708 75.0559 25.821 73.5656 23.5019 71.7578L12.3203 76.25C11.8205 76.4403 11.2696 76.4482 10.7645 76.2724C10.2593 76.0967 9.83236 75.7485 9.55859 75.2891L0.562493 59.7598C0.291707 59.2959 0.194697 58.7508 0.288798 58.222C0.382899 57.6932 0.661979 57.215 1.07616 56.873L10.5859 49.4277C10.3831 47.9604 10.2761 46.4813 10.2656 45C10.2737 43.54 10.3808 42.0822 10.5859 40.6367L1.07616 33.1914C0.661979 32.8494 0.382899 32.3713 0.288798 31.8425C0.194697 31.3136 0.291707 30.7686 0.562493 30.3047L9.55859 14.7734C9.83206 14.3137 10.2589 13.9651 10.7641 13.7889C11.2692 13.6128 11.8203 13.6205 12.3203 13.8105L23.5019 18.3027C25.8303 16.5098 28.3783 15.0218 31.084 13.875L32.7559 2.00391C32.8494 1.47217 33.1248 0.989424 33.5348 0.638172C33.9448 0.286921 34.4641 0.0889624 35.0039 0.078125H52.9961C53.5261 0.0884405 54.0369 0.278108 54.4452 0.616165C54.8535 0.954222 55.1351 1.4207 55.2441 1.93945L56.916 13.8105C59.6326 14.9433 62.1857 16.4337 64.5078 18.2422L75.6797 13.75C76.1795 13.5597 76.7304 13.5518 77.2355 13.7276C77.7406 13.9033 78.1676 14.2515 78.4414 14.7109L87.4375 30.2422C87.7083 30.7061 87.8053 31.2511 87.7112 31.78C87.6171 32.3088 87.338 32.7869 86.9238 33.1289L77.4141 40.5742C77.6168 42.041 77.7238 43.5193 77.7344 45Z" fill="#7F56DA"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/Img/task.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MatheusCavini/ReactJS-ToDoList/89d62d130e6e9ae5ad3f58cdda7f6810abcf7a74/src/Img/task.png


--------------------------------------------------------------------------------
/src/Img/taskFill.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MatheusCavini/ReactJS-ToDoList/89d62d130e6e9ae5ad3f58cdda7f6810abcf7a74/src/Img/taskFill.png


--------------------------------------------------------------------------------
/src/Pages/Categorie/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, {useContext, useState} from "react";
  2 | 
  3 | import {useParams} from "react-router-dom";
  4 | 
  5 | import * as S from "./styles";
  6 | import Logo from "../../Img/Logo.png"
  7 | import TaskFill from "../../Img/task.png";
  8 | import Settings from "../../Img/settings.svg";
  9 | import Folder from "../../Img/folder.svg";
 10 | import Logout from "../../Img/logout.svg"
 11 | import SidebarItem from "../../Components/SidebarItem";
 12 | import ExpandSidebarItem from "../../Components/ExpandSidebarItem";
 13 | import TaskCard from "../../Components/TaskCard"; 
 14 | import AddTask from "../../Components/AddTask";
 15 | import { TaskListContext } from "../../Contexts/taskListContext";
 16 | import { TaskListType } from "../../Contexts/taskType";
 17 | import FilterTag from "../../Components/FilterTag";
 18 | import Filter from "../../Img/filter.svg";
 19 | import { DeleteContext } from "../../Contexts/deleteContext";
 20 | import { DeleteType } from "../../Contexts/deleteType";
 21 | import DeleteModal from "../../Components/DeleteModal";
 22 | import AddModal from "../../Components/AddModal";
 23 | import { AddContext } from "../../Contexts/addContext";
 24 | import { AddType } from "../../Contexts/addType";
 25 | import { Link } from "react-router-dom";
 26 | import AuthContext, {AuthType, UserDataProps} from "../../Contexts/authContext";
 27 | 
 28 | 
 29 | const CategoriePage:React.FC = ()=>{
 30 |     const {name} = useParams<string>()
 31 | 
 32 |     const{taskList, doneTasks, notDoneTasks} = useContext(TaskListContext) as TaskListType;
 33 |     const{showDelete} = useContext(DeleteContext) as DeleteType;
 34 |     const{showAdd} =  useContext(AddContext) as AddType;
 35 |     const [listToDisplay, setListToDisplay] = useState(0);
 36 |     const listOfLists = [
 37 |         taskList.filter(task => task.categorie==name), 
 38 |         doneTasks.filter(task => task.categorie==name), 
 39 |         notDoneTasks.filter(task => task.categorie==name)];
 40 | 
 41 |     const [allActive, setAllActive] = useState(true);
 42 |     const [doneActive, setDoneActive] = useState(false);
 43 |     const [notDoneActive, setNotDoneActive] = useState(false);
 44 | 
 45 |     const {setUserData} = useContext(AuthContext) as AuthType;
 46 | 
 47 |    
 48 |    
 49 |     function handleAll(){
 50 |         setListToDisplay(0);
 51 |         setAllActive(true);
 52 |         setDoneActive(false);
 53 |         setNotDoneActive(false);
 54 |     };
 55 | 
 56 |     function handleDone(){
 57 |         setListToDisplay(1);
 58 |         setAllActive(false);
 59 |         setDoneActive(true);
 60 |         setNotDoneActive(false);
 61 |     };
 62 |     function handleNotDone(){
 63 |         setListToDisplay(2);
 64 |         setAllActive(false);
 65 |         setDoneActive(false);
 66 |         setNotDoneActive(true);
 67 |     };
 68 | 
 69 |     function handleLogout(){
 70 |         localStorage.removeItem('@Project:email');
 71 |         setUserData({email:""});
 72 |     };
 73 |     return(
 74 |         
 75 |         <S.Page>
 76 |             <S.Sidebar>
 77 |                 <S.Img src={Logo}/>
 78 |                 <S.Tabs>
 79 |                     <Link to="/" style={{ textDecoration: 'none' }}>
 80 |                         <SidebarItem icon={TaskFill} name="Tasks" isActive={false} ></SidebarItem>
 81 |                     </Link>
 82 |                     <ExpandSidebarItem icon={Folder} name="Categories"   ></ExpandSidebarItem>
 83 |                     <SidebarItem icon={Settings} name="Settings" isActive={false} ></SidebarItem>
 84 |                 </S.Tabs>
 85 |                 <Link to="/login" style={{ textDecoration: 'none' }} onClick={handleLogout}>
 86 |                     <SidebarItem icon={Logout}name="Logout" isActive={false}></SidebarItem>
 87 |                 </Link>
 88 |     
 89 |             </S.Sidebar>
 90 |             <S.Main>
 91 |                 <S.Header>{name}</S.Header>
 92 |                 <S.TitleAndFilter>
 93 |                     <S.Title onClick={handleDone}>Tasks </S.Title>
 94 |                     <S.FilterField>
 95 |                         <div onClick={handleAll}><FilterTag name="All" active={allActive}/></div>
 96 |                         <div onClick={handleDone}><FilterTag name="Done" active={doneActive}/></div>
 97 |                         <div onClick={handleNotDone}><FilterTag name="Not done" active={notDoneActive}/></div>
 98 |                         <S.FilterIcon src={Filter}/>
 99 |                     </S.FilterField>
100 |                 </S.TitleAndFilter>
101 |                 {listOfLists[listToDisplay].map(task =><TaskCard id={task.id} name={task.title} list={task.categorie} color={task.color} done={task.done}/>)}
102 |                 <AddTask></AddTask>
103 |             </S.Main>
104 |             {showDelete && <DeleteModal/>}
105 |             {showAdd && <AddModal/>}
106 |         </S.Page>
107 |         
108 |         
109 |     );
110 | };
111 | 
112 | export default CategoriePage;


--------------------------------------------------------------------------------
/src/Pages/Categorie/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | export const Page = styled.div`
 4 |     width: 100vw;
 5 |     height: 100vh;
 6 |     display: flex;
 7 |     flex: row;
 8 |     background-color: #f5f5f5;
 9 | `
10 | 
11 | export const Sidebar = styled.div`
12 |     height: 100vh;
13 |     width: 18vw;
14 |     background-color: white;
15 |     display: flex;
16 |     flex-direction:column;
17 |     align-items: center;
18 |     justify-content: space-between;
19 |     padding: 8px 0;
20 |     box-sizing: border-box;
21 | `
22 | export const Img = styled.img`
23 |     width: 50px;
24 |     margin:32px;
25 | `
26 | 
27 | export const Tabs = styled.div`
28 |     display: flex;
29 |     flex-direction: column;
30 |     align-items:center;
31 |     height: 60vh;
32 | `
33 | export const Main = styled.div`
34 |     height: 100vh;
35 |     width: 82vw;
36 |     display: flex;
37 |     flex-direction: column;
38 |     align-items:center;
39 |     justify-content: start;
40 |     overflow-y:scroll;
41 | `
42 | 
43 | export const Header = styled.h1`
44 |     font-size: 40px;
45 |     font-weight:400;
46 |     color: #555;
47 |     margin: 16px;
48 | `
49 | 
50 | export const TitleAndFilter = styled.div`
51 |     height: 20px;
52 |     width: 70vw;
53 |     display: flex;
54 |     justify-content: space-between;
55 |     align-items: center;
56 |     margin-top:16px;
57 |     margin-bottom:4px;
58 | `
59 | 
60 | export const Title = styled.h3`
61 |     font-size: 24px;
62 |     color:#555;
63 | `
64 | 
65 | export const FilterField = styled.div`
66 |     height: 20px;
67 |     display: flex;
68 |     justify-content:center;;
69 | `
70 | 
71 | export const FilterIcon = styled.img`
72 |     height: 20px;
73 |     margin: 0 8px;
74 | `


--------------------------------------------------------------------------------
/src/Pages/Home/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, {useContext, useState} from "react";
  2 | import * as S from "./styles";
  3 | import Logo from "../../Img/Logo.png"
  4 | import TaskFill from "../../Img/taskFill.png";
  5 | import Settings from "../../Img/settings.svg";
  6 | import Folder from "../../Img/folder.svg";
  7 | import Logout from "../../Img/logout.svg"
  8 | import SidebarItem from "../../Components/SidebarItem";
  9 | import ExpandSidebarItem from "../../Components/ExpandSidebarItem";
 10 | import TaskCard from "../../Components/TaskCard"; 
 11 | import AddTask from "../../Components/AddTask";
 12 | import { TaskListContext } from "../../Contexts/taskListContext";
 13 | import { TaskListType } from "../../Contexts/taskType";
 14 | import FilterTag from "../../Components/FilterTag";
 15 | import Filter from "../../Img/filter.svg";
 16 | import { DeleteContext } from "../../Contexts/deleteContext";
 17 | import { DeleteType } from "../../Contexts/deleteType";
 18 | import DeleteModal from "../../Components/DeleteModal";
 19 | import AddModal from "../../Components/AddModal";
 20 | import { AddContext } from "../../Contexts/addContext";
 21 | import { AddType } from "../../Contexts/addType";
 22 | import { Link } from "react-router-dom";
 23 | import AuthContext, {AuthType, UserDataProps} from "../../Contexts/authContext";
 24 | 
 25 | 
 26 | const Home:React.FC = ()=>{
 27 |     const{taskList, doneTasks, notDoneTasks} = useContext(TaskListContext) as TaskListType;
 28 |     const{showDelete} = useContext(DeleteContext) as DeleteType;
 29 |     const{showAdd} =  useContext(AddContext) as AddType;
 30 |     const [listToDisplay, setListToDisplay] = useState(0);
 31 |     const listOfLists = [taskList, doneTasks, notDoneTasks];
 32 | 
 33 |     const [allActive, setAllActive] = useState(true);
 34 |     const [doneActive, setDoneActive] = useState(false);
 35 |     const [notDoneActive, setNotDoneActive] = useState(false);
 36 | 
 37 |     const {setUserData} = useContext(AuthContext) as AuthType;
 38 | 
 39 |    
 40 |    
 41 |     function handleAll(){
 42 |         setListToDisplay(0);
 43 |         setAllActive(true);
 44 |         setDoneActive(false);
 45 |         setNotDoneActive(false);
 46 |     };
 47 | 
 48 |     function handleDone(){
 49 |         setListToDisplay(1);
 50 |         setAllActive(false);
 51 |         setDoneActive(true);
 52 |         setNotDoneActive(false);
 53 |     };
 54 |     function handleNotDone(){
 55 |         setListToDisplay(2);
 56 |         setAllActive(false);
 57 |         setDoneActive(false);
 58 |         setNotDoneActive(true);
 59 |     };
 60 | 
 61 |     function handleLogout(){
 62 |         localStorage.removeItem('@Project:email');
 63 |         setUserData({email:""});
 64 |     };
 65 |     return(
 66 |         
 67 |         <S.Page>
 68 |             <S.Sidebar>
 69 |                 <S.Img src={Logo}/>
 70 |                 <S.Tabs>
 71 |                     <SidebarItem icon={TaskFill} name="Tasks" isActive={true} ></SidebarItem>
 72 |                     <ExpandSidebarItem icon={Folder} name="Categories"  ></ExpandSidebarItem>
 73 |                     <SidebarItem icon={Settings} name="Settings" isActive={false} ></SidebarItem>
 74 |                 </S.Tabs>
 75 |                 <Link to="/login" style={{ textDecoration: 'none' }} onClick={handleLogout}>
 76 |                     <SidebarItem icon={Logout}name="Logout" isActive={false}></SidebarItem>
 77 |                 </Link>
 78 |     
 79 |             </S.Sidebar>
 80 |             <S.Main>
 81 |                 <S.Header>All your tasks</S.Header>
 82 |                 <S.TitleAndFilter>
 83 |                     <S.Title onClick={handleDone}>Tasks </S.Title>
 84 |                     <S.FilterField>
 85 |                         <div onClick={handleAll}><FilterTag name="All" active={allActive}/></div>
 86 |                         <div onClick={handleDone}><FilterTag name="Done" active={doneActive}/></div>
 87 |                         <div onClick={handleNotDone}><FilterTag name="Not done" active={notDoneActive}/></div>
 88 |                         <S.FilterIcon src={Filter}/>
 89 |                     </S.FilterField>
 90 |                 </S.TitleAndFilter>
 91 |                 {listOfLists[listToDisplay].map(task =><TaskCard id={task.id} name={task.title} list={task.categorie} color={task.color} done={task.done}/>)}
 92 |                 <AddTask></AddTask>
 93 |             </S.Main>
 94 |             {showDelete && <DeleteModal/>}
 95 |             {showAdd && <AddModal/>}
 96 |         </S.Page>
 97 |         
 98 |         
 99 |     );
100 | };
101 | 
102 | export default Home;


--------------------------------------------------------------------------------
/src/Pages/Home/styles.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | export const Page = styled.div`
 4 |     width: 100vw;
 5 |     height: 100vh;
 6 |     display: flex;
 7 |     flex: row;
 8 |     background-color: #f5f5f5;
 9 | `
10 | 
11 | export const Sidebar = styled.div`
12 |     height: 100vh;
13 |     width: 18vw;
14 |     background-color: white;
15 |     display: flex;
16 |     flex-direction:column;
17 |     align-items: center;
18 |     justify-content: space-between;
19 |     padding: 8px 0;
20 |     box-sizing: border-box;
21 | `
22 | export const Img = styled.img`
23 |     width: 50px;
24 |     margin:32px;
25 | `
26 | 
27 | export const Tabs = styled.div`
28 |     display: flex;
29 |     flex-direction: column;
30 |     align-items:center;
31 |     height: 60vh;
32 | `
33 | export const Main = styled.div`
34 |     height: 100vh;
35 |     width: 82vw;
36 |     display: flex;
37 |     flex-direction: column;
38 |     align-items:center;
39 |     justify-content: start;
40 |     overflow-y:scroll;
41 | `
42 | 
43 | export const Header = styled.h1`
44 |     font-size: 40px;
45 |     font-weight:400;
46 |     color: #555;
47 |     margin: 16px;
48 | `
49 | 
50 | export const TitleAndFilter = styled.div`
51 |     height: 20px;
52 |     width: 70vw;
53 |     display: flex;
54 |     justify-content: space-between;
55 |     align-items: center;
56 |     margin-top:16px;
57 |     margin-bottom:4px;
58 | `
59 | 
60 | export const Title = styled.h3`
61 |     font-size: 24px;
62 |     color:#555;
63 | `
64 | 
65 | export const FilterField = styled.div`
66 |     height: 20px;
67 |     display: flex;
68 |     justify-content:center;;
69 | `
70 | 
71 | export const FilterIcon = styled.img`
72 |     height: 20px;
73 |     margin: 0 8px;
74 | `


--------------------------------------------------------------------------------
/src/Pages/Login/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useState, useContext} from "react";
 2 | import * as S from "./styles";
 3 | import Logo from "../../Img/Logo.png";
 4 | import { Link } from "react-router-dom";
 5 | import AuthContext, {AuthType} from "../../Contexts/authContext";
 6 | 
 7 | 
 8 | const Login: React.FC = ()=>{
 9 |     const {setUserData} = useContext(AuthContext) as AuthType;
10 |     const [email, setEmail] =  useState("");
11 | 
12 |     function handleLogin(){
13 |         localStorage.setItem('@Project:email', email);
14 |         setUserData({email})
15 | 
16 | 
17 |     }
18 | 
19 |     
20 | 
21 |     function handleEmail(event: React.ChangeEvent<HTMLInputElement>){
22 |         setEmail(event.target.value)
23 |     }
24 | 
25 |     return(    
26 |         <S.Page>
27 |             <S.LeftSide>
28 |                 <S.Img src={Logo}></S.Img>
29 |             </S.LeftSide>
30 |             <S.RightSide>
31 |                 <S.Title>Welcome to Tasker</S.Title>
32 |                 <S.Subtitle>Please, insert your informations to access your tasks.</S.Subtitle>
33 |                 <S.FieldName >Email</S.FieldName>
34 |                 <S.InputField value={email} id="email" onChange={handleEmail} placeholder="Insert your email"></S.InputField>
35 |                 <S.FieldName>Password</S.FieldName>
36 |                 <S.InputField placeholder="Insert your password" type="password"></S.InputField>
37 |                 <S.KeepSigned><S.Checkbox/><S.Subtitle>Remember me</S.Subtitle></S.KeepSigned>
38 |                 <Link to="/">
39 |                     <S.SignIn onClick={handleLogin}>Sign In</S.SignIn>
40 |                 </Link>
41 |                 <S.Subtitle>Don't have an account? <a>Sign Up</a></S.Subtitle>
42 |             </S.RightSide>
43 |         </S.Page>
44 |     )
45 | };
46 | 
47 | export default Login;


--------------------------------------------------------------------------------
/src/Pages/Login/styles.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | import styled from 'styled-components';
  3 | 
  4 | export const Img = styled.img`
  5 |     width: 30vw;
  6 | `
  7 | 
  8 | export const Page = styled.div`
  9 |     width: 100vw;
 10 |     height: 100vh;
 11 |     display: flex;
 12 |     flex: row;
 13 | `
 14 | 
 15 | export const LeftSide = styled.div`
 16 |     width: 50vw;
 17 |     height: 100vh;
 18 |     background-color: #eee;
 19 |     display: flex;
 20 |     align-items:center;
 21 |     justify-content:center;
 22 | `
 23 | 
 24 | export const RightSide = styled.div`
 25 |     width: 50vw;
 26 |     height: 100vh;
 27 |     display: flex;
 28 |     flex-direction:column;
 29 |     justify-content:center;
 30 |     align-items: left;
 31 |     padding-left:12.5vw ;
 32 |     box-sizing: border-box;
 33 | `
 34 | 
 35 | export const Title = styled.h1`
 36 |     color: #333;
 37 |     font-family: Roboto, Arial;
 38 |     font-size:40px;
 39 |     margin:12px;
 40 |     margin-left:0;
 41 | `
 42 | export const Subtitle = styled.h2`
 43 |     color: #999;
 44 |     font-family: Roboto, Arial;
 45 |     font-size:16px;
 46 |     font-weight: 300;
 47 |     margin:8px;
 48 |     margin-left:0;
 49 |     margin-right:16px;
 50 | 
 51 |     a{
 52 |         color:#7f56da;
 53 |         font-weight:bold;
 54 | 
 55 |         &:hover{
 56 |             color:#613db7;
 57 |             cursor:pointer;
 58 |         }
 59 |     }
 60 | `
 61 | 
 62 | export const FieldName = styled.h2`
 63 |     color: #777;
 64 |     font-family: Roboto, Arial;
 65 |     font-size:16px;
 66 |     font-weight: ;
 67 |     margin:8px;
 68 |     margin-left:0;
 69 | `
 70 | 
 71 | export const InputField = styled.input`
 72 |     width: 25vw;
 73 |     height: 40px;
 74 |     border-radius: 8px;
 75 |     border: 1px solid #999;
 76 |     padding-left:8px;
 77 |     font-size: 16px;
 78 |     color: #777;
 79 |     box-sizing: border-box;
 80 | 
 81 | 
 82 |     &:focus{
 83 |         border: 1px solid #999;
 84 |         outline:none;
 85 |     }
 86 | 
 87 |     &::placeholder{
 88 |         color: #bbb;
 89 | 
 90 |     }
 91 | 
 92 |     `
 93 | 
 94 |     export const SignIn = styled.button`
 95 |         width: 25vw;
 96 |         height: 40px;
 97 |         border-radius: 8px;
 98 |         background: #7f56da;
 99 |         color: white;
100 |         font-size:16px;
101 |         border: 0px;
102 |         font-weight:400;
103 | 
104 |         margin: 16px 0px;
105 | 
106 |         &:hover{
107 |             background: #613db7;
108 |             cursor:pointer;
109 |         }
110 |         
111 |     `
112 | 
113 |     export const Checkbox = styled.input.attrs({type:'checkbox'})`
114 |         
115 |         border: 1px solid #333;
116 |         margin-right:8px;
117 |         height: 16px;
118 |         width: 16px;
119 |     `
120 |     export const KeepSigned = styled.div`
121 |         display: flex;
122 |         justify-content:left;
123 |         align-items:center;
124 |         margin-top:16px
125 |     `


--------------------------------------------------------------------------------
/src/Routes/Route.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { Routes, Route, Link, Navigate } from 'react-router-dom'
 3 | import { ChildrenProps } from "../Contexts/deleteContext";
 4 | 
 5 | import AuthContext, {AuthType} from "../Contexts/authContext";
 6 | 
 7 | interface ProtectedRouteProps {
 8 |     children: React.ReactNode;
 9 |     priv:boolean;
10 | }
11 | 
12 | const ProtectedRoute:React.FC<ProtectedRouteProps> = ({ children, priv}) => {
13 | 
14 |     const{userData} = useContext(AuthContext) as AuthType;
15 | 
16 | 
17 |     
18 |     
19 |     if (!!userData.email === priv) {
20 |       return <>{children}</>;
21 |     }else{
22 |         return <Navigate to={{
23 |           pathname: priv ? "/login":"/"
24 |         }}/>
25 |   }
26 | 
27 |   
28 | };
29 | 
30 |   export default ProtectedRoute;
31 | 


--------------------------------------------------------------------------------
/src/contextProviders.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { DeleteContextProvider } from "./Contexts/deleteContext";
 3 | import { TaskListContextProvider } from "./Contexts/taskListContext";
 4 | import { ChildrenProps } from "./Contexts/deleteContext";
 5 | import { CategoriesContextProvider } from "./Contexts/categoriesContext";
 6 | import { AddContextProvider } from "./Contexts/addContext";
 7 | import { AuthProvider } from "./Contexts/authContext";
 8 | 
 9 | const ContextProviders:React.FC<ChildrenProps>=({children})=>{
10 |     return(
11 |         <TaskListContextProvider>
12 |             <DeleteContextProvider>
13 |                 <AddContextProvider>
14 |                 <CategoriesContextProvider>
15 |                     <AuthProvider>
16 |                     {children}
17 |                     </AuthProvider>
18 |                 </CategoriesContextProvider>
19 |                 </AddContextProvider>
20 |             </DeleteContextProvider>
21 |         </TaskListContextProvider>
22 |     )
23 | };
24 | 
25 | export default ContextProviders;


--------------------------------------------------------------------------------
/src/global.ts:
--------------------------------------------------------------------------------
 1 | import { createGlobalStyle } from "styled-components";
 2 | 
 3 | export default createGlobalStyle`
 4 |     *{
 5 |         margin: 0;
 6 |         padding: 0;
 7 |         font-family: "Roboto", Arial;
 8 |     }
 9 | 
10 |     html{
11 |         height:100vh;
12 |     }
13 | 
14 |     body{
15 |         display: flex;
16 |         flex-direction: row;
17 |         height: 100vh;
18 |     }
19 | `;


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './App';
 4 | 
 5 | 
 6 | const root = ReactDOM.createRoot(
 7 |   document.getElementById('root') as HTMLElement
 8 | );
 9 | root.render(
10 |   <React.StrictMode>
11 |     <App />
12 |   </React.StrictMode>
13 | );
14 | 
15 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


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