From 816aa81f85b64ad85ec6031839dcc4421d3598d5 Mon Sep 17 00:00:00 2001
From: Anas OUKASSOU <anas.oukassou@etu.univ-amu.fr>
Date: Fri, 7 Mar 2025 15:26:17 +0100
Subject: [PATCH] Added due date
---
package-lock.json | 94 +++++++++++++++++++++++++++++++
package.json | 1 +
src/components/todolist/Modal.jsx | 14 ++++-
3 files changed, 108 insertions(+), 1 deletion(-)
diff --git a/package-lock.json b/package-lock.json
index fe7c0f8..a5a805b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,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"
@@ -798,6 +799,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",
@@ -1992,6 +2046,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",
@@ -2117,6 +2180,16 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/date-fns": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+ "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/kossnocorp"
+ }
+ },
"node_modules/debug": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -4739,6 +4812,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",
@@ -5382,6 +5470,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",
diff --git a/package.json b/package.json
index bb36dbc..a47a3fa 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,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"
diff --git a/src/components/todolist/Modal.jsx b/src/components/todolist/Modal.jsx
index 5c601e3..ef53a57 100644
--- a/src/components/todolist/Modal.jsx
+++ b/src/components/todolist/Modal.jsx
@@ -1,15 +1,19 @@
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
+ isCompleted: false,
+ dueDate: dueDate
}
}
@@ -48,6 +52,14 @@ export default function Modal({ isOpen, closeModal, saveTask }) {
onChange={handleInputChange}
/>
+ <div>
+ <DatePicker
+ showIcon
+ selected={dueDate}
+ onChange={(date) => setDueDate(date)}
+ />
+ </div>
+
<div className="flex justify-between">
<button
onClick={closeModal}
--
GitLab