diff --git a/src/App.jsx b/src/App.jsx index 9d0bd8288e2c0a1cb0a4fa3fc865f468a7503558..82823910a46581ede9f7806d2067b8ca68573079 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 92a8331c368ea164e871dc3c5aea9b62200b60f9..440bca0c4784450b9cada2a408e5aa34e37588c6 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 b1ec843a44bebd76a4d14abb1632a9844bebeb6c..56508a87aa885c421332d665173210ce0f6e0f88 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 2a4adcb50cdf43330d5732a9030b927b49ade754..1305331c046b5a087ae6801671b5c404de49356a 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 0000000000000000000000000000000000000000..57c7c373cfbce09b17778d57f292c825d12f1cdf --- /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 98182ffd14b45e5c9b2e415289fbb664f5e40fa0..343f0201df39cf4879c173d0f4b5d8860a3cdfbb 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 c9f70650a2dd57462b1b5e45056e79ea6cfc2b6d..0000000000000000000000000000000000000000 --- 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 5333f28bee2feadf9f56e744e64ade75057e5ed5..fa07971628ca49e0a6ef4b5ab4d5341718a56127 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"), }, }, });