upgraded react-router & switched to data router (for useBlocker)

Author: Laoujin

frontend/package-lock.json

@@ -35,7 +35,7 @@
     "react-dropzone": "^14.2.3",
     "react-ios-switch": "^0.1.19",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.4.3",
+    "react-router": "^7.6.0",
     "react-select": "^5.6.1",
     "react-toastify": "^9.1.1",
     "recharts": "^2.5.0",
@@ -62,7 +62,7 @@
     "@types/react-datepicker": "4.8.0",
     "@types/react-dom": "^18.0.9",
     "@types/react-redux": "7.1.24",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/react-router": "^5.1.20",
     "@types/react-test-renderer": "^18.0.0",
     "@types/superagent": "4.1.15",
     "@typescript-eslint/eslint-plugin": "5.43.0",

frontend/package.json

@@ -1,5 +1,5 @@
 import {useSelector} from 'react-redux';
-import {Navigate} from 'react-router-dom';
+import {Navigate} from 'react-router';
 import App from './App';
 import {ConfacState} from '../reducers/app-state';
 import {LoadingPage} from './pages/LoadingPage';

frontend/src/components/AppWithLayout.tsx

@@ -1,5 +1,5 @@
 import {Nav, Navbar, Dropdown, ButtonGroup} from 'react-bootstrap';
-import {Link as ReactLink, NavLink} from 'react-router-dom';
+import {Link as ReactLink, NavLink} from 'react-router';
 import {t} from './utils';
 import {AddIcon, Icon} from './controls/Icon';
 import {Claim} from './users/models/UserModel';

frontend/src/components/Header.tsx

@@ -1,5 +1,5 @@
 import {useDispatch} from 'react-redux';
-import {useParams} from 'react-router-dom';
+import {useParams} from 'react-router';
 import {Container, Row, Form, Alert} from 'react-bootstrap';
 import {t} from '../utils';
 import {saveClient} from '../../actions/index';
@@ -21,7 +21,7 @@ import {useClientState} from './client-helpers';
 const EditClient = () => {
   const params = useParams();
   const dispatch = useDispatch();
-  const {client, setClient, clientAlreadyExists, canSaveClient} = useClientState(params.id);
+  const {client, setClient, clientAlreadyExists, canSaveClient} = useClientState(params.id ?? '');
 
   useEntityChangedToast(client?._id);
   useDocumentTitle('clientEdit', {name: client?.name || ''});

frontend/src/components/client/EditClient.tsx

@@ -1,4 +1,4 @@
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {t} from '../../utils';
 import {InvoiceClientModel} from '../models/ClientModels';
 import {EditIcon} from '../../controls/Icon';

frontend/src/components/client/controls/ClientDetails.tsx

@@ -1,4 +1,4 @@
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {IList, IListCell, ClientListFilters} from '../../controls/table/table-models';
 import {Features, IFeature, IFeatureBuilderConfig} from '../../controls/feature/feature-models';
 import {features} from '../../../trans';

frontend/src/components/client/models/getClientFeature.tsx

@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {Container, Row, Form, Alert} from 'react-bootstrap';
-import {useNavigate} from 'react-router-dom';
+import {useNavigate, useParams} from 'react-router';
 import {ConfacState} from '../../reducers/app-state';
 import {t} from '../utils';
 import {ArrayInput} from '../controls/form-controls/inputs/ArrayInput';
@@ -14,7 +14,6 @@ import {defaultConsultantProperties} from './models/ConsultantConfig';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {Audit} from '../admin/audit/Audit';
 import {Claim} from '../users/models/UserModel';
-import {useParams} from 'react-router-dom';
 import useEntityChangedToast from '../hooks/useEntityChangedToast';
 
 

frontend/src/components/consultant/EditConsultant.tsx

@@ -1,5 +1,5 @@
 import {useState} from 'react';
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {useDispatch} from 'react-redux';
 import {ConsultantModel} from '../models/ConsultantModel';
 import {EditIcon, Icon} from '../../controls/Icon';

frontend/src/components/consultant/controls/ConsultantIconLinks.tsx

@@ -1,4 +1,4 @@
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {ConsultantModel} from '../models/ConsultantModel';
 
 

frontend/src/components/consultant/controls/ConsultantLink.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-one-expression-per-line */
 import {ConsultantModel} from './ConsultantModel';
 import {IList, IListCell, ConsultantListFilters} from '../../controls/table/table-models';
 import {t, searchinize} from '../../utils';

frontend/src/components/consultant/models/getConsultantFeature.tsx

@@ -1,4 +1,4 @@
-import {useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router';
 import cn from 'classnames';
 import {Tooltip} from './Tooltip';
 import t from '../../trans';

frontend/src/components/controls/Icon.tsx

@@ -1,4 +1,4 @@
-import {Link as RouterLink} from 'react-router-dom';
+import {Link as RouterLink} from 'react-router';
 import {EnhanceWithClaim} from '../enhancers/EnhanceWithClaim';
 import {t} from '../utils';
 

frontend/src/components/controls/Link.tsx

@@ -1,4 +1,4 @@
-import {useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router';
 import {Button as ReactButton} from 'react-bootstrap';
 import {Icon} from '../Icon';
 import {BootstrapVariant, ChildrenType} from '../../../models';

frontend/src/components/controls/form-controls/Button.tsx

@@ -1,4 +1,4 @@
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {t} from '../../../utils';
 import {Icon} from '../../Icon';
 import {ButtonSize} from '../Button';

frontend/src/components/controls/form-controls/button/LinkToButton.tsx

@@ -8,7 +8,7 @@ import moment, {Moment} from 'moment';
 import {useSelector} from 'react-redux';
 import {ConfacState} from '../../../../reducers/app-state';
 import {t} from '../../../utils';
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {PeriodPicker} from '../PeriodPicker';
 
 export interface ClientChartData {

frontend/src/components/home/measurements/client/ClientsAndProjectsEvolution.tsx

@@ -2,7 +2,7 @@ import {useProjects} from '../../../hooks/useProjects';
 import {Table} from 'react-bootstrap';
 import {t} from '../../../utils';
 import {FullProjectModel} from '../../../project/models/FullProjectModel';
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import {Container} from 'react-bootstrap';
 import {Row} from 'react-bootstrap';
 

frontend/src/components/home/measurements/project/ConsultantContractsList.tsx

@@ -5,7 +5,7 @@ import {List} from '../../controls/table/List';
 import {Claim} from '../../users/models/UserModel';
 import {ListSelectionItem} from '../../controls/table/ListSelect';
 import {InvoiceCreditNotasModal} from './InvoiceCreditNotasModal';
-import {useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router';
 import {useSelector} from 'react-redux';
 import {ConfacState} from '../../../reducers/app-state';
 import {useDispatch} from 'react-redux';

frontend/src/components/invoice/controls/InvoiceCreditNotas.tsx

@@ -7,7 +7,7 @@ import {ConfacState} from '../../../reducers/app-state';
 import {StickyFooter} from '../../controls/other/StickyFooter';
 import {EmailModal, EmailTemplate} from '../../controls/email/EmailModal';
 import {useDocumentTitle} from '../../hooks/useDocumentTitle';
-import {useParams} from 'react-router-dom';
+import {useParams} from 'react-router';
 import useEntityChangedToast from '../../hooks/useEntityChangedToast';
 import {EditInvoiceHeader} from './EditInvoiceHeader';
 import {EditInvoiceBody} from './EditInvoiceBody';
@@ -27,7 +27,7 @@ const useInvoiceState = (isQuotation: boolean) => {
   const storeInvoice = useSelector((state: ConfacState) => state.invoices
     // eslint-disable-next-line
     .filter(x => x.isQuotation == isQuotation) // == the property is not present for some legacy data
-    .find(x => x.number === parseInt(params.id, 10))
+    .find(x => x.number === parseInt(params.id ?? '', 10))
   );
 
   const newInvoice = getNewInvoice(config, invoices, clients, {isQuotation});

frontend/src/components/invoice/invoice-edit/EditInvoice.tsx

@@ -1,4 +1,4 @@
-import {useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router';
 import {t} from '../../utils';
 import InvoiceModel from '../models/InvoiceModel';
 import {BusyButton} from '../../controls/form-controls/BusyButton';

frontend/src/components/invoice/invoice-edit/EditInvoiceSaveButtons.tsx

@@ -14,7 +14,7 @@ import {useDocumentTitle} from '../../hooks/useDocumentTitle';
 import {ConsultantModel} from '../../consultant/models/ConsultantModel';
 import {Claim} from '../../users/models/UserModel';
 import {useSelector} from 'react-redux';
-import {useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router';
 import {useDispatch} from 'react-redux';
 import {InvoiceFeatureBuilderConfig} from '../models/getInvoiceFeature';
 import {Features} from '../../controls/feature/feature-models';

frontend/src/components/invoice/invoice-list/InvoiceList.tsx

@@ -14,7 +14,7 @@ import {useDocumentTitle} from '../../hooks/useDocumentTitle';
 import {ConsultantModel} from '../../consultant/models/ConsultantModel';
 import {Claim} from '../../users/models/UserModel';
 import {useDispatch} from 'react-redux';
-import {useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router';
 import {useSelector} from 'react-redux';
 import {InvoiceFeatureBuilderConfig} from '../models/getInvoiceFeature';
 import {Features} from '../../controls/feature/feature-models';

frontend/src/components/invoice/invoice-list/QuotationList.tsx

@@ -1,6 +1,6 @@
 import {useState} from 'react';
 import {useSelector} from 'react-redux';
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import t from '../../../trans';
 import {ClientModal} from '../../client/controls/ClientModal';
 import {ConfacState} from '../../../reducers/app-state';

frontend/src/components/invoice/invoice-table/InvoiceClientCell.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/jsx-one-expression-per-line */
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import InvoiceModel from '../models/InvoiceModel';
 
 

frontend/src/components/invoice/invoice-table/InvoiceNumberCell.tsx

@@ -1,5 +1,5 @@
 import {useState} from 'react';
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router';
 import moment from 'moment';
 import {InvoiceClientCell} from '../invoice-table/InvoiceClientCell';
 import {InvoiceNumberCell} from '../invoice-table/InvoiceNumberCell';