Monorepos and assignment to add npm types for todo

client/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@100xdevs/common": "^1.0.1",
+    "@shawakash/common2": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2",

client/src/Components/Login.tsx

@@ -1,21 +1,24 @@
+import { userParams } from '@shawakash/common2';
 import React, { useState } from 'react';
-import {Link} from 'react-router-dom';
+import {Link, useNavigate} from 'react-router-dom';
 
-const Login = () => {
+const Login: React.FC = () => {
+    const navigate = useNavigate()
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
 
     const handleLogin = async () => {
+        const reqBody: userParams = {username, password} 
         const response = await fetch('http://localhost:3000/auth/login', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ username, password })
+            body: JSON.stringify(reqBody)
         });
         // Todo: Create a type for the response that you get back from the server
         const data = await response.json();
         if (data.token) {
             localStorage.setItem("token", data.token)
-            window.location = "/todos";
+            navigate("/todos");
         } else {
             alert("invalid credentials");
         }

client/src/Components/Signup.tsx

@@ -1,23 +1,24 @@
 import React, { useState } from 'react';
 import {Link, useNavigate} from 'react-router-dom';
-import {useSetRecoilState} from "recoil";
-import {authState} from "../store/authState.js";
+import { userParams } from '@shawakash/common2';
 
-const Signup = () => {
-    const [username, setUsername] = useState('');
-    const [password, setPassword] = useState('');
+const Signup: React.FC = () => {
+    const navigate = useNavigate();
+    const [username, setUsername] = useState<string>('');
+    const [password, setPassword] = useState<string>('');
 
     const handleSignup = async () => {
+        const reqBody: userParams = {username, password};
         const response = await fetch('http://localhost:3000/auth/signup', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ username, password })
+            body: JSON.stringify(reqBody)
         });
         // Todo: Create a type for the response that you get back from the server
         const data = await response.json();
         if (data.token) {
             localStorage.setItem("token", data.token)
-            window.location = "/todos";
+            navigate("/todos");
         } else {
             alert("Error while signing up");
         }

client/src/Components/TodoList.tsx

@@ -1,39 +1,31 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { authState } from '../store/authState.js';
 import {useRecoilValue} from "recoil";
+import { useFetch } from './useFetch.js';
+import { useNavigate } from 'react-router-dom';
+import { todoParams } from '@shawakash/common2';
 
-interface Todo {
+export type Todo = {
     _id: string;
     title: string;
     description: string;
     done: boolean;
 }
 
-type TodoArray = Todo[];
 
-const TodoList = () => {
-    const [todos, setTodos] = useState<TodoArray>([]);
+const TodoList: React.FC = () => {
+    const navigate = useNavigate();
     const [title, setTitle] = useState('');
     const [description, setDescription] = useState('');
     const authStateValue = useRecoilValue(authState);
-
-    useEffect(() => {
-        const getTodos = async () => {
-            const response = await fetch('http://localhost:3000/todo/todos', {
-                headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
-            });
-            // Todo: Create a type for the response that you get back from the server
-            const data: Todo[] = await response.json();
-            setTodos(data);
-        };
-        getTodos();
-    }, []);
-
+
+    const [todos, setTodos, loading] = useFetch<Todo>("http://localhost:3000/todo/todos")
     const addTodo = async () => {
+        const reqBody: todoParams = {title, description}
         const response = await fetch('http://localhost:3000/todo/todos', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${localStorage.getItem("token")}` },
-            body: JSON.stringify({ title, description })
+            body: JSON.stringify(reqBody)
         });
         const data = await response.json();
 
@@ -46,7 +38,7 @@ const TodoList = () => {
         setTodos(newTodos);
     };
 
-    const markDone = async (id) => {
+    const markDone = async (id: string) => {
         const response = await fetch(`http://localhost:3000/todo/todos/${id}/done`, {
             method: 'PATCH',
             headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
@@ -62,7 +54,7 @@ const TodoList = () => {
                 <div style={{marginTop: 25, marginLeft: 20}}>
                     <button onClick={() => {
                         localStorage.removeItem("token");
-                        window.location = "/login";
+                        navigate("/login")
                     }}>Logout</button>
                 </div>
             </div>

client/src/Components/useFetch.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react"
+
+export const useFetch = <T>(url: string): [T[], React.Dispatch<React.SetStateAction<T[]>>, boolean] => {
+    const [request, setRequest] = useState<T[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    const fetchReq = async () => {
+        try {
+            const response = await fetch(url, {
+                method: "GET",
+                headers: { 
+                    Authorization: `Bearer ${localStorage.getItem("token")}`
+                }
+            });
+            const data: T[] = await response.json();
+            if (data) {
+                setRequest(data);
+                setLoading(false);
+            }
+        } catch (error) {
+            return error;
+        }
+
+    }
+    useEffect(() => {
+        fetchReq();
+    }, []);
+
+    return [request, setRequest, loading];
+}