feat: add hook for generating different date times (#3524)

* Added hook for generating different date times

* Fixed up logic to destructure the datetime params

---------

Co-authored-by: Martin MacDonald <martinmacdonald@Martins-MacBook-Pro.local>

web/src/components/MemoEditor/MemoEditorDialog.tsx

@@ -1,7 +1,8 @@
 import { IconButton } from "@mui/joy";
 import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import useDateTime from "@/hooks/useDateTime";
 import { useMemoStore, useTagStore } from "@/store/v1";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import MemoEditor, { Props as MemoEditorProps } from ".";
@@ -21,7 +22,7 @@ const MemoEditorDialog: React.FC<Props> = ({
 }: Props) => {
   const tagStore = useTagStore();
   const memoStore = useMemoStore();
-  const [displayTime, setDisplayTime] = useState<string | undefined>(memoStore.getMemoByName(memoName || "")?.displayTime?.toISOString());
+  const { setDateTime, displayDateTime, datePickerDateTime } = useDateTime(memoStore.getMemoByName(memoName || "")?.displayTime);
   const memoPatchRef = useRef<Partial<Memo>>({
     displayTime: memoStore.getMemoByName(memoName || "")?.displayTime,
   });
@@ -32,7 +33,7 @@ const MemoEditorDialog: React.FC<Props> = ({
   }, []);
 
   const updateDisplayTime = (displayTime: string) => {
-    setDisplayTime(displayTime);
+    setDateTime(displayTime);
     memoPatchRef.current.displayTime = new Date(displayTime);
   };
 
@@ -50,14 +51,14 @@ const MemoEditorDialog: React.FC<Props> = ({
   return (
     <>
       <div className="w-full flex flex-row justify-between items-center">
-        <div className={clsx("flex flex-row justify-start items-center", !displayTime && "mb-2")}>
+        <div className={clsx("flex flex-row justify-start items-center", !displayDateTime && "mb-2")}>
-          {displayTime ? (
+          {displayDateTime ? (
             <div className="relative">
-              <span className="cursor-pointer text-gray-500 dark:text-gray-400">{new Date(displayTime).toLocaleString()}</span>
+              <span className="cursor-pointer text-gray-500 dark:text-gray-400">{displayDateTime}</span>
               <input
                 className="inset-0 absolute z-1 opacity-0"
                 type="datetime-local"
-                value={displayTime}
+                value={datePickerDateTime}
                 onFocus={(e: any) => e.target.showPicker()}
                 onChange={(e) => updateDisplayTime(e.target.value)}
               />

web/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from "./useNavigateTo";
 export * from "./useAsyncEffect";
 export * from "./useFilterWithUrlParams";
 export * from "./useResponsiveWidth";
+export * from "./useDateTime";

web/src/hooks/useDateTime.ts

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+const useDateTime = (initalState?: Date) => {
+  const [dateTime, setDateTimeInternal] = useState<Date | undefined>(initalState && new Date(initalState));
+
+  return {
+    setDateTime: (dateTimeString: string) => setDateTimeInternal(new Date(dateTimeString)),
+    displayDateTime: dateTime && dateTime.toLocaleString(),
+    datePickerDateTime: dateTime && new Date(dateTime.getTime() - dateTime.getTimezoneOffset() * 60000).toISOString().split(".")[0],
+  };
+};
+
+export default useDateTime;