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';
|
import { List, Pagination } from '@douyinfe/semi-ui';
|
||||||
|
|
||||||
|
@ -31,15 +31,9 @@ export const TemplateList: React.FC<IProps> = ({
|
||||||
onClosePreview,
|
onClosePreview,
|
||||||
pageSize = 5,
|
pageSize = 5,
|
||||||
}) => {
|
}) => {
|
||||||
const { data, loading, error, refresh } = hook();
|
const { data, loading, error, page, setPage, refresh } = hook(pageSize);
|
||||||
const [page, onPageChange] = useState(1);
|
const list = (data && data.data) || [];
|
||||||
|
const total = (data && data.total) || 0;
|
||||||
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]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
refresh();
|
refresh();
|
||||||
|
@ -64,7 +58,7 @@ export const TemplateList: React.FC<IProps> = ({
|
||||||
<>
|
<>
|
||||||
<List
|
<List
|
||||||
grid={grid}
|
grid={grid}
|
||||||
dataSource={firstListItem ? [{}, ...arr] : arr}
|
dataSource={firstListItem ? [{}, ...list] : list}
|
||||||
renderItem={(template, idx) => {
|
renderItem={(template, idx) => {
|
||||||
if (idx === 0 && firstListItem) {
|
if (idx === 0 && firstListItem) {
|
||||||
return <List.Item>{firstListItem}</List.Item>;
|
return <List.Item>{firstListItem}</List.Item>;
|
||||||
|
@ -84,7 +78,7 @@ export const TemplateList: React.FC<IProps> = ({
|
||||||
}}
|
}}
|
||||||
emptyContent={<Empty message={'暂无模板'} />}
|
emptyContent={<Empty message={'暂无模板'} />}
|
||||||
></List>
|
></List>
|
||||||
{data.data.length > pageSize ? (
|
{total > pageSize ? (
|
||||||
<Pagination
|
<Pagination
|
||||||
size="small"
|
size="small"
|
||||||
style={{
|
style={{
|
||||||
|
@ -93,9 +87,9 @@ export const TemplateList: React.FC<IProps> = ({
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
}}
|
}}
|
||||||
pageSize={pageSize}
|
pageSize={pageSize}
|
||||||
total={data.data.length}
|
total={total}
|
||||||
currentPage={page}
|
currentPage={page}
|
||||||
onChange={(cPage) => onPageChange(cPage)}
|
onChange={(cPage) => setPage(cPage)}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { HttpClient } from 'services/http-client';
|
||||||
|
|
||||||
export const getPublicTemplates = (
|
export const getPublicTemplates = (
|
||||||
page = 1,
|
page = 1,
|
||||||
|
pageSize = 12,
|
||||||
cookie = null
|
cookie = null
|
||||||
): Promise<{
|
): Promise<{
|
||||||
data: Array<ITemplate>;
|
data: Array<ITemplate>;
|
||||||
|
@ -18,20 +19,22 @@ export const getPublicTemplates = (
|
||||||
cookie,
|
cookie,
|
||||||
params: {
|
params: {
|
||||||
page,
|
page,
|
||||||
|
pageSize,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const usePublicTemplates = () => {
|
export const usePublicTemplates = (pageSize = 12) => {
|
||||||
const [page, setPage] = useState(1);
|
const [page, setPage] = useState(1);
|
||||||
const { data, error, isLoading, refetch } = useQuery([TemplateApiDefinition.public.client(), page], () =>
|
const { data, error, isLoading, refetch } = useQuery([TemplateApiDefinition.public.client(), page], () =>
|
||||||
getPublicTemplates(page)
|
getPublicTemplates(page, pageSize)
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
data,
|
data,
|
||||||
loading: isLoading,
|
loading: isLoading,
|
||||||
error,
|
error,
|
||||||
|
page,
|
||||||
setPage,
|
setPage,
|
||||||
refresh: refetch,
|
refresh: refetch,
|
||||||
};
|
};
|
||||||
|
@ -39,6 +42,7 @@ export const usePublicTemplates = () => {
|
||||||
|
|
||||||
export const getOwnTemplates = (
|
export const getOwnTemplates = (
|
||||||
page = 1,
|
page = 1,
|
||||||
|
pageSize = 12,
|
||||||
cookie = null
|
cookie = null
|
||||||
): Promise<{
|
): Promise<{
|
||||||
data: Array<ITemplate>;
|
data: Array<ITemplate>;
|
||||||
|
@ -50,6 +54,7 @@ export const getOwnTemplates = (
|
||||||
cookie,
|
cookie,
|
||||||
params: {
|
params: {
|
||||||
page,
|
page,
|
||||||
|
pageSize,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -58,14 +63,14 @@ export const getOwnTemplates = (
|
||||||
* 个人模板
|
* 个人模板
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const useOwnTemplates = () => {
|
export const useOwnTemplates = (pageSize = 12) => {
|
||||||
const [page, setPage] = useState(1);
|
const [page, setPage] = useState(1);
|
||||||
const {
|
const {
|
||||||
data,
|
data,
|
||||||
error,
|
error,
|
||||||
isLoading,
|
isLoading,
|
||||||
refetch: mutate,
|
refetch: mutate,
|
||||||
} = useQuery([TemplateApiDefinition.own.client(), page], () => getOwnTemplates(page));
|
} = useQuery([TemplateApiDefinition.own.client(), page], () => getOwnTemplates(page, pageSize));
|
||||||
|
|
||||||
const addTemplate = useCallback(
|
const addTemplate = useCallback(
|
||||||
async (data): Promise<ITemplate> => {
|
async (data): Promise<ITemplate> => {
|
||||||
|
@ -80,6 +85,7 @@ export const useOwnTemplates = () => {
|
||||||
data,
|
data,
|
||||||
loading: isLoading,
|
loading: isLoading,
|
||||||
error,
|
error,
|
||||||
|
page,
|
||||||
setPage,
|
setPage,
|
||||||
addTemplate,
|
addTemplate,
|
||||||
refresh: mutate,
|
refresh: mutate,
|
||||||
|
|
|
@ -12,9 +12,10 @@ import Router, { useRouter } from 'next/router';
|
||||||
import styles from './index.module.scss';
|
import styles from './index.module.scss';
|
||||||
|
|
||||||
const { Title } = Typography;
|
const { Title } = Typography;
|
||||||
|
const PAGE_SIZE = 9;
|
||||||
|
|
||||||
const Page: NextPage = () => {
|
const Page: NextPage = () => {
|
||||||
const { addTemplate } = useOwnTemplates();
|
const { addTemplate } = useOwnTemplates(PAGE_SIZE);
|
||||||
const { query = {} } = useRouter();
|
const { query = {} } = useRouter();
|
||||||
const { tab = 'public' } = query as {
|
const { tab = 'public' } = query as {
|
||||||
tab?: string;
|
tab?: string;
|
||||||
|
@ -45,10 +46,10 @@ const Page: NextPage = () => {
|
||||||
</div>
|
</div>
|
||||||
<Tabs type="button" style={{ marginTop: 16 }} activeKey={tab} onChange={(tab) => navigate(tab)}>
|
<Tabs type="button" style={{ marginTop: 16 }} activeKey={tab} onChange={(tab) => navigate(tab)}>
|
||||||
<TabPane tab="公开模板" itemKey="public">
|
<TabPane tab="公开模板" itemKey="public">
|
||||||
<TemplateList hook={usePublicTemplates} pageSize={9} />
|
<TemplateList hook={usePublicTemplates} pageSize={PAGE_SIZE} />
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane tab="我创建的" itemKey="own">
|
<TabPane tab="我创建的" itemKey="own">
|
||||||
<TemplateList hook={useOwnTemplates} pageSize={9} />
|
<TemplateList hook={useOwnTemplates} pageSize={PAGE_SIZE} />
|
||||||
</TabPane>
|
</TabPane>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue