mirror of https://github.com/fantasticit/think.git
Merge pull request #245 from xinlc/fix/template-paging
Get real paging data for template
This commit is contained in:
commit
1c2d1338a9
|
@ -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}
|
||||
</>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue