From 73a205dc48ad19ff1a9d1c48df7c4da5bec52bd1 Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Mon, 9 Aug 2021 08:04:24 -0700
Subject: [PATCH] Refactor layout (#486)

* Refactor to move `<DatasetContainer>` out of layout
* `<DatasetContainer>` is now in the methodology page. Starting the review there will help understand the motive for this change.
* Fixed 404 page which seems way out of date.
* Use row/col grid syntax
---
 .../src/components/J40MainGridContainer.tsx   |  30 ++++
 client/src/components/layout.tsx              |  18 +--
 client/src/pages/404.tsx                      |  66 ++++----
 client/src/pages/cejst.tsx                    | 105 +++++++------
 client/src/pages/contact.tsx                  |  64 ++++----
 client/src/pages/index.tsx                    | 145 ++++++++++--------
 client/src/pages/methodology.tsx              |  73 +++++----
 7 files changed, 285 insertions(+), 216 deletions(-)
 create mode 100644 client/src/components/J40MainGridContainer.tsx

diff --git a/client/src/components/J40MainGridContainer.tsx b/client/src/components/J40MainGridContainer.tsx
new file mode 100644
index 00000000..5f3b38a8
--- /dev/null
+++ b/client/src/components/J40MainGridContainer.tsx
@@ -0,0 +1,30 @@
+// Trussworks GridContainer won't allow it to span 100% of the page, so
+// this works around it and tries to hide the complexity in component
+import React, {ReactNode} from 'react';
+import {GridContainer} from '@trussworks/react-uswds';
+
+interface ILayoutProps {
+  children: ReactNode,
+  fullWidth?: boolean,
+  className?: string
+}
+
+const J40MainGridContainer = ({
+  children,
+  fullWidth = false,
+  className = 'j40-grid-container'}: ILayoutProps) => {
+  return fullWidth ? (
+    <div
+      className={'j40-grid-container ' + className}>
+      {children}
+    </div>
+  ) : (
+    <GridContainer
+      containerSize={'desktop-lg'}
+      className={'j40-grid-container ' + className}>
+      {children}
+    </GridContainer>
+  );
+};
+
+export default J40MainGridContainer;
diff --git a/client/src/components/layout.tsx b/client/src/components/layout.tsx
index bedca4ef..dc637de4 100644
--- a/client/src/components/layout.tsx
+++ b/client/src/components/layout.tsx
@@ -1,10 +1,7 @@
 import React, {ReactNode} from 'react';
-import {GridContainer, Grid} from '@trussworks/react-uswds';
 import J40Header from './J40Header';
 import J40Footer from './J40Footer';
 import {URLFlagProvider} from '../contexts/FlagContext';
-import DatasetContainer from '../components/DatasetContainer';
-// this has to be wrong
 
 interface ILayoutProps {
   children: ReactNode,
@@ -12,22 +9,13 @@ interface ILayoutProps {
 }
 
 const Layout = ({children, location}: ILayoutProps) => {
-  const isMethodologyPage = location.pathname.match(/methodology\/?/);
-
   // @ts-ignore
   return (
     <URLFlagProvider location={location}>
       <J40Header location={location}/>
-      <GridContainer containerSize={'desktop-lg'}
-        className={'j40-grid-container'}>
-        <Grid row>
-          <main id={'main-content'}
-            className={'usa-layout-docs j40-main-content desktop:grid-col-12'}>
-            {children}
-          </main>
-        </Grid>
-      </GridContainer>
-      {isMethodologyPage ? <DatasetContainer />: null}
+      <main id={'main-content'}>
+        {children}
+      </main>
       <J40Footer/>
     </URLFlagProvider>
   );
diff --git a/client/src/pages/404.tsx b/client/src/pages/404.tsx
index 6fcc0087..2e29a522 100644
--- a/client/src/pages/404.tsx
+++ b/client/src/pages/404.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
+import Layout from '../components/layout';
+import J40MainGridContainer from '../components/J40MainGridContainer';
 import {Link} from 'gatsby-plugin-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 // styles
-const pageStyles = {
-  color: '#232129',
-  padding: '96px',
-  fontFamily: '-apple-system, Roboto, sans-serif, serif',
-};
 const headingStyles = {
-  marginTop: 0,
+  marginTop: 32,
   marginBottom: 64,
   maxWidth: 320,
 };
@@ -16,6 +14,7 @@ const headingStyles = {
 const paragraphStyles = {
   marginBottom: 48,
 };
+
 const codeStyles = {
   color: '#8A6534',
   padding: 4,
@@ -24,30 +23,39 @@ const codeStyles = {
   borderRadius: 4,
 };
 
+interface I404PageProps {
+  location: Location;
+}
+
 // markup
-const NotFoundPage = () => {
-  return (
-    <main style={pageStyles}>
-      <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry{' '}
-        <span role="img" aria-label="Pensive emoji">
-          😔
-        </span>{' '}
-        we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === 'development' ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
-    </main>
+const NotFoundPage =({location}: I404PageProps) => {
+  return (<Layout location={location}>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
+        <h1 style={headingStyles}>Page not found</h1>
+      </Grid></Grid>
+      <Grid row><Grid col>
+        <p style={paragraphStyles}>
+            Sorry{' '}
+          <span role="img" aria-label="Pensive emoji">
+            😔
+          </span>{' '}
+            we couldn’t find what you were looking for.
+          <br/>
+          {process.env.NODE_ENV === 'development' ? (
+              <>
+                <br/>
+                Try creating a page
+                in <code style={codeStyles}>src/pages/</code>.
+                <br/>
+              </>
+            ) : null}
+          <br/>
+          <Link to="/">Go home</Link>.
+        </p>
+      </Grid></Grid>
+    </J40MainGridContainer>
+  </Layout>
   );
 };
 
diff --git a/client/src/pages/cejst.tsx b/client/src/pages/cejst.tsx
index f6bf33cd..ed740911 100644
--- a/client/src/pages/cejst.tsx
+++ b/client/src/pages/cejst.tsx
@@ -3,64 +3,75 @@ import Layout from '../components/layout';
 import MapWrapper from '../components/mapWrapper';
 import HowYouCanHelp from '../components/HowYouCanHelp';
 import DownloadPacket from '../components/downloadPacket';
+import J40MainGridContainer from '../components/J40MainGridContainer';
 import * as styles from './cejst.module.scss';
+import {Grid} from '@trussworks/react-uswds';
+
 
 interface IMapPageProps {
   location: Location;
 }
 
-
 const CEJSTPage = ({location}: IMapPageProps) => {
   // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now
   //   We will bring back later when we have interactive controls.
-  return (
-    <Layout location={location}>
-      <section>
-        <h2>Just Progress communities</h2>
-        <div className={styles.disclaimer}>
-          <div className={styles.textBox}>
-            <p>
-              Just Progress helps identify and prioritize communities across the
-              United States and U.S. territories
-              that have been historically overburdened and underserved. These
-              communities will receive 40% of
-              the benefits from investments in key areas outlined by the
-              &nbsp;
-              <a
-                href={'https://www.whitehouse.gov/briefing-room/' +
-                'presidential-actions/2021/01/27/' +
-                'executive-order-on-tackling-the-climate-' +
-                'crisis-at-home-and-abroad/'}
-                target={'_blank'}
-                rel={'noreferrer'}>
-                Executive Order on Tackling the Climate Crisis at Home and
-                Abroad
-              </a>.
-            </p>
-            <p>
-              Download the Just Progress packet or explore the map below to see
-              the list of prioritized communites. To
-              learn more about how these communities were prioritized check out
-              the
-              &nbsp;
-              <a
-                href={'./methodology'}>
-                Methodology
-              </a>
-              &nbsp;
-              page.
-            </p>
+  return (<Layout location={location}>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
+        <section>
+          <h2>Just Progress communities</h2>
+          <div className={styles.disclaimer}>
+            <div className={styles.textBox}>
+              <p>
+                Just Progress helps identify and prioritize communities across
+                the United States and U.S. territories
+                that have been historically overburdened and underserved.
+                These communities will receive 40% of
+                the benefits from investments in key areas outlined by the
+                &nbsp;
+                <a
+                  href={'https://www.whitehouse.gov/briefing-room/' +
+                  'presidential-actions/2021/01/27/' +
+                  'executive-order-on-tackling-the-climate-' +
+                  'crisis-at-home-and-abroad/'}
+                  target={'_blank'}
+                  rel={'noreferrer'}>
+                  Executive Order on Tackling the Climate Crisis at Home and
+                  Abroad
+                </a>.
+              </p>
+              <p>
+                Download the Just Progress packet or explore the map below to
+                see the list of prioritized communities. To learn more about
+                how
+                these communities were prioritized check out the
+                &nbsp;
+                <a
+                  href={'./methodology'}>
+                  Methodology
+                </a>
+                &nbsp;
+                page.
+              </p>
+            </div>
+            <DownloadPacket/>
           </div>
-          <DownloadPacket/>
-        </div>
-      </section>
+        </section>
+      </Grid></Grid>
 
-      <section>
-        <MapWrapper location={location} />
-        <HowYouCanHelp/>
-      </section>
-    </Layout>
-  );
+      <Grid row><Grid col>
+        <section>
+          <MapWrapper location={location}/>
+        </section>
+      </Grid></Grid>
+
+      <Grid row><Grid col>
+        <section>
+          <HowYouCanHelp/>
+        </section>
+      </Grid></Grid>
+    </J40MainGridContainer>
+  </Layout>);
 };
 
 export default CEJSTPage;
diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx
index 6c97fee7..9761debd 100644
--- a/client/src/pages/contact.tsx
+++ b/client/src/pages/contact.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import Layout from '../components/layout';
+import J40MainGridContainer from '../components/J40MainGridContainer';
 import {FormattedMessage} from 'gatsby-plugin-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 interface ContactPageProps {
   location: Location;
@@ -11,39 +13,45 @@ const ContactPage = ({location}: ContactPageProps) => {
   const techemail = 'screeningtool.support@usds.gov';
 
   return (<Layout location={location}>
-    <section className={'usa-prose'}>
-      <h2><FormattedMessage
-        id={'contact.pageheader'}
-        description={'H2 header for contact page'}
-        defaultMessage={'Contact'}/></h2>
-      <h3><FormattedMessage
-        id={'contact.sectionheader'}
-        description={'Heading for page to allow users to contact project maintainers'}
-        defaultMessage={'Email us'}/></h3>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
+        <section className={'usa-prose'}>
+          <h2><FormattedMessage
+            id={'contact.pageheader'}
+            description={'H2 header for contact page'}
+            defaultMessage={'Contact'}/></h2>
+          <h3><FormattedMessage
+            id={'contact.sectionheader'}
+            description={'Heading for page to allow users to contact project maintainers'}
+            defaultMessage={'Email us'}/></h3>
 
-      <p>
-        <FormattedMessage
-          id={'contact.general'}
-          description={'Contact page body text'}
-          defaultMessage={`
+          <p>
+            <FormattedMessage
+              id={'contact.general'}
+              description={'Contact page body text'}
+              defaultMessage={`
               For general feedback, email {general_email_address}
           `}
-          values={{
-            general_email_address: <a href={`mailto:${generalemail}`}>{generalemail}</a>,
-          }}/>
-      </p>
-      <p>
-        <FormattedMessage
-          id={'contact.general'}
-          description={'Contact page body text'}
-          defaultMessage={`
+              values={{
+                general_email_address:
+                    <a href={`mailto:${generalemail}`}>{generalemail}</a>,
+              }}/>
+          </p>
+          <p>
+            <FormattedMessage
+              id={'contact.general'}
+              description={'Contact page body text'}
+              defaultMessage={`
               For technical support, email {tech_email_address}
           `}
-          values={{
-            tech_email_address: <a href={`mailto:${techemail}`}>{techemail}</a>,
-          }}/>
-      </p>
-    </section>
+              values={{
+                tech_email_address:
+                    <a href={`mailto:${techemail}`}>{techemail}</a>,
+              }}/>
+          </p>
+        </section>
+      </Grid></Grid>
+    </J40MainGridContainer>
   </Layout>
   );
 };
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index 90f2e29b..40cb4f7c 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import Layout from '../components/layout';
 import AreasOfFocusList from '../components/areasOfFocusList';
+import J40MainGridContainer from '../components/J40MainGridContainer';
 import {FormattedMessage, useIntl} from 'gatsby-plugin-intl';
 import {defineMessages} from 'react-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 interface IndexPageProps {
   location: Location;
@@ -20,9 +22,9 @@ const IndexPage = ({location}: IndexPageProps) => {
     presidentalLinkUri: {
       id: 'index.presidentalLinkUri',
       defaultMessage: 'https://www.whitehouse.gov/briefing-room/' +
-                      'presidential-actions/2021/01/27/' +
-                      'executive-order-on-tackling-the-climate-' +
-                      'crisis-at-home-and-abroad/',
+        'presidential-actions/2021/01/27/' +
+        'executive-order-on-tackling-the-climate-' +
+        'crisis-at-home-and-abroad/',
       description: 'Link url to presidential actions executive order. Part of paragraph 3',
     },
     presidentalLinkLabel: {
@@ -48,13 +50,15 @@ const IndexPage = ({location}: IndexPageProps) => {
   });
 
   return (<Layout location={location}>
-    <section className={'usa-prose'}>
-      <h1>{intl.formatMessage(messages.aboutHeader)}</h1>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
+        <section className={'usa-prose'}>
+          <h1>{intl.formatMessage(messages.aboutHeader)}</h1>
 
-      <p><FormattedMessage
-        id={'index.aboutContent.p1'}
-        description={'paragraph 1 of main content on index page'}
-        defaultMessage={`
+          <p><FormattedMessage
+            id={'index.aboutContent.p1'}
+            description={'paragraph 1 of main content on index page'}
+            defaultMessage={`
             In an effort to address historical environmental injustices,
             President Biden created the Justice40 Initiative on January
             27, 2021. The Justice40 Initiative directs 40% of the
@@ -62,10 +66,10 @@ const IndexPage = ({location}: IndexPageProps) => {
             overburdened and underserved communities.
           `}/></p>
 
-      <p><FormattedMessage
-        id='index.aboutContent.p2'
-        description={'paragraph 2 of main content on index page'}
-        defaultMessage={`
+          <p><FormattedMessage
+            id="index.aboutContent.p2"
+            description={'paragraph 2 of main content on index page'}
+            defaultMessage={`
             Federal agencies will prioritize benefits using a new
             climate and economic justice screening tool. This screening
             tool will be a map that visualizes data to compare the
@@ -79,62 +83,66 @@ const IndexPage = ({location}: IndexPageProps) => {
           the lived experiences of community members.
         `}/></p>
 
-      <p><FormattedMessage
-        id={'index.aboutContent.p3'}
-        description={'paragraph 3 of main content on index page'}
-        defaultMessage={`
+          <p><FormattedMessage
+            id={'index.aboutContent.p3'}
+            description={'paragraph 3 of main content on index page'}
+            defaultMessage={`
           Read more about the Justice40 Initiative in President Biden’s 
           {presidentLink}
           `}
-        values={{presidentLink:
-              <a href={intl.formatMessage(messages.presidentalLinkUri)}
-                target='_blank'
-                rel='noreferrer'>{intl.formatMessage(messages.presidentalLinkLabel)}
-              </a>}}/>
-      </p>
+            values={{
+              presidentLink:
+                <a
+                  href={intl.formatMessage(messages.presidentalLinkUri)}
+                  target="_blank"
+                  rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
+                </a>,
+            }}/>
+          </p>
 
-      <h2><FormattedMessage
-        id={'index.section2.header'}
-        description={'section 2 header'}
-        defaultMessage={'Areas of Focus'}/></h2>
+          <h2><FormattedMessage
+            id={'index.section2.header'}
+            description={'section 2 header'}
+            defaultMessage={'Areas of Focus'}/></h2>
 
-      <AreasOfFocusList />
+          <AreasOfFocusList/>
 
-      <h2><FormattedMessage
-        id={'index.section3.header'}
-        description={'section 3 header'}
-        defaultMessage={'A Transparent, Community-First Approach'}/></h2>
+          <h2><FormattedMessage
+            id={'index.section3.header'}
+            description={'section 3 header'}
+            defaultMessage={'A Transparent, Community-First Approach'}/></h2>
 
-      <p><FormattedMessage
-        id={'index.section3.intro'}
-        description={'section 3 content paragraph 1 intro'}
-        defaultMessage={`
+          <p><FormattedMessage
+            id={'index.section3.intro'}
+            description={'section 3 content paragraph 1 intro'}
+            defaultMessage={`
             Successful initiatives are guided by direct input from the
             communities they are serving. CEQ commits to transparency,
             inclusivity, and iteration in building this screening tool.`}/>
-      </p>
+          </p>
 
-      <p>
-        <FormattedMessage
-          id={'index.section3.transparent'}
-          description={'section 3 content transparent'}
-          defaultMessage={`
+          <p>
+            <FormattedMessage
+              id={'index.section3.transparent'}
+              description={'section 3 content transparent'}
+              defaultMessage={`
               {inlineHeader} The code and data behind the screening
               tool are open source, meaning it is available for the public
               to review and contribute to. This tool is being developed
               publicly so that communities, academic experts, and anyone
               who’s interested can be involved in the tool-building
               process.`}
-          values={{
-            inlineHeader: <i>{intl.formatMessage(messages.transparentLabel)}</i>,
-          }}/>
-      </p>
+              values={{
+                inlineHeader:
+                  <i>{intl.formatMessage(messages.transparentLabel)}</i>,
+              }}/>
+          </p>
 
-      <p>
-        <FormattedMessage
-          id={'index.section3.inclusive'}
-          description={'section 3 content inclusive'}
-          defaultMessage={`
+          <p>
+            <FormattedMessage
+              id={'index.section3.inclusive'}
+              description={'section 3 content inclusive'}
+              defaultMessage={`
               {inlineHeader} Many areas which lack investments also
               lack environmental data and would be overlooked using
               available environmental data. CEQ is actively reaching out
@@ -142,16 +150,17 @@ const IndexPage = ({location}: IndexPageProps) => {
               decision-making, such as groups in rural and tribal areas,
               to understand their needs and ask for their input.
           `}
-          values={{
-            inlineHeader: <i>{intl.formatMessage(messages.inclusiveLabel)}</i>,
-          }}/>
-      </p>
+              values={{
+                inlineHeader:
+                  <i>{intl.formatMessage(messages.inclusiveLabel)}</i>,
+              }}/>
+          </p>
 
-      <p>
-        <FormattedMessage
-          id={'index.section3.iterative'}
-          description={'section 3 content iterative'}
-          defaultMessage={`
+          <p>
+            <FormattedMessage
+              id={'index.section3.iterative'}
+              description={'section 3 content iterative'}
+              defaultMessage={`
               {inlineHeader} The initial community prioritization list
               provided by the screening tool is the beginning of a
               collaborative process in score refinement, rather than a
@@ -164,13 +173,15 @@ const IndexPage = ({location}: IndexPageProps) => {
               being built and the processes for stakeholder and public
               engagement.
           `}
-          values={{
-            inlineHeader: <i>{intl.formatMessage(messages.iterativeLabel)}</i>,
-          }}/>
-      </p>
-    </section>
-  </Layout>
-  );
+              values={{
+                inlineHeader:
+                  <i>{intl.formatMessage(messages.iterativeLabel)}</i>,
+              }}/>
+          </p>
+        </section>
+      </Grid></Grid>
+    </J40MainGridContainer>
+  </Layout>);
 };
 
 export default IndexPage;
diff --git a/client/src/pages/methodology.tsx b/client/src/pages/methodology.tsx
index af7e5b04..f269c6df 100644
--- a/client/src/pages/methodology.tsx
+++ b/client/src/pages/methodology.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react';
 import Layout from '../components/layout';
+import DatasetContainer from '../components/DatasetContainer';
+import J40MainGridContainer from '../components/J40MainGridContainer';
+import {Grid} from '@trussworks/react-uswds';
 
 interface MethodPageProps {
   location: Location;
@@ -7,36 +10,46 @@ interface MethodPageProps {
 
 // markup
 const IndexPage = ({location}: MethodPageProps) => {
-  return (
-    <Layout location={location}>
-      <section>
-        <h1>Methodology</h1>
-        <p>
-        The Just Progress tool combines demographic, environmental, and
-        socio-economic data to generate a cumulative index score, referred to
-        as the Just Progress Index. The tool currently utilizes national,
-        publically-available data from the United States Census Bureau’s
-        American Community Survey (ACS) and the EPA’s EJScreen tool.
-        </p>
-        <p>
-        The various inputs into the Just Progress Index are averaged into 2
-        categories: Pollution Burden and Demographics.
-        </p>
-        <p>
-        Pollution Burden: health risks arising from proximity and potential
-        exposures to pollution and other adverse environmental conditions
-        </p>
-        <p>
-        Demographics: sensitive populations and socioeconomic factors that
-        make a community more vulnerable
-        </p>
-        <p>
-          <b>Pollution Burden average x Demographics average = Just Progress
-          Index</b>
-        </p>
-      </section>
-    </Layout>
-  );
+  return (<Layout location={location}>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
+        <section>
+          <h1>Methodology</h1>
+          <p>
+            The Just Progress tool combines demographic, environmental, and
+            socio-economic data to generate a cumulative index score, referred
+            to as the Just Progress Index. The tool currently utilizes
+            national,
+            publically-available data from the United States Census Bureau’s
+            American Community Survey (ACS) and the EPA’s EJScreen tool.
+          </p>
+          <p>
+            The various inputs into the Just Progress Index are averaged into
+            2 categories: Pollution Burden and Demographics.
+          </p>
+          <p>
+            Pollution Burden: health risks arising from proximity and
+            potential exposures to pollution and other adverse environmental
+            conditions
+          </p>
+          <p>
+            Demographics: sensitive populations and socioeconomic factors that
+            make a community more vulnerable
+          </p>
+          <p>
+            <b>Pollution Burden average x Demographics average = Just Progress
+              Index</b>
+          </p>
+        </section>
+      </Grid></Grid>
+    </J40MainGridContainer>
+
+    <J40MainGridContainer fullWidth={true}>
+      <Grid row><Grid col>
+        <DatasetContainer/>
+      </Grid></Grid>
+    </J40MainGridContainer>
+  </Layout>);
 };
 
 export default IndexPage;