diff --git a/src/App.jsx b/src/App.jsx index f750cfba00ae688352104a9460bd91e816fdebea..444e24b9365d8e44049c63d77771837b0919c091 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,7 +3,7 @@ import SignIn from "./pages/SignIn"; import SignUp from "./pages/SignUp"; import Home from "@pages/Home"; import "./App.css"; -import Todolist from "@pages/Todolist"; +import Todolist from "@components/todolist/Todolist"; import { TasksProvider } from "@context/TasksContext"; import { ThemeProvider } from "@context/ThemeContext"; import Navbar from "@components/Navbar.jsx"; diff --git a/src/pages/Todolist.jsx b/src/components/todolist/Todolist.jsx similarity index 79% rename from src/pages/Todolist.jsx rename to src/components/todolist/Todolist.jsx index 8db368e9cad39bc5438fbda4d7a4e70af4a2f1ea..784b7c4f154f328446754f3ea4248e9f686e6c7b 100644 --- a/src/pages/Todolist.jsx +++ b/src/components/todolist/Todolist.jsx @@ -4,7 +4,7 @@ import TaskList from "@components/todolist/TaskList"; import { useState } from "react"; import { useTasks } from "@context/TasksContext"; -export default function Todolist() { +export default function Todolist({ selectedDate=null }) { const { tasks, setTasks } = useTasks() const newTask = () => { @@ -50,31 +50,35 @@ export default function Todolist() { setEditedTask(task) openModal() } + const createNewTask = () => { setEditedTask(newTask()) openModal() } + const filteredTasks = selectedDate ? tasks.filter(task => { + if (!task.dueDate) return false; + const taskDate = new Date(task.dueDate); + return taskDate.toDateString() === selectedDate.toDateString(); + }) : tasks; + return ( - <div className="w-full h-screen bg-gray-200 dark:bg-gray-900 flex justify-center items-start transition-colors"> - <div className="grid grid-rows-auto gap-4 w-full max-w-md"> + <div> <div> <h1 className="text-3xl font-bold text-left mb-6 text-gray-900 dark:text-white"> - Today + Tasks for {selectedDate.toDateString()} </h1> </div> <div> <AddTaskButton onClick={createNewTask} /> </div> <div className="text-gray-700 dark:text-gray-300"> - {tasks.length > 0 ? ( - <TaskList tasks={tasks} onClickItem={editTask} /> + {filteredTasks.length > 0 ? ( + <TaskList tasks={filteredTasks} onClickItem={editTask} /> ) : ( "You are done for the day!" )} </div> - </div> - <Modal task={editedTask} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask}/> </div> ) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 465731f2422f6bcb040480ab97de3839abfa13e4..5cdd90aadc5d6360841701f365045158ffd620f1 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,43 +1,11 @@ import React, { useState } from "react"; import TaskStats from "@components/dashboard/TaskStats"; import TasksStatPercent from "@components/dashboard/TasksStatPercent.jsx"; -import { useTasks } from "@context/TasksContext"; import Calendar from "@components/Calendar"; -import TaskList from "@components/todolist/TaskList"; -import AddTaskButton from "@components/todolist/AddTaskButton"; -import Modal from "@components/todolist/Modal"; +import Todolist from "@components/todolist/Todolist"; const Home = () => { - const { tasks, setTasks } = useTasks(); const [selectedDate, setSelectedDate] = useState(new Date()); - const [isModalOpen, setIsModalOpen] = useState(false); - - const openModal = () => setIsModalOpen(true); - const closeModal = () => setIsModalOpen(false); - - const newTask = () => { - return { - id: crypto.randomUUID(), - name: "", - isCompleted: false, - dueDate: "" - }; - }; - - - const saveTask = (task) => { - const newTask = { - ...task, - dueDate: task.dueDate || selectedDate.toISOString().split("T")[0], - }; - setTasks([...tasks, newTask]); - }; - - const filteredTasks = tasks.filter(task => { - if (!task.dueDate) return false; - const taskDate = new Date(task.dueDate); - return taskDate.toDateString() === selectedDate.toDateString(); - }); return ( <div> @@ -49,16 +17,7 @@ const Home = () => { <div className="grid grid-cols-3 grid-rows-2 gap-6 h-full"> <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 row-span-2 col-span-2"> - <h3 className="text-lg font-semibold mb-4 dark:text-white"> - Tasks for {selectedDate.toDateString()} - </h3> - - <AddTaskButton onClick={openModal} /> - {filteredTasks.length > 0 ? ( - <TaskList tasks={filteredTasks} /> - ) : ( - <p className="text-gray-500 dark:text-gray-400 mt-4">No tasks for this day</p> - )} + <Todolist selectedDate={selectedDate}/> </div> <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6"> @@ -71,8 +30,6 @@ const Home = () => { </div> </div> - - <Modal isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} /> </div> ); };