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