Skip to content
Snippets Groups Projects
Commit 468bf815 authored by OUKASSOU Anas's avatar OUKASSOU Anas
Browse files

Refactor Context + Provider

parent ca270939
No related branches found
No related tags found
1 merge request!13Refactor Context + Provider
......@@ -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>
);
}
......
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;
......
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;
......
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]
......
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
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])
}
......
import { createContext } from 'react';
export const TasksContext = createContext('tasks');
\ No newline at end of file
......@@ -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"),
},
},
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment