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

Merge branch 'feature/manage-tasks' into 'main'

Feature/manage tasks

See merge request !12
parents 7cd7867d 816aa81f
Branches
No related tags found
1 merge request!12Feature/manage tasks
......@@ -14,6 +14,7 @@
"lucide-react": "^0.477.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-datepicker": "^8.1.0",
"react-dom": "^18.2.0",
"react-router-dom": "^7.2.0",
"tailwindcss": "^4.0.10"
......@@ -799,6 +800,59 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.9",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
"integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
"license": "MIT",
"dependencies": {
"@floating-ui/utils": "^0.2.9"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.13",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
"integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
"license": "MIT",
"dependencies": {
"@floating-ui/core": "^1.6.0",
"@floating-ui/utils": "^0.2.9"
}
},
"node_modules/@floating-ui/react": {
"version": "0.27.5",
"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.5.tgz",
"integrity": "sha512-BX3jKxo39Ba05pflcQmqPPwc0qdNsdNi/eweAFtoIdrJWNen2sVEWMEac3i6jU55Qfx+lOcdMNKYn2CtWmlnOQ==",
"license": "MIT",
"dependencies": {
"@floating-ui/react-dom": "^2.1.2",
"@floating-ui/utils": "^0.2.9",
"tabbable": "^6.0.0"
},
"peerDependencies": {
"react": ">=17.0.0",
"react-dom": ">=17.0.0"
}
},
"node_modules/@floating-ui/react-dom": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
"integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
"license": "MIT",
"dependencies": {
"@floating-ui/dom": "^1.0.0"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
"license": "MIT"
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.7.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
......@@ -1993,6 +2047,15 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
......@@ -4751,6 +4814,21 @@
"node": ">=0.10.0"
}
},
"node_modules/react-datepicker": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.1.0.tgz",
"integrity": "sha512-11gIOrBGK1MOvl4+wxGv4YxTqXf+uoRPtKstYhb/P1cBdRdOP1sL26VE31apmDnvw8wSYfJe9AWwWbKqmM9tzw==",
"license": "MIT",
"dependencies": {
"@floating-ui/react": "^0.27.3",
"clsx": "^2.1.1",
"date-fns": "^4.1.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
"react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
......@@ -5394,6 +5472,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/tabbable": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
"license": "MIT"
},
"node_modules/tailwindcss": {
"version": "4.0.10",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.10.tgz",
......
......@@ -17,6 +17,7 @@
"lucide-react": "^0.477.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-datepicker": "^8.1.0",
"react-dom": "^18.2.0",
"react-router-dom": "^7.2.0",
"tailwindcss": "^4.0.10"
......
import { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function Modal({ isOpen, closeModal, saveTask }) {
if (!isOpen) return null;
const [taskName, setTaskName] = useState("");
const [dueDate, setDueDate] = useState(new Date());
const createTask = () => {
return {
id: crypto.randomUUID(),
name: taskName,
isCompleted: false,
dueDate: dueDate
}
}
const handleSaveTask = () => {
const task = createTask()
saveTask(task)
closeModal()
}
const handleInputChange = (e) => {
setTaskName(e.target.value);
};
return (
<div
className="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center z-50"
style={{ pointerEvents: 'none' }}
>
<div
className="absolute inset-0 bg-gray-500 bg-opacity-50"
style={{ pointerEvents: 'none' }}
></div>
<div
className="relative bg-white p-6 rounded-lg shadow-lg w-1/3 z-10"
style={{ pointerEvents: 'auto' }}
>
<h2 className="text-xl mb-4">Add a New Task</h2>
<p className="mb-4">Enter the task details below:</p>
<input
type="text"
className="w-full p-2 mb-4 border border-gray-300 rounded-md"
placeholder="Task Name"
value={taskName}
onChange={handleInputChange}
/>
<div>
<DatePicker
showIcon
selected={dueDate}
onChange={(date) => setDueDate(date)}
/>
</div>
<div className="flex justify-between">
<button
onClick={closeModal}
className="px-4 py-2 bg-red-500 text-white rounded-md"
>
Close
</button>
<button
className="px-4 py-2 bg-blue-500 text-white rounded-md"
onClick={handleSaveTask}
>
Save Task
</button>
</div>
</div>
</div>
);
}
\ 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 } from "react";
import { Link } from "react-router-dom";
import { useContext, useState } from "react";
export default function Todolist() {
const { tasks, setTasks } = useContext(TasksContext)
const addTask = () => {
const task = {
id: crypto.randomUUID(),
name: "Task " + (tasks.length + 1),
isCompleted: false
}
const saveTask = (task) => {
setTasks([...tasks, task])
}
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);
return (
<div className="w-full h-screen bg-gray-200 flex justify-center items-start">
<div className="grid grid-rows-auto gap-4 w-full max-w-md">
......@@ -22,7 +21,7 @@ export default function Todolist() {
<h1 className="text-3xl font-bold text-left mb-6">Today</h1>
</div>
<div>
<AddTaskButton onClick={addTask}/>
<AddTaskButton onClick={openModal}/>
</div>
<div>
{tasks.length > 0 ? (
......@@ -31,6 +30,8 @@ export default function Todolist() {
</div>
</div>
<Modal isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask}/>
</div>
)
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment