create pagination

src/components/Profile/SearchProfile.js

@@ -78,7 +78,17 @@ const SearchProfile = (props) => {
           </Container>
         </section>
         <section className="section">
-          <ProfileTable dummyData={props.listProfile} />
+          <ProfileTable 
+            listProfile={props.listProfile}
+            currentPage={props.currentPage} 
+            limit={props.limit} 
+            nextPage={props.nextPage} 
+            previosPage={props.previosPage}
+            total={props.total}
+            onLoadListProfile={props.onLoadListProfile}
+            onLoadPreviousPage={props.onLoadPreviousPage}
+            onLoadNextPage={props.onLoadNextPage}
+          />
         </section>
         <Sologan />
       </main>

src/views/IndexSections/Table.js

@@ -6,14 +6,14 @@ import { profileFormatDateTime } from "constans";
 
 export const ProfileTable = (props) => {
   const history = useHistory();
-  // const dispatch = useDispatch();
+  const dispatch = useDispatch();
 
   const onHandleClickAdd = () => {
     history.push("/profile/add");
   };
 
   const onHandleClickEdit = (profileId) => {
-    let detailProfile = props.dummyData.filter(item => item.id === profileId);
+    let detailProfile = props.listProfile.filter(item => item.id === profileId);
     history.push({
       pathname: "/profile/add",
       state: { profileId, detailProfile }  
@@ -21,7 +21,7 @@ export const ProfileTable = (props) => {
   } 
 
   const onHandleClickDelete = (profileId) => {
-    return props.dummyData.filter(item => item.id !== profileId);
+    return props.listProfile.filter(item => item.id !== profileId);
     // dispatch(props.onDeleteProfile(profileId));
   }
 
@@ -30,8 +30,8 @@ export const ProfileTable = (props) => {
   }, []);
 
   const items = [];
-  const totalItem = "15";
-  let pageSize = totalItem / 10;
+  const totalItem = props.total;
+  let pageSize = totalItem / props.limit;
 
   const getPageItem = () => {
     let number = 1;
@@ -44,18 +44,30 @@ export const ProfileTable = (props) => {
   }
 
   for(let number=1; number <= getPageItem(); number++){
-    // const isItemActive = props.currentPage === number;
+    const isItemActive = props.currentPage === number;
     const handlePaginationChange = () => {
-      // dispatch(props.onLoadListProfile( { currentPage: number, limit: props.limit } ));
-      // dispatch(props.onLoadPreviousPage(number));
+      dispatch(props.onLoadListProfile( { currentPage: number, limit: props.limit } ));
+      dispatch(props.onLoadPreviousPage(number));
     };
     items.push(
-      <PaginationItem key={number} onClick={handlePaginationChange}>
+      <PaginationItem active={isItemActive} key={number} onClick={handlePaginationChange}>
         <PaginationLink>{number}</PaginationLink>
       </PaginationItem>
     );
   }
 
+  const onPrevItem = () => {
+    const prevActiveItem = props.currentPage === 1 ? props.currentPage : props.currentPage - 1;
+    dispatch(props.onLoadListProfile({ currentPage: props.previosPage, limit: props.limit }));
+    dispatch(props.onLoadPreviousPage(prevActiveItem));
+  };
+
+  const onNextItem = () => {
+    const nextActiveItem = props.currentPage === Math.ceil(pageSize) ? props.currentPage : props.currentPage + 1;
+    dispatch(props.onLoadListProfile({ currentPage: props.nextPage, limit: props.limit }));
+    dispatch(props.onLoadNextPage(nextActiveItem));
+  };
+
   const TableRow = (props) => {
     const { id, address, logo, name, phone_number, profile_product, created_at, qr_code } = props;
     const productName = profile_product ? profile_product.map(item => item.name) : "";
@@ -90,7 +102,7 @@ export const ProfileTable = (props) => {
   };
 
   return (
-    props.dummyData && props.dummyData.length > 0 ?
+    props.listProfile && props.listProfile.length > 0 ?
       <Card className="mx-5">
         <CardHeader>
           <Row className="align-items-center">
@@ -117,7 +129,7 @@ export const ProfileTable = (props) => {
             </tr>
           </thead>
           <tbody>
-            {props.dummyData ? props.dummyData.map(profile => <TableRow key={`page-visit-${profile.id}`} {...profile} />) : []}
+            {props.listProfile ? props.listProfile.map(profile => <TableRow key={`page-visit-${profile.id}`} {...profile} />) : []}
           </tbody>
         </Table>
         <Row  className="mx-3 my-2">
@@ -127,11 +139,11 @@ export const ProfileTable = (props) => {
                 <PaginationItem>
                   <PaginationLink first href="#" />
                 </PaginationItem>
-                <PaginationItem>
+                <PaginationItem disabled={props.currentPage === 1} onClick={onPrevItem}>
                   <PaginationLink previous href="#" />
                 </PaginationItem>
                 {items}
-                <PaginationItem>
+                <PaginationItem disabled={props.currentPage === Math.ceil(pageSize)} onClick={onNextItem}>
                   <PaginationLink next href="#" />
                 </PaginationItem>
                 <PaginationItem>
@@ -142,7 +154,7 @@ export const ProfileTable = (props) => {
           </Col>
           <Col className="text-right">
             <h6 className="font-weight-bold">
-              {('Hiển thị ' + props.dummyData.length + "/" + totalItem)}
+              {('Hiển thị ' + props.listProfile.length + "/" + totalItem)}
             </h6>
           </Col>
         </Row>