Feat: add repo sort and page pagination (#345)

Signed-off-by: laixingyou <laixy7@gmail.com>

apps/web/src/common/components/Antd/Pagination.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from 'react';
+import { Pagination, ConfigProvider } from 'antd';
+import getLocale from '@common/utils/getLocale';
+import zhCN from 'antd/locale/zh_CN';
+import enUS from 'antd/locale/en_US';
+
+const MyTable = (props) => {
+  const [local, setLocale] = useState(enUS);
+  useEffect(() => {
+    const l = getLocale();
+    setLocale(l === 'zh' ? zhCN : enUS);
+  }, []);
+  return (
+    <div>
+      <ConfigProvider locale={local}>
+        <Pagination {...props} />
+      </ConfigProvider>
+    </div>
+  );
+};
+export default MyTable;

apps/web/src/modules/collection/MainContent.tsx

@@ -1,19 +1,17 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import RepoCard from '../explore/RepoCard';
 import { useTranslation } from 'next-i18next';
 import { Collection } from '@modules/explore/type';
 import classnames from 'classnames';
-import { useInfiniteQuery, InfiniteData } from '@tanstack/react-query';
 import {
   useCollectionListQuery,
   CollectionListQuery,
 } from '@oss-compass/graphql';
 import client from '@common/gqlClient';
-import { Button } from '@oss-compass/ui';
-import last from 'lodash/last';
 import MainHeader from './MainHeader';
 import MainMobileHeader from './MainMobileHeader';
+import Pagination from '@common/components/Antd/Pagination';
 
 const RenderList = ({
   total,
@@ -26,7 +24,7 @@ const RenderList = ({
   total: number;
   isLoading: boolean;
   compareMode: boolean;
-  data?: InfiniteData<CollectionListQuery>;
+  data?: CollectionListQuery;
   compareIds: string[];
   onCompareIdsChange: (ids: string[]) => void;
 }) => {
@@ -61,7 +59,6 @@ const RenderList = ({
       </div>
     );
   }
-
   return (
     <div
       className={classnames(
@@ -74,35 +71,35 @@ const RenderList = ({
         'sm:grid-cols-1'
       )}
     >
-      {data?.pages.map((group, i) => (
-        <React.Fragment key={i}>
-          {group.collectionList.items?.map(
-            ({ origin, metricActivity, path, shortCode }) => {
-              const chartData = metricActivity.map(
-                (i) => i.activityScore as number
-              );
-              return (
-                <div className="w-full" key={origin}>
-                  <RepoCard
-                    label={origin!}
-                    shortCode={shortCode!}
-                    chartData={chartData}
-                    compareMode={compareMode}
-                    onSelectChange={(checked, { shortCode }) => {
-                      if (checked) {
-                        onCompareIdsChange([...compareIds, shortCode]);
-                      } else {
-                        compareIds.splice(compareIds.indexOf(shortCode), 1);
-                        onCompareIdsChange([...compareIds]);
-                      }
-                    }}
-                  />
-                </div>
-              );
-            }
-          )}
-        </React.Fragment>
-      ))}
+      {/* {data?.collectionList.map((group, i) => (
+        <React.Fragment key={i}> */}
+      {data?.collectionList.items.map(
+        ({ origin, metricActivity, path, shortCode }) => {
+          const chartData = metricActivity.map(
+            (i) => i.activityScore as number
+          );
+          return (
+            <div className="w-full" key={origin}>
+              <RepoCard
+                label={origin!}
+                shortCode={shortCode!}
+                chartData={chartData}
+                compareMode={compareMode}
+                onSelectChange={(checked, { shortCode }) => {
+                  if (checked) {
+                    onCompareIdsChange([...compareIds, shortCode]);
+                  } else {
+                    compareIds.splice(compareIds.indexOf(shortCode), 1);
+                    onCompareIdsChange([...compareIds]);
+                  }
+                }}
+              />
+            </div>
+          );
+        }
+      )}
+      {/* </React.Fragment>
+      ))} */}
     </div>
   );
 };
@@ -121,47 +118,53 @@ const MainContent = ({
   const [compareIds, setCompareIds] = useState<string[]>([]);
 
   const [keyword, setKeyword] = useState('');
-  const [sort, setSort] = useState('');
+  const [page, setPage] = useState(1);
+  const [sort, setSort] = useState({
+    type: 'activity_score',
+    direction: 'desc',
+  });
   useEffect(() => {
     setKeyword('');
+    setSort({ type: 'activity_score', direction: 'desc' });
+    setPage(1);
   }, [slug, router]);
   const params = {
     ident: slug,
-    page: 1,
+    page: page,
     per: 30,
     keyword,
-    sortOpts: [{ type: 'activity_score', direction: 'asc' }],
+    sortOpts: sort, //desc  updated_at/activity_score
   };
-  const {
-    data,
-    status,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    isLoading,
-  } = useInfiniteQuery(
-    useCollectionListQuery.getKey(params),
-    async ({ pageParam }) => {
-      return await useCollectionListQuery.fetcher(client, {
-        ...params,
-        ...pageParam,
-      })();
-    },
-    {
-      getNextPageParam: (lastPage) => {
-        const page = lastPage?.collectionList?.page! || 0;
-        const totalPage = lastPage?.collectionList?.totalPage! || 0;
-        if (totalPage > page) {
-          return { page: page + 1 };
-        }
-        return null;
-      },
-    }
-  );
-
-  const lastItem = last(data?.pages);
-  const total = lastItem?.collectionList.count || 0;
-  console.log(data, lastItem, total, hasNextPage);
+  //用于无限翻页
+  // const {
+  //   data,
+  //   status,
+  //   fetchNextPage,
+  //   hasNextPage,
+  //   isFetchingNextPage,
+  //   isLoading,
+  // } = useInfiniteQuery(
+  //   useCollectionListQuery.getKey(params),
+  //   async ({ pageParam }) => {
+  //     return await useCollectionListQuery.fetcher(client, {
+  //       ...params,
+  //       ...pageParam,
+  //     })();
+  //   },
+  //   {
+  //     getNextPageParam: (lastPage) => {
+  //       const page = lastPage?.collectionList?.page! || 0;
+  //       const totalPage = lastPage?.collectionList?.totalPage! || 0;
+  //       if (totalPage > page) {
+  //         return { page: page + 1 };
+  //       }
+  //       return null;
+  //     },
+  //   }
+  // );
+  const { data, isError, isLoading } = useCollectionListQuery(client, params);
+  const collectionList = data?.collectionList;
+  const total = collectionList?.count || 0;
   return (
     <div className="flex-1 overflow-y-auto">
       <div className="w-full">
@@ -174,9 +177,11 @@ const MainContent = ({
           onCompareModeChange={(v) => setCompareMode(v)}
           keyword={keyword}
           setKeyword={(v) => {
-            console.log(v);
             setKeyword(v);
           }}
+          setSort={(v) => {
+            setSort(v);
+          }}
         />
 
         <MainMobileHeader
@@ -197,8 +202,22 @@ const MainContent = ({
               setCompareIds(ids);
             }}
           />
-
           {isLoading ? null : (
+            <div className="flex justify-center py-6">
+              <Pagination
+                total={total}
+                showQuickJumper
+                showSizeChanger={false}
+                current={collectionList?.page}
+                pageSize={30}
+                onChange={(page) => {
+                  setPage(page);
+                }}
+              />
+            </div>
+          )}
+
+          {/* {isLoading ? null : (
             <div className="flex justify-center py-6">
               {total > 0 ? (
                 <Button
@@ -220,7 +239,7 @@ const MainContent = ({
                 </Button>
               ) : null}
             </div>
-          )}
+          )} */}
         </div>
       </div>
     </div>

apps/web/src/modules/collection/MainHeader.tsx

@@ -6,8 +6,10 @@ import jsonData from '@public/data/collections.json';
 import classnames from 'classnames';
 import { getShortCompareLink } from '@common/utils';
 import { AiOutlineSearch } from 'react-icons/ai';
+import { MdOutlineSort } from 'react-icons/md';
 import { useHotkeys } from 'react-hotkeys-hook';
 import Compare from './assets/compare.svg';
+import { Dropdown } from 'antd';
 
 const collectionsMap = jsonData as unknown as Record<string, Collection>;
 
@@ -20,6 +22,7 @@ const MainHeader = ({
   onCompareModeChange,
   keyword,
   setKeyword,
+  setSort,
 }: {
   slug: string;
   nameKey: 'name_cn' | 'name';
@@ -29,6 +32,7 @@ const MainHeader = ({
   onCompareModeChange: (v: boolean) => void;
   keyword: string;
   setKeyword: (v: string) => void;
+  setSort: (v: any) => void;
 }) => {
   const router = useRouter();
 
@@ -38,9 +42,11 @@ const MainHeader = ({
     return collectionsMap[ident].slug === `/${slug}`;
   });
   const collection = ident ? collectionsMap[ident] : null;
+
   const [value, setValue] = useState(keyword);
   useEffect(() => {
     setValue('');
+    setActive('1');
   }, [ident]);
   useHotkeys(
     'enter',
@@ -54,9 +60,43 @@ const MainHeader = ({
     },
     { enableOnTags: ['INPUT'] }
   );
-
+  const onClick = ({ key }) => {
+    setActive(key);
+    let item = sortList.find((z) => {
+      return z.key === key;
+    });
+    let type = item.type;
+    let direction = item.direction;
+    console.log(type, direction);
+    setSort({ type, direction });
+  };
+  const [active, setActive] = useState('1');
+  const sortList = [
+    {
+      type: 'activity_score',
+      direction: 'desc',
+      key: '1',
+      name: t('collection:descending_order_of_activity'),
+    },
+    {
+      type: 'activity_score',
+      direction: 'asc',
+      key: '2',
+      name: t('collection:ascending_order_of_activity'),
+    },
+  ];
+  const items = sortList.map((item) => {
+    return {
+      label: (
+        <span className={classnames({ 'text-[#1677ff]': active === item.key })}>
+          {item.name}
+        </span>
+      ),
+      key: item.key,
+    };
+  });
   return (
-    <div className="flex px-8 pt-4 pb-5 md:hidden">
+    <div className="flex justify-between px-8 pt-4 pb-5 md:hidden">
       <div className="mr-8">
         <div className="text-xl font-bold">
           {collection && collection[nameKey]}
@@ -137,6 +177,16 @@ const MainHeader = ({
           </div>
         </div>
       </div>
+      <div className="ml-auto mt-2 cursor-pointer text-2xl">
+        <Dropdown menu={{ items, onClick }}>
+          <a
+            className="hover:text-[#1677ff]"
+            onClick={(e) => e.preventDefault()}
+          >
+            <MdOutlineSort />
+          </a>
+        </Dropdown>
+      </div>
     </div>
   );
 };