feat: add pull to refresh for PagedMemoList (#4128)

usememos · Nov 19, 2024 · 3cbccde · 3cbccde
1 parent 1424036
commit 3cbccde
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 21 deletions.
diff --git a/web/package.json b/web/package.json
@@ -41,6 +41,7 @@
     "react-leaflet": "^4.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.27.0",
+    "react-simple-pull-to-refresh": "^1.3.3",
     "react-use": "^17.5.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/components/PagedMemoList/PagedMemoList.tsx b/web/src/components/PagedMemoList/PagedMemoList.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@usememos/mui";
 import { ArrowDownIcon, LoaderIcon } from "lucide-react";
 import { useEffect, useState } from "react";
+import PullToRefresh from "react-simple-pull-to-refresh";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
 import { useMemoList, useMemoStore } from "@/store/v1";
 import { Memo } from "@/types/proto/api/v1/memo_service";
@@ -28,7 +29,11 @@ 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 }));
   };
@@ -53,28 +58,38 @@ const PagedMemoList = (props: Props) => {
   }, [props.filter, props.pageSize]);
 
   return (
-    <>
-      {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 && (
+    <PullToRefresh
+      onRefresh={handleRefresh}
+      pullingContent={<></>}
+      refreshingContent={
         <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>
+          <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>
+        )}
+      </>
+    </PullToRefresh>
   );
 };