diff --git a/apps/web/i18n b/apps/web/i18n index b8585469..4d32a5f0 160000 --- a/apps/web/i18n +++ b/apps/web/i18n @@ -1 +1 @@ -Subproject commit b8585469303f31a568ebad3a73a07e180a91c1c0 +Subproject commit 4d32a5f0bbc3158b5e6f43c95595ec4e5078b8b6 diff --git a/apps/web/src/common/components/Antd/Pagination.tsx b/apps/web/src/common/components/Antd/Pagination.tsx new file mode 100644 index 00000000..a63ecc16 --- /dev/null +++ b/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 ( +
+ + + +
+ ); +}; +export default MyTable; diff --git a/apps/web/src/modules/collection/MainContent.tsx b/apps/web/src/modules/collection/MainContent.tsx index d40ec2e2..48770e5b 100644 --- a/apps/web/src/modules/collection/MainContent.tsx +++ b/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; + data?: CollectionListQuery; compareIds: string[]; onCompareIdsChange: (ids: string[]) => void; }) => { @@ -61,7 +59,6 @@ const RenderList = ({ ); } - return (
- {data?.pages.map((group, i) => ( - - {group.collectionList.items?.map( - ({ origin, metricActivity, path, shortCode }) => { - const chartData = metricActivity.map( - (i) => i.activityScore as number - ); - return ( -
- { - if (checked) { - onCompareIdsChange([...compareIds, shortCode]); - } else { - compareIds.splice(compareIds.indexOf(shortCode), 1); - onCompareIdsChange([...compareIds]); - } - }} - /> -
- ); - } - )} - - ))} + {/* {data?.collectionList.map((group, i) => ( + */} + {data?.collectionList.items.map( + ({ origin, metricActivity, path, shortCode }) => { + const chartData = metricActivity.map( + (i) => i.activityScore as number + ); + return ( +
+ { + if (checked) { + onCompareIdsChange([...compareIds, shortCode]); + } else { + compareIds.splice(compareIds.indexOf(shortCode), 1); + onCompareIdsChange([...compareIds]); + } + }} + /> +
+ ); + } + )} + {/* + ))} */}
); }; @@ -121,47 +118,53 @@ const MainContent = ({ const [compareIds, setCompareIds] = useState([]); 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 (
@@ -174,9 +177,11 @@ const MainContent = ({ onCompareModeChange={(v) => setCompareMode(v)} keyword={keyword} setKeyword={(v) => { - console.log(v); setKeyword(v); }} + setSort={(v) => { + setSort(v); + }} /> - {isLoading ? null : ( +
+ { + setPage(page); + }} + /> +
+ )} + + {/* {isLoading ? null : (
{total > 0 ? (
- )} + )} */}
diff --git a/apps/web/src/modules/collection/MainHeader.tsx b/apps/web/src/modules/collection/MainHeader.tsx index 13d0341f..618b2b5b 100644 --- a/apps/web/src/modules/collection/MainHeader.tsx +++ b/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; @@ -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: ( + + {item.name} + + ), + key: item.key, + }; + }); return ( -
+
{collection && collection[nameKey]} @@ -137,6 +177,16 @@ const MainHeader = ({
+
+ + e.preventDefault()} + > + + + +
); };