Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: add repo sort and page pagination #345

Merged
merged 2 commits into from
Apr 11, 2024
Merged

Feat: add repo sort and page pagination #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59f2f44
feat: add repo sort
coder-sett Apr 10, 2024
ca9ae3a
feat: page Pagination
coder-sett Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/i18n
Open in desktop
Submodule i18n updated 2 files
+3 −1 en/collection.json
+3 −1 zh/collection.json
21 changes: 21 additions & 0 deletions apps/web/src/common/components/Antd/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
161 changes: 90 additions & 71 deletions apps/web/src/modules/collection/MainContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -26,7 +24,7 @@ const RenderList = ({
total: number;
isLoading: boolean;
compareMode: boolean;
data?: InfiniteData<CollectionListQuery>;
data?: CollectionListQuery;
compareIds: string[];
onCompareIdsChange: (ids: string[]) => void;
}) => {
Expand Down Expand Up @@ -61,7 +59,6 @@ const RenderList = ({
</div>
);
}

return (
<div
className={classnames(
Expand All @@ -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>
);
};
Expand All @@ -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">
Expand All @@ -174,9 +177,11 @@ const MainContent = ({
onCompareModeChange={(v) => setCompareMode(v)}
keyword={keyword}
setKeyword={(v) => {
console.log(v);
setKeyword(v);
}}
setSort={(v) => {
setSort(v);
}}
/>

<MainMobileHeader
Expand All @@ -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
Expand All @@ -220,7 +239,7 @@ const MainContent = ({
</Button>
) : null}
</div>
)}
)} */}
</div>
</div>
</div>
Expand Down
54 changes: 52 additions & 2 deletions apps/web/src/modules/collection/MainHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;

Expand All @@ -20,6 +22,7 @@ const MainHeader = ({
onCompareModeChange,
keyword,
setKeyword,
setSort,
}: {
slug: string;
nameKey: 'name_cn' | 'name';
Expand All @@ -29,6 +32,7 @@ const MainHeader = ({
onCompareModeChange: (v: boolean) => void;
keyword: string;
setKeyword: (v: string) => void;
setSort: (v: any) => void;
}) => {
const router = useRouter();

Expand All @@ -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',
Expand All @@ -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]}
Expand Down Expand Up @@ -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>
);
};
Expand Down
Loading