Refactor Context + Provider

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>
   );
 }
 

src/components/dashboard/TaskStats.jsx

 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;

src/components/dashboard/TasksStatPercent.jsx

 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;

src/components/todolist/TaskItem.jsx

-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]

src/context/TasksContext.jsx

+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

src/pages/Todolist.jsx

 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])
     }

src/services/Context.js

-import { createContext } from 'react';
-
-export const TasksContext = createContext('tasks');
\ No newline at end of file

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"),
     },
   },
 });