react router v6 migration, finish rtk migrate

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
  ],
  plugins: ['react', 'react-hooks'],
  rules: {
+ 'react/no-children-prop': 'off', // disabled for react router v6
  // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
  // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },

package.json

@@ -59,7 +59,7 @@
  "react-dom": "^17.0.2",
  "react-final-form": "^6.5.7",
  "react-redux": "^7.2.5",
- "react-router-dom": "^5.3.0",
+ "react-router-dom": "^6.1.1",
  "react-select-search": "^3.0.8",
  "redux": "4.1.1",
  "redux-persist": "^6.0.0",
@@ -68,11 +68,10 @@
  },
  "devDependencies": {
  "auto-changelog": "~2.3.0",
- "eslint": "^7.32.0",
  "eslint-config-prettier": "^8.3.0",
  "eslint-plugin-prettier": "^4.0.0",
  "prettier": "2.4.1",
- "react-scripts": "^4.0.3",
+ "react-scripts": "4.0.3",
  "redux-immutable-state-invariant": "^2.1.0",
  "sass": "^1.43.2"
  },

src/App.js

@@ -1,8 +1,11 @@
-import React, { Component } from 'react'
-import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import React, { Component, Suspense } from 'react'
+import { HashRouter, BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
 import { PrivateRoute } from './components/PrivateRoute'
 import './scss/style.scss'
 import { FullScreenLoading } from './components'
+import routes from './routes'
+import { CSpinner } from '@coreui/react'
+import ErrorBoundary from './components/ErrorBoundary'
 
 // Containers
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
@@ -12,21 +15,48 @@ const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 const Login = React.lazy(() => import('./views/pages/login/Login'))
 
-class App extends Component {
- render() {
- return (
- <BrowserRouter>
- <React.Suspense fallback={<FullScreenLoading />}>
- <Switch>
- <Route exact path="/404" name="Page 404" render={(props) => <Page404 {...props} />} />
- <Route exact path="/500" name="Page 500" render={(props) => <Page500 {...props} />} />
- <Route exact path="/login" name="Login" render={(props) => <Login {...props} />} />
- <PrivateRoute path="/" name="Home" render={(props) => <DefaultLayout {...props} />} />
- </Switch>
- </React.Suspense>
- </BrowserRouter>
- )
- }
+const App = () => {
+ return (
+ <BrowserRouter>
+ <Suspense fallback={<FullScreenLoading />}>
+ <ErrorBoundary>
+ <Routes>
+ <Route exact path="/404" name="Page 404" element={<Page404 />} />
+ <Route exact path="/500" name="Page 500" element={<Page500 />} />
+ <Route exact path="/login" name="Login" element={<Login />} />
+ <Route
+ path="/"
+ element={
+ <PrivateRoute>
+ <DefaultLayout />
+ </PrivateRoute>
+ }
+ >
+ {routes.map((route, idx) => {
+ return (
+ route.component && (
+ <Route
+ key={`route-${idx}`}
+ path={route.path}
+ exact={route.exact}
+ name={route.name}
+ element={
+ <Suspense fallback={<CSpinner color="primary" />}>
+ <route.component />
+ </Suspense>
+ }
+ />
+ )
+ )
+ })}
+ <Route path="/" element={<Navigate to="/home" />} />
+ </Route>
+ <Route path="*" name="Page 404" element={<Page404 />} />
+ </Routes>
+ </ErrorBoundary>
+ </Suspense>
+ </BrowserRouter>
+ )
 }
 
 export default App

src/components/AppSidebar.js

@@ -15,7 +15,7 @@ import 'simplebar/dist/simplebar.min.css'
 
 // sidebar nav config
 import navigation from '../_nav'
-import { toggleSidebarShow, toggleSidebarUnfoldable } from '../store/modules/app'
+import { setSidebarVisible } from '../store/features/app'
 
 const AppSidebar = () => {
  const dispatch = useDispatch()
@@ -28,7 +28,7 @@ const AppSidebar = () => {
  unfoldable={unfoldable}
  visible={sidebarShow}
  onVisibleChange={(visible) => {
- dispatch(toggleSidebarShow({ sidebarShow: !visible }))
+ dispatch(setSidebarVisible({ visible }))
  }}
  >
  <CSidebarBrand className="d-none d-md-flex" to="/">

src/components/AppSidebarNav.js

@@ -1,9 +1,33 @@
 import React from 'react'
-import { NavLink, useLocation } from 'react-router-dom'
+import { NavLink as BaseNavLink, useLocation } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 import { CBadge } from '@coreui/react'
 
+const NavLink = React.forwardRef(({ activeClassName, activeStyle, ...props }, ref) => {
+ return (
+ <BaseNavLink
+ ref={ref}
+ {...props}
+ className={({ isActive }) =>
+ [props.className, isActive ? activeClassName : null].filter(Boolean).join(' ')
+ }
+ style={({ isActive }) => ({
+ ...props.style,
+ ...(isActive ? activeStyle : null),
+ })}
+ />
+ )
+})
+
+NavLink.displayName = 'NavLink'
+NavLink.propTypes = {
+ activeClassName: PropTypes.string,
+ activeStyle: PropTypes.object,
+ className: PropTypes.string,
+ style: PropTypes.object,
+}
+
 export const AppSidebarNav = ({ items }) => {
  const location = useLocation()
  const navLink = (name, icon, badge) => {

src/components/ErrorBoundary.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class ErrorBoundary extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = { error: null, errorInfo: null }
+ }
+
+ componentDidCatch(error, errorInfo) {
+ // Catch errors in any components below and re-render with error message
+ this.setState({
+ error: error,
+ errorInfo: errorInfo,
+ })
+ // You can also log error messages to an error reporting service here
+ }
+
+ render() {
+ if (this.state.errorInfo) {
+ // Error path
+ return (
+ <div>
+ <h2>Something went wrong.</h2>
+ <details style={{ whiteSpace: 'pre-wrap' }}>
+ {this.state.error && this.state.error.toString()}
+ <br />
+ {this.state.errorInfo.componentStack}
+ </details>
+ </div>
+ )
+ }
+ // Normally, just render children
+ return this.props.children
+ }
+}
+
+ErrorBoundary.propTypes = {
+ children: PropTypes.node,
+}

src/components/PrivateRoute.js

@@ -1,17 +1,26 @@
 import React from 'react'
-import { Route, Redirect } from 'react-router-dom'
+import { Navigate } from 'react-router-dom'
 import { useLoadClientPrincipalQuery } from '../store/api/auth'
 import { FullScreenLoading } from './Loading'
+import { useDispatch } from 'react-redux'
+import { updateAccessToken } from '../store/features/auth'
+import PropTypes from 'prop-types'
 
-export const PrivateRoute = ({ ...rest }) => {
- const { data: clientPrincipal, error, isLoading } = useLoadClientPrincipalQuery()
+export const PrivateRoute = ({ children }) => {
+ const dispatch = useDispatch()
+ const { data: profile, error, isFetching } = useLoadClientPrincipalQuery()
 
- if (isLoading) {
+ if (isFetching) {
  return <FullScreenLoading />
  }
- return Object.keys(clientPrincipal).length === 0 || error ? (
- <Redirect to="/login" />
- ) : (
- <Route {...rest} />
- )
+
+ dispatch(updateAccessToken(profile))
+
+ const isAuthenticated = !!profile?.clientPrincipal && !error
+
+ return !isAuthenticated ? <Navigate to="/login" /> : children
+}
+
+PrivateRoute.propTypes = {
+ children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
 }