From 16ae127d9b8ccba419a93a9be18556190a8332ec Mon Sep 17 00:00:00 2001
From: unimu-cic <125171539+unimu-cic@users.noreply.github.com>
Date: Sun, 4 Feb 2024 22:41:21 +0800
Subject: [PATCH] feat: improve date picker

---
 package.json                |   2 +
 src/app/dashboard/page.tsx  |   2 +-
 src/app/globals.css         |   7 +++
 src/app/page.tsx            |   2 +-
 src/components/Create.tsx   |   6 +-
 src/components/ToDoItem.tsx |  41 ++++++++------
 yarn.lock                   | 108 +++++++++++++++++++++++++++++++++++-
 7 files changed, 145 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 022d8b6..9392a06 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "dayjs": "^1.11.10",
     "next": "14.1.0",
     "react": "^18",
+    "react-datepicker": "^6.1.0",
     "react-dom": "^18",
     "react-hook-form": "^7.50.0",
     "zustand": "^4.5.0"
@@ -25,6 +26,7 @@
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-datepicker": "^4.19.5",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 88ec9d4..2e2f880 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -3,12 +3,12 @@ import Create from "@/components/Create";
 import { cookies } from "next/headers";
 import {
   createServerComponentClient,
-  Session,
 } from "@supabase/auth-helpers-nextjs";
 import { redirect } from "next/navigation";
 import ToDoList from "@/components/ToDoList";
 import { Database } from "../../../types_db";
 import SignOutBtn from "@/components/SignOutBtn";
+import "react-datepicker/dist/react-datepicker.css";
 
 const Dashboard = async () => {
   const supabase = createServerComponentClient<Database>({ cookies });
diff --git a/src/app/globals.css b/src/app/globals.css
index b5c61c9..4ecc358 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.react-datepicker-wrapper input {
+    @apply bg-transparent;
+    @apply placeholder:text-black-300;
+    @apply outline-0;
+    @apply appearance-none;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index efcd348..82edd65 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home() {
 
       <Link
         href="/sign-in"
-        className="flex items-center bg-primary mt-20 h-12 px-8 rounded-2xl text-black"
+        className="flex items-center bg-primary mt-20 h-12 px-8 rounded-2xl text-black hover:bg-primary/80"
       >
         Start to GTD -&gt;
       </Link>
diff --git a/src/components/Create.tsx b/src/components/Create.tsx
index 5042445..63a40e9 100644
--- a/src/components/Create.tsx
+++ b/src/components/Create.tsx
@@ -53,10 +53,10 @@ const Create: FC<Props> = ({ session }) => {
   return (
     <div className="my-10">
       <form className="flex gap-4" onSubmit={handleSubmit(onSubmit)}>
-        <div className="bg-black-500 rounded-lg grow px-4 py-2">
+        <div className="bg-black-500 rounded-lg grow px-4 py-2 focus-within:border-primary border border-transparent">
           <input
-            className="w-full appearance-none bg-transparent outline-0 placeholder:text-secondary/50"
-            placeholder="create your next task with enter"
+            className="w-full appearance-none bg-transparent outline-0 placeholder:text-secondary/50 appearance-none"
+            placeholder="create your next task..."
             {...register("title", {
               required: "Your next task can not be empty",
               minLength: {
diff --git a/src/components/ToDoItem.tsx b/src/components/ToDoItem.tsx
index 4735ca9..0c98dc0 100644
--- a/src/components/ToDoItem.tsx
+++ b/src/components/ToDoItem.tsx
@@ -1,14 +1,15 @@
 "use client";
-import { Item } from "@/store";
+import {Item} from "@/store";
 import classNames from "classnames";
-import { useState, MouseEvent } from "react";
+import {useState, MouseEvent} from "react";
 import * as Dialog from "@radix-ui/react-dialog";
-import { SubmitHandler, useForm } from "react-hook-form";
+import {SubmitHandler, useForm, Controller} from "react-hook-form";
 import dayjs from "dayjs";
+import DatePicker from 'react-datepicker'
 
 export type Inputs = {
   title: string;
-  enddate: string;
+  enddate: Date;
   description: string;
 };
 
@@ -18,13 +19,14 @@ type Props = {
   onUpdate: (id: string, date: Inputs) => void;
   onDelete: (id: string) => void;
 };
-const ToDoItem = ({ todo, onToggle, onUpdate, onDelete }: Props) => {
+const ToDoItem = ({todo, onToggle, onUpdate, onDelete}: Props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const {
+    control,
     register,
     handleSubmit,
-    formState: { errors },
+    formState: {errors},
   } = useForm<Inputs>();
 
   const onSubmit: SubmitHandler<Inputs> = (formData) => {
@@ -102,7 +104,7 @@ const ToDoItem = ({ todo, onToggle, onUpdate, onDelete }: Props) => {
                 </g>
                 <defs>
                   <clipPath id="clip0_460_5">
-                    <rect width="1024" height="1024" fill="white" />
+                    <rect width="1024" height="1024" fill="white"/>
                   </clipPath>
                 </defs>
               </svg>
@@ -119,7 +121,7 @@ const ToDoItem = ({ todo, onToggle, onUpdate, onDelete }: Props) => {
         )}
       </div>
       <Dialog.Portal>
-        <Dialog.Overlay className="bg-black/10 backdrop-blur fixed inset-0" />
+        <Dialog.Overlay className="bg-black/10 backdrop-blur fixed inset-0"/>
         <Dialog.Content
           onEscapeKeyDown={() => setIsOpen(false)}
           className="fixed top-[50%] left-[50%] max-h-[85vh] text-black w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-secondary-500 p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none"
@@ -131,7 +133,7 @@ const ToDoItem = ({ todo, onToggle, onUpdate, onDelete }: Props) => {
             className="flex flex-col gap-4"
             onSubmit={handleSubmit(onSubmit)}
           >
-            <div className="bg-transparent border-black border rounded-lg grow px-4 py-2">
+            <div className="bg-transparent border-black border rounded-lg grow px-4 py-2 focus-within:border-primary">
               <input
                 defaultValue={todo.title}
                 className="w-full appearance-none bg-transparent outline-0 placeholder:text-black-300"
@@ -145,7 +147,7 @@ const ToDoItem = ({ todo, onToggle, onUpdate, onDelete }: Props) => {
                 })}
               />
             </div>
-            <div className="bg-transparent border-black border rounded-lg grow px-4 py-2">
+            <div className="bg-transparent border-black border rounded-lg grow px-4 py-2 focus-within:border-primary">
               <input
                 defaultValue={todo.description}
                 className="w-full appearance-none bg-transparent outline-0 placeholder:text-black-300"
@@ -153,12 +155,19 @@ const ToDoItem = ({ todo, onToggle, onUpdate, onDelete }: Props) => {
                 {...register("description", {})}
               />
             </div>
-            <div className="bg-transparent border-black border rounded-lg grow px-4 py-2">
-              <input
-                type="date"
-                className="select-none w-full appearance-none bg-transparent outline-0 placeholder:text-black-300"
-                placeholder="update your next task here"
-                {...register("enddate", {})}
+            <div className="bg-transparent border-black border rounded-lg grow px-4 py-2 focus-within:border-primary">
+              <Controller
+                name={"enddate"}
+                control={control}
+                render={({ field: { onChange, value } }) => {
+                  return (
+                    <DatePicker
+                      onChange={onChange}
+                      selected={value}
+                      placeholderText="Enter your birth date"
+                    />
+                  );
+                }}
               />
             </div>
             <button
diff --git a/yarn.lock b/yarn.lock
index 6f06490..6b40992 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,7 +12,7 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
-"@babel/runtime@^7.13.10", "@babel/runtime@^7.23.2":
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
@@ -51,6 +51,42 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
   integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.1.tgz#d552e8444f77f2d88534372369b3771dc3a2fa5d"
+  integrity sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/react-dom@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.8.tgz#afc24f9756d1b433e1fe0d047c24bd4d9cefaa5d"
+  integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+
+"@floating-ui/react@^0.26.2":
+  version "0.26.9"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.9.tgz#bbccbefa0e60c8b7f4c0387ba0fc0607bb65f2cc"
+  integrity sha512-p86wynZJVEkEq2BBjY/8p2g3biQ6TlgT4o/3KgFKyTWoJLU1GZ8wpctwRqtkEl2tseYA+kw7dBAIDFcednfI5w==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.8"
+    "@floating-ui/utils" "^0.2.1"
+    tabbable "^6.0.1"
+
+"@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -197,6 +233,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@popperjs/core@^2.9.2":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@radix-ui/primitive@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
@@ -466,6 +507,16 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
   integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
 
+"@types/react-datepicker@^4.19.5":
+  version "4.19.5"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.19.5.tgz#bab0751c5c227e3fbea5979c20b0da4c0fe3a373"
+  integrity sha512-tKpuj19p9T4sBQm3Bw13CPuhalo4CFOe/LcSUGJ5z6DmHoiBX3uq33iMKePeSEq7OxyU8O1rh5emAm92nyXZLg==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+    "@types/react" "*"
+    date-fns "^2.0.1"
+    react-popper "^2.2.5"
+
 "@types/react-dom@^18":
   version "18.2.18"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd"
@@ -840,7 +891,7 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classnames@^2.5.1:
+classnames@^2.2.6, classnames@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -896,6 +947,18 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+date-fns@^2.0.1:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
+date-fns@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.3.1.tgz#7581daca0892d139736697717a168afbb908cfed"
+  integrity sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==
+
 dayjs@^1.11.10:
   version "1.11.10"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
@@ -2320,6 +2383,17 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-datepicker@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-6.1.0.tgz#c227de6afce232b5737214eb4b71044e8e6b308a"
+  integrity sha512-8uz+hAOpvHqZGvD4Ky1hJ0/tLI4S9B0Gu9LV7LtLxRKXODs/xrxEay0aMVp7AW9iizTeImZh/6aA00fFaRZpJw==
+  dependencies:
+    "@floating-ui/react" "^0.26.2"
+    classnames "^2.2.6"
+    date-fns "^3.3.1"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.13.0"
+
 react-dom@^18, react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -2328,6 +2402,11 @@ react-dom@^18, react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-hook-form@^7.50.0:
   version "7.50.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.50.0.tgz#379802d85c7b78e0056229c53607946d34f99a36"
@@ -2338,6 +2417,19 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-onclickoutside@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"
+  integrity sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==
+
+react-popper@^2.2.5:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-remove-scroll-bar@^2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
@@ -2681,6 +2773,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tabbable@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 tailwindcss@^3.3.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d"
@@ -2881,6 +2978,13 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"