Changes: Ran prettier, Label are connected to inputs for better , Pro…

.prettierrc

@@ -0,0 +1,8 @@
+{ 
+  "trailingComma": "all",
+  "tabWidth": 2, 
+  "singleQuote": true, 
+  "jsxBracketSameLine": true,
+  "printWidth": 100,
+  "bracketSpacing": true
+}

package.json

@@ -26,12 +26,16 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md,json} --config ./.prettierrc",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint --fix src --ext .js,.jsx,.ts,.tsx"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "prettier"
     ]
   },
   "browserslist": {
@@ -47,6 +51,8 @@
     ]
   },
   "devDependencies": {
-    "@types/styled-components": "^5.1.26"
+    "@types/styled-components": "^5.1.26",
+    "eslint-config-prettier": "^8.8.0",
+    "prettier": "^2.8.7"
   }
 }

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import GlobalStyle from './global'
+import GlobalStyle from './global';
 import ContextProviders from './contextProviders';
 
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
@@ -9,20 +9,20 @@ import Home from './Pages/Home';
 import CategoriePage from './Pages/Categorie';
 import ProtectedRoute from './Routes/Route';
 
-
 function App() {
   return (
     <ContextProviders>
       <BrowserRouter>
         <Routes>
-			    <Route path="/" element={<ProtectedRoute priv={true}><Home/></ProtectedRoute>} />
-	        <Route path="/login" element={<ProtectedRoute priv={false}><Login/></ProtectedRoute>} />
-          <Route path='/categorie/:name' element = {<ProtectedRoute priv={true}><CategoriePage/></ProtectedRoute>}></Route>
-		    </Routes>
+          <Route index path="/login" element={<Login />} />
+          <Route element={<ProtectedRoute />}>
+            <Route path="/" element={<Home />} />
+            <Route path="/categorie/:name" element={<CategoriePage />} />
+          </Route>
+        </Routes>
       </BrowserRouter>
-      <GlobalStyle/>
+      <GlobalStyle />
     </ContextProviders>
-
   );
 }
 

src/Components/AddModal/index.tsx

@@ -1,73 +1,66 @@
-import React, { useContext, useState } from "react";
-import * as S from "./styles"
-import { AddContext } from "../../Contexts/addContext";
-import { AddType } from "../../Contexts/addType";
-import { TaskListContext } from "../../Contexts/taskListContext";
-import {  TaskProps, TaskListType } from "../../Contexts/taskType";
-import { CategoriesContext } from "../../Contexts/categoriesContext";
-import { CategorieContextType } from "../../Contexts/categoriesType";
-import { ActionMeta, InputActionMeta } from "react-select";
-import Select from "react-select/dist/declarations/src/Select";
-
-
-const AddModal:React.FC =()=>{
-    const{ addTask } = useContext(TaskListContext) as TaskListType;
-    const{categList} = useContext(CategoriesContext) as CategorieContextType;
-    const{ setShowAdd,} = useContext(AddContext) as AddType;
-
-
-    const [taskName, setTaskName ]= useState("");
-    const [taskCat, setTaskCat] = useState(categList.findIndex((cat)=>cat.name == "None"));
-
-    function handleTyping(event: React.ChangeEvent<HTMLInputElement>){
-        setTaskName(event.target.value);
-    };
-
-    function handleCancel(){
-        setShowAdd(false);
+import React, { useContext, useState } from 'react';
+import * as S from './styles';
+import { AddContext } from '../../Contexts/addContext';
+import { AddType } from '../../Contexts/addType';
+import { TaskListContext } from '../../Contexts/taskListContext';
+import { TaskProps, TaskListType } from '../../Contexts/taskType';
+import { CategoriesContext } from '../../Contexts/categoriesContext';
+import { CategorieContextType } from '../../Contexts/categoriesType';
+
+const AddModal: React.FC = () => {
+  const { addTask } = useContext(TaskListContext) as TaskListType;
+  const { categList } = useContext(CategoriesContext) as CategorieContextType;
+  const { setShowAdd } = useContext(AddContext) as AddType;
+
+  const [taskName, setTaskName] = useState('');
+  const [taskCat, setTaskCat] = useState(categList.findIndex((cat) => cat.name === 'None'));
+
+  function handleTyping(event: React.ChangeEvent<HTMLInputElement>) {
+    setTaskName(event.target.value);
+  }
+
+  function handleCancel() {
+    setShowAdd(false);
+  }
+
+  function handleAdd() {
+    const newTask: TaskProps = {
+      id: Math.random(),
+      title: taskName,
+      categorie: categList[taskCat].name,
+      color: categList[taskCat].color,
+      done: false,
     };
 
-    function handleAdd(){
-        const newTask:TaskProps ={
-            id: Math.random(),
-            title: taskName,
-            categorie: categList[taskCat].name,
-            color: categList[taskCat].color,
-            done: false,
-        }
-
-        setShowAdd(false);
-
-        addTask(newTask);
-
-    }
-
-    var e= document.getElementById("select") as HTMLSelectElement;
-
-    function handleChange(){
-        setTaskCat(Number(e.options[(e.selectedIndex)].value));
-    }
-
-
-
-
-
-    return(
-        <S.Background>
-            <S.Container>
-                <S.Text>Insert name</S.Text>
-                <S.TitleInput placeholder="Task name" onChange={handleTyping} value={taskName}/>
-                <S.Text>Select a categorie</S.Text>
-                <S.Select id="select" onChange={handleChange}>
-                    {categList.map((cat)=><option value={cat.id}>{cat.name}</option>)}
-                </S.Select>
-            <S.Buttons>
-                <S.CancelButton onClick={handleCancel} >Cancel</S.CancelButton>
-                <S.DeletButton onClick={handleAdd}>Add</S.DeletButton>
-            </S.Buttons>
-            </S.Container>
-        </S.Background>
-    )
+    setShowAdd(false);
+
+    addTask(newTask);
+  }
+
+  var e = document.getElementById('select') as HTMLSelectElement;
+
+  function handleChange() {
+    setTaskCat(Number(e.options[e.selectedIndex].value));
+  }
+
+  return (
+    <S.Background>
+      <S.Container>
+        <S.Text>Insert name</S.Text>
+        <S.TitleInput placeholder="Task name" onChange={handleTyping} value={taskName} />
+        <S.Text>Select a categorie</S.Text>
+        <S.Select id="select" onChange={handleChange}>
+          {categList.map((cat) => (
+            <option value={cat.id}>{cat.name}</option>
+          ))}
+        </S.Select>
+        <S.Buttons>
+          <S.CancelButton onClick={handleCancel}>Cancel</S.CancelButton>
+          <S.DeletButton onClick={handleAdd}>Add</S.DeletButton>
+        </S.Buttons>
+      </S.Container>
+    </S.Background>
+  );
 };
 
-export default AddModal;
+export default AddModal;