From 104948ae40afaad519e09e056a9cdecb4aac6af5 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 20 Nov 2024 20:28:49 +0800
Subject: [PATCH] chore: set pull to refresh with screen size

---
 .../PagedMemoList/PagedMemoList.tsx           | 81 +++++++++++--------
 1 file changed, 46 insertions(+), 35 deletions(-)

diff --git a/web/src/components/PagedMemoList/PagedMemoList.tsx b/web/src/components/PagedMemoList/PagedMemoList.tsx
index 024d2f77..26d257ee 100644
--- a/web/src/components/PagedMemoList/PagedMemoList.tsx
+++ b/web/src/components/PagedMemoList/PagedMemoList.tsx
@@ -1,8 +1,9 @@
 import { Button } from "@usememos/mui";
 import { ArrowDownIcon, LoaderIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import PullToRefresh from "react-simple-pull-to-refresh";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
+import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import { useMemoList, useMemoStore } from "@/store/v1";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
@@ -22,6 +23,7 @@ interface State {
 
 const PagedMemoList = (props: Props) => {
   const t = useTranslate();
+  const { md } = useResponsiveWidth();
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const [state, setState] = useState<State>({
@@ -29,17 +31,9 @@ const PagedMemoList = (props: Props) => {
     nextPageToken: "",
   });
   const sortedMemoList = props.listSort ? props.listSort(memoList.value) : memoList.value;
-  const handleRefresh = async () => {
-    memoList.reset();
-    setState((state) => ({ ...state, nextPageToken: "" }));
-    fetchMoreMemos("");
-  };
-  const setIsRequesting = (isRequesting: boolean) => {
-    setState((state) => ({ ...state, isRequesting }));
-  };
 
   const fetchMoreMemos = async (nextPageToken: string) => {
-    setIsRequesting(true);
+    setState((state) => ({ ...state, isRequesting: true }));
     const response = await memoStore.fetchMemos({
       filter: props.filter || "",
       pageSize: props.pageSize || DEFAULT_LIST_MEMOS_PAGE_SIZE,
@@ -51,44 +45,61 @@ const PagedMemoList = (props: Props) => {
     }));
   };
 
-  useEffect(() => {
+  const refreshList = useCallback(async () => {
     memoList.reset();
     setState((state) => ({ ...state, nextPageToken: "" }));
     fetchMoreMemos("");
+  }, []);
+
+  useEffect(() => {
+    refreshList();
   }, [props.filter, props.pageSize]);
 
+  const children = (
+    <>
+      {sortedMemoList.map((memo) => props.renderer(memo))}
+      {state.isRequesting && (
+        <div className="w-full flex flex-row justify-center items-center my-4">
+          <LoaderIcon className="animate-spin text-zinc-500" />
+        </div>
+      )}
+      {!state.isRequesting && state.nextPageToken && (
+        <div className="w-full flex flex-row justify-center items-center my-4">
+          <Button variant="plain" onClick={() => fetchMoreMemos(state.nextPageToken)}>
+            {t("memo.load-more")}
+            <ArrowDownIcon className="ml-2 w-4 h-auto" />
+          </Button>
+        </div>
+      )}
+      {!state.isRequesting && !state.nextPageToken && sortedMemoList.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>
+        </div>
+      )}
+    </>
+  );
+
+  // In case of md screen, we don't need pull to refresh.
+  if (md) {
+    return children;
+  }
+
   return (
     <PullToRefresh
-      onRefresh={handleRefresh}
-      pullingContent={<></>}
+      onRefresh={() => refreshList()}
+      pullingContent={
+        <div className="w-full flex flex-row justify-center items-center my-4">
+          <LoaderIcon className="opacity-60" />
+        </div>
+      }
       refreshingContent={
         <div className="w-full flex flex-row justify-center items-center my-4">
           <LoaderIcon className="animate-spin" />
         </div>
       }
     >
-      <>
-        {sortedMemoList.map((memo) => props.renderer(memo))}
-        {state.isRequesting && (
-          <div className="w-full flex flex-row justify-center items-center my-4">
-            <LoaderIcon className="animate-spin text-zinc-500" />
-          </div>
-        )}
-        {!state.isRequesting && state.nextPageToken && (
-          <div className="w-full flex flex-row justify-center items-center my-4">
-            <Button variant="plain" onClick={() => fetchMoreMemos(state.nextPageToken)}>
-              {t("memo.load-more")}
-              <ArrowDownIcon className="ml-2 w-4 h-auto" />
-            </Button>
-          </div>
-        )}
-        {!state.isRequesting && !state.nextPageToken && sortedMemoList.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>
-          </div>
-        )}
-      </>
+      {children}
     </PullToRefresh>
   );
 };