Merge pull request #173 from PublicHealthEngland/development

Essential updates and general improvements

No conflict detected.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covid-public",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "private": true,
   "homepage": "https://coronavirus.data.gov.uk/",
   "dependencies": {
@@ -54,6 +54,7 @@
     ]
   },
   "devDependencies": {
+    "dotenv": "^8.2.0",
     "flow-bin": "^0.120.1"
   }
 }

src/App.js

@@ -1,8 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+
 import React,  { Fragment } from 'react';
 import { Switch, Route, Redirect } from 'react-router';
 import { Header, Footer } from 'govuk-react-jsx';
 
+// handle environment vars
+import dotenv from 'dotenv';
+
 import Regional from 'pages/Regional';
 import MobileRegionTable from 'pages/MobileRegionTable';
 import About from 'pages/About';
@@ -12,7 +16,10 @@ import Cookies from 'pages/Cookies';
 import Navigation from 'components/Navigation';
 import CookieBanner from 'components/CookieBanner';
 import BackToTop from 'components/BackToTop';
+import ErrorBoundary from "components/ErrorBoundary";
 
+// get environment vars
+dotenv.config();
 
 const FooterContents = () => {
 
@@ -72,32 +79,35 @@ const App = () => {
             />
             <Navigation/>
 
-            {/* We only want back-to-top links on the main & about pages. */}
-            <Switch>
-                {/* These back-to-top links are the 'overlay' style that stays
-                    on screen as we scroll. */}
-                <Route path="/about" exact render={ () => <BackToTop mode={ "overlay" }/> } />
-                <Route path="/accessibility" exact render={ () => <BackToTop mode={ "overlay" }/> } />
-                <Route path="/" exact render={ () => <BackToTop mode={ "overlay" }/> } />
-            </Switch>
-
-            <Switch>
-                <Route path="/region" component={ MobileRegionTable }/>
-                <Route path="/about" component={ About }/>
-                <Route path="/accessibility" component={ Accessibility }/>
-                <Route path="/cookies" component={ Cookies }/>
-                <Route path="/archive" component={ Archive }/>
-                <Route path="/" component={ Regional }/>
-                <Redirect to="/"/>
-            </Switch>
-
-            {/* We only want back-to-top links on the main & about pages. */}
-            <Switch>
-                {/* These back-to-top links are the 'inline' style that sits
-                    statically between the end of the content and the footer. */}
-                <Route path="/about" exact render={ props => <BackToTop {...props} mode="inline"/> } />
-                <Route path="/" exact render={ props => <BackToTop {...props} mode="inline"/>  } />
-            </Switch>
+            <ErrorBoundary>
+
+                {/* We only want back-to-top links on the main & about pages. */}
+                <Switch>
+                    {/* These back-to-top links are the 'overlay' style that stays
+                        on screen as we scroll. */}
+                    <Route path="/about" exact render={ () => <BackToTop mode={ "overlay" }/> } />
+                    <Route path="/accessibility" exact render={ () => <BackToTop mode={ "overlay" }/> } />
+                    <Route path="/" exact render={ () => <BackToTop mode={ "overlay" }/> } />
+                </Switch>
+
+                <Switch>
+                    <Route path="/region" component={ MobileRegionTable }/>
+                    <Route path="/about" component={ About }/>
+                    <Route path="/accessibility" component={ Accessibility }/>
+                    <Route path="/cookies" component={ Cookies }/>
+                    <Route path="/archive" component={ Archive }/>
+                    <Route path="/" component={ Regional }/>
+                    <Redirect to="/"/>
+                </Switch>
+
+                {/* We only want back-to-top links on the main & about pages. */}
+                <Switch>
+                    {/* These back-to-top links are the 'inline' style that sits
+                        statically between the end of the content and the footer. */}
+                    <Route path="/about" exact render={ props => <BackToTop {...props} mode="inline"/> } />
+                    <Route path="/" exact render={ props => <BackToTop {...props} mode="inline"/>  } />
+                </Switch>
+            </ErrorBoundary>
 
             <Switch>
                 <Route path="/region" component={ F }/>

src/components/AltChartTable/AltChartTable.js

@@ -19,7 +19,7 @@ const sortFunc = (a, b) => {
 
 const AltChartTable: ComponentType<Props> = ({ header, valueName, data }: Props) => {
   return (
-    <Styles.Container>
+    <Styles.Container className="govuk-!-margin-bottom-9">
       <span className="govuk-heading-s">{header}</span>
       <Styles.Table>
         <Table

src/components/BarChart/BarChart.js

@@ -32,7 +32,7 @@ const BarChart: ComponentType<Props> = ({ header, tooltipText, data }: Props) =>
                             // REMOVED PENDING FORMAL RELEASE
                             {
                                 label: "Rolling average",
-                                data: movingAverage(dataSorted.map(d => d.value), 7),
+                                data: [NaN, NaN, NaN, ...movingAverage(dataSorted.map(d => d.value), 7), ],
                                 type: 'line',
                                 fill: false,
                                 borderColor: "#323d13",

src/components/BigNumber/BigNumber.js

@@ -9,7 +9,7 @@ import * as Styles from './BigNumber.styles.js';
 
 export const BigNumberContainer: Component<Props> = ({ children }) => {
 
-    return <Styles.MainContainer>
+    return <Styles.MainContainer className="govuk-!-margin-top-9 govuk-!-margin-bottom-9">
         <Styles.Children>{ children }</Styles.Children>
     </Styles.MainContainer>
 

src/components/CategoricalBarChart/CategoricalBarChart.js

@@ -110,7 +110,7 @@ const CategoricalBarChart: ComponentType<ChartProps> = ({ header, tooltipText, d
     const mobileView = useResponsiveLayout(500) === "mobile"
 
     return (
-        <Styles.Container>
+        <Styles.Container className="govuk-!-margin-bottom-9">
             <span className="govuk-heading-s">{ header }</span>
             <Styles.Chart>
                 <Bar

src/components/ChartTable/Tables.js

@@ -165,7 +165,7 @@ export const GenericTable = ({ data, structure }: EnglandTableProps): React.Reac
         dataKeys = structure.metadata.map(item => item.key),
         dataArray = transpose(dataKeys.map(key => data[key].sort(structure.sortFunc)));
 
-    return <Styles.Container>
+    return <Styles.Container className="govuk-!-margin-bottom-9">
         {
             structure?.extra?.intro ?? null
                 ? <span className={ "govuk-heading-s" }>{ structure.extra.intro }</span>

src/components/Disclaimer/Disclaimer.js

@@ -50,7 +50,7 @@ export default class Disclaimer extends Component<Props, {}> {
 
         if ( loading ) return null;
 
-        return <Styles.Container className={ "disclaimer" }>
+        return <Styles.Container className="disclaimer govuk-!-margin-top-9">
             <div className={ "markdown" } dangerouslySetInnerHTML={{ __html: data }}/>
         </Styles.Container>
 

src/components/ErrorBoundary/ErrorBoundary.js

@@ -2,32 +2,65 @@
 
 import React from 'react';
 
-type Props = {
-  children: any,
-};
+import PageTitle from 'components/PageTitle';
+import type { Props } from './ErrorBoundary.types';
+import * as Styles from './ErrorBoundary.styles';
 
-type State = {
-  hasError: boolean
-};
 
 export default class ErrorBoundary extends React.Component<Props, State> {
-  props: Props;
-  state: State = {
-    hasError: false,
+    props: Props;
+    state: State = {
+        error: null,
+        errorInfo: null
   };
 
-  componentDidCatch() {
-    this.setState({
-      hasError: true,
-    });
+  componentDidCatch(error, errorInfo) {
+        // Catch errors in any components below and re-render with error message
+        this.setState({
+            error: error,
+            errorInfo: errorInfo
+        })
+        // You can also log error messages to an error reporting service here
   }
 
   render() {
-    const { hasError } = this.state;
+        if (this.state.errorInfo) {
 
-    if (hasError) {
-      return null;
+            // Error path
+            return <Styles.Container className="govuk-width-container" role="main">
+                <PageTitle title={"Something went wrong"} />
+
+                <p className="govuk-body">
+                    There was an error. Please try again later.
+                </p>
+                <p className="govuk-body">
+                    If the problem persists, contact us via <a href="mailto:[email protected]" className="govuk-link">[email protected]</a> and include:
+                </p>
+                <ul className="govuk-list govuk-list--bullet">
+                    <li>details of what you were trying to do that caused the problem</li>
+                    <li>your operating system (such as Windows, Mac OS, Android, iOS) and its version if possible</li>
+                    <li>your platform (such as mobile, tablet, computer)</li>
+                    <li>your browser (such as Chrome, Edge, Firefox, Internet Explorer)</li>
+                    <li>the technical details quoted below</li>
+                </ul>
+                <details className="govuk-details" data-module="govuk-details">
+                    <summary className="govuk-details__summary">
+                        <span className="govuk-details__summary-text">
+                            Technical details
+                        </span>
+                    </summary>
+                    <Styles.DetailsBody className="govuk-details__text">
+                        {this.state.error && this.state.error.toString()}
+                        <br/>
+                        {this.state.errorInfo.componentStack}
+                    </Styles.DetailsBody>
+                </details>
+
+            </Styles.Container>
+
+        }
+        // Normally, just render children
+        return this.props.children;
     }
-    return this.props.children;
-  }
+
 }

src/components/ErrorBoundary/ErrorBoundary.styles.js

@@ -0,0 +1,19 @@
+// @flow
+
+import styled from 'styled-components';
+import type { ComponentType } from 'react';
+
+export const Container: ComponentType<*> = (() => {
+    return styled.main `
+        display: flex;
+        flex-direction: column;
+        margin-top: 45px;
+        margin-bottom: 120px;
+    `;
+})();
+
+export const DetailsBody: ComponentType<*> = (() => {
+    return styled.div `
+        white-space: pre-wrap;
+    `;
+})();

src/components/ErrorBoundary/ErrorBoundary.types.js

@@ -0,0 +1,3 @@
+// @flow
+
+export type Props = {||};

src/components/LineChart/LineChart.js

@@ -21,7 +21,7 @@ const LineChart: ComponentType<Props> = ({ header, tooltipText, data }: Props) =
 
 
     return (
-        <Styles.Container>
+        <Styles.Container className="govuk-!-margin-bottom-9">
             <span className="govuk-heading-s">{ header }</span>
             <Styles.Chart>
                 <Line

src/components/MapTable/Map.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import ReactDomServer from 'react-dom/server'
 
 import axios from "axios";
@@ -7,7 +7,6 @@ import L from "leaflet";
 import { max } from "d3-array";
 import { scaleLinear, scaleSqrt } from "d3-scale";
 
-import ErrorBoundary from "components/ErrorBoundary";
 import URLs from "common/urls";
 
 import 'leaflet/dist/leaflet.css';
@@ -290,10 +289,11 @@ export class Map extends Component<MapProps, {}> {
 
         }
 
-        return <ErrorBoundary>
+        return <Fragment>
             { this.display() }
             <Styles.Map id={ "map" }>{ children }</Styles.Map>
-        </ErrorBoundary>
+        </Fragment>
+
 
     } // render
 

src/components/MapTable/MapTable.js

@@ -131,7 +131,7 @@ export class MapTable extends Component<MapTableProps, {}> {
 
         if (loading) return <Styles.P>Loading&hellip;</Styles.P>
 
-        return <Styles.MainContainer>
+        return <Styles.MainContainer className="govuk-!-margin-top-9 govuk-!-margin-bottom-9">
             <Styles.TabContainer>
                 <div className={ "govuk-tabs" } data-module={ "govuk-tabs" }>
                     <ul className={ "govuk-tabs__list" }>
@@ -227,7 +227,7 @@ export class MapTable extends Component<MapTableProps, {}> {
                 <Description text={
                     `Rates per ${ numeral(RatePerPopulation).format("0,0") } resident population.
                     ${!isMobile && parsedHash.map === "rate"
-                        ? ` Darker shades have higher rates.` 
+                        ? ` Darker shades have higher rates.`
                         : ""}` }
                 />
                 { children }

src/components/PageTitle/PageTitle.js

@@ -16,7 +16,7 @@ const PageTitle: ComponentType<Props> = ({ caption, title, subtitle, backUrl }:
           Back
         </BackLink>
       )}
-      <Styles.Title className="govuk-heading-xl">{title}</Styles.Title>
+      <Styles.Title className="govuk-heading-xl govuk-!-margin-bottom-4">{title}</Styles.Title>
       <Styles.Subtitle className="govuk-body govuk-!-margin-bottom-0">{subtitle}</Styles.Subtitle>
     </Styles.Container>
   );

src/components/PageTitle/PageTitle.styles.js

@@ -38,10 +38,7 @@ export const Caption: ComponentType<*> = (() => {
 })();
 
 export const Title: ComponentType<*> = (() => {
-  return styled.h1`
-    font-size: 3rem;
-    margin-bottom: 20px;
-  `;
+  return styled.h1``;
 })();
 
 export const Subtitle: ComponentType<*> = (() => {

src/components/SmallNumber/SmallNumber.js

@@ -5,7 +5,7 @@ import numeral from "numeral";
 
 export const SmallNumberContainer: Component<Props> = ({ heading, caption="", children }) => {
 
-    return <Styles.MainContainer>
+    return <Styles.MainContainer className="govuk-!-margin-bottom-9">
         {
             caption
                 ? <Styles.HeadingCaption className={ "govuk-caption-l" }>

src/components/StackedBarChart/StackedBarChart.js

@@ -60,7 +60,7 @@ const getBarChartData = ({ previous, change }) => {
 
 
 const getBarChartOptions = (tooltipText, mobileView) => {
-    
+
     const labelFontSize = mobileView ? 11 : 14;
 
     return {
@@ -127,7 +127,7 @@ const StackedBarChart: ComponentType<Props> = ({ header, tooltipText, data, desc
     const mobileView = useResponsiveLayout(500)  === "mobile";
 
     return (
-        <Styles.Container>
+        <Styles.Container className="govuk-!-margin-bottom-9">
             <span className="govuk-heading-s">{header}</span>
             <Styles.Chart>
                 <Bar

src/components/ViewAs/ViewAs.js

@@ -9,7 +9,7 @@ import * as Styles from './ViewAs.styles.js';
 
 const ViewAs: ComponentType<Props> = ({ view, setView }: Props) => {
   return (
-    <Styles.Container>
+    <Styles.Container className="govuk-!-margin-bottom-9">
       <Radios
         value={view}
         onChange={v => setView(v.target.value)}

src/index.scss

@@ -113,21 +113,6 @@ thead.govuk-table__head th{
 }
 
 
-.about,
-.accessibility{
-  margin: auto;
-  width: 800px;
-
-  @media only screen and (max-width: 840px) {
-    width: 600px;
-  }
-
-  @media only screen and (max-width: 640px) {
-    width: 94%;
-  }
-}
-
-
 .about .markdown,
 .accessibility .markdown,
 .disclaimer .markdown {