Merge pull request #617 from idurar/fix/upgrade-bugs

🐛 fix upgrade router bugs

frontend/.env

@@ -1,2 +1,2 @@
 # to connect your frontend to remote backend server
-REACT_APP_BACKEND_SERVER="http://your_backend_url_server.com/"
+VITE_BACKEND_SERVER="http://your_backend_url_server.com/"

frontend/package.json

@@ -7,8 +7,9 @@
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@ant-design/pro-layout": "^7.17.12",
+    "@rollup/plugin-dynamic-import-vars": "^2.1.0",
     "@vitejs/plugin-react": "^4.0.4",
-    "antd": "^5.10.2",
+    "antd": "^5.10.3",
     "axios": "0.27.2",
     "cross-env": "7.0.3",
     "currency.js": "2.0.4",
@@ -25,15 +26,14 @@
     "redux-logger": "3.0.6",
     "redux-thunk": "2.4.1",
     "reselect": "4.1.5",
-    "vite": "^4.4.8",
-    "@rollup/plugin-dynamic-import-vars": "^2.1.0"
+    "vite": "^4.5.0"
   },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "dev:remote": "REACT_APP_DEV_REMOTE=remote npm run dev"
+    "dev:remote": "cross-env VITE_DEV_REMOTE=remote npm run dev"
   },
   "devDependencies": {
     "@types/react": "^18.2.18",

frontend/src/components/AutoCompleteAsync/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { request } from '@/request';
 import useOnFetch from '@/hooks/useOnFetch';
 import { useDebounce } from 'react-use';

frontend/src/components/CreateForm/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { crud } from '@/redux/crud/actions';

frontend/src/components/CrudModal/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Modal } from 'antd';
 
 import { useDispatch, useSelector } from 'react-redux';

frontend/src/components/DataTable/index.jsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { EyeOutlined, EditOutlined, DeleteOutlined, EllipsisOutlined } from '@ant-design/icons';
-import { Descriptions, Dropdown, Table, Button,  } from 'antd';
+import { Descriptions, Dropdown, Table, Button } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';
 
 import { useSelector, useDispatch } from 'react-redux';

frontend/src/components/DeleteModal/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Modal } from 'antd';
 
 import { useDispatch, useSelector } from 'react-redux';

frontend/src/components/MultiStepSelectAsync/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Select, Space } from 'antd';
 import { request } from '@/request';
 import errorHandler from '@/request/errorHandler';

frontend/src/components/ReadItem/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Row, Col, Button } from 'antd';
 import { useSelector } from 'react-redux';
 

frontend/src/components/SearchItem/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 import { useDebounce } from 'react-use';
 import { Select, Empty } from 'antd';

frontend/src/components/SelectAsync/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { request } from '@/request';
 import useFetch from '@/hooks/useFetch';
 import { Select } from 'antd';

frontend/src/components/SidePanel/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useCrudContext } from '@/context/crud';
 import { useAppContext } from '@/context/appContext';
 import { Grid, Layout, Drawer } from 'antd';

frontend/src/components/Tag/index.js → frontend/src/components/Tag/index.jsx

@@ -1,10 +1,10 @@
 import { Tag } from 'antd';
 import useLanguage from '@/lang/useLanguage';
 
-export function StatusTag(status = 'draft') {
+export function StatusTag({ status = 'draft' }) {
   const translate = useLanguage();
-  let color =
-    status === 'draft'
+  let color = () => {
+    return status === 'draft'
       ? 'cyan'
       : status === 'sent'
       ? 'blue'
@@ -13,6 +13,7 @@ export function StatusTag(status = 'draft') {
       : status === 'expired'
       ? 'orange'
       : 'red';
+  };
 
-  return <Tag color={color}>{status && translate(status)}</Tag>;
+  return <Tag color={color()}>{translate(status)}</Tag>;
 }

frontend/src/components/UpdateForm/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import dayjs from 'dayjs';
 
 import { useDispatch, useSelector } from 'react-redux';

frontend/src/components/outsideClick.js/demo.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import Dropdown from './Dropdown';

frontend/src/components/outsideClick.js/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 const Dropdown = ({ value, options, placeholder = 'Select', onChange }) => {
   const node = useRef();

frontend/src/config/serverApiConfig.js

@@ -1,13 +1,13 @@
 export const API_BASE_URL =
-  import.meta.env.NODE_ENV == 'production' || import.meta.env.REACT_APP_DEV_REMOTE == 'remote'
-    ? import.meta.env.REACT_APP_BACKEND_SERVER + 'api/'
+  import.meta.env.PROD || import.meta.env.VITE_DEV_REMOTE == 'remote'
+    ? import.meta.env.VITE_BACKEND_SERVER + 'api/'
     : 'http://localhost:8888/api/';
 export const BASE_URL =
-  import.meta.env.NODE_ENV == 'production' || import.meta.env.REACT_APP_DEV_REMOTE == 'remote'
-    ? import.meta.env.REACT_APP_BACKEND_SERVER
+  import.meta.env.PROD || import.meta.env.VITE_DEV_REMOTE == 'remote'
+    ? import.meta.env.VITE_BACKEND_SERVER
     : 'http://localhost:8888/';
 export const DOWNLOAD_BASE_URL =
-  import.meta.env.NODE_ENV == 'production' || import.meta.env.REACT_APP_DEV_REMOTE == 'remote'
-    ? import.meta.env.REACT_APP_BACKEND_SERVER + 'download/'
+  import.meta.env.PROD || import.meta.env.VITE_DEV_REMOTE == 'remote'
+    ? import.meta.env.VITE_BACKEND_SERVER + 'download/'
     : 'http://localhost:8888/download/';
 export const ACCESS_TOKEN_NAME = 'x-auth-token';

frontend/src/context/appContext/index.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useReducer, createContext, useContext } from 'react';
+import { useMemo, useReducer, createContext, useContext } from 'react';
 import { initialState, contextReducer } from './reducer';
 import contextActions from './actions';
 

frontend/src/context/crud/index.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useReducer, createContext, useContext } from 'react';
+import { useMemo, useReducer, createContext, useContext } from 'react';
 import { initialState, contextReducer } from './reducer';
 import contextActions from './actions';
 import contextSelectors from './selectors';

frontend/src/context/erp/index.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useReducer, createContext, useContext } from 'react';
+import { useMemo, useReducer, createContext, useContext } from 'react';
 import { initialState, contextReducer } from './reducer';
 import contextActions from './actions';
 import contextSelectors from './selectors';

frontend/src/context/profileContext/index.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useReducer, createContext, useContext } from 'react';
+import { useMemo, useReducer, createContext, useContext } from 'react';
 import { initialState, contextReducer } from './reducer';
 import contextActions from './actions';
 import contextSelectors from './selectors';

frontend/src/layout/CrudLayout/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import DefaultLayout from '../DefaultLayout';
 

frontend/src/modules/AdminCrudModule/UpdatePassword.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { crud } from '@/redux/crud/actions';

frontend/src/modules/AdminCrudModule/index.jsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState, useEffect } from 'react';
+import { useLayoutEffect, useState, useEffect } from 'react';
 import { Row, Col, Button } from 'antd';
 
 import {

frontend/src/modules/CrudModule/index.jsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useEffect, useState } from 'react';
+import { useLayoutEffect, useEffect, useState } from 'react';
 import { Row, Col, Button } from 'antd';
 import { MenuFoldOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 

frontend/src/modules/DashboardModule/components/PreviewCard.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Col, Progress, Spin } from 'antd';
 import useLanguage from '@/lang/useLanguage';
 

frontend/src/modules/EmailModule/ReadEmailModule/components/ReadItem.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Divider, Typography, Button } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';

frontend/src/modules/EmailModule/UpdateEmailModule/componenets/EmailForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Form, Input, Button, Row, Col, Typography, Tag } from 'antd';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';

frontend/src/modules/ErpPanelModule/CreateItem.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useLayoutEffect } from 'react';
+import { useState, useEffect, useLayoutEffect } from 'react';
 
 import { Button, Tag, Form, Divider } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';

frontend/src/modules/ErpPanelModule/DataTable.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import {
   EyeOutlined,
   EditOutlined,

frontend/src/modules/ErpPanelModule/DeleteItem.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Modal } from 'antd';
 
 import { useDispatch, useSelector } from 'react-redux';

frontend/src/modules/ErpPanelModule/ItemRow.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Form, Input, InputNumber, Row, Col } from 'antd';
 
 import { DeleteOutlined } from '@ant-design/icons';

frontend/src/modules/ErpPanelModule/ReadItem.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Divider } from 'antd';
 
 import { Button, Row, Col, Descriptions, Statistic, Tag } from 'antd';

frontend/src/modules/ErpPanelModule/SearchItem.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 import { AutoComplete, Input } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';

frontend/src/modules/ErpPanelModule/UpdateItem.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { Form, Divider, Space } from 'antd';
+import { useState, useEffect } from 'react';
+import { Form, Divider } from 'antd';
 import dayjs from 'dayjs';
 import { Button } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';
@@ -14,7 +14,7 @@ import { selectUpdatedItem } from '@/redux/erp/selectors';
 import Loading from '@/components/Loading';
 
 import { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { StatusTag } from '@/components/Tag';
 
 function SaveForm({ form, config }) {

frontend/src/modules/ErpPanelModule/index.jsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react';
+import { useLayoutEffect } from 'react';
 
 import DataTable from './DataTable';
 

frontend/src/modules/InvoiceModule/Forms/InvoiceForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import dayjs from 'dayjs';
 import { Form, Input, InputNumber, Button, Select, Divider, Row, Col } from 'antd';
 

frontend/src/modules/InvoiceModule/RecordPaymentModule/components/Payment.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Button, Row, Col, Descriptions, Tag, Divider } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';

frontend/src/modules/InvoiceModule/RecordPaymentModule/components/RecordPayment.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Form, Button } from 'antd';
 
 import { useSelector, useDispatch } from 'react-redux';

frontend/src/modules/OfferModule/Forms/OfferForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import dayjs from 'dayjs';
 import { Form, Input, InputNumber, Button, Select, Divider, Row, Col } from 'antd';
 

frontend/src/modules/OfferModule/ReadOfferModule/ReadOfferItem.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Button, Row, Col, Descriptions, Statistic, Tag, Divider } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';

frontend/src/modules/OfferModule/ReadOfferModule/index.jsx

@@ -8,7 +8,7 @@ import useLanguage from '@/lang/useLanguage';
 import { selectReadItem } from '@/redux/erp/selectors';
 import { useLayoutEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams, useHistory } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 
 export default function ReadOfferModule({ config }) {
   const dispatch = useDispatch();

frontend/src/modules/OfferModule/UpdateOfferModule/index.jsx

@@ -11,7 +11,7 @@ import useLanguage from '@/lang/useLanguage';
 import { selectReadItem } from '@/redux/erp/selectors';
 import { useLayoutEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams, useHistory } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 
 export default function UpdateOfferModule({ config }) {
   const dispatch = useDispatch();

frontend/src/modules/PaymentModule/ReadPaymentModule/components/ReadItem.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Button, Row, Col, Descriptions, Statistic, Tag, Divider, Typography } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';

frontend/src/modules/PaymentModule/UpdatePaymentModule/components/Payment.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Button, Row, Col, Descriptions, Tag, Divider } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';

frontend/src/modules/PaymentModule/UpdatePaymentModule/components/UpdatePayment.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Form, Button } from 'antd';
 import dayjs from 'dayjs';
 import { useSelector, useDispatch } from 'react-redux';

frontend/src/modules/PaymentModule/UpdatePaymentModule/index.jsx

@@ -5,7 +5,7 @@ import { erp } from '@/redux/erp/actions';
 import { selectItemById } from '@/redux/erp/selectors';
 import { useEffect, useLayoutEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams, useHistory } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import Payment from './components/Payment';
 import { selectReadItem } from '@/redux/erp/selectors';
 

frontend/src/modules/ProfileModule/components/AdminInfo.jsx

@@ -1,7 +1,7 @@
 import { useProfileContext } from '@/context/profileContext';
 import uniqueId from '@/utils/uinqueId';
-import { EditOutlined, LockOutlined, LogoutOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Button, Col, Descriptions, Divider, Row, Space, Tag } from 'antd';
+import { EditOutlined, LockOutlined, LogoutOutlined } from '@ant-design/icons';
+import { Avatar, Button, Col, Descriptions, Divider, Row } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';
 import { useSelector } from 'react-redux';
 

frontend/src/modules/ProfileModule/components/PasswordModal.jsx

@@ -2,7 +2,7 @@ import { useProfileContext } from '@/context/profileContext';
 import useOnFetch from '@/hooks/useOnFetch';
 import { request } from '@/request';
 import { Button, Form, Input, Modal } from 'antd';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import useLanguage from '@/lang/useLanguage';
 
 const PasswordModal = ({ config }) => {

frontend/src/modules/ProfileModule/components/UpdateAdmin.jsx

@@ -3,7 +3,7 @@ import uniqueId from '@/utils/uinqueId';
 import { CloseCircleOutlined, SaveOutlined } from '@ant-design/icons';
 import { Button, Col, Form, Row } from 'antd';
 import { PageHeader } from '@ant-design/pro-layout';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import AdminForm from '@/forms/AdminForm';
 

frontend/src/modules/QuoteModule/Forms/QuoteForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import dayjs from 'dayjs';
 import { Form, Input, InputNumber, Button, Select, Divider, Row, Col } from 'antd';