feat: add query parameters to Users view

Author: woothu

src/views/users/Users.js

@@ -1,18 +1,19 @@
-import React from 'react';
-import { useHistory } from "react-router-dom";
+import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
   CBadge,
   CCard,
   CCardBody,
   CCardHeader,
   CCol,
   CDataTable,
-  CRow
-} from '@coreui/react';
+  CRow,
+  CPagination
+} from '@coreui/react'
 
 import usersData from './UsersData'
 
-const getBadge = (status) => {
+const getBadge = status => {
   switch (status) {
     case 'Active': return 'success'
     case 'Inactive': return 'secondary'
@@ -24,6 +25,18 @@ const getBadge = (status) => {
 
 const Users = () => {
   const history = useHistory()
+  const queryPage = useLocation().search.match(/page=([0-9]+)/, '')
+  const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1)
+  const [page, setPage] = useState(currentPage)
+
+  const pageChange = newPage => {
+    currentPage !== newPage && history.push(`/users?page=${newPage}`)
+  }
+
+  useEffect(() => {
+    currentPage !== page && setPage(currentPage)
+  }, [currentPage, page])
+
   return (
     <CRow>
       <CCol xl={6}>
@@ -37,13 +50,14 @@ const Users = () => {
             items={usersData}
             fields={[
               { key: 'name', _classes: 'font-weight-bold' },
-              'registered', 'role', 'status']}
+              'registered', 'role', 'status'
+            ]}
             hover
             striped
-            pagination={{ doubleArrows: false, align: 'center' }}
             itemsPerPage={5}
+            activePage={page}
             clickableRows
-            onRowClick={(item, index) => history.push(`/users/${item.id}`)}
+            onRowClick={(item) => history.push(`/users/${item.id}`)}
             scopedSlots = {{
               'status':
                 (item)=>(
@@ -55,6 +69,13 @@ const Users = () => {
                 )
             }}
           />
+          <CPagination
+            activePage={page}
+            onActivePageChange={pageChange}
+            pages={5}
+            doubleArrows={false} 
+            align="center"
+          />
           </CCardBody>
         </CCard>
       </CCol>