feat: implement persisted country selection; deps for writing tests

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,3 @@
+<!-- Simple PR template to build some consistency in PRs. -->
+
+## Todo

.vscode/settings.json

@@ -1,8 +1,6 @@
 {
   "editor.formatOnSave": true,
   "editor.formatOnPaste": true,
-  "cSpell.ignoreWords": [
-    "ecotricity",
-    "sunmills"
-  ]
-}
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "cSpell.ignoreWords": ["ecotricity", "sunmills"]
+}

jest-preprocess.js

@@ -0,0 +1,4 @@
+const babelOptions = {
+  presets: ["babel-preset-gatsby"],
+}
+module.exports = require("babel-jest").createTransformer(babelOptions)

jest.config.js

@@ -0,0 +1,19 @@
+/**
+ * See https://gatsby.dev/unit-testing for more info on writing tests.
+ */
+
+module.exports = {
+  transform: {
+    "^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
+  },
+  moduleNameMapper: {
+    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
+  },
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+  globals: {
+    __PATH_PREFIX__: ``,
+  },
+  testURL: `http://localhost`,
+}

package.json

@@ -10,7 +10,8 @@
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
     "lint": "eslint src",
     "start": "npm run develop",
-    "serve": "gatsby serve"
+    "serve": "gatsby serve",
+    "test": "jest"
   },
   "dependencies": {
     "bootstrap": "^4.4.1",
@@ -44,10 +45,14 @@
     "title-case": "^3.0.2"
   },
   "devDependencies": {
+    "babel-jest": "^26.6.1",
+    "babel-preset-gatsby": "^0.5.14",
     "eslint-config-prettier": "^6.9.0",
     "eslint-config-react-app": "^5.1.0",
     "eslint-plugin-prettier": "^3.1.2",
-    "prettier": "^2.0.5"
+    "jest": "^26.6.1",
+    "prettier": "^2.0.5",
+    "react-test-renderer": "^17.0.1"
   },
   "repository": {
     "type": "git",

src/components/CountrySelection.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+
+import Countries from '../countries';
+
+/**
+ * If the user has a country preference in session storage, we don't need to
+ * present the user to select a country. We render a button to _clear_ their selection.
+ */
+const CountryButton = ({}) => {
+  // Get the country code. e.g., "BG" for "Bulgaria"
+  const [country] = useState(sessionStorage.getItem('country_pref'));
+
+  // Default to Great Britain
+  const countryName = Countries.fromAlpha2Code(country || 'GB').name;
+  const countryEmoji = Countries.fromAlpha2Code(country || 'GB').emoji;
+
+  return (
+    <div className="change-country">
+      {countryName && countryEmoji ? (
+        <>
+          <span className="current selected-item">
+            {countryName} {countryEmoji}
+          </span>{' '}
+        </>
+      ) : null}
+
+      <Button href="/select-your-country" className="link text-white">
+        {countryName ? 'Change' : 'Filter site for your'} country
+      </Button>
+    </div>
+  );
+};
+
+export default CountryButton;

src/components/CountrySelection.test.js

@@ -0,0 +1,13 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import CountrySelection from "./CountrySelection";
+
+describe("CountrySelection", () => {
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<CountrySelection />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Footer.jsx

@@ -3,13 +3,12 @@ import React from 'react';
 import Button from 'react-bootstrap/Button';
 import Container from 'react-bootstrap/Container';
 import Col from 'react-bootstrap/Col';
-// import Dropdown from 'react-bootstrap/Dropdown';
 import Row from 'react-bootstrap/Row';
-import { useCountry } from '../context/country-context';
-import Countries from '../countries';
+
+import CountrySelection from './CountrySelection';
+// import { useCountry } from '../context/country-context';
 
 const Footer = () => {
-  const { country } = useCountry();
   return (
     <footer
       className="bg-dark"
@@ -51,6 +50,9 @@ const Footer = () => {
             </div>
           </Col>
           <Col xs={12} md={2} lg={2}>
+            {/* Enable country selection, preview, and clearing. */}
+            <CountrySelection />
+
             <Row noGutters>
               <a
                 href="https://www.netlify.com"
@@ -67,20 +69,6 @@ const Footer = () => {
             <Row noGutters>
               <a href="/">&copy; {new Date().getFullYear()} - Protect.Earth</a>
             </Row>
-
-            {/* <div className="change-country">
-              {country.name ? (
-                <>
-                  <span className="current">
-                    {Countries.fromAlpha2Code(country.code).emoji}{' '}
-                    {country.name}
-                  </span>{' '}
-                </>
-              ) : null}
-              <Button href="/select-your-country" className="link text-white">
-                {country.name ? 'Change' : 'Filter site for your'} country
-              </Button>
-            </div> */}
           </Col>
         </Row>
       </Container>

src/components/RecentLinkItem.jsx

@@ -20,12 +20,13 @@ export default ({ link }) => {
           link.tags.map((tag) => {
             return (
               <Badge
+                key={tag}
                 variant="secondary"
                 className="ml-4"
                 style={{
                   marginLeft: '2em',
-                  'font-size': '60%',
-                  'font-weight': 300,
+                  'fontSize': '60%',
+                  'fontWeight': 300,
                 }}
               >
                 <a href={`/tags/${tag}`} style={{ color: 'white' }}>

src/components/__snapshots__/CountrySelection.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CountrySelection renders correctly 1`] = `
+<div
+  className="change-country"
+>
+  <span
+    className="current selected-item"
+  >
+    United Kingdom
+
+    🇬🇧
+  </span>
+
+  <a
+    className="link text-white btn btn-primary"
+    href="/select-your-country"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+  >
+    Change
+     country
+  </a>
+</div>
+`;

src/countries.js

@@ -15,6 +15,7 @@ const Countries = {
       };
     });
   },
+  // Takes a country code
   fromAlpha2Code: (code) => {
     return {
       code,

src/pages/select-your-country.jsx

@@ -1,14 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { graphql, navigate } from 'gatsby';
 
 import { Layout } from '../components';
 import { useCountry } from '../context/country-context';
 import Countries from '../countries';
 
+/**
+ * If the user has a country preference in session storage, we don't need to
+ * present the user to select a country. We update the button to _clear_ their selection.
+ */
 export default () => {
-  const { country, setCountry, clearCountry } = useCountry();
+  const { clearCountry } = useCountry();
   const countries = Countries.getAll();
 
+  const [country, setCountry] = useState(sessionStorage.getItem('country_pref'))
+
+  /**
+   * When a country is selected, we store
+   * temporary value in session storage that persists through
+   * reloads. This enables users to have some continuity when
+   * refreshing, or returning to the site. We also bind the
+   * update to React's state, so that when a user re-selects
+   * an option, we trigger a state change to refresh the site.
+   */
+  const updateCountry = (country) => {
+    setCountry(country);
+    sessionStorage.setItem('country_pref', country);
+  };
+
   return (
     <Layout title="Select Your Country">
       <div className="select-your-country padding">
@@ -21,7 +40,7 @@ export default () => {
           />
         </div>
         <div>
-          {country.name !== null ? (
+          {country && country.name ? (
             <div className="country-list-item selected" key={country.code}>
               <small>Currently selected</small>
               <div>
@@ -30,7 +49,8 @@ export default () => {
               <button
                 onClick={(e) => {
                   e.preventDefault();
-                  clearCountry();
+                  // Store an empty string in session storage
+                  updateCountry('');
                   navigate('/');
                 }}
               >
@@ -48,8 +68,9 @@ export default () => {
               <div
                 className="country-list-item"
                 key={code}
+
                 onClick={() => {
-                  setCountry(country);
+                  updateCountry(country.code);
                   navigate('/');
                 }}
               >

src/styles/global.scss

@@ -17,11 +17,26 @@ blockquote p {
   display: inline;
 }
 
-// Ensure the selected country is
+.selected-language-block {
+  display: flex;
+  align-items: center;
+}
+
+// Ensure selected language and country is
 // readable on the #333 footer.
-.change-country .current {
+.selected-item {
+  text-align: center;
+  margin-bottom: 7px;
   color: white;
-  margin-bottom: 20px;
+}
+
+.clear-button {
+  padding: 0; // reset default padding applied by React Bootstrap
+}
+
+.change-country {
+  display: flex;
+  flex-direction: column;
 }
 
 /* Select Your Country */