update react and dependant dependencies (#562)

package.json

@@ -9,16 +9,15 @@
     "@turf/turf": "^6.4.0",
     "@urql/exchange-auth": "^1.0.0",
     "graphql": "^15.5.1",
-    "i18next": "^20.3.2",
     "maplibre-gl": "^1.14.0",
     "oidc-client-ts": "^3.0.1",
     "pubsub-js": "^1.9.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-i18next": "^11.11.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.1.1",
     "react-oidc-context": "^3.1.0",
     "react-router-dom": "^5.2.0",
-    "react-toastify": "^7.0.4",
+    "react-toastify": "^10.0.6",
     "sass": "^1.81.0",
     "subscriptions-transport-ws": "^0.9.19",
     "typescript": "^4.9.5",
@@ -52,9 +51,9 @@
     "@types/geojson": "^7946.0.10",
     "@types/node": "^22.9.3",
     "@types/pubsub-js": "^1.8.6",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
     "@types/react-router-dom": "^5.1.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/uuid": "^10.0.0",
     "@types/websocket": "^1.0.10",
     "react-scripts": "5.0.1"

src/global-styles/index.scss

@@ -243,3 +243,7 @@ strong {
   background-color: colors.$background-color;
   overflow-y: auto;
 }
+
+.mapboxgl-canvas {
+    position: initial;
+}

src/groups/FiberConnectionEditor/EquipmentSelector/EquipmentSelector.tsx

@@ -1,4 +1,4 @@
-import { TFunction } from "react-i18next";
+import { TFunction } from "i18next";
 
 export type EquipmentSelectorProps = {
   rows: {

src/groups/RouteNetworkDiagram/AddContainer/AddContainer.tsx

@@ -1,5 +1,6 @@
 import { useContext, useLayoutEffect, useState, useMemo } from "react";
-import { TFunction, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import { v4 as uuidv4 } from "uuid";
 import SelectListView, { BodyItem } from "../../../components/SelectListView";
 import SelectMenu, { SelectOption } from "../../../components/SelectMenu";

src/groups/RouteNetworkDiagram/AddTerminalEquipment/AddTerminalEquipment.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useReducer, useMemo } from "react";
 import { useClient, useQuery } from "urql";
 import { toast } from "react-toastify";
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import SelectMenu, { SelectOption } from "../../../components/SelectMenu";
 import TextBox from "../../../components/TextBox";
 import DefaultButton from "../../../components/DefaultButton";

src/groups/RouteNetworkDiagram/EditNodeContainer/EditNodeContainer.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import { useQuery, useClient } from "urql";
 import {
   MUTATION_UPDATE_NODE_CONTAINER,

src/groups/RouteNetworkDiagram/EditSpanEquipment/EditSpanEquipment.tsx

@@ -15,7 +15,8 @@ import {
   UnitAddress,
 } from "./EditSpanEquipmentGql";
 import { useQuery, useClient } from "urql";
-import { TFunction, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import DefaultButton from "../../../components/DefaultButton";
 import SelectMenu, { SelectOption } from "../../../components/SelectMenu";
 import TextBox from "../../../components/TextBox";

src/groups/RouteNetworkDiagram/EstablishCustomerConnection/EstablishCustomerConnection.tsx

@@ -1,4 +1,5 @@
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import { v4 as uuidv4 } from "uuid";
 import { useState, useMemo, useEffect, useContext } from "react";
 import { useQuery, useClient } from "urql";

src/groups/RouteNetworkDiagram/NodeContainerDetails/NodeContainerDetails.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useContext } from "react";
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import { useQuery } from "urql";
 import FeatureDetailsContainer from "../FeatureDetailContainer";
 import {

src/groups/RouteNetworkDiagram/OutageView/OutageView.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useMemo } from "react";
 import { useClient } from "urql";
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import {
   getInformation,
   getWorkTasks,

src/groups/RouteNetworkDiagram/RerouteSpanEquipment/RerouteSpanEquipment.tsx

@@ -4,7 +4,8 @@ import { useClient, Client } from "urql";
 import useBridgeConnector from "../../../bridge/useBridgeConnector";
 import { MapContext } from "../../../contexts/MapContext";
 import { toast } from "react-toastify";
-import { TFunction, useTranslation } from "react-i18next";
+import {  useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import {
   QUERY_GET_ROUTESEGMENT_IDS,
   GetRouteSegmentIdsParameter,

src/groups/TerminalEquipment/AddAdditionalStructures/AddAdditionalStructures.tsx

@@ -1,7 +1,8 @@
 import { useReducer, useMemo, useEffect } from "react";
 import { useClient } from "urql";
 import { toast } from "react-toastify";
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import SelectMenu, { SelectOption } from "../../../components/SelectMenu";
 import DefaultButton from "../../../components/DefaultButton";
 import NumberPicker from "../../../components/NumberPicker";

src/groups/TerminalEquipment/EditTerminalEquipment/EditTerminalEquipment.tsx

@@ -1,7 +1,8 @@
 import { useReducer, useEffect, useMemo } from "react";
 import { useClient } from "urql";
 import { toast } from "react-toastify";
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import SelectMenu, { SelectOption } from "../../../components/SelectMenu";
 import TextBox from "../../../components/TextBox";
 import DefaultButton from "../../../components/DefaultButton";

src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { AuthProvider } from "react-oidc-context";
 import App from "./App";
 import Config from "./config";
@@ -29,7 +29,10 @@ const onSigninCallback = (_user: any | void): void => {
   }
 }
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
   <React.StrictMode>
     <AuthProvider {...oidcConfig} onSigninCallback={onSigninCallback}>
       <AuthWrapperProvider>
@@ -42,6 +45,5 @@ ReactDOM.render(
         </UserProvider>
       </AuthWrapperProvider>
     </AuthProvider>
-  </React.StrictMode>,
-  document.getElementById("root"),
+  </React.StrictMode>
 );

src/pages/PlaceSpanEquipmentPage/PlaceSpanEquipmentPage.tsx

@@ -1,5 +1,6 @@
 import { useContext, useLayoutEffect, useState, useMemo } from "react";
-import { TFunction, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 import { v4 as uuidv4 } from "uuid";
 import SelectListView, { BodyItem } from "../../components/SelectListView";
 import SelectMenu, { SelectOption } from "../../components/SelectMenu";