chore: fix fetch memos

web/src/pages/Archived.tsx

@@ -8,6 +8,7 @@ import MemoContent from "@/components/MemoContent";
 import MobileHeader from "@/components/MobileHeader";
 import { memoServiceClient } from "@/grpcweb";
 import { getDateTimeString } from "@/helpers/datetime";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { useMemoV1Store } from "@/store/v1";
 import { RowStatus } from "@/types/proto/api/v2/common";
@@ -17,13 +18,14 @@ import { useTranslate } from "@/utils/i18n";
 const Archived = () => {
   const t = useTranslate();
   const loadingState = useLoading();
+  const user = useCurrentUser();
   const memoStore = useMemoV1Store();
   const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
 
   useEffect(() => {
     memoServiceClient
       .listMemos({
-        filter: "row_status == 'ARCHIVED'",
+        filter: [`creator == "${user.name}"`, "row_status == 'ARCHIVED'"].join(" && "),
       })
       .then(({ memos }) => {
         setArchivedMemos(memos);

web/src/pages/Explore.tsx

@@ -16,8 +16,8 @@ const Explore = () => {
   const filterStore = useFilterStore();
   const memoStore = useMemoV1Store();
   const memoList = useMemoList();
+  const [isRequesting, setIsRequesting] = useState(true);
   const [isComplete, setIsComplete] = useState(false);
-  const [isRequesting, setIsRequesting] = useState(false);
   const { tag: tagQuery, text: textQuery } = filterStore.state;
   const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
 

web/src/pages/Home.tsx

@@ -20,9 +20,9 @@ const Home = () => {
   const user = useCurrentUser();
   const filterStore = useFilterStore();
   const memoStore = useMemoV1Store();
-  const [isComplete, setIsComplete] = useState(false);
-  const [isRequesting, setIsRequesting] = useState(false);
   const memoList = useMemoList();
+  const [isRequesting, setIsRequesting] = useState(true);
+  const [isComplete, setIsComplete] = useState(false);
   const { tag: tagQuery, text: textQuery } = filterStore.state;
   const sortedMemos = memoList.value
     .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))

web/src/pages/Timeline.tsx

@@ -15,25 +15,34 @@ import { useTranslate } from "@/utils/i18n";
 
 const Timeline = () => {
   const t = useTranslate();
-  const currentUser = useCurrentUser();
+  const user = useCurrentUser();
   const memoStore = useMemoV1Store();
   const memoList = useMemoList();
   const currentDateStamp = getDateStampByDate(getNormalizedDateString()) as number;
   const [selectedDateStamp, setSelectedDateStamp] = useState<number>(currentDateStamp as number);
+  const [isRequesting, setIsRequesting] = useState(true);
   const [showDatePicker, toggleShowDatePicker] = useToggle(false);
   const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(a.createTime) - getTimeStampByDate(b.createTime));
 
   useEffect(() => {
     memoList.reset();
+    fetchMemos();
+  }, [selectedDateStamp]);
+
+  const fetchMemos = async () => {
     const filters = [
-      `creator == "${currentUser.name}"`,
+      `creator == "${user.name}"`,
+      `row_status == "NORMAL"`,
       `created_ts_after == ${selectedDateStamp / 1000}`,
       `created_ts_before == ${(selectedDateStamp + DAILY_TIMESTAMP) / 1000}`,
     ];
-    memoStore.fetchMemos({
+    setIsRequesting(true);
+    await memoStore.fetchMemos({
+      offset: memoList.size(),
       filter: filters.join(" && "),
     });
-  }, [selectedDateStamp]);
+    setIsRequesting(false);
+  };
 
   const handleDataPickerChange = (datestamp: number): void => {
     setSelectedDateStamp(datestamp);
@@ -73,12 +82,6 @@ const Timeline = () => {
             />
           </div>
           <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">
-            {sortedMemos.length === 0 && (
-              <div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
-                <Empty />
-                <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
-              </div>
-            )}
             <div className="flex flex-col justify-start items-start w-full mt-2">
               {sortedMemos.map((memo, index) => (
                 <div
@@ -102,6 +105,12 @@ const Timeline = () => {
                 </div>
               )}
             </div>
+            {!isRequesting && sortedMemos.length === 0 && (
+              <div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
+                <Empty />
+                <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+              </div>
+            )}
           </div>
         </div>
       </div>

web/src/pages/UserProfile.tsx

@@ -6,10 +6,10 @@ import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import UserAvatar from "@/components/UserAvatar";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
+import { getTimeStampByDate } from "@/helpers/datetime";
 import useLoading from "@/hooks/useLoading";
 import { useFilterStore } from "@/store/module";
-import { useMemoV1Store, useUserV1Store } from "@/store/v1";
-import { Memo } from "@/types/proto/api/v2/memo_service";
+import { useMemoList, useMemoV1Store, useUserV1Store } from "@/store/v1";
 import { User } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 
@@ -21,10 +21,13 @@ const UserProfile = () => {
   const [user, setUser] = useState<User>();
   const filterStore = useFilterStore();
   const memoStore = useMemoV1Store();
-  const [memos, setMemos] = useState<Memo[]>([]);
+  const memoList = useMemoList();
+  const [isRequesting, setIsRequesting] = useState(true);
   const [isComplete, setIsComplete] = useState(false);
-  const [isRequesting, setIsRequesting] = useState(false);
   const { tag: tagQuery, text: textQuery } = filterStore.state;
+  const sortedMemos = memoList.value
+    .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
+    .sort((a, b) => Number(b.pinned) - Number(a.pinned));
 
   useEffect(() => {
     const username = params.username;
@@ -45,6 +48,7 @@ const UserProfile = () => {
   }, [params.username]);
 
   useEffect(() => {
+    memoList.reset();
     fetchMemos();
   }, [tagQuery, textQuery]);
 
@@ -54,16 +58,23 @@ const UserProfile = () => {
     }
 
     const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`];
-    if (tagQuery) filters.push(`tags == "${tagQuery}"`);
-    if (textQuery) filters.push(`content_search == "${textQuery}"`);
+    const contentSearch: string[] = [];
+    if (tagQuery) {
+      contentSearch.push(`"#${tagQuery}"`);
+    }
+    if (textQuery) {
+      contentSearch.push(`"${textQuery}"`);
+    }
+    if (contentSearch.length > 0) {
+      filters.push(`content_search == [${contentSearch.join(", ")}]`);
+    }
     setIsRequesting(true);
     const data = await memoStore.fetchMemos({
       limit: DEFAULT_MEMO_LIMIT,
-      offset: memos.length,
+      offset: memoList.size(),
       filter: filters.join(" && "),
     });
     setIsRequesting(false);
-    setMemos([...memos, ...data]);
     setIsComplete(data.length < DEFAULT_MEMO_LIMIT);
   };
 
@@ -78,16 +89,15 @@ const UserProfile = () => {
                 <UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
                 <p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
               </div>
-              {memos.map((memo) => (
+              {sortedMemos.map((memo) => (
                 <MemoView key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle showParent />
               ))}
-              {isRequesting && (
+              {isRequesting ? (
                 <div className="flex flex-col justify-start items-center w-full my-8">
                   <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
                 </div>
-              )}
-              {isComplete ? (
-                memos.length === 0 && (
+              ) : isComplete ? (
+                sortedMemos.length === 0 && (
                   <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                     <Empty />
                     <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>