Merge pull request #616 from idurar/upgrade/react-router-to-v6

⚡️ upgrade react reouter to v6
idurar · Oct 30, 2023 · 599b3a4 · 599b3a4
2 parents e5a0301 + a9f9423
commit 599b3a4
Show file tree

Hide file tree

Showing 35 changed files with 461 additions and 662 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@ant-design/pro-layout": "^7.17.12",
+    "@vitejs/plugin-react": "^4.0.4",
     "antd": "^5.10.2",
     "axios": "0.27.2",
     "cross-env": "7.0.3",
@@ -18,14 +19,14 @@
     "react-dom": "^18.2.0",
     "react-quill": "^2.0.0",
     "react-redux": "7.2.8",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "^6.17.0",
     "react-use": "^17.4.0",
     "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-thunk": "2.4.1",
     "reselect": "4.1.5",
-    "@vitejs/plugin-react": "^4.0.4",
-    "vite": "^4.4.8"
+    "vite": "^4.4.8",
+    "@rollup/plugin-dynamic-import-vars": "^2.1.0"
   },
   "scripts": {
     "dev": "vite",
@@ -35,7 +36,6 @@
     "dev:remote": "REACT_APP_DEV_REMOTE=remote npm run dev"
   },
   "devDependencies": {
-    "@rollup/plugin-dynamic-import-vars": "^2.1.0",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.46.0",

diff --git a/frontend/src/app/HeaderContent/index.jsx b/frontend/src/app/HeaderContent/index.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Avatar, Dropdown, Layout } from 'antd';
@@ -11,7 +10,7 @@ import { checkImage } from '@/request';
 
 import { selectCurrentAdmin } from '@/redux/auth/selectors';
 import { translateAction } from '@/redux/translate/actions';
-import history from '@/utils/history';
+import { useNavigate } from 'react-router-dom';
 
 import { BASE_URL } from '@/config/serverApiConfig';
 
@@ -31,8 +30,9 @@ export default function HeaderContent() {
     : null;
 
   const ProfileDropdown = () => {
+    const navigate = useNavigate();
     return (
-      <div className="profileDropdown" onClick={() => history.push('/profile')}>
+      <div className="profileDropdown" onClick={() => navigate('/profile')}>
         <Avatar
           size="large"
           className="last"

diff --git a/frontend/src/app/Navigation/index.jsx b/frontend/src/app/Navigation/index.jsx
@@ -7,7 +7,7 @@ import { useAppContext } from '@/context/appContext';
 import useLanguage from '@/lang/useLanguage';
 import logoIcon from '@/style/images/logo-icon.svg';
 import logoText from '@/style/images/logo-text.svg';
-import history from '@/utils/history';
+import { useNavigate } from 'react-router-dom';
 
 import {
   SettingOutlined,
@@ -46,6 +46,7 @@ function Sidebar({ collapsible }) {
   const [currentPath, setCurrentPath] = useState(location.pathname);
 
   const translate = useLanguage();
+  const navigate = useNavigate();
 
   const items = [
     {
@@ -158,7 +159,7 @@ function Sidebar({ collapsible }) {
       }}
       theme={'light'}
     >
-      <div className="logo" onClick={() => history.push('/')} style={{ cursor: 'pointer' }}>
+      <div className="logo" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
         <img src={logoIcon} alt="Logo" style={{ height: '32px' }} />
 
         {!showLogoApp && (

diff --git a/frontend/src/components/IconMenu/index.jsx b/frontend/src/components/IconMenu/index.jsx
@@ -0,0 +1,31 @@
+import {
+  DesktopOutlined,
+  SettingOutlined,
+  CustomerServiceOutlined,
+  FileTextOutlined,
+  FileSyncOutlined,
+  DashboardOutlined,
+  TeamOutlined,
+  UserOutlined,
+  CreditCardOutlined,
+  BankOutlined,
+} from '@ant-design/icons';
+
+export const IconMenu = ({ name }) => {
+  const elements = {
+    DesktopOutlined: DesktopOutlined,
+    SettingOutlined: SettingOutlined,
+    CustomerServiceOutlined: CustomerServiceOutlined,
+    FileTextOutlined: FileTextOutlined,
+    FileSyncOutlined: FileSyncOutlined,
+    DashboardOutlined: DashboardOutlined,
+    TeamOutlined: TeamOutlined,
+    UserOutlined: UserOutlined,
+    CreditCardOutlined: CreditCardOutlined,
+    BankOutlined: BankOutlined,
+    Default: DesktopOutlined,
+  };
+
+  const IconTag = elements[name || 'Default'] || SettingOutlined;
+  return <IconTag />;
+};
diff --git a/frontend/src/components/NotFound/index.jsx b/frontend/src/components/NotFound/index.jsx
@@ -1,11 +1,11 @@
 import { Result, Button } from 'antd';
 import useLanguage from '@/lang/useLanguage';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 export default function NotFound({ entity }) {
   const translate = useLanguage();
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   return (
     <Result
@@ -16,7 +16,7 @@ export default function NotFound({ entity }) {
         <Button
           type="primary"
           onClick={() => {
-            history.push(`/${entity?.toLowerCase()}`);
+            navigate(`/${entity?.toLowerCase()}`);
           }}
         >
           {translate('Back')}

diff --git a/frontend/src/components/SelectAsync/index.jsx b/frontend/src/components/SelectAsync/index.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { request } from '@/request';
 import useFetch from '@/hooks/useFetch';
 import { Select } from 'antd';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { PlusCircleOutlined } from '@ant-design/icons';
 
 export default function SelectAsync({
@@ -18,7 +18,7 @@ export default function SelectAsync({
   const [selectOptions, setOptions] = useState([]);
   const [currentValue, setCurrentValue] = useState(undefined);
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const asyncList = () => {
     return request.list({ entity });
@@ -42,7 +42,7 @@ export default function SelectAsync({
   const handleSelectChange = (newValue) => {
     if (newValue === 'redirectURL') {
       // Navigate to another page when "Add payment" is selected
-      history.push(urlToRedirect);
+      navigate(urlToRedirect);
     } else {
       // Handle other select options
       if (onChange) {

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -1,12 +1,10 @@
-import React from 'react';
-
 import App from './app';
 import './style/app.css';
 // import * as serviceWorker from './serviceWorker';
 
-import { Router as RouterHistory } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import history from '@/utils/history';
+
 import store from '@/redux/store';
 
 import { AppContextProvider } from '@/context/appContext';
@@ -15,11 +13,11 @@ import { createRoot } from 'react-dom/client';
 const container = document.getElementById('root');
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
 root.render(
-  <RouterHistory history={history}>
-    <Provider store={store}>
+  <Provider store={store}>
+    <BrowserRouter>
       <AppContextProvider>
         <App />
       </AppContextProvider>
-    </Provider>
-  </RouterHistory>
+    </BrowserRouter>
+  </Provider>
 );
diff --git a/frontend/src/modules/DashboardModule/components/RecentTable/index.jsx b/frontend/src/modules/DashboardModule/components/RecentTable/index.jsx
@@ -8,7 +8,7 @@ import { EllipsisOutlined, EyeOutlined, EditOutlined, FilePdfOutlined } from '@a
 import { useDispatch, useSelector } from 'react-redux';
 import { erp } from '@/redux/erp/actions';
 import useLanguage from '@/lang/useLanguage';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { DOWNLOAD_BASE_URL } from '@/config/serverApiConfig';
 import useResponsiveTable from '@/hooks/useResponsiveTable';
 
@@ -34,16 +34,16 @@ export default function RecentTable({ ...props }) {
     },
   ];
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const handleRead = (record) => {
     dispatch(erp.currentItem({ data: record }));
-    history.push(`/${entity}/read/${record._id}`);
+    navigate(`/${entity}/read/${record._id}`);
   };
   const handleEdit = (record) => {
     dispatch(erp.currentAction({ actionType: 'update', data: record }));
-    history.push(`/${entity}/update/${record._id}`);
+    navigate(`/${entity}/update/${record._id}`);
   };
   const handleDownload = (record) => {
     window.open(`${DOWNLOAD_BASE_URL}${entity}/${entity}-${record._id}.pdf`, '_blank');

diff --git a/frontend/src/modules/EmailModule/ReadEmailModule/components/ReadItem.jsx b/frontend/src/modules/EmailModule/ReadEmailModule/components/ReadItem.jsx
@@ -12,7 +12,7 @@ import uniqueId from '@/utils/uinqueId';
 
 import { selectCurrentItem } from '@/redux/erp/selectors';
 
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import useLanguage from '@/lang/useLanguage';
 
 const { Title, Paragraph } = Typography;
@@ -22,7 +22,7 @@ export default function ReadItem({ config, selectedItem }) {
   const { entity, ENTITY_NAME } = config;
   const dispatch = useDispatch();
   const { erpContextAction } = useErpContext();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const { result: currentResult } = useSelector(selectCurrentItem);
 
@@ -61,7 +61,7 @@ export default function ReadItem({ config, selectedItem }) {
             key={`${uniqueId()}`}
             onClick={() => {
               readPanel.close();
-              history.push(`/${entity.toLowerCase()}`);
+              navigate(`/${entity.toLowerCase()}`);
             }}
             icon={<CloseCircleOutlined />}
           >
@@ -78,7 +78,7 @@ export default function ReadItem({ config, selectedItem }) {
                 })
               );
               updatePanel.open();
-              history.push(`/${entity.toLowerCase()}/update/${currentErp._id}`);
+              navigate(`/${entity.toLowerCase()}/update/${currentErp._id}`);
             }}
             type="primary"
             icon={<EditOutlined />}

diff --git a/frontend/src/modules/ErpPanelModule/CreateItem.jsx b/frontend/src/modules/ErpPanelModule/CreateItem.jsx
@@ -17,7 +17,7 @@ import uniqueId from '@/utils/uinqueId';
 import Loading from '@/components/Loading';
 import { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
-import history from '@/utils/history';
+import { useNavigate } from 'react-router-dom';
 
 function SaveForm({ form }) {
   const translate = useLanguage();
@@ -35,6 +35,7 @@ function SaveForm({ form }) {
 export default function CreateItem({ config, CreateForm }) {
   const translate = useLanguage();
   const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   useLayoutEffect(() => {
     dispatch(settingsAction.list({ entity: 'setting' }));
@@ -76,7 +77,7 @@ export default function CreateItem({ config, CreateForm }) {
       dispatch(erp.resetAction({ actionType: 'create' }));
       setSubTotal(0);
       setOfferSubTotal(0);
-      history.push(`/${entity.toLowerCase()}/read/${result._id}`);
+      navigate(`/${entity.toLowerCase()}/read/${result._id}`);
     }
     return () => {};
   }, [isSuccess]);
@@ -101,7 +102,7 @@ export default function CreateItem({ config, CreateForm }) {
     <>
       <PageHeader
         onBack={() => {
-          history.push(`/${entity.toLowerCase()}`);
+          navigate(`/${entity.toLowerCase()}`);
         }}
         title={CREATE_ENTITY}
         ghost={false}
@@ -110,7 +111,7 @@ export default function CreateItem({ config, CreateForm }) {
         extra={[
           <Button
             key={`${uniqueId()}`}
-            onClick={() => history.push(`/${entity.toLowerCase()}`)}
+            onClick={() => navigate(`/${entity.toLowerCase()}`)}
             icon={<CloseCircleOutlined />}
           >
             {translate('Cancel')}

diff --git a/frontend/src/modules/ErpPanelModule/DataTable.jsx b/frontend/src/modules/ErpPanelModule/DataTable.jsx
@@ -17,18 +17,18 @@ import { erp } from '@/redux/erp/actions';
 import { selectListItems } from '@/redux/erp/selectors';
 import { useErpContext } from '@/context/erp';
 import uniqueId from '@/utils/uinqueId';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import useResponsiveTable from '@/hooks/useResponsiveTable';
 
 import { DOWNLOAD_BASE_URL } from '@/config/serverApiConfig';
 
 function AddNewItem({ config, hasCreate = true }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { ADD_NEW_ENTITY, entity } = config;
 
   const handleClick = () => {
-    history.push(`/${entity.toLowerCase()}/create`);
+    navigate(`/${entity.toLowerCase()}/create`);
   };
 
   if (hasCreate)
@@ -80,15 +80,15 @@ export default function DataTable({ config, extra = [] }) {
     },
   ];
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const handleRead = (record) => {
     dispatch(erp.currentItem({ data: record }));
-    history.push(`/${entity}/read/${record._id}`);
+    navigate(`/${entity}/read/${record._id}`);
   };
   const handleEdit = (record) => {
     dispatch(erp.currentAction({ actionType: 'update', data: record }));
-    history.push(`/${entity}/update/${record._id}`);
+    navigate(`/${entity}/update/${record._id}`);
   };
   const handleDownload = (record) => {
     window.open(`${DOWNLOAD_BASE_URL}${entity}/${entity}-${record._id}.pdf`, '_blank');
@@ -101,7 +101,7 @@ export default function DataTable({ config, extra = [] }) {
 
   const handleRecordPayment = (record) => {
     dispatch(erp.currentItem({ data: record }));
-    history.push(`/invoice/pay/${record._id}`);
+    navigate(`/invoice/pay/${record._id}`);
   };
 
   dataTableColumns = [