feat(#12): add date-time integration for wish

src/AddToBucket.jsx

@@ -1,43 +1,79 @@
 import { createSignal } from "solid-js";
 
+import { isFutureDate } from "./util/dateTimeUtil";
 import { saveWish } from "./util/localStorageUtil";
 
 export function AddToBucket(props) {
-  const [newItem, setNewItem] = createSignal('');
+  const [newItem, setNewItem] = createSignal({
+    text: "",
+    deadline: null,
+  });
 
+  const handleWishDeadlineChange = (e) => {
+    const deadlineTime = e.target.value;
+
+    if (!isFutureDate(new Date(deadlineTime))) {
+      alert("You must pick a deadline time in the future.");
+      return;
+    }
+    setNewItem({ ...newItem(), deadline: deadlineTime });
+  };
+
+  const handleWishTextChange = (e) => {
+    setNewItem({ ...newItem(), text: e.target.value });
+  };
+
+  const isValidWish = (wish) => {
+    if (!wish.deadline) return false;
+    return true;
+  };
+  const handleWishCreate = (e) => {
+    e.preventDefault();
+
+    const newWish = newItem();
+
+    if (!isValidWish(newWish)) {
+      return alert("Please Enter valid wish deadline");
+    }
+
+    props.setItems((items) => {
+      const allWishes = [
+        {
+          id: crypto.randomUUID(),
+          text: newWish.text,
+          complete: false,
+          createdAt: new Date(),
+          deadline: newWish.deadline,
+        },
+        ...items,
+      ];
+      saveWish(allWishes);
+      return allWishes;
+    });
+    setNewItem("");
+  };
   return (
     <form class="flex items-center gap-2">
       <input
         type="text"
         class="w-60 border px-2 py-1.5 rounded-md text-xl"
         placeholder="Make a wish"
-        value={newItem()}
-        onChange={(e) => {
-          setNewItem(e.target.value);
-        }}
+        value={newItem().text}
+        onChange={handleWishTextChange}
+      />
+      <input
+        class="w-40 border px-2 py-1.5 rounded-md text-xl"
+        type="dateTime-local"
+        name="deadline"
+        onchange={handleWishDeadlineChange}
       />
       <button
         type="submit"
         class="px-3 py-1.5 text-xl rounded-md bg-blue-600 text-white"
-        onClick={(e) => {
-          e.preventDefault();
-          props.setItems((items) => {
-            const allWishes = [
-              {
-                id: crypto.randomUUID(),
-                text: newItem(),
-                complete: false,
-              },
-              ...items,
-            ];
-            saveWish(allWishes);
-            return allWishes;
-          });
-          setNewItem('');
-        }}
+        onClick={handleWishCreate}
       >
         Add
       </button>
     </form>
   );
-}
+}

src/BucketListItem.jsx

@@ -1,3 +1,5 @@
+import { Show } from "solid-js";
+import { getRelativeTimeDifferenceFromNow } from "./util/dateTimeUtil";
 import { saveWish } from "./util/localStorageUtil";
 
 export function BucketListItem(props) {
@@ -17,16 +19,21 @@ export function BucketListItem(props) {
             props.setItems((items) => {
               const newItems = items.map((item) =>
                 props.item === item
-                ? { ...item, complete: !item.complete }
-                : item
-
+                  ? { ...item, complete: !item.complete }
+                  : item
               );
               saveWish(newItems);
               return newItems;
             });
           }}
         />
         {props.item.text}
+
+        <Show when={!props.item.complete && props.item.deadline}>
+          <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">
+            {getRelativeTimeDifferenceFromNow(new Date(props.item.deadline))}
+          </span>
+        </Show>
       </label>
     </li>
   );

src/util/dateTimeUtil.js

@@ -0,0 +1,68 @@
+/**
+ * Weather passed dateTime is in future date or not
+ * @param {Date} date
+ * @returns Boolean
+ */
+const isFutureDate = (date) => {
+  const timeInDate = date.getTime(),
+    nowTime = new Date().getTime();
+  return timeInDate > nowTime;
+};
+
+/**
+ * Get the time difference from current time in seconds
+ * @param {Date} date
+ * @returns {Number} seconds
+ */
+const timeDifferenceFromNow = (date) => {
+  const now = new Date().getTime(),
+    futureTime = date.getTime();
+
+  const differenceInMs = futureTime - now;
+  const differenceInSeconds = Math.round(differenceInMs / 1000);
+
+  return differenceInSeconds;
+};
+
+/**
+ * convert seconds into a relative time difference string
+ * @param {Number} seconds
+ * @returns {String} relative time ex: 1 hour, 1 hour 30 minutes, 2 months
+ */
+const secondsToRelativeTime = (seconds) => {
+  const SECONDS_IN_MINUTE = 60;
+  const SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
+  const SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
+  const SECONDS_IN_WEEK = SECONDS_IN_DAY * 7;
+  const SECONDS_IN_MONTH = SECONDS_IN_WEEK + SECONDS_IN_DAY * 2;
+
+  if (seconds >= SECONDS_IN_MONTH)
+    return `in ${Math.round(seconds / SECONDS_IN_MONTH)} months`;
+  else if (seconds >= SECONDS_IN_WEEK)
+    return `in ${Math.round(seconds / SECONDS_IN_WEEK)} weeks`;
+  else if (seconds >= SECONDS_IN_DAY)
+    return `in ${Math.round(seconds / SECONDS_IN_DAY)} days`;
+  else if (seconds >= SECONDS_IN_HOUR)
+    return `in ${Math.round(seconds / SECONDS_IN_HOUR)} hours`;
+  else if (seconds >= SECONDS_IN_MINUTE)
+    return `in ${Math.round(seconds / SECONDS_IN_MINUTE)} minutes`;
+  else if (seconds >= 1) return `${seconds} seconds`;
+  else return `times up!`;
+};
+
+/**
+ * get relative time difference string for a date
+ * @param {Date} date
+ * @returns {String} 3 hour, 34 minutes, 3 weeks
+ */
+const getRelativeTimeDifferenceFromNow = (date) => {
+  const timeDifferenceInSeconds = timeDifferenceFromNow(date);
+  const relativeTimeString = secondsToRelativeTime(timeDifferenceInSeconds);
+  return relativeTimeString;
+};
+export {
+  getRelativeTimeDifferenceFromNow,
+  isFutureDate,
+  secondsToRelativeTime,
+  timeDifferenceFromNow,
+};

src/util/localStorageUtil.js

@@ -1,6 +1,18 @@
 const dummy_Data = [
-  { id: crypto.randomUUID(), text: "Walk the dog", complete: false },
-  { id: crypto.randomUUID(), text: "Do homework", complete: true },
+  {
+    id: crypto.randomUUID(),
+    text: "Walk the dog",
+    complete: false,
+    createdAt: null,
+    deadline: new Date().setMinutes(new Date().getMinutes() + 10),
+  },
+  {
+    id: crypto.randomUUID(),
+    text: "Do homework",
+    complete: true,
+    createdAt: null,
+    deadline: null,
+  },
 ];
 
 /**