fix: rail disruption time

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'

package.json

@@ -22,13 +22,15 @@
     "esri-loader": "^3.6.0",
     "fecha": "^4.2.3",
     "haversine-distance": "^1.2.1",
+    "moment": "^2.29.4",
     "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-moment": "^1.1.3",
     "react-scripts": "5.0.1",
     "react-share": "^4.4.1",
     "sass": "^1.32.8"

src/components/shared/DisruptionInfo/DisruptionInfo.js

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import dompurify from 'dompurify';
+// Import Moment
+import Moment from 'react-moment';
 // Import contexts
 import { AutoCompleteContext, FetchDisruptionsContext, ModeContext } from 'globalState';
 // Import Helper functions
@@ -49,7 +51,7 @@ function DisruptionInfo({ disruption }) {
 
   const createDateString = (rawDate) => {
     const date = new Date(rawDate);
-    return `${date.toLocaleDateString(undefined, dateOptions)}`;
+    return `${date.toLocaleDateString('en-GB', dateOptions)}`;
   };
 
   // Promoter organisation
@@ -107,8 +109,15 @@ function DisruptionInfo({ disruption }) {
             <p>
               <strong>When?</strong>
               <br />
-              {createDateString(disruption.disruptionTimeWindow.start)} to{' '}
-              {createDateString(disruption.disruptionTimeWindow.end)}
+              {/* Temporary fix for textual errors of rail disruption timings during British Summer Time */}
+              <Moment locale="en-GB" format="dddd, Do MMMM YYYY HH:mm" add={{ hours: 1 }}>
+                {disruption.disruptionTimeWindow.start}
+              </Moment>
+              {' to '}
+
+              <Moment locale="en-GB" format="dddd, Do MMMM YYYY HH:mm" add={{ hours: 1 }}>
+                {disruption.disruptionTimeWindow.end}
+              </Moment>
             </p>
             <div
               className="wmnds-m-b-lg wmnds-col-1"

src/components/shared/Message/Message.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'components/shared/Icon/Icon';
 import dompurify from 'dompurify';
+import Icon from 'components/shared/Icon/Icon';
 
 const { sanitize } = dompurify;
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import Icon from 'components/shared/Icon/Icon';
 import PropTypes from 'prop-types';
+import Icon from 'components/shared/Icon/Icon';
 
 import s from './CloseButton.module.scss';
 

src/index.js

@@ -12,11 +12,11 @@ if (process.env.NODE_ENV === 'production') {
   Sentry.init({ dsn: 'https://[email protected]/5272889' });
 }
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('disruptionsApp'));
+root.render(
   <Sentry.ErrorBoundary>
     <App />
   </Sentry.ErrorBoundary>,
-  document.getElementById('disruptionsApp'),
 );
 
 // If you want your app to work offline and load faster, you can change