ncu updates applied to project

.github/workflows/reviewdog.yml

@@ -10,7 +10,9 @@ jobs:
     name: runner / eslint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - name: Checkout code       
+        uses: actions/checkout@v2
+
       - name: Run eslint with reviewdog
         uses: reviewdog/action-eslint@v1
         with:

package.json

@@ -12,38 +12,38 @@
   },
   "copyright": "WMCA",
   "dependencies": {
-    "@sentry/react": "^5.29.0",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.0.4",
-    "@testing-library/user-event": "^12.3.0",
-    "axios": "^0.20.0",
-    "date-fns": "^2.16.1",
-    "dompurify": "^2.2.2",
-    "esri-loader": "^2.15.0",
-    "fecha": "^4.2.0",
+    "@sentry/react": "^7.11.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.4.3",
+    "axios": "^0.27.2",
+    "date-fns": "^2.29.2",
+    "dompurify": "^2.3.11",
+    "esri-loader": "^3.6.0",
+    "fecha": "^4.2.3",
     "haversine-distance": "^1.2.1",
-    "node-sass": "^4.14.1",
-    "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-app-polyfill": "^1.0.6",
-    "react-datepicker": "^3.3.0",
-    "react-debounce-input": "^3.2.2",
-    "react-dom": "^16.13.1",
-    "react-easy-swipe": "0.0.21",
-    "react-scripts": "3.4.3",
-    "react-share": "^4.3.1"
+    "node-sass": "^7.0.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-datepicker": "^4.8.0",
+    "react-debounce-input": "^3.3.0",
+    "react-dom": "^18.2.0",
+    "react-easy-swipe": "0.0.22",
+    "react-scripts": "5.0.1",
+    "react-share": "^4.4.0"
   },
   "devDependencies": {
-    "eslint": "^6.8.0",
+    "eslint": "^8.22.0",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.13.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jam3": "^0.2.3",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.2",
-    "prettier": "^2.1.2"
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "prettier": "^2.7.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/ViewToShow/Header/Header.js

@@ -11,7 +11,7 @@ import s from './Header.module.scss';
 
 const Header = ({ isFetching, hasError }) => {
   const [fetchDisruptionState, setFetchDisruptionsState] = useContext(FetchDisruptionsContext);
-  const { REACT_APP_FEEDBACK_LINK_URL, REACT_APP_FEEDBACK_LINK_ID } = process.env; // Destructure env vars
+  const { REACT_APP_FEEDBACK_LINK_URL, REACT_APP_FEEDBACK_LINK_ID } = process.env; // Destructure env variables
 
   const handleClick = () => {
     let isMapVisible;

src/components/ViewToShow/ListView/DisruptionList/DisruptionItem/DisruptionItem.js

@@ -68,7 +68,7 @@ const DisruptionItem = ({ disruption }) => {
 
 // PropTypes
 DisruptionItem.propTypes = {
-  disruption: PropTypes.objectOf(PropTypes.any).isRequired,
+  disruption: PropTypes.oneOfType([PropTypes.object]).isRequired,
 };
 
 export default DisruptionItem;

src/components/ViewToShow/MapView/Map/customHooks/useCreateIconLayer.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useContext, useCallback } from 'react';
+import { useEffect, useState, useContext, useCallback, useMemo } from 'react';
 import { loadModules } from 'esri-loader';
 import { format, parse } from 'fecha';
 import { FetchDisruptionsContext } from 'globalState';
@@ -8,7 +8,10 @@ const useCreateIconLayer = (view) => {
   const map = view !== null && view?.map;
 
   const [fetchDisruptionsState] = useContext(FetchDisruptionsContext);
-  const disruptionsData = fetchDisruptionsState?.data || [];
+
+  const disruptionsData = useMemo(() => {
+    return fetchDisruptionsState?.data || [];
+  }, [fetchDisruptionsState]);
 
   const createIconLayer = useCallback(async () => {
     try {

src/components/ViewToShow/MapView/Map/customHooks/useCreateMapView.js

@@ -9,23 +9,16 @@ const useCreateMapView = (mapContainerRef) => {
   const createMapView = useCallback(async () => {
     try {
       setDefaultOptions({ css: true }); // Load esri css by default
-      const [
-        Map,
-        MapView,
-        Basemap,
-        VectorTileLayer,
-        GraphicsLayer,
-        Graphic,
-        Locate,
-      ] = await loadModules([
-        'esri/Map',
-        'esri/views/MapView',
-        'esri/Basemap',
-        'esri/layers/VectorTileLayer',
-        'esri/layers/GraphicsLayer',
-        'esri/Graphic',
-        'esri/widgets/Locate',
-      ]);
+      const [Map, MapView, Basemap, VectorTileLayer, GraphicsLayer, Graphic, Locate] =
+        await loadModules([
+          'esri/Map',
+          'esri/views/MapView',
+          'esri/Basemap',
+          'esri/layers/VectorTileLayer',
+          'esri/layers/GraphicsLayer',
+          'esri/Graphic',
+          'esri/widgets/Locate',
+        ]);
 
       const basemap = new Basemap({
         baseLayers: [

src/components/shared/DisruptionInfo/DisruptionInfo.js

@@ -126,7 +126,7 @@ const DisruptionInfo = ({ disruption }) => {
 
 // PropTypes
 DisruptionInfo.propTypes = {
-  disruption: PropTypes.objectOf(PropTypes.any).isRequired,
+  disruption: PropTypes.oneOfType([PropTypes.object]).isRequired,
 };
 
 export default DisruptionInfo;

src/components/shared/DisruptionInfo/ShareButtons/ShareButtons.js

@@ -81,7 +81,7 @@ const ShareButtons = ({ isMapVisible, disruption }) => {
 };
 
 ShareButtons.propTypes = {
-  disruption: PropTypes.objectOf(PropTypes.any).isRequired,
+  disruption: PropTypes.oneOfType([PropTypes.object]).isRequired,
   isMapVisible: PropTypes.bool.isRequired,
 };
 

src/components/shared/Tray/MobileTray.js

@@ -11,14 +11,8 @@ import useMobileTrayMethods from './useMobileTrayMethods';
 const MobileTray = () => {
   const draggableTray = useRef(); // Ref used to keep track of Draggable dom element
   const slideableTray = useRef(); // Ref to track swipe dom element
-  const {
-    onSwipeStart,
-    onSwipeEnd,
-    onSwipeDown,
-    onSwipeUp,
-    trayPosition,
-    appHeight,
-  } = useMobileTrayMethods(slideableTray); // Pull in methods etc. to use for mobile swiper
+  const { onSwipeStart, onSwipeEnd, onSwipeDown, onSwipeUp, trayPosition, appHeight } =
+    useMobileTrayMethods(slideableTray); // Pull in methods etc. to use for mobile swiper
 
   return (
     <div

src/components/shared/Tray/TrayComponents/AutoComplete/SelectedServiceHeader/SelectedServiceHeader.js

@@ -66,7 +66,7 @@ const SelectedServiceHeader = ({ autoCompleteState, autoCompleteDispatch, mode,
 
 // PropTypes
 SelectedServiceHeader.propTypes = {
-  autoCompleteState: PropTypes.objectOf(PropTypes.any).isRequired,
+  autoCompleteState: PropTypes.objectOf([PropTypes.object]).isRequired,
   autoCompleteDispatch: PropTypes.func.isRequired,
   mode: PropTypes.string,
   to: PropTypes.bool,

src/components/shared/Tray/TrayComponents/SelectedService/DisruptedService/DisruptedService.js

@@ -56,7 +56,7 @@ const DisruptedService = ({ disruption }) => {
 
 // PropTypes
 DisruptedService.propTypes = {
-  disruption: PropTypes.objectOf(PropTypes.any).isRequired,
+  disruption: PropTypes.objectOf([PropTypes.object]).isRequired,
 };
 
 export default DisruptedService;