v2.0.0

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/.next
 
 # misc
 .DS_Store

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -4,35 +4,87 @@
   "private": true,
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
+    "@babel/core": "7.9.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.10",
     "@sentry/browser": "^5.16.1",
     "@stripe/react-stripe-js": "^1.1.2",
     "@stripe/stripe-js": "^1.7.0",
+    "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "@types/styled-components": "^5.1.0",
+    "@typescript-eslint/eslint-plugin": "^2.10.0",
+    "@typescript-eslint/parser": "^2.10.0",
     "apollo-boost": "^0.4.9",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-named-asset-import": "^0.3.6",
+    "babel-preset-react-app": "^9.1.2",
+    "camelcase": "^5.3.1",
+    "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "css-loader": "3.4.2",
     "date-fns": "^2.14.0",
+    "dotenv": "8.2.0",
+    "dotenv-expand": "5.1.0",
     "draft-js": "^0.11.6",
-    "graphql": "^15.0.0",
+    "eslint": "^6.6.0",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-loader": "3.0.3",
+    "eslint-plugin-flowtype": "4.6.0",
+    "eslint-plugin-import": "2.20.1",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "file-loader": "4.3.0",
+    "fs-extra": "^8.1.0",
+    "graphql": "^14.3.1",
+    "html-webpack-plugin": "4.0.0-beta.11",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "24.9.0",
+    "jest-environment-jsdom-fourteen": "1.0.1",
+    "jest-resolve": "24.9.0",
+    "jest-watch-typeahead": "0.4.2",
+    "mini-css-extract-plugin": "0.9.0",
+    "next": "^9.4.4",
+    "nextjs-progressbar": "^0.0.5",
+    "nprogress": "^0.2.0",
+    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "pnp-webpack-plugin": "1.6.4",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-normalize": "8.0.1",
+    "postcss-preset-env": "6.7.0",
+    "postcss-safe-parser": "4.0.1",
     "react": "^16.13.1",
+    "react-app-polyfill": "^1.0.6",
+    "react-dev-utils": "^10.2.1",
     "react-dom": "^16.13.1",
     "react-ga": "^3.0.0",
-    "react-helmet": "^6.1.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "resolve": "1.15.0",
+    "resolve-url-loader": "3.1.1",
+    "sass-loader": "8.0.2",
+    "semver": "6.3.0",
+    "style-loader": "0.23.1",
     "styled-components": "^5.1.1",
-    "typescript": "^3.9.5"
+    "terser-webpack-plugin": "2.3.5",
+    "ts-pnp": "1.1.6",
+    "typescript": "^3.9.5",
+    "url-loader": "2.3.0",
+    "webpack": "4.42.0",
+    "webpack-dev-server": "3.10.3",
+    "webpack-manifest-plugin": "2.2.0",
+    "workbox-webpack-plugin": "4.3.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next",
+    "start": "next start -p $PORT",
+    "build": "next build",
+    "heroku-postbuild": "yarn build",
+    "clean": "rm -rf node_modules"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -51,10 +103,65 @@
   },
   "devDependencies": {
     "@types/draft-js": "^0.10.40",
+    "@types/nprogress": "^0.2.0",
     "@types/react": "^16.8.0",
-    "@types/react-helmet": "^6.0.0",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/styled-components": "^5.1.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9"
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jest-environment-jsdom-fourteen",
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
   }
 }

pages/_app.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { AppProps } from "next/app"
+import AppContext from "../src/context/AppContext"
+import ErrorReportingBoundary from "../src/common/ErrorReportingBoundry"
+import Layout from "../src/common/Layout"
+import ProgressBar from "../src/common/ProgressBar"
+import * as Sentry from "@sentry/browser"
+import "./_app.css"
+
+const dsn = process.env.NEXT_PUBLIC_SENTRY
+Sentry.init({ dsn })
+
+function VYSApp({ Component, pageProps }: AppProps) {
+  return (
+    <ErrorReportingBoundary>
+      <AppContext>
+        <Layout>
+          <ProgressBar options={{ easing: "ease" }} color="#344051" />
+          <Component {...pageProps} />
+        </Layout>
+      </AppContext>
+    </ErrorReportingBoundary>
+  )
+}
+
+export default VYSApp

pages/_document.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { renderToString } from "react-dom/server"
+import Document, { DocumentContext } from "next/document"
+import { ServerStyleSheet } from "styled-components"
+import { Input } from "../src/common/elements"
+
+export default class VYSDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />) })
+
+      // Wasn't picking up the styling for this element.
+      renderToString(sheet.collectStyles(<Input />))
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}

src/pages/ContactUs/ContactUs.tsx → pages/contact-us.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useCallback } from "react"
+import React, { useEffect } from "react"
 import styled from "styled-components"
-import { useAnalytics } from "../../context/Analytics"
-import ErrorReportingBoundry from "../../common/ErrorReportingBoundry"
-import { useMetaData } from "../../context/MetaData"
+import { useAnalytics } from "../src/context/Analytics"
+import ErrorReportingBoundry from "../src/common/ErrorReportingBoundry"
+import Seo from "../src/common/Seo"
+import { useMetaData } from "../src/context/MetaData"
 
 const Wrapper = styled.div`
   padding: 2rem;
@@ -14,22 +15,26 @@ const ContactUs = () => {
   const analytics = useAnalytics()
   const MetaData = useMetaData()
 
-  const setMetaData = useCallback(() => {
-    if (!MetaData) return
-    MetaData.setMetaDescription("Contact our small but mighty team to help resolve a problem.")
-    MetaData.setTitle("Contact Us")
-  }, [MetaData])
+  /**
+   * set the title
+   */
+  if (MetaData && MetaData.safeSetTitle) {
+    MetaData.safeSetTitle("Contact Us")
+  }
 
   /**
    * Analytics Report Page View
    */
   useEffect(() => {
     analytics?.pageView()
-    setMetaData()
-  }, [analytics, setMetaData])
+  }, [analytics])
 
   return (
     <Wrapper>
+      <Seo
+        metaDescription="Contact our small but mighty team to help resolve a problem."
+        title="Contact Us | Voice Your Stance"
+      />
       <ErrorReportingBoundry>
         <h1>Contact Us</h1>
         <p>