feat: update timeline page

usememos · May 8, 2024 · 1d99dad · 1d99dad
1 parent 33133ea
commit 1d99dad
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 229 deletions.
diff --git a/web/src/components/ActivityCalendar.tsx b/web/src/components/ActivityCalendar.tsx
@@ -6,6 +6,7 @@ import { useTranslate } from "@/utils/i18n";
 interface Props {
   // Format: 2021-1
   month: string;
+  selectedDate: string;
   data: Record<string, number>;
   onClick?: (date: string) => void;
 }
@@ -28,8 +29,8 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
 const ActivityCalendar = (props: Props) => {
   const t = useTranslate();
   const { month: monthStr, data, onClick } = props;
-  const year = new Date(monthStr).getUTCFullYear();
-  const month = new Date(monthStr).getUTCMonth() + 1;
+  const year = new Date(monthStr).getFullYear();
+  const month = new Date(monthStr).getMonth() + 1;
   const dayInMonth = new Date(year, month, 0).getDate();
   const firstDay = new Date(year, month - 1, 1).getDay();
   const lastDay = new Date(year, month - 1, dayInMonth).getDay();
@@ -55,15 +56,19 @@ const ActivityCalendar = (props: Props) => {
         const count = data[date] || 0;
         const isToday = new Date().toDateString() === new Date(date).toDateString();
         const tooltipText = count ? t("memo.count-memos-in-date", { count: count, date: date }) : date;
+        const isSelected = new Date(props.selectedDate).toDateString() === new Date(date).toDateString();
         return day ? (
           <Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
             <div
               className={clsx(
-                "w-4 h-4 text-[9px] rounded-md flex justify-center items-center border border-transparent",
+                "w-4 h-4 text-[9px] rounded-md flex justify-center items-center border",
                 getCellAdditionalStyles(count, maxCount),
-                isToday && "border-gray-600 dark:!border-gray-500",
+                isToday && "border-gray-600 dark:border-zinc-300",
+                isSelected && "font-bold border-gray-600 dark:border-zinc-300",
+                !isToday && !isSelected && "border-transparent",
+                count > 0 && "cursor-pointer",
               )}
-              onClick={() => count && onClick && onClick(date)}
+              onClick={() => count && onClick && onClick(new Date(date).toDateString())}
             >
               {day}
             </div>

diff --git a/web/src/components/ChangeMemoCreatedTsDialog.tsx b/web/src/components/ChangeMemoCreatedTsDialog.tsx
diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx
@@ -94,8 +94,12 @@ const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) =>
       style: "danger",
       dialogName: "delete-tag-dialog",
       onConfirm: async () => {
-        await tagStore.deleteTag(tag);
-        tagStore.fetchTags({ skipCache: true });
+        await memoServiceClient.deleteMemoTag({
+          parent: "memos/-",
+          tag: tag,
+        });
+        await tagStore.fetchTags({ skipCache: true });
+        toast.success(t("message.deleted-successfully"));
       },
     });
   };

diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
@@ -4,12 +4,11 @@ import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { extractMemoIdFromName, useUserStore } from "@/store/v1";
+import { useUserStore } from "@/store/v1";
 import { MemoRelation_Type } from "@/types/proto/api/v1/memo_relation_service";
 import { Memo, Visibility } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
 import { convertVisibilityToString } from "@/utils/memo";
-import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
 import Icon from "./Icon";
 import MemoActionMenu from "./MemoActionMenu";
 import MemoContent from "./MemoContent";
@@ -56,12 +55,8 @@ const MemoView: React.FC<Props> = (props: Props) => {
     })();
   }, []);
 
-  const handleGotoMemoDetailPage = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.altKey) {
-      showChangeMemoCreatedTsDialog(extractMemoIdFromName(memo.name));
-    } else {
-      navigateTo(`/m/${memo.uid}`);
-    }
+  const handleGotoMemoDetailPage = () => {
+    navigateTo(`/m/${memo.uid}`);
   };
 
   const handleMemoContentClick = useCallback(async (e: React.MouseEvent) => {

diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
@@ -31,9 +31,14 @@ const Archived = () => {
     .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
 
   useEffect(() => {
+    setIsRequesting(true);
     nextPageTokenRef.current = undefined;
-    memoList.reset();
-    fetchMemos();
+    setTimeout(async () => {
+      memoList.reset();
+      const nextPageToken = await fetchMemos();
+      nextPageTokenRef.current = nextPageToken;
+      setIsRequesting(false);
+    });
   }, [tagQuery, textQuery]);
 
   const fetchMemos = async () => {
@@ -48,14 +53,12 @@ const Archived = () => {
     if (tagQuery) {
       filters.push(`tag == "${tagQuery}"`);
     }
-    setIsRequesting(true);
-    const data = await memoStore.fetchMemos({
+    const { nextPageToken } = await memoStore.fetchMemos({
       pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
       filter: filters.join(" && "),
       pageToken: nextPageTokenRef.current,
     });
-    setIsRequesting(false);
-    nextPageTokenRef.current = data.nextPageToken;
+    return nextPageToken;
   };
 
   const handleDeleteMemoClick = async (memo: Memo) => {

diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
@@ -27,9 +27,14 @@ const Explore = () => {
   const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
 
   useEffect(() => {
+    setIsRequesting(true);
     nextPageTokenRef.current = undefined;
-    memoList.reset();
-    fetchMemos();
+    setTimeout(async () => {
+      memoList.reset();
+      const nextPageToken = await fetchMemos();
+      nextPageTokenRef.current = nextPageToken;
+      setIsRequesting(false);
+    });
   }, [tagQuery, textQuery]);
 
   const fetchMemos = async () => {
@@ -44,14 +49,12 @@ const Explore = () => {
     if (tagQuery) {
       filters.push(`tag == "${tagQuery}"`);
     }
-    setIsRequesting(true);
-    const data = await memoStore.fetchMemos({
+    const { nextPageToken } = await memoStore.fetchMemos({
       pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
       filter: filters.join(" && "),
       pageToken: nextPageTokenRef.current,
     });
-    setIsRequesting(false);
-    nextPageTokenRef.current = data.nextPageToken;
+    return nextPageToken;
   };
 
   return (

diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
@@ -33,9 +33,14 @@ const Home = () => {
     .sort((a, b) => Number(b.pinned) - Number(a.pinned));
 
   useEffect(() => {
+    setIsRequesting(true);
     nextPageTokenRef.current = undefined;
-    memoList.reset();
-    fetchMemos();
+    setTimeout(async () => {
+      memoList.reset();
+      const nextPageToken = await fetchMemos();
+      nextPageTokenRef.current = nextPageToken;
+      setIsRequesting(false);
+    });
   }, [tagQuery, textQuery]);
 
   const fetchMemos = async () => {
@@ -50,14 +55,12 @@ const Home = () => {
     if (tagQuery) {
       filters.push(`tag == "${tagQuery}"`);
     }
-    setIsRequesting(true);
-    const data = await memoStore.fetchMemos({
+    const { nextPageToken } = await memoStore.fetchMemos({
       pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
       filter: filters.join(" && "),
       pageToken: nextPageTokenRef.current,
     });
-    setIsRequesting(false);
-    nextPageTokenRef.current = data.nextPageToken;
+    return nextPageToken;
   };
 
   const handleEditPrevious = useCallback(() => {