Merge pull request #245 from xinlc/fix/template-paging

Get real paging data for template

packages/client/src/components/template/list/index.tsx

@@ -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}
         </>

packages/client/src/data/template.ts

@@ -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,

packages/client/src/pages/template/index.tsx

@@ -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>