chore: tweak date utils

web/src/components/CreateMemoRelationDialog.tsx

@@ -4,7 +4,6 @@ import { toast } from "react-hot-toast";
 import useDebounce from "react-use/lib/useDebounce";
 import { memoServiceClient } from "@/grpcweb";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
-import { getDateTimeString } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
@@ -112,7 +111,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
           renderOption={(props, memo) => (
             <AutocompleteOption {...props}>
               <div className="w-full flex flex-col justify-start items-start">
-                <p className="text-xs text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</p>
+                <p className="text-xs text-gray-400 select-none">{memo.displayTime?.toLocaleString()}</p>
                 <p className="mt-0.5 text-sm leading-5 line-clamp-2">{searchText ? getHighlightedContent(memo.content) : memo.snippet}</p>
               </div>
             </AutocompleteOption>
@@ -121,7 +120,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
             memos.map((memo) => (
               <Chip key={memo.name} className="!max-w-full !rounded" variant="outlined" color="neutral">
                 <div className="w-full flex flex-col justify-start items-start">
-                  <p className="text-xs text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</p>
+                  <p className="text-xs text-gray-400 select-none">{memo.displayTime?.toLocaleString()}</p>
                   <span className="w-full text-sm leading-5 truncate">{memo.content}</span>
                 </div>
               </Chip>

web/src/components/UserStatisticsView.tsx

@@ -82,7 +82,7 @@ const UserStatisticsView = () => {
             type="month"
             value={monthString}
             onFocus={(e: any) => e.target.showPicker()}
-            onChange={(e) => setMonthString(e.target.value)}
+            onChange={(e) => setMonthString(e.target.value || dayjs().format("YYYY-MM"))}
           />
         </div>
         <div className="invisible group-hover:visible flex justify-end items-center">

web/src/helpers/datetime.ts

-import i18n from "@/i18n";
-
-export function getTimeStampByDate(t: Date | number | string | any): number {
-  return new Date(t).getTime();
-}
-
-/**
- * Get a localized date and time string to provided time.
- *
- * If no date is provided, the current date is used.
- *
- * Sample outputs:
- * - "en" locale: "1/30/2023, 10:05:00 PM"
- * - "pt-BR" locale: "30/01/2023 22:05:00"
- * - "pl" locale: "30.01.2023, 22:05:00"
- */
-export function getDateTimeString(t?: Date | number | string | any, locale = i18n.language): string {
-  const tsFromDate = new Date(getTimeStampByDate(t ? t : Date.now()));
-  try {
-    return tsFromDate.toLocaleString(locale, {
-      year: "numeric",
-      month: "numeric",
-      day: "numeric",
-      hour: "numeric",
-      minute: "numeric",
-      second: "numeric",
-    });
-  } catch (error) {
-    return tsFromDate.toLocaleString();
-  }
-}

web/src/pages/Archived.tsx

@@ -9,7 +9,6 @@ import MemoFilters from "@/components/MemoFilters";
 import MobileHeader from "@/components/MobileHeader";
 import SearchBar from "@/components/SearchBar";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
-import { getTimeStampByDate } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useMemoFilterStore, useMemoList, useMemoStore } from "@/store/v1";
 import { RowStatus } from "@/types/proto/api/v1/common";
@@ -24,9 +23,7 @@ const Archived = () => {
   const memoFilterStore = useMemoFilterStore();
   const [isRequesting, setIsRequesting] = useState(true);
   const [nextPageToken, setNextPageToken] = useState<string>("");
-  const sortedMemos = memoList.value
-    .filter((memo) => memo.rowStatus === RowStatus.ARCHIVED)
-    .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
+  const sortedMemos = memoList.value.filter((memo) => memo.rowStatus === RowStatus.ARCHIVED);
 
   useEffect(() => {
     memoList.reset();

web/src/pages/Explore.tsx

@@ -8,7 +8,6 @@ import MemoFilters from "@/components/MemoFilters";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
-import { getTimeStampByDate } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import { useMemoFilterStore, useMemoList, useMemoStore } from "@/store/v1";
@@ -23,7 +22,7 @@ const Explore = () => {
   const memoFilterStore = useMemoFilterStore();
   const [isRequesting, setIsRequesting] = useState(true);
   const [nextPageToken, setNextPageToken] = useState<string>("");
-  const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
+  const sortedMemos = memoList.value;
 
   useEffect(() => {
     memoList.reset();

web/src/pages/Home.tsx

@@ -9,7 +9,6 @@ import MemoFilters from "@/components/MemoFilters";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
-import { getTimeStampByDate } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import { useMemoFilterStore, useMemoList, useMemoStore } from "@/store/v1";
@@ -27,7 +26,6 @@ const Home = () => {
   const [nextPageToken, setNextPageToken] = useState<string>("");
   const sortedMemos = memoList.value
     .filter((memo) => memo.rowStatus === RowStatus.ACTIVE)
-    .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
     .sort((a, b) => Number(b.pinned) - Number(a.pinned));
 
   useEffect(() => {
@@ -52,7 +50,7 @@ const Home = () => {
       } else if (filter.factor === "property.hasCode") {
         filters.push(`has_code == true`);
       } else if (filter.factor === "displayTime") {
-        const timestampAfter = getTimeStampByDate(new Date(filter.value)) / 1000;
+        const timestampAfter = new Date(filter.value).getTime() / 1000;
         filters.push(`display_time_after == ${timestampAfter}`);
         filters.push(`display_time_before == ${timestampAfter + 60 * 60 * 24}`);
       }

web/src/pages/UserProfile.tsx

@@ -10,7 +10,6 @@ import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import UserAvatar from "@/components/UserAvatar";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
-import { getTimeStampByDate } from "@/helpers/datetime";
 import useLoading from "@/hooks/useLoading";
 import { useMemoFilterStore, useMemoList, useMemoStore, useUserStore } from "@/store/v1";
 import { User } from "@/types/proto/api/v1/user_service";
@@ -27,9 +26,7 @@ const UserProfile = () => {
   const memoFilterStore = useMemoFilterStore();
   const [isRequesting, setIsRequesting] = useState(true);
   const [nextPageToken, setNextPageToken] = useState<string>("");
-  const sortedMemos = memoList.value
-    .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
-    .sort((a, b) => Number(b.pinned) - Number(a.pinned));
+  const sortedMemos = memoList.value.sort((a, b) => Number(b.pinned) - Number(a.pinned));
 
   useEffect(() => {
     const username = params.username;