Get real paging data for template

pull/245/head
Richard 2023-04-14 17:22:08 +08:00
parent 91b303121b
commit 8567627eab
3 changed files with 22 additions and 21 deletions

View File

@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useState } from 'react';
import React, { useEffect } from 'react';
import { List, Pagination } from '@douyinfe/semi-ui';
@ -31,15 +31,9 @@ export const TemplateList: React.FC<IProps> = ({
onClosePreview,
pageSize = 5,
}) => {
const { data, loading, error, refresh } = hook();
const [page, onPageChange] = useState(1);
const arr = useMemo(() => {
const arr = (data && data.data) || [];
const start = (page - 1) * pageSize;
const end = page * pageSize;
return arr.slice(start, end);
}, [data, page, pageSize]);
const { data, loading, error, page, setPage, refresh } = hook(pageSize);
const list = (data && data.data) || [];
const total = (data && data.total) || 0;
useEffect(() => {
refresh();
@ -64,7 +58,7 @@ export const TemplateList: React.FC<IProps> = ({
<>
<List
grid={grid}
dataSource={firstListItem ? [{}, ...arr] : arr}
dataSource={firstListItem ? [{}, ...list] : list}
renderItem={(template, idx) => {
if (idx === 0 && firstListItem) {
return <List.Item>{firstListItem}</List.Item>;
@ -84,7 +78,7 @@ export const TemplateList: React.FC<IProps> = ({
}}
emptyContent={<Empty message={'暂无模板'} />}
></List>
{data.data.length > pageSize ? (
{total > pageSize ? (
<Pagination
size="small"
style={{
@ -93,9 +87,9 @@ export const TemplateList: React.FC<IProps> = ({
justifyContent: 'center',
}}
pageSize={pageSize}
total={data.data.length}
total={total}
currentPage={page}
onChange={(cPage) => onPageChange(cPage)}
onChange={(cPage) => setPage(cPage)}
/>
) : null}
</>

View File

@ -7,6 +7,7 @@ import { HttpClient } from 'services/http-client';
export const getPublicTemplates = (
page = 1,
pageSize = 12,
cookie = null
): Promise<{
data: Array<ITemplate>;
@ -18,20 +19,22 @@ export const getPublicTemplates = (
cookie,
params: {
page,
pageSize,
},
});
};
export const usePublicTemplates = () => {
export const usePublicTemplates = (pageSize = 12) => {
const [page, setPage] = useState(1);
const { data, error, isLoading, refetch } = useQuery([TemplateApiDefinition.public.client(), page], () =>
getPublicTemplates(page)
getPublicTemplates(page, pageSize)
);
return {
data,
loading: isLoading,
error,
page,
setPage,
refresh: refetch,
};
@ -39,6 +42,7 @@ export const usePublicTemplates = () => {
export const getOwnTemplates = (
page = 1,
pageSize = 12,
cookie = null
): Promise<{
data: Array<ITemplate>;
@ -50,6 +54,7 @@ export const getOwnTemplates = (
cookie,
params: {
page,
pageSize,
},
});
};
@ -58,14 +63,14 @@ export const getOwnTemplates = (
*
* @returns
*/
export const useOwnTemplates = () => {
export const useOwnTemplates = (pageSize = 12) => {
const [page, setPage] = useState(1);
const {
data,
error,
isLoading,
refetch: mutate,
} = useQuery([TemplateApiDefinition.own.client(), page], () => getOwnTemplates(page));
} = useQuery([TemplateApiDefinition.own.client(), page], () => getOwnTemplates(page, pageSize));
const addTemplate = useCallback(
async (data): Promise<ITemplate> => {
@ -80,6 +85,7 @@ export const useOwnTemplates = () => {
data,
loading: isLoading,
error,
page,
setPage,
addTemplate,
refresh: mutate,

View File

@ -12,9 +12,10 @@ import Router, { useRouter } from 'next/router';
import styles from './index.module.scss';
const { Title } = Typography;
const PAGE_SIZE = 9;
const Page: NextPage = () => {
const { addTemplate } = useOwnTemplates();
const { addTemplate } = useOwnTemplates(PAGE_SIZE);
const { query = {} } = useRouter();
const { tab = 'public' } = query as {
tab?: string;
@ -45,10 +46,10 @@ const Page: NextPage = () => {
</div>
<Tabs type="button" style={{ marginTop: 16 }} activeKey={tab} onChange={(tab) => navigate(tab)}>
<TabPane tab="公开模板" itemKey="public">
<TemplateList hook={usePublicTemplates} pageSize={9} />
<TemplateList hook={usePublicTemplates} pageSize={PAGE_SIZE} />
</TabPane>
<TabPane tab="我创建的" itemKey="own">
<TemplateList hook={useOwnTemplates} pageSize={9} />
<TemplateList hook={useOwnTemplates} pageSize={PAGE_SIZE} />
</TabPane>
</Tabs>
</div>