From 468bf8153b51fa02c70b056f730f1657a93293e7 Mon Sep 17 00:00:00 2001
From: Anas OUKASSOU <anas.oukassou@etu.univ-amu.fr>
Date: Fri, 7 Mar 2025 16:06:14 +0100
Subject: [PATCH] Refactor Context + Provider

---
 src/App.jsx                                   | 18 ++----------
 src/components/dashboard/TaskStats.jsx        |  4 +--
 src/components/dashboard/TasksStatPercent.jsx |  4 +--
 src/components/todolist/TaskItem.jsx          |  5 ++--
 src/context/TasksContext.jsx                  | 28 +++++++++++++++++++
 src/pages/Todolist.jsx                        |  6 ++--
 src/services/Context.js                       |  3 --
 vite.config.js                                |  1 +
 8 files changed, 41 insertions(+), 28 deletions(-)
 create mode 100644 src/context/TasksContext.jsx
 delete mode 100644 src/services/Context.js

diff --git a/src/App.jsx b/src/App.jsx
index 9d0bd82..8282391 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,24 +4,12 @@ import SignUp from "./pages/SignUp";
 import Home from "@pages/Home";
 import "./App.css";
 import Todolist from "@pages/Todolist";
-import { TasksContext } from "@services/Context";
-import { useState, useEffect} from "react";
+import { TasksProvider } from "@context/TasksContext";
 import Navbar from "@components/Navbar.jsx";
 
 function App() {
-  const [tasks, setTasks] = useState(() => {
-    const savedTasks = JSON.parse(localStorage.getItem("tasks"));
-    return savedTasks ? savedTasks : []
-  });
-
-  useEffect(() => {
-    if (tasks) {
-      localStorage.setItem('tasks', JSON.stringify(tasks));
-    }
-  }, [tasks]);
-
   return (
-    <TasksContext.Provider value={{ tasks, setTasks }}>
+    <TasksProvider>
     <Router>
         <div className="min-h-screen bg-gray-50">
             <Navbar />
@@ -35,7 +23,7 @@ function App() {
             </main>
         </div>
     </Router>
-    </TasksContext.Provider>
+    </TasksProvider>
   );
 }
 
diff --git a/src/components/dashboard/TaskStats.jsx b/src/components/dashboard/TaskStats.jsx
index 92a8331..440bca0 100644
--- a/src/components/dashboard/TaskStats.jsx
+++ b/src/components/dashboard/TaskStats.jsx
@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
 import TaskCard from "@components/dashboard/TaskCard";
-import { TasksContext } from "@services/Context";
+import { useTasks } from "@context/TasksContext";
 
 const TaskStats = () => {
-  const { tasks } = useContext(TasksContext);
+  const { tasks } = useTasks();
 
   const completed = tasks.filter(task => task.isCompleted).length;
   const incompleted = tasks.filter(task => !task.isCompleted).length;
diff --git a/src/components/dashboard/TasksStatPercent.jsx b/src/components/dashboard/TasksStatPercent.jsx
index b1ec843..56508a8 100644
--- a/src/components/dashboard/TasksStatPercent.jsx
+++ b/src/components/dashboard/TasksStatPercent.jsx
@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
-import { TasksContext } from "@services/Context";
+import { useTasks } from "@context/TasksContext";
 
 const TasksStatPercent = () => {
-    const { tasks } = useContext(TasksContext);
+    const { tasks } = useTasks();
 
     const totalTasks = tasks.length;
     const completedTasks = tasks.filter(task => task.isCompleted).length;
diff --git a/src/components/todolist/TaskItem.jsx b/src/components/todolist/TaskItem.jsx
index 2a4adcb..1305331 100644
--- a/src/components/todolist/TaskItem.jsx
+++ b/src/components/todolist/TaskItem.jsx
@@ -1,10 +1,9 @@
-import { TasksContext } from "@services/Context"
-import { useContext } from "react"
+import { useTasks } from "@context/TasksContext"
 import { TrashIcon } from '@heroicons/react/24/outline'
 
 export default function TaskItem({ task }) {
 
-    const { tasks, setTasks } = useContext(TasksContext)
+    const { tasks, setTasks } = useTasks()
 
     const onChange = (event) => {
         const nextTasks = [...tasks]
diff --git a/src/context/TasksContext.jsx b/src/context/TasksContext.jsx
new file mode 100644
index 0000000..57c7c37
--- /dev/null
+++ b/src/context/TasksContext.jsx
@@ -0,0 +1,28 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const TasksContext = createContext('tasks');
+
+const TasksProvider = ({children}) => {
+    const [tasks, setTasks] = useState(() => {
+        const savedTasks = JSON.parse(localStorage.getItem("tasks"));
+        return savedTasks ? savedTasks : []
+      });
+
+      useEffect(() => {
+        if (tasks) {
+          localStorage.setItem('tasks', JSON.stringify(tasks));
+        }
+      }, [tasks]);
+
+      return (
+        <TasksContext.Provider value={{ tasks, setTasks}}>
+            {children}
+        </TasksContext.Provider>
+      )
+}
+
+const useTasks = () => {
+    return useContext(TasksContext)
+}
+
+export { TasksProvider, useTasks }
\ No newline at end of file
diff --git a/src/pages/Todolist.jsx b/src/pages/Todolist.jsx
index 98182ff..343f020 100644
--- a/src/pages/Todolist.jsx
+++ b/src/pages/Todolist.jsx
@@ -1,11 +1,11 @@
 import AddTaskButton from "@components/todolist/AddTaskButton";
 import Modal from "@components/todolist/Modal";
 import TaskList from "@components/todolist/TaskList";
-import { TasksContext } from "@services/Context";
-import { useContext, useState } from "react";
+import { useState } from "react";
+import { useTasks } from "@context/TasksContext";
 
 export default function Todolist() {
-    const { tasks, setTasks } = useContext(TasksContext)
+    const { tasks, setTasks } = useTasks()
     const saveTask = (task) => {
         setTasks([...tasks, task])
     }
diff --git a/src/services/Context.js b/src/services/Context.js
deleted file mode 100644
index c9f7065..0000000
--- a/src/services/Context.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const TasksContext = createContext('tasks');
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 5333f28..fa07971 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,6 +15,7 @@ export default defineConfig({
       "@components": path.resolve(__dirname, "src/components"),
       "@pages": path.resolve(__dirname, "src/pages"),
       "@services": path.resolve(__dirname, "src/services"),
+      "@context": path.resolve(__dirname, "src/context"),
     },
   },
 });
-- 
GitLab