refactored the way Lists and tasks being fetched into contexts, fixed all the bugs in the update task erea, and added the update description field so the user can set or delete the description

Author: moheladwy

client/src/App.tsx

@@ -6,30 +6,33 @@ import Register from "./Authentication/Register";
 import Dashboard from "./Dashboard/Dashboard";
 import Navbar from "./Navbar/Navbar";
 import ProtectedRoute from "./Authentication/ProtectedRoute";
+import { ListsProvider } from "./Dashboard/context/ListsContext";
 
 export default function App() {
 	return (
 		<BrowserRouter>
 			<AuthProvider>
-				<div className="app-container">
-					<Navbar />
-					<Routes>
-						<Route
-							index
-							element={<Navigate to="/dashboard" replace />}
-						/>
-						<Route path="/login" element={<Login />} />
-						<Route path="/register" element={<Register />} />
-						<Route
-							path="/dashboard"
-							element={
-								<ProtectedRoute>
-									<Dashboard />
-								</ProtectedRoute>
-							}
-						/>
-					</Routes>
-				</div>
+				<ListsProvider>
+					<div className="app-container">
+						<Navbar />
+						<Routes>
+							<Route
+								index
+								element={<Navigate to="/dashboard" replace />}
+							/>
+							<Route path="/login" element={<Login />} />
+							<Route path="/register" element={<Register />} />
+							<Route
+								path="/dashboard"
+								element={
+									<ProtectedRoute>
+										<Dashboard />
+									</ProtectedRoute>
+								}
+							/>
+						</Routes>
+					</div>
+				</ListsProvider>
 			</AuthProvider>
 		</BrowserRouter>
 	);

client/src/Authentication/context/AuthContext.tsx

@@ -8,8 +8,6 @@ interface AuthContextType {
 	accessToken: string | null;
 	userId: string | null;
 	user: User | null;
-	isSidebarOpen: boolean;
-	toggleSidebar: () => void;
 	login: (authResponse: AuthResponse) => void;
 	logout: () => void;
 	refreshAccessToken: () => void;
@@ -23,10 +21,6 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
 	const [userId, setUserId] = useState<string | null>(null);
 	const [user, setUser] = useState<User | null>(null);
 	const [isLoading, setIsLoading] = useState(true);
-	const [isSidebarOpen, setIsSidebarOpen] = useState(() => {
-		const saved = localStorage.getItem("sidebarOpen");
-		return saved !== null ? JSON.parse(saved) : true;
-	});
 
 	useEffect(() => {
 		const initializeAuth = async () => {
@@ -90,12 +84,6 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
 		}
 	};
 
-	const toggleSidebar = () => {
-		const newState = !isSidebarOpen;
-		setIsSidebarOpen(newState);
-		localStorage.setItem("sidebarOpen", JSON.stringify(newState));
-	};
-
 	if (isLoading) {
 		return <div>Loading...</div>;
 	}
@@ -106,11 +94,9 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
 				accessToken,
 				userId,
 				user,
-				isSidebarOpen,
 				login,
 				logout,
 				refreshAccessToken,
-				toggleSidebar,
 			}}
 		>
 			{children}
@@ -126,4 +112,4 @@ const UseAuth = () => {
 	return context;
 };
 
-export { AuthContext, AuthProvider, UseAuth };
+export { AuthProvider, UseAuth };

client/src/Dashboard/Dashboard.tsx

@@ -1,76 +1,10 @@
-import { useState, useEffect } from "react";
-import { List } from "../API/interfaces";
-import { tasksApi } from "../API/Calls/TasksCalls";
-import { listsApi } from "../API/Calls/ListsCalls";
-import { UseAuth } from "../Authentication/context/AuthContext";
-import MainContent from "./MainContent";
-import Sidebar from "./Sidebar";
+import { UseLists } from "./context/ListsContext";
+import { TaskProvider } from "./context/TaskContext";
+import MainContent from "./main/MainContent";
+import Sidebar from "./sidebar/Sidebar";
 
 export default function Dashboard() {
-	const [lists, setLists] = useState<List[]>([]);
-	const [selectedList, setSelectedList] = useState<List | null>(null);
-	const [isLoading, setIsLoading] = useState(true);
-	const { isSidebarOpen, toggleSidebar } = UseAuth();
-
-	useEffect(() => {
-		const fetchLists = async () => {
-			try {
-				setIsLoading(true);
-				const response = await listsApi.getAllLists();
-				const sortedLists = [...response].sort((a, b) => {
-					const nameA = a.name.toLowerCase();
-					const nameB = b.name.toLowerCase();
-					const numA = parseInt(nameA) || 0;
-					const numB = parseInt(nameB) || 0;
-					if (numA && numB) {
-						return numA - numB;
-					}
-					return nameA.localeCompare(nameB);
-				});
-				setLists(sortedLists);
-				if (sortedLists.length > 0) {
-					setSelectedList(sortedLists[0]);
-				}
-			} catch (err: Error | unknown) {
-				console.error("Fetch error:", err);
-			} finally {
-				setIsLoading(false);
-			}
-		};
-		fetchLists();
-	}, []);
-
-	useEffect(() => {
-		setSelectedList(selectedList);
-	}, [selectedList]);
-
-	useEffect(() => {
-		const fetchTasks = async () => {
-			if (selectedList) {
-				try {
-					const tasks = await tasksApi.getTasksByListId(
-						selectedList.id
-					);
-					setSelectedList({
-						...selectedList,
-						tasks,
-					});
-				} catch (err) {
-					console.error("Failed to fetch tasks:", err);
-				}
-			}
-		};
-		fetchTasks();
-	}, [selectedList?.id]);
-
-	const handleListUpdate = (updatedList: List) => {
-		setLists(
-			lists.map((list) =>
-				list.id === updatedList.id ? updatedList : list
-			)
-		);
-		setSelectedList(updatedList);
-	};
+	const { isLoading, isSidebarOpen, toggleSidebar } = UseLists();
 
 	if (isLoading)
 		return (
@@ -83,12 +17,7 @@ export default function Dashboard() {
 		<div className="container-fluid h-90 bg-dark text-light">
 			<div className="row bg-dark">
 				{isSidebarOpen ? (
-					<Sidebar
-						lists={lists}
-						setLists={setLists}
-						selectedList={selectedList}
-						setSelectedList={setSelectedList}
-					/>
+					<Sidebar />
 				) : (
 					<div
 						className="d-flex flex-column bg-dark text-light t-smooth"
@@ -105,11 +34,9 @@ export default function Dashboard() {
 					</div>
 				)}
 
-				<MainContent
-					selectedList={selectedList}
-					setSelectedList={setSelectedList}
-					onListUpdate={handleListUpdate}
-				/>
+				<TaskProvider>
+					<MainContent />
+				</TaskProvider>
 			</div>
 		</div>
 	);