wmcadigital · rolorogan · Mar 21, 2024 · Aug 11, 2022 · Aug 15, 2022 · Aug 16, 2022
diff --git a/.env.development b/.env.development
@@ -1,7 +1,7 @@
 EXTEND_ESLINT=true # Set linting to true on dev
-# developemnt API and keys
-REACT_APP_API_HOST='https://wmca-api-portal-staging.azure-api.net'
-REACT_APP_API_KEY='222b17e018f94b5ea1c08913db98f298'
+# developemnt API and keys https://wmca-api-portal-staging.azure-api.net 222b17e018f94b5ea1c08913db98f298
+REACT_APP_API_HOST='https://api.wmnetwork.co.uk'
+REACT_APP_API_KEY='514b8bafa009424289cb2d7a12c54f6e'
 # feedback link id
 REACT_APP_FEEDBACK_LINK_URL='https://forms.office.com/Pages/ResponsePage.aspx'
 REACT_APP_FEEDBACK_LINK_ID='RetZCK7xCk6e-ubWa7tnL1voVKMeFXVKvUhU3Uh8aqFUNUNVNFlKOVpLMThNV0g0T1VZWDYyT1FLNCQlQCN0PWcu'

diff --git a/netlify.toml b/netlify.toml
@@ -10,8 +10,8 @@ package = "@sentry/netlify-build-plugin"
 
 # Set env variables for deploy preview on netlify
 [context.deploy-preview.environment]
-  REACT_APP_API_HOST='https://wmca-api-portal-staging.azure-api.net'
-  REACT_APP_API_KEY='0d4cca4a2c5d40c3bfbbfe45d1bbf294'
+  REACT_APP_API_HOST='https://api.wmnetwork.co.uk'
+  REACT_APP_API_KEY='514b8bafa009424289cb2d7a12c54f6e'
   REACT_APP_BUS_AUTOCOMPLETE_API='https://rtccdisruptions6zqwajo6s.azurewebsites.net'
   REACT_APP_ROADS_AUTOCOMPLETE_KEY='e0c1216f818a41be8d528ac1d4f7ebfd'
   REACT_APP_FEEDBACK_LINK_URL='https://forms.office.com/Pages/ResponsePage.aspx'

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,10 +19,11 @@
     "axios": "^0.27.2",
     "date-fns": "^2.29.2",
     "dompurify": "^2.3.11",
-    "esri-loader": "3.6.0",
+    "esri-loader": "^3.6.0",
     "fecha": "^4.2.3",
     "haversine-distance": "^1.2.1",
     "moment": "^2.29.4",
+    "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
@@ -32,29 +33,29 @@
     "react-easy-swipe": "0.0.22",
     "react-moment": "^1.1.3",
     "react-scripts": "5.0.1",
-    "react-share": "^4.4.0",
-    "sass": "^1.64.2"
+    "react-share": "^4.4.1",
+    "sass": "^1.32.8"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^5.16.0 || ^6.8.0 || ^7.2.0 || ^8.46.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "eslint": "^7.2.0 || ^8.44.0",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jam3": "^0.2.3",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4 || ^3 || ^2.3.0 || ^1.7.0",
-    "prettier": "^2.7.1"
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^5.0.0-alpha.2",
+    "eslint-plugin-react": "^7.30.1",
+    "prettier": "^3.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src --ext .js",
+    "lint:fix": "npm run lint -- --fix"
   },
   "browserslist": {
     "production": [
@@ -70,4 +71,4 @@
       "ie 11"
     ]
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="wmnds-html">
+<html lang="en-GB" class="wmnds-html">
   <head>
     <meta charset="utf-8" />
 

diff --git a/src/assets/styles/_mixins.scss b/src/assets/styles/_mixins.scss
@@ -47,7 +47,7 @@
 // get-color(primary, 50); by default it mixes with white
 // If you add dark to the end it will mix black instead of white
 // e.g. get-color(primary, 50, dark);
-@function get-color($color, $percent: 0, $shade: $white) {
+@function get-color($color, $percent: 0%, $shade: $white) {
   // If shade is null, then by default set to white else set to shade selected
   $shade: if($shade == dark, $black, $white);
   $color: map-get($palettes, $color);

diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -4,14 +4,14 @@ import React from 'react';
 import ContextProvider from 'globalState/ContextProvider';
 import ViewToShow from '../ViewToShow/ViewToShow';
 
-const App = () => {
+function App() {
   return (
     <React.StrictMode>
       <ContextProvider>
         <ViewToShow />
       </ContextProvider>
     </React.StrictMode>
   );
-};
+}
 
 export default App;
diff --git a/src/components/ViewToShow/ErrorView/ErrorView.js b/src/components/ViewToShow/ErrorView/ErrorView.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-const ErrorPage = () => {
+function ErrorPage() {
   const [timeLeft, setTimeLeft] = useState(60); // set timeleft state
   useEffect(() => {
     // Set an interval to run every one second
@@ -36,6 +36,6 @@ const ErrorPage = () => {
       </div>
     </div>
   );
-};
+}
 
 export default ErrorPage;
diff --git a/src/components/ViewToShow/Header/Header.js b/src/components/ViewToShow/Header/Header.js
@@ -9,7 +9,7 @@ import { setSearchParam } from 'globalState/helpers/URLSearchParams'; // (used t
 // Import styles
 import s from './Header.module.scss';
 
-const Header = ({ isFetching, hasError }) => {
+function Header({ isFetching, hasError }) {
   const [fetchDisruptionState, setFetchDisruptionsState] = useContext(FetchDisruptionsContext);
   const { REACT_APP_FEEDBACK_LINK_URL, REACT_APP_FEEDBACK_LINK_ID } = process.env; // Destructure env variables
 
@@ -99,7 +99,7 @@ const Header = ({ isFetching, hasError }) => {
       </div>
     </div>
   );
-};
+}
 
 Header.propTypes = {
   hasError: PropTypes.bool,

diff --git a/src/components/ViewToShow/ListView/DisruptionList/DisruptionItem/DisruptionItem.js b/src/components/ViewToShow/ListView/DisruptionList/DisruptionItem/DisruptionItem.js
@@ -7,7 +7,7 @@ import DisruptionIndicatorSmall from 'components/shared/DisruptionIndicator/Disr
 import DisruptionInfo from 'components/shared/DisruptionInfo/DisruptionInfo';
 import useDisruptionAffectedItems from 'customHooks/useDisruptionAffectedItems';
 
-const DisruptionItem = ({ disruption }) => {
+function DisruptionItem({ disruption }) {
   const [openAccordions, setopenAccordions] = useState({}); // Used to track state of open and closed accordions
   const { iconLeft, title, affectedItems } = useDisruptionAffectedItems(disruption); // Get the correct modal icon and affectedItems
 
@@ -64,7 +64,7 @@ const DisruptionItem = ({ disruption }) => {
       {/* Accordion End */}
     </>
   );
-};
+}
 
 // PropTypes
 DisruptionItem.propTypes = {

diff --git a/src/components/ViewToShow/ListView/DisruptionList/DisruptionLines/DisruptionLinesGrouping.js b/src/components/ViewToShow/ListView/DisruptionList/DisruptionLines/DisruptionLinesGrouping.js
@@ -5,7 +5,7 @@ import styles from './DisruptionLinesGrouping.module.scss';
 
 const DisruptionLinesGrouping = (disruptionServicesAffected) => {
   const servicesAffected = disruptionServicesAffected.disruptionServicesAffected.map(
-    (affected) => affected
+    (affected) => affected,
   );
   let iconRightName;
   let disruptedClass;

diff --git a/src/components/ViewToShow/ListView/DisruptionList/DisruptionList.js b/src/components/ViewToShow/ListView/DisruptionList/DisruptionList.js
@@ -5,7 +5,7 @@ import useFilterLogic from 'customHooks/useFilterLogic';
 import NoKnownDisruptionMessage from 'components/shared/Tray/TrayComponents/SelectedService/NoKnownDisruptionMessage/NoKnownDisruptionMessage';
 import DisruptionItem from './DisruptionItem/DisruptionItem';
 
-const DisruptionList = () => {
+function DisruptionList() {
   const filteredData = useFilterLogic(); // Use filter logic based on tray selections
   const disruptionsTotal = filteredData.length;
 
@@ -39,6 +39,6 @@ const DisruptionList = () => {
   ) : (
     <NoKnownDisruptionMessage isListView />
   );
-};
+}
 
 export default DisruptionList;
diff --git a/...nts/ViewToShow/ListView/DisruptionList/DisruptionOperators/DisruptionOperatorsGrouping.js b/...nts/ViewToShow/ListView/DisruptionList/DisruptionOperators/DisruptionOperatorsGrouping.js
@@ -4,7 +4,7 @@ import styles from './DisruptionOperatorsGrouping.module.scss';
 
 const DisruptionOperatorsGrouping = (disruptionServicesAffected) => {
   const servicesAffected = disruptionServicesAffected.disruptionServicesAffected.map(
-    (affected) => affected
+    (affected) => affected,
   );
 
   const servicesAff = Object.values(servicesAffected);

diff --git a/src/components/ViewToShow/LoadingView/LoadingView.js b/src/components/ViewToShow/LoadingView/LoadingView.js
@@ -2,7 +2,7 @@ import React from 'react';
 // Import styling
 import s from './LoadingView.module.scss';
 
-const LoadingView = () => {
+function LoadingView() {
   const loadingText = 'Getting the latest disruptions';
 
   return (
@@ -15,6 +15,6 @@ const LoadingView = () => {
       <h3>{loadingText}</h3>
     </div>
   );
-};
+}
 
 export default LoadingView;
diff --git a/src/components/ViewToShow/MapView/Map/Map.js b/src/components/ViewToShow/MapView/Map/Map.js
@@ -14,7 +14,7 @@ import useSelectedLocation from './customHooks/useSelectedLocation';
 import useIconClustering from './customHooks/useIconClustering';
 import './Map.scss';
 
-const WebMapView = () => {
+function WebMapView() {
   // MAP SETUP
   const mapContainerRef = useRef();
   const { appHeight } = useWindowHeightWidth();
@@ -42,6 +42,6 @@ const WebMapView = () => {
       style={{ minHeight: appHeight && appHeight / 2 }}
     />
   );
-};
+}
 
 export default WebMapView;
diff --git a/src/components/ViewToShow/MapView/Map/customHooks/useCreateIconLayer.js b/src/components/ViewToShow/MapView/Map/customHooks/useCreateIconLayer.js
@@ -99,7 +99,7 @@ const useCreateIconLayer = (view) => {
                     wkid: 4326,
                   },
                 },
-              })
+              }),
           );
         }
 

diff --git a/src/components/ViewToShow/MapView/Map/customHooks/useDrawPolyline.js b/src/components/ViewToShow/MapView/Map/customHooks/useDrawPolyline.js
@@ -68,7 +68,7 @@ const useDrawPolyline = (view) => {
       polylineLayer.add(polyline);
       setIsPolylineDrawn(true);
     },
-    [view]
+    [view],
   );
 
   const drawBusPolyline = useCallback(() => {

diff --git a/src/components/ViewToShow/MapView/Map/customHooks/useGoTo.js b/src/components/ViewToShow/MapView/Map/customHooks/useGoTo.js
@@ -6,7 +6,7 @@ const useGoTo = (
   isIconLayerCreated,
   isFilteringDone,
   isPolylineDrawn,
-  isLocationSelected
+  isLocationSelected,
 ) => {
   const [autoCompleteState] = useContext(AutoCompleteContext);
   const { selectedItem } = autoCompleteState;

diff --git a/src/components/ViewToShow/MapView/Map/customHooks/useHoverIcon.js b/src/components/ViewToShow/MapView/Map/customHooks/useHoverIcon.js
@@ -40,7 +40,7 @@ const useHoverIcon = (view, isIconLayerCreated) => {
       if (!queryResult?.features.length) return [];
       return queryResult.features;
     },
-    [getDisruptionsFeatureLayer]
+    [getDisruptionsFeatureLayer],
   );
 
   const updateIcons = useCallback(
@@ -62,7 +62,7 @@ const useHoverIcon = (view, isIconLayerCreated) => {
       const featuresToHover = features.filter((feature) => feature.attributes.id === disruptionId);
 
       const featuresToUnhover = features.filter((feature) =>
-        feature.attributes.mapIcon.includes('hover')
+        feature.attributes.mapIcon.includes('hover'),
       );
       const hoveredFeatureIds = featuresToUnhover.map((hovered) => hovered?.attributes?.id);
 
@@ -94,7 +94,7 @@ const useHoverIcon = (view, isIconLayerCreated) => {
 
       setShouldUpdateIcons(false);
     },
-    [getDisruptionsFeatureLayer, queryDisruptionsFeatureLayer]
+    [getDisruptionsFeatureLayer, queryDisruptionsFeatureLayer],
   );
 
   useEffect(() => {

diff --git a/src/components/ViewToShow/MapView/Map/customHooks/usePointerEvents.js b/src/components/ViewToShow/MapView/Map/customHooks/usePointerEvents.js
@@ -28,7 +28,7 @@ const usePointerEvents = (view, isIconLayerCreated) => {
 
       return clickedFeature;
     },
-    [view]
+    [view],
   );
 
   const selectDisruption = useCallback(
@@ -44,7 +44,7 @@ const usePointerEvents = (view, isIconLayerCreated) => {
         payload: { id: disruptionId, selectedByMap: true },
       });
     },
-    [autoCompleteDispatch, modeState.mode]
+    [autoCompleteDispatch, modeState.mode],
   );
 
   const setSelectedItem = useCallback(
@@ -57,7 +57,7 @@ const usePointerEvents = (view, isIconLayerCreated) => {
         console.log('setSelectedItem error:', error);
       }
     },
-    [view, getClickedFeature, selectDisruption]
+    [view, getClickedFeature, selectDisruption],
   );
 
   const usePointerCursor = useCallback(
@@ -76,7 +76,7 @@ const usePointerEvents = (view, isIconLayerCreated) => {
         console.log('usePointerCursor error:', error);
       }
     },
-    [view]
+    [view],
   );
 
   const addPointerEvents = useCallback(() => {

diff --git a/src/components/ViewToShow/MapView/MapView.js b/src/components/ViewToShow/MapView/MapView.js
@@ -7,7 +7,7 @@ import Tray from '../../shared/Tray/Tray';
 // Import styles
 import s from './MapView.module.scss';
 
-const MapView = () => {
+function MapView() {
   const { appHeight, windowWidth } = useWindowHeightWidth(); // Get window height and width
 
   // Show correct height based on screen size
@@ -20,6 +20,6 @@ const MapView = () => {
       <Tray />
     </div>
   );
-};
+}
 
 export default MapView;
diff --git a/src/components/ViewToShow/ViewToShow.js b/src/components/ViewToShow/ViewToShow.js
@@ -11,7 +11,7 @@ import ListView from 'components/ViewToShow/ListView/ListView';
 // Import custom hooks
 import useGETDisruptions from './useGETDisruptions';
 
-const ViewToShow = () => {
+function ViewToShow() {
   const [fetchDisruptionState] = useContext(FetchDisruptionsContext);
   const { isFetching, hasError } = useGETDisruptions();
 
@@ -37,6 +37,6 @@ const ViewToShow = () => {
       {viewToRender}
     </>
   );
-};
+}
 
 export default ViewToShow;
diff --git a/src/components/shared/Button/Button.js b/src/components/shared/Button/Button.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Icon from '../Icon/Icon';
 import './Button.scss'; // Temp styling for displaying button as link
 
-const Button = ({
+function Button({
   type,
   title,
   isActive,
@@ -15,7 +15,7 @@ const Button = ({
   iconRight,
   disabled,
   id,
-}) => {
+}) {
   return (
     <button
       // eslint-disable-next-line react/button-has-type
@@ -40,7 +40,7 @@ const Button = ({
       ) : null}
     </button>
   );
-};
+}
 
 // Set props
 Button.propTypes = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -99,7 +99,7 @@ const useCreateIconLayer = (view) => { @@
                         wkid: 4326,
                       },
                     },
-                  })
+                  }),
               );
             }
@@ Expand Down @@