Merge pull request #25 from moheladwy/UpdateEditSidebar

refactored the way Lists and tasks being fetched into contexts, fixed…
moheladwy · Jan 4, 2025 · 237d1ac · 237d1ac
2 parents 3aa3304 + 61e2cdb
commit 237d1ac
Show file tree

Hide file tree

Showing 12 changed files with 604 additions and 431 deletions.
diff --git a/client/src/App.tsx b/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>
 	);

diff --git a/client/src/Authentication/context/AuthContext.tsx b/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 };
diff --git a/client/src/Dashboard/Dashboard.tsx b/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>
 	);