Global State, although doesn't solve issue. Will change location direct

client/gatsby-browser.js

@@ -1,7 +1,6 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
+import React from "react"
+import GlobalContextProvider from "./src/context/GlobalContextProvider"
 
-// You can delete this file if you're not using it
+export const wrapRootElement = ({ element }) => {
+  return <GlobalContextProvider>{element}</GlobalContextProvider>
+}

client/gatsby-ssr.js

@@ -1,7 +1,7 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/ssr-apis/
- */
+const React = require("react")
+const GlobalContextProvider = require("./src/context/GlobalContextProvider")
+  .default
 
-// You can delete this file if you're not using it
+exports.wrapRootElement = ({ element }) => {
+  return <GlobalContextProvider>{element}</GlobalContextProvider>
+}

client/src/components/country-page.js

@@ -21,9 +21,7 @@ export default class CountryPage extends React.Component{
     constructor(props){
       super(props);
       this.state = {
-        countries: props.countries,
         selected_country: props.selected_country,
-        countries_in_select_box: props.select_countries,
         numberFormat: new Intl.NumberFormat(),
         field: 'confirmed',
         per: 'total',
@@ -39,11 +37,15 @@ export default class CountryPage extends React.Component{
     return this.state.numberFormat.format(numberString)
   }
 
-
+  heroSelectFn = (e) => {
+      this.setState({selected_country: e.target.value})   
+  }
 
 
   render(){
-    const {selected_country, countries_in_select_box, countries, field, sort, per, limit} = this.state
+    const {countries, select_countries} = this.props.stateHook
+    console.log(countries)
+    const {selected_country, field, sort, per, limit} = this.state
 
     let full_field_name = field === 'confirmed' ? 
       per === 'total' ? 'confirmed' : 'confirmed_per_mil' :
@@ -67,10 +69,7 @@ export default class CountryPage extends React.Component{
     return (
       <React.Fragment>
         <SEO title={selected_country + ' COVID-19 Progress'} />
-        <Hero 
-          countries={countries_in_select_box} 
-          selected_country={selected_country} 
-        />
+        <Hero countries={select_countries} selected_country={selected_country} selectFn={this.heroSelectFn}/>
         <section className="section">
           <div className="container">
             <div className="columns info">

client/src/components/footer.js

@@ -21,5 +21,6 @@ const Footer = () => (
             </p>
         </div>
     </section>
-)
+  )
+
 export default Footer

client/src/components/hero.js

@@ -1,11 +1,10 @@
 import React from 'react'
-import { navigate } from "@reach/router"
 import { Link } from "gatsby"
 import logo from '../images/icon_green_180.png'
 
-const Hero = ({selected_country, countries}) => {
+const Hero = ({countries, selected_country, selectFn}) => {
   const links = [
-    //{   path: '/',                label: 'World'    },
+    {   path: '/',                label: 'World'    },
     {   path: '/new-zealand',     label: 'NZ'       },
     {   path: '/australia',       label: 'AU'       },
     {   path: '/united-kingdom',  label: 'UK'       },
@@ -41,9 +40,7 @@ const Hero = ({selected_country, countries}) => {
                     <div className="field">
                       <div className="control">
                         <div className="select">
-                          <select value={selected_country} onChange={(e) => {
-                            if(e.target.value) navigate(`/${e.target.value.toLowerCase().replace(/\s+/g, "-")}`)
-                          }}>
+                          <select value={selected_country} onChange={selectFn}>
                             <option value=''>Choose your country</option>
                             {countries.map( ({country_name } ) => (
                               <option key={country_name} value={country_name}>{country_name}</option>

client/src/context/GlobalContextProvider.js

@@ -0,0 +1,63 @@
+import React from "react"
+import  { graphql, useStaticQuery } from 'gatsby'
+
+export const GlobalStateContext = React.createContext()
+export const GlobalDispatchContext = React.createContext()
+
+
+function reducer(state, action) {
+    switch (action.type) {
+      case "TOGGLE_THEME": {
+        return {
+          ...state,
+          theme: state.theme === "light" ? "dark" : "light",
+        }
+      }
+      default:
+        throw new Error("Bad Action Type")
+    }
+  }
+
+const GlobalContextProvider = ({ children }) => {
+    const globalData = useStaticQuery(graphql`query {
+        countries: allCountriesJson(sort: {order: DESC, fields: highest_confirmed}, filter: {highest_confirmed: {gte: 10}, population: {gte: 1000000}}) {
+            nodes {
+                country_name
+                id
+                time_series {
+                    date
+                    confirmed
+                    confirmed_per_mil
+                    deaths
+                    deaths_per_mil
+                    recovered
+                    recovered_per_mil
+                }
+                highest_confirmed
+                population
+            }
+        }
+        select_countries: allCountriesJson(sort: {order: ASC, fields: country_name}, filter: {highest_confirmed: {gte: 10}, population: {gte: 1000000}}) {
+            nodes {
+                country_name
+                highest_confirmed
+            }
+        }
+    }`)
+
+
+    const [state, dispatch] = React.useReducer(reducer, {
+        countries: globalData.countries.nodes,
+        select_countries: globalData.select_countries.nodes
+    });
+
+  return (
+    <GlobalStateContext.Provider value={state}>
+        <GlobalDispatchContext.Provider value={dispatch}>
+            {children}
+        </GlobalDispatchContext.Provider>
+    </GlobalStateContext.Provider>
+  )
+}
+
+export default GlobalContextProvider

client/src/pages/index.js

@@ -1,16 +1,7 @@
 import React from "react"
-import { graphql} from "gatsby"
-import Hero from "../components/hero"
 import SEO from "../components/seo"
-import Tabs from "../components/tabs"
-
-import CountryOverviewGraph from "../components/country-overview-graph"
-import GridBar from "../components/grid-bar"
-import GridItem from "../components/grid-item"
-import Footer from "../components/footer"
-import GetTopCountries from '../utils/get-top-countries'
-import SetupCountry from '../utils/setup-country'
-
+import Hero from "../components/hero"
+import { navigate } from "@reach/router"
 import 'bulma/css/bulma.css'
 import '../styles/custom.css'
 
@@ -23,162 +14,28 @@ export default class IndexPage extends React.Component{
 		super(props);
 		this.state = {
       countries: props.data.countries.nodes,
-      countries_in_select_box: props.data.select_countries.nodes,
-      selected_country: 'New Zealand',
-      numberFormat: new Intl.NumberFormat(),
-      field: 'confirmed',
-      per: 'total',
-      sort: 'worst',
-      limit: 60,
-      width:  800,
-      height: 182,
-      min_days_ahead: 3
+      select_countries: props.data.select_countries.nodes
     }
   }
 
-  tidyFormat = (numberString) => {
-    return this.state.numberFormat.format(numberString)
+  heroSelectFn = (e) =>  {
+    if(e.target.value) 
+      navigate(`/${e.target.value.toLowerCase().replace(/\s+/g, "-")}`)
   }
 
 
 
 
   render(){
-
-    const {selected_country, countries_in_select_box, countries, field, sort, per, limit} = this.state
 
-    let full_field_name = field === 'confirmed' ? 
-      per === 'total' ? 'confirmed' : 'confirmed_per_mil' :
-      per === 'total' ? 'deaths' : 'deaths_per_mil'
-
-
-    const active_country = SetupCountry({
-      country: countries.filter( (c) => c.country_name ===  this.state.selected_country )[0],
-      field: full_field_name
-    })
-
-
-    const topCountries = GetTopCountries({ 
-      countries, 
-      active_country, 
-      field: full_field_name, 
-      min_days_ahead: this.state.min_days_ahead, 
-      sort, 
-      limit 
-    })
-
-
     return (
       <React.Fragment>
         <SEO title="COVID-19" />
-        <Hero 
-          countries={countries_in_select_box} 
-          selected_country={selected_country}
-        />
-        <section className="section">
-          <div className="container">
-            <div className="columns info">
-              <div className="column"> 
-                <h2 className="is-size-3 title">
-                  {active_country.country_name}
-                </h2>
-                <p className="is-size-4 subtitle">
-                  {
-                    // Notice use of country wide constant variable, not dynamically based on highest. due to sorting
-                  active_country.highest_confirmed ? this.tidyFormat(active_country.highest_confirmed) + ' Cases' : ''}
-                  <span style={{float: 'right'}}>
-                    {active_country.highest.deaths ? this.tidyFormat(active_country.highest.deaths) + ' Deaths' : ''}
-                  </span>
-                </p>  
-
-                <div className="box" style={{padding: '10px'}}>
-                  <CountryOverviewGraph 
-                    active_country={active_country}
-                    field={field}
-                    full_field_name={full_field_name}
-                    width={this.state.width}
-                  />
-                </div>
-              </div>
-              <div className="column">
-                <div className="field is-grouped is-horizontal">
-                  <div className="control">
-                    <div className="select">
-                      <select value={this.state.field} onChange={e => this.setState({field: e.target.value})}>
-                        <option value="confirmed">Confirmed Cases</option>
-                        <option value="deaths">Deaths</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="control">
-                    <div className="select">
-                      <select value={this.state.per} onChange={e => this.setState({per: e.target.value})}>
-                        <option value="total">Total</option>
-                        <option value="per_million">Per Millon</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <Tabs country_name={active_country.country_name} min_days={this.state.min_days_ahead}/>
-              </div>
-            </div>
-          </div>                
-        </section>
-        <GridBar 
-          active_country_name={active_country.country_name}
-          per={this.state.per}
-          field={this.state.field}
-          sort={this.state.sort}
-          length={topCountries.length}
-          fieldFn={e => this.setState({field: e.target.value})}
-          perFn={e => this.setState({per: e.target.value})}
-          sortFn={e => this.setState({sort: e.target.value})}
-        />
-        <section className="section">
-          <div className="container">
-            <div className="columns" style={{flexWrap: 'wrap'}}>
-              { topCountries.map( (country, i) => (
-                <GridItem 
-                  key={i}
-                  country={country} 
-                  active_country={active_country} 
-                  openModalFn={ () => this.setState({ modal_open: true, active_country, comparable_country: country } ) }
-                  per={per}
-                  field={field}
-                  tidy={this.tidyFormat}
-                  width={this.state.width}
-                />
-              ))}              
-            </div>
-          </div>
-        </section>
-        <Footer />
+        <Hero countries={this.state.select_countries} selected_country='' selectFn={this.heroSelectFn}/>
+        <p>yo!</p>
       </React.Fragment>
     )
-  }
-
-  /**
-   * Calculate & Update state of new dimensions
-   */
-  updateDimensions = () => {  
-    this.setState({ width: window.innerWidth, height: window.innerHeight });
-  }
-
-  /**
-   * Add event listener
-   */
-  componentDidMount = () => {
-    this.updateDimensions();
-    window.addEventListener("resize", this.updateDimensions);
-  }
-
-  /**
-   * Remove event listener
-   */
-  componentWillUnmount = () => {
-    window.removeEventListener("resize", this.updateDimensions);
-  }
-
+  }  
 }
 
 
@@ -209,4 +66,4 @@ export const query = graphql`
     }
   }
   
-`
+`