Merge branch 'feature/refactor' into 'main'

refactor home

See merge request !19

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";

src/pages/Todolist.jsx → 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>
     )

src/pages/Home.jsx

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