Rewire react

Author: modularcoder

config-overrides.js

@@ -0,0 +1,14 @@
+const path = require('path')
+
+module.exports = {
+  // The Webpack config to use when compiling your react app for development or production.
+  webpack: function(config, env) {
+    // ...add your webpack config
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve('./src'),
+    }
+
+    return config
+  },
+}

package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "deploy": "npm run build-preview && npm run build-docs && gh-pages -d build --repo git@github.com:modularcode/modular-material-admin-react.git --branch gh-pages",
     "build-preview": "cross-env PUBLIC_PATH='/' npm run build && echo modular-material-admin-react.modularcode.io > ./build/CNAME",
@@ -57,6 +57,7 @@
     "fork-ts-checker-webpack-plugin": "^3.1.1",
     "gh-pages": "^2.2.0",
     "prettier": "1.18.2",
+    "react-app-rewired": "^2.1.5",
     "react-docgen-typescript-loader": "^3.6.0",
     "ts-loader": "^6.2.1"
   },

src/Administration/Users/UsersList/UsersList.js

@@ -13,7 +13,7 @@ import {
   TableFooter,
 } from '@material-ui/core'
 
-import api from '../../../_api'
+import api from '@/_api'
 
 import BasePageContainer from '../../../_common/BasePageContainer'
 import BasePageToolbar from '../../../_common/BasePageToolbar'
@@ -23,21 +23,32 @@ import UsersListTableBody from './UsersListTableBody'
 
 const UsersList = ({ match }) => {
   const classes = useStyles()
-  const [usersData, setUsersData] = useState({ users: [], count: 0 })
-  useEffect(() => {
-    api.users.getList().then(res => setUsersData(res))
-  }, [])
 
   const [page, setPage] = React.useState(0)
+  const [usersData, setUsersData] = useState({ users: [], count: 0 })
   const [rowsPerPage, setRowsPerPage] = React.useState(10)
+
+  useEffect(() => {
+    async function fetchUsers() {
+      const userDataRes = await api.users.getList({
+        limit: rowsPerPage,
+        offset: page * rowsPerPage,
+      })
+
+      setUsersData(userDataRes)
+    }
+
+    fetchUsers()
+  }, [page, rowsPerPage])
+
   const handleChangePage = (event, newPage) => {
     setPage(newPage)
   }
 
-  // const handleChangeRowsPerPage = event => {
-  //   setRowsPerPage(parseInt(event.target.value, 10))
-  //   setPage(0)
-  // }
+  const handleChangeRowsPerPage = event => {
+    setRowsPerPage(parseInt(event.target.value, 10))
+    setPage(0)
+  }
 
   const { users, count } = usersData
 
@@ -66,6 +77,7 @@ const UsersList = ({ match }) => {
                     rowsPerPage={rowsPerPage}
                     count={count}
                     onChangePage={handleChangePage}
+                    onChangeRowsPerPage={handleChangeRowsPerPage}
                   />
                 </TableRow>
               </TableFooter>

src/_common/BaseTable/BaseTablePagination.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TablePagination, IconButton } from '@material-ui/core'
-import { useTheme } from '@material-ui/core/styles'
+import { useTheme, makeStyles } from '@material-ui/core/styles'
 
 import {
   FirstPage as FirstPageIcon,
@@ -11,6 +11,7 @@ import {
 } from '@material-ui/icons/'
 
 const BaseTablePaginationActions = props => {
+  const classes = useStyles()
   const theme = useTheme()
   const { count, page, itemsPerPage, onChangePage } = props
 
@@ -31,7 +32,7 @@ const BaseTablePaginationActions = props => {
   }
 
   return (
-    <div>
+    <div className={classes.root}>
       <IconButton
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}
@@ -65,7 +66,7 @@ const BaseTablePaginationActions = props => {
 }
 
 const BaseTablePagination = props => {
-  const { count, page, rowsPerPage, onChangePage } = props
+  const { count, page, rowsPerPage, onChangePage, onChangeRowsPerPage = () => {} } = props
 
   return (
     <TablePagination
@@ -79,16 +80,25 @@ const BaseTablePagination = props => {
         native: true,
       }}
       onChangePage={onChangePage}
+      onChangeRowsPerPage={onChangeRowsPerPage}
       ActionsComponent={BaseTablePaginationActions}
     />
   )
 }
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexShrink: 0,
+    marginLeft: theme.spacing(2.5),
+  },
+}))
+
 BaseTablePagination.propTypes = {
   count: PropTypes.number.isRequired,
-  onChangePage: PropTypes.func.isRequired,
   page: PropTypes.number.isRequired,
   rowsPerPage: PropTypes.number.isRequired,
+  onChangePage: PropTypes.func.isRequired,
+  onChangeRowsPerPage: PropTypes.func,
 }
 
 export default BaseTablePagination

tsconfig.json

@@ -19,7 +19,11 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "typeRoots" : ["./node_modules/@types/", "./src/_types", "./src/_api/_types"]
+    "typeRoots": [
+      "./node_modules/@types/",
+      "./src/_types",
+      "./src/_api/_types"
+    ]
   },
   "include": [
     "src"
@@ -28,4 +32,3 @@
     "node_modules/@nivo/line/index.d.ts"
   ]
 }
-  

yarn.lock

@@ -11696,6 +11696,13 @@ react-app-polyfill@^1.0.4:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-app-rewired@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.5.tgz#592ec2eae5c3c5cd96c80930b5dc3f6c34da1dc6"
+  integrity sha512-Gr8KfCeL9/PTQs8Vvxc7v8wQ9vCFMnYPhcAkrMlzkLiMFXS+BgSwm11MoERjZm7dpA2WjTi+Pvbu/w7rujAV+A==
+  dependencies:
+    semver "^5.6.0"
+
 react-chartjs-2@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz#d054dbdd763fbe9a76296a4ae0752ea549b76d9e"