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

Merge branch 'feature/refactor' into 'main'

refactor home

See merge request !19
parents 0425dfcd 40cecb1a
Branches
No related tags found
1 merge request!19refactor home
......@@ -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";
......
......@@ -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>
)
......
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>
);
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment