Client side package updates.

client/package.json

@@ -26,8 +26,8 @@
     "exifr": "^7.1.3",
     "firebase": "^9.9.1",
     "graphql": "^16.5.0",
-    "i18next": "^21.8.14",
+    "i18next": "^22.4.6",
-    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next-browser-languagedetector": "^7.0.1",
     "jsoneditor": "^9.9.0",
     "jsreport-browser-client-dist": "^1.3.0",
     "libphonenumber-js": "^1.10.9",
@@ -35,28 +35,28 @@
     "markerjs2": "^2.22.0",
     "moment-business-days": "^1.2.0",
     "moment-timezone": "^0.5.34",
-    "normalize-url": "^7.0.3",
+    "normalize-url": "^8.0.0",
-    "phone": "^3.1.23",
+    "phone": "^3.1.32",
     "preval.macro": "^5.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.1",
+    "query-string": "^8.1.0",
     "rc-queue-anim": "^2.0.0",
     "rc-scroll-anim": "^2.7.6",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-big-calendar": "^1.5.0",
+    "react-big-calendar": "^1.5.2",
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-drag-listview": "^0.2.1",
     "react-grid-gallery": "^0.5.5",
     "react-grid-layout": "^1.3.4",
-    "react-i18next": "^11.18.1",
+    "react-i18next": "^12.1.1",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.7.1",
-    "react-number-format": "^4.9.3",
+    "react-number-format": "^5.1.2",
-    "react-redux": "^7.2.8",
+    "react-redux": "^8.0.5",
     "react-resizable": "^3.0.4",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-sticky": "^6.0.3",
     "react-sublime-video": "^0.2.5",
     "react-virtualized": "^9.22.3",
@@ -70,7 +70,7 @@
     "socket.io-client": "^4.5.1",
     "styled-components": "^5.3.5",
     "subscriptions-transport-ws": "^0.11.0",
-    "web-vitals": "^2.1.4",
+    "web-vitals": "^3.1.0",
     "workbox-background-sync": "^6.5.3",
     "workbox-broadcast-update": "^6.5.3",
     "workbox-cacheable-response": "^6.5.3",
@@ -88,6 +88,7 @@
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "craco start",
+    "startrs": "react-scripts start",
     "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
     "build:test": "env-cmd -f .env.test yarn run build",
     "build-deploy:test": "yarn run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",

client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import cleanAxios from "../../utils/CleanAxios";
 import formatBytes from "../../utils/formatbytes";
-import yauzl from "yauzl";
+//import yauzl from "yauzl";
 import { useTreatments } from "@splitsoftware/splitio-react";
 
 import { connect } from "react-redux";
@@ -36,7 +36,7 @@ export function JobsDocumentsDownloadButton({
   );
   const imagesToDownload = [
     ...galleryImages.images.filter((image) => image.isSelected),
-     ...galleryImages.other.filter((image) => image.isSelected),
+    ...galleryImages.other.filter((image) => image.isSelected),
   ];
 
   function downloadProgress(progressEvent) {
@@ -69,44 +69,42 @@ export function JobsDocumentsDownloadButton({
     setDownload(null);
     if (Direct_Media_Download.treatment === "on") {
       try {
-        const parentDir = await window.showDirectoryPicker({
+        // const parentDir = await window.showDirectoryPicker({
-          id: "media",
+        //   id: "media",
-          startIn: "downloads",
+        //   startIn: "downloads",
-        });
+        // });
-
+        // const directory = await parentDir.getDirectoryHandle(identifier, {
-        const directory = await parentDir.getDirectoryHandle(identifier, {
+        //   create: true,
-          create: true,
+        // });
-        });
+        // yauzl.fromBuffer(
-
+        //   Buffer.from(theDownloadedZip.data),
-        yauzl.fromBuffer(
+        //   {},
-          Buffer.from(theDownloadedZip.data),
+        //   (err, zipFile) => {
-          {},
+        //     if (err) throw err;
-          (err, zipFile) => {
+        //     zipFile.on("entry", (entry) => {
-            if (err) throw err;
+        //       zipFile.openReadStream(entry, async (readErr, readStream) => {
-            zipFile.on("entry", (entry) => {
+        //         if (readErr) {
-              zipFile.openReadStream(entry, async (readErr, readStream) => {
+        //           zipFile.close();
-                if (readErr) {
+        //           throw readErr;
-                  zipFile.close();
+        //         }
-                  throw readErr;
+        //         if (err) throw err;
-                }
+        //         let fileSystemHandle = await directory.getFileHandle(
-                if (err) throw err;
+        //           entry.fileName,
-                let fileSystemHandle = await directory.getFileHandle(
+        //           {
-                  entry.fileName,
+        //             create: true,
-                  {
+        //           }
-                    create: true,
+        //         );
-                  }
+        //         const writable = await fileSystemHandle.createWritable();
-                );
+        //         readStream.on("data", async function (chunk) {
-                const writable = await fileSystemHandle.createWritable();
+        //           await writable.write(chunk);
-                readStream.on("data", async function (chunk) {
+        //         });
-                  await writable.write(chunk);
+        //         readStream.on("end", async function () {
-                });
+        //           await writable.close();
-                readStream.on("end", async function () {
+        //         });
-                  await writable.close();
+        //       });
-                });
+        //     });
-              });
+        //   }
-            });
+        // );
-          }
-        );
       } catch (e) {
         console.log(e);
         standardMediaDownload(theDownloadedZip.data);

client/src/index.js

@@ -1,9 +1,9 @@
 import * as Sentry from "@sentry/react";
-//import "antd/dist/antd.css";
+import "antd/dist/antd.css";
-import "antd/dist/antd.less";
+//import "antd/dist/antd.less";
 import Dinero from "dinero.js";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
 import { PersistGate } from "redux-persist/integration/react";
@@ -14,7 +14,6 @@ import { persistor, store } from "./redux/store";
 import reportWebVitals from "./reportWebVitals";
 import "./translations/i18n";
 import "./utils/CleanAxios";
-require("dotenv").config();
 
 // Dinero.defaultCurrency = "CAD";
 // Dinero.globalLocale = "en-CA";
@@ -39,7 +38,10 @@ if (process.env.NODE_ENV !== "development") {
   });
 }
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+
+root.render(
   <Provider store={store}>
     <BrowserRouter>
       <PersistGate
@@ -49,10 +51,8 @@ ReactDOM.render(
         <AppContainer />
       </PersistGate>
     </BrowserRouter>
-  </Provider>,
+  </Provider>
-  document.getElementById("root")
 );
-
 // const onServiceWorkerUpdate = (registration) => {
 //   console.log("onServiceWorkerUpdate", registration);
 

client/src/utils/CurrencyFormatter.jsx

@@ -1,9 +1,9 @@
 import React from "react";
-import NumberFormat from "react-number-format";
+import { NumericFormat } from "react-number-format";
 
 export default function CurrencyFormatter(props) {
   return (
-    <NumberFormat
+    <NumericFormat
       thousandSeparator={true}
       decimalScale={2}
       fixedDecimalScale={true}