设置-webhooks分页

src/forge/Settings/Webhooks/sub/PushHistory.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Collapse , Tooltip , Spin } from 'antd';
+import { Button, Collapse , Tooltip , Spin , Pagination } from 'antd';
 import axios from 'axios';
 import Content from './historyContent';
 import Fault from '../images/fault.png';
@@ -8,21 +8,30 @@ const { Panel } = Collapse;
 function PushHistory({id,owner,projectsId,showNotification}) {
   const [ list , setList ] = useState(undefined);
   const [ isSpin , setIsSpin ] = useState(false);
+  const [ page , setPage ] = useState(1);
+  const [ total , setTotal ] = useState(0);
+  const pageSize = 10;
 
   useEffect(()=>{
     if(id && owner && projectsId){
-      Init();
+      Init(1);
     }
   },[id,owner,projectsId])
 
-  function Init() {
+  useEffect(()=>{
+    setList(undefined)
+    Init(page);
+  },[page])
+
+  function Init(page) {
     const url = `/${owner}/${projectsId}/webhooks/${id}/tasks.json`;
     axios.get(url,{
-      params:{page:1,limit:10}
+      params:{page:page,limit:pageSize}
     }).then(result=>{
       if(result && result.data){
         setList(result.data.tasks);
         setIsSpin(false);
+        setTotal(result.data.total_count);
       }
     }).catch(error=>{})
   }
@@ -49,7 +58,7 @@ function PushHistory({id,owner,projectsId,showNotification}) {
         </span>
       </div>
       {
-        list && list.length>0 &&
+        list && list.length>0 ?
         <Collapse accordion bordered={false} className="historyColl">
           {
             list.map((i,k)=>{
@@ -75,6 +84,15 @@ function PushHistory({id,owner,projectsId,showNotification}) {
             })
           }
         </Collapse>
+        :
+        <div style={{height:"470px",display:"flex",alignItems:"center",justifyContent:"center"}}>
+          <Spin />
+        </div>
+      }
+      {
+        total > pageSize ? 
+        <div style={{padding:"15px 0px",textAlign:"right"}}><Pagination size="small" showQuickJumper pageSize={pageSize} current={page} total={total} onChange={(p)=>setPage(p)}/></div>
+        :""
       }
     </div>
   )