feat: 联系人分页

src/pages/contact/index.tsx

@@ -1,4 +1,4 @@
-import Taro, { useReachBottom,} from "@tarojs/taro";
+import Taro, { useReachBottom } from "@tarojs/taro";
 import { View, Text } from "@tarojs/components";
 import EmptyData from "@/components/empty-data";
 import NavBarNormal from "@/components/NavBarNormal/index";
@@ -11,30 +11,57 @@ import { useLoadMore } from "@/utils/loadMore";
 import PageCustom from "@/components/page-custom/index";
 import { TContactItem } from "@/types/contact";
 import { isSuccess } from "@/utils";
+import useSWRInfinite from "swr/infinite";
 
 export default function Index() {
   const [searchValue, setSearchValue] = useState("");
-  const [list, setList] = useState<TContactItem[]>([]);
 
-  const fetcher = async ([_url, nextId, page, pageSize, _keyword]) => {
-    let keyword = _keyword
-    const res = await getContactList({ startId: nextId, pageSize, keyword });
+  const fetcher = async ([_url, params, keyword]) => {
+    params = params || {};
+    console.log("fetcher", _url, params);
+    const res = await getContactList({
+      startId: params.nextId,
+      pageSize: params.pageSize,
+      keyword: keyword,
+    });
     return res.data;
   };
-  const { data, loadMore, refetch } = useLoadMore<TContactItem[]>({
-    url: '/blue-aiagent/api/v1/my/contacts',
-    fetcher,
-    params: [searchValue]
+
+  const getKey = (pageIndex:number, previousPageData) => {
+    if (pageIndex === 0)
+      return [
+        "/my/contacts",
+        { nextId: undefined, pageSize: 2, keyword: "" },
+        searchValue,
+      ];
+    if (previousPageData && previousPageData.nextId) {
+      return [
+        "/my/contacts",
+        { pageSize: 2, nextId: previousPageData.nextId },
+        searchValue,
+      ];
+    }
+
+    return null;
+  };
+  const { data, setSize } = useSWRInfinite(getKey, fetcher, {
+    revalidateIfStale: false,
+    onErrorRetry(err, key, config, revalidate, revalidateOpts) {
+      if(err.status === 404) return 
+      if(err.status === 401) return
+      if(revalidateOpts.retryCount >=3 )return
+    },
   });
 
+  const list = data?.flatMap((page) => page?.data || []) || [];
+  
+
   const resetFetchList = () => {
-    setList([]);
-    refetch();
+    setSize(1);
   };
 
   const handleSearchBarChanged = (v: string) => {
     setSearchValue(v);
-    setList([])
   };
 
   const handleClear = () => {
@@ -47,31 +74,24 @@ export default function Index() {
     if (searchValue.length) {
       return;
     }
-    loadMore();
+    setSize((prevSize) => prevSize + 1);
   });
 
-  useEffect(() => {
-    if (data?.data) {
-      setList([...list, ...data.data]);
-    }
-  }, [data]);
-
 
   const handleHello = async (e: any) => {
-    const detail = e.detail as {type: string, id: string};
+    const detail = e.detail as { type: string; id: string };
     console.log(detail);
     // 置顶与取消置顶
-    if(detail.type === 'pin' || detail.type === 'unpin'){
+    if (detail.type === "pin" || detail.type === "unpin") {
       const reseponse = await setContactToTop({
-        isTop: (detail.type === 'pin'),
-        contactId: detail.id
-      })
-      if(isSuccess(reseponse.status)){
+        isTop: detail.type === "pin",
+        contactId: detail.id,
+      });
+      if (isSuccess(reseponse.status)) {
         resetFetchList();
-        return
+        return;
       }
     }
-    
   };
 
   const renderContent = () => {
@@ -95,12 +115,15 @@ export default function Index() {
         </slide-delete>
       ));
     }
-    return <EmptyData type={2} />
+    return <EmptyData type={2} />;
   };
 
   return (
     <PageCustom>
-      <NavBarNormal scrollFadeIn leftColumn={() => <Text className="text-16 font-medium">联系人</Text>}></NavBarNormal>
+      <NavBarNormal
+        scrollFadeIn
+        leftColumn={() => <Text className="text-16 font-medium">联系人</Text>}
+      ></NavBarNormal>
       <View className="flex flex-col w-full">
         <View className="px-16 pb-12">
           <SearchBar