Our415 87 header nav base

.eslintrc.js

@@ -41,6 +41,7 @@ module.exports = {
     "no-underscore-dangle": "off",
     "react-hooks/exhaustive-deps": "error", // Default is 'warn'; we upgrade to 'error' because otherwise warnings are just noise
     "react/forbid-prop-types": "off",
+    "react/no-danger": "off",
     "react/prefer-stateless-function": "off",
     "react/prop-types": "off",
     "react/jsx-filename-extension": ["error", { extensions: [".tsx"] }],
@@ -69,7 +70,10 @@ module.exports = {
         "@typescript-eslint/no-unsafe-call": "off",
         "@typescript-eslint/no-unsafe-member-access": "off",
         "@typescript-eslint/no-unsafe-return": "off",
-        "@typescript-eslint/no-unused-vars": "error",
+        "@typescript-eslint/no-unused-vars": [
+          "error",
+          { ignoreRestSiblings: true },
+        ],
         "@typescript-eslint/no-unused-expressions": "error",
         "@typescript-eslint/require-await": "off",
         "@typescript-eslint/restrict-template-expressions": "off",

.github/workflows/build_and_test.yml

@@ -0,0 +1,48 @@
+name: Build, lint and run unit tests.
+
+on:
+  pull_request:
+    branches: [main, development]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+      - run: npm i
+      - run: npm run prettier
+      - run: npm run lint
+  build_and_test_app:
+    runs-on: ubuntu-latest
+    environment: "dev"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+      - run: npm i
+      - run: npm run test
+      - run: npm run build
+        env:
+          AUTH0_DOMAIN: ${{ secrets.AUTH0_DOMAIN }}
+          AUTH0_CLIENT_ID: ${{ secrets.AUTH0_CLIENT_ID }}
+          AUTH0_AUDIENCE: ${{ secrets.AUTH0_AUDIENCE }}
+          AUTH0_REDIRECT_URI: ${{ secrets.AUTH0_REDIRECT_URI }}
+          GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY  }}
+          ALGOLIA_INDEX_PREFIX: ${{ secrets.ALGOLIA_INDEX_PREFIX }}
+          ALGOLIA_APPLICATION_ID: ${{ secrets.ALGOLIA_APPLICATION_ID }}
+          ALGOLIA_READ_ONLY_API_KEY: ${{ secrets.ALGOLIA_READ_ONLY_API_KEY }}

.github/workflows/ci.yml

@@ -1,5 +1,6 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# Exygy - This is a workflow from Sheltertech that we don't use in the fork
 
 name: testsuite
 

.github/workflows/deploy-development.yml

@@ -0,0 +1,45 @@
+name: Build and deploy to heroku staging.
+
+on:
+  push:
+    branches: [development]
+
+jobs:
+  build_and_deploy_app:
+    runs-on: ubuntu-latest
+    environment: "dev"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+      - run: npm i
+      - run: npm run test
+      - run: npm run build
+        env:
+          AUTH0_DOMAIN: ${{ secrets.AUTH0_DOMAIN }}
+          AUTH0_CLIENT_ID: ${{ secrets.AUTH0_CLIENT_ID }}
+          AUTH0_AUDIENCE: ${{ secrets.AUTH0_AUDIENCE }}
+          AUTH0_REDIRECT_URI: ${{ secrets.AUTH0_REDIRECT_URI }}
+          GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY  }}
+          ALGOLIA_INDEX_PREFIX: ${{ secrets.ALGOLIA_INDEX_PREFIX }}
+          ALGOLIA_APPLICATION_ID: ${{ secrets.ALGOLIA_APPLICATION_ID }}
+          ALGOLIA_READ_ONLY_API_KEY: ${{ secrets.ALGOLIA_READ_ONLY_API_KEY }}
+          STRAPI_API_TOKEN: ${{ secrets.STRAPI_API_TOKEN }}
+          STRAPI_API_URL: ${{ secrets.STRAPI_API_URL }}
+      - name: Build, Push and Release a Docker container to Heroku.
+        uses: gonuit/[email protected]
+        with:
+          email: ${{ secrets.HEROKU_EMAIL }}
+          heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
+          heroku_app_name: ${{ secrets.HEROKU_APP_NAME }}
+          dockerfile_directory: ./
+          dockerfile_name: Dockerfile
+          docker_options: "--no-cache"
+          process_type: web

.github/workflows/deploy-production.yml

@@ -0,0 +1,43 @@
+name: Build and deploy to heroku production.
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build_and_deploy_app:
+    runs-on: ubuntu-latest
+    environment: "prod"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+      - run: npm i
+      - run: npm run test
+      - run: npm run build
+        env:
+          AUTH0_DOMAIN: ${{ secrets.AUTH0_DOMAIN }}
+          AUTH0_CLIENT_ID: ${{ secrets.AUTH0_CLIENT_ID }}
+          AUTH0_AUDIENCE: ${{ secrets.AUTH0_AUDIENCE }}
+          AUTH0_REDIRECT_URI: ${{ secrets.AUTH0_REDIRECT_URI }}
+          GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY  }}
+          ALGOLIA_INDEX_PREFIX: ${{ secrets.ALGOLIA_INDEX_PREFIX }}
+          ALGOLIA_APPLICATION_ID: ${{ secrets.ALGOLIA_APPLICATION_ID }}
+          ALGOLIA_READ_ONLY_API_KEY: ${{ secrets.ALGOLIA_READ_ONLY_API_KEY }}
+      - name: Build, Push and Release a Docker container to Heroku.
+        uses: gonuit/[email protected]
+        with:
+          email: ${{ secrets.HEROKU_EMAIL }}
+          heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
+          heroku_app_name: ${{ secrets.HEROKU_APP_NAME }}
+          dockerfile_directory: ./
+          dockerfile_name: Dockerfile
+          docker_options: "--no-cache"
+          process_type: web

.github/workflows/publish-qa.yml

@@ -1,3 +1,4 @@
+# Exygy - This is a workflow from Sheltertech that we don't use in the fork
 name: publish-qa
 
 on:

.github/workflows/publish-release.yml

@@ -1,3 +1,4 @@
+# Exygy - This is a workflow from Sheltertech that we don't use in the fork
 name: publish-release
 
 on:

.gitignore

@@ -13,3 +13,16 @@ yarn.lock
 
 cypress/videos/**
 cypress/screenshots/**
+
+.vscode/*
+# !.vscode/settings.json
+# !.vscode/tasks.json
+# !.vscode/launch.json
+# !.vscode/extensions.json
+# !.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix

Dockerfile

@@ -1,14 +1,12 @@
 FROM nginx:stable
 
-RUN apt-get update && apt-get -y install ruby && gem install tiller
+WORKDIR /app/askdarcel
 
-COPY build /app/askdarcel
-COPY version.json /app/askdarcel/_version.json
-COPY tools/replace-environment-config.sh /app/askdarcel
+# Copy build files
+COPY ./build /app/askdarcel
 
 RUN rm /etc/nginx/conf.d/*
 
-ADD docker/tiller /etc/tiller
+COPY ./docker/templates/default.conf.template /etc/nginx/templates/default.conf.template
 
-CMD ["tiller", "-v"]
-ENTRYPOINT ["/app/askdarcel/replace-environment-config.sh", "/app/askdarcel/bundle.js"]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,15 +1,5 @@
 # ShelterTech Web App [![Travis CI Status](https://travis-ci.org/ShelterTechSF/askdarcel-web.svg?branch=master)](https://travis-ci.org/ShelterTechSF/askdarcel-web)
 
-## Sauce Labs Browser Test Status
-
-[![Sauce Test Status](https://saucelabs.com/browser-matrix/askdarcel-web-master.svg)](https://saucelabs.com/u/askdarcel-web-master)
-
-## Onboarding Instructions
-
-[Dev Role Description](https://www.notion.so/sheltertech/Developer-Engineer-Role-Description-ShelterTech-AskDarcel-SFServiceGuide-Tech-Team-7fd992a20f864698a43e3882a66338bb)
-
-[Technical Onboarding & Team Guidelines](https://www.notion.so/sheltertech/Technical-Onboarding-and-Team-Guidelines-a06d5543495248bfb6f17e233330249e)
-
 ## Docker-based Development Environment (Recommended)
 
 ### Requirements
@@ -155,3 +145,19 @@ $ docker-compose run --rm -p 1337:1337 -e BASE_URL=http://web:8080 web npm run t
 ```
 
 This will spin up a web server at http://localhost:1337/ and print out a URL to use. You should manually enter it into your browser to start the tests.
+
+## Branches and Deployments
+
+There are two protected branches - development and main. Main is the default branch which will be the latest, stable codebase. Development will be where updates get deployed to a staging instance where QA can be performed. Any PR's created against these branches run a series of checks - like building the app, running unit tests, and linting the files.
+
+There are two live instances - a [staging instance](https://our415-staging-a91cdc6d7b2b.herokuapp.com/) and a [production instance](https://our415-abb7eecb7449.herokuapp.com/). Merges onto the development branch deploys the development branch to the staging isntance. Merges onto the main branch deploys the main branch to the production instance. See the [github workflows](https://github.com/Exygy/askdarcel-web/tree/main/.github/workflows) for the details. Environment variables used in the deployments are set in github environments - 'prod' supplies the production instance and 'dev' supplies the staging instance..
+
+## Pull Requests
+
+Pull requests are opened to the development branch. When opening a pull request please fill out the as much of the pull request template you can, which includes tagging the issue your PR is related to, a description of your PR, indicating the type of change, including details for the reviewer about how to test your PR, and a testing checklist. Additionally, officially link the notion ticket to the PR using GitHub's linking UI.
+
+When your PR is ready for review, add the needs review(s) label to help surface it to the other devs. You can assign people as reviewers to surface the work further. If you put up a PR that is not yet ready for eyes, add the wip label.
+
+Once the PR has been approved, you either (1) squash and merge the commits if your changes are just in one package, or (2) rebase and merge your commits if your commits are cleanly separated across multiple packages to allow the versions to propagate appropriately.
+
+As a reviewer on a PR, try not to leave only comments, but a clear next step action. If the PR requires further discussion or changes, mark it with Requested Changes. If a PR looks good to you (or even if there are small changes requested that won't require an additional review), please mark it with Approved and comment on the last few changes needed. This helps other reviewers better understand the state of PRs at the list view and prevents an additional unnecessary review cycle.

app/App.module.scss

@@ -1,3 +1,5 @@
+@import "~styles/utils/_helpers.scss";
+
 .outerContainer {
   /* Creates a stacking context such that everything inside of the
    * .outerContainer is either above or below anything outside of the

app/App.tsx

@@ -1,54 +1,34 @@
 import React, { useEffect, useState } from "react";
-
 // Todo: Once GA sunsets the UA analytics tracking come July 2023, we can remove the "react-ga"
 // package and all references to it:
 // https://support.google.com/analytics/answer/12938611#zippy=%2Cin-this-article
-import ReactGA from "react-ga";
 import ReactGA_4 from "react-ga4";
-
 import Intercom from "react-intercom";
 import { Helmet } from "react-helmet-async";
 import { useHistory } from "react-router-dom";
-
 import { GeoCoordinates, getLocation, whiteLabel, AppProvider } from "./utils";
-import {
-  Banner,
-  HamburgerMenu,
-  Navigation,
-  PopUpMessage,
-  PopupMessageProp,
-  UserWay,
-} from "./components/ui";
-
-import { Router } from "./Router";
+import { Navigation, UserWay } from "./components/ui";
 
 import config from "./config";
 import MetaImage from "./assets/img/sfsg-preview.png";
-
 import styles from "./App.module.scss";
 
-const { intercom, showBanner, showSearch, siteUrl, title, userWay } =
-  whiteLabel;
-const outerContainerId = "outer-container";
-const pageWrapId = "page-wrap";
+const { intercom, siteUrl, title, userWay } = whiteLabel;
+export const OUTER_CONTAINER_ID = "outer-container";
 
 export const App = () => {
   const history = useHistory();
-  const [hamburgerOpen, setHamburgerOpen] = useState(false);
-  const [popUpMessage, setPopUpMessage] = useState<PopupMessageProp>({
-    message: "",
-    visible: false,
-    type: "success",
-  });
   const [userLocation, setUserLocation] = useState<GeoCoordinates | null>(null);
 
   useEffect(() => {
     getLocation().then((loc) => {
       setUserLocation(loc);
     });
 
-    ReactGA.initialize(config.GOOGLE_ANALYTICS_ID);
-    ReactGA_4.initialize(config.GOOGLE_ANALYTICS_GA4_ID);
+    if (config.GOOGLE_ANALYTICS_GA4_ID) {
+      ReactGA_4.initialize(config.GOOGLE_ANALYTICS_GA4_ID);
+    }
+
     return history.listen((loc) => {
       setTimeout(() => {
         /* We call setTimeout here to give our views time to update the document title before
@@ -59,15 +39,12 @@ export const App = () => {
           hitType: "pageview",
           page,
         });
-
-        ReactGA.set({ page });
-        ReactGA.pageview(page);
       }, 500);
     });
   }, [history]);
 
   return (
-    <div id={outerContainerId} className={styles.outerContainer}>
+    <div id={OUTER_CONTAINER_ID} className={styles.outerContainer}>
       <AppProvider userLocation={userLocation}>
         <Helmet>
           <title>{title}</title>
@@ -90,24 +67,7 @@ export const App = () => {
         {intercom && config.INTERCOM_APP_ID && (
           <Intercom appID={config.INTERCOM_APP_ID} />
         )}
-        <HamburgerMenu
-          isOpen={hamburgerOpen}
-          outerContainerId={outerContainerId}
-          onStateChange={(s) => setHamburgerOpen(s.isOpen)}
-          pageWrapId={pageWrapId}
-          toggleHamburgerMenu={() => setHamburgerOpen(!hamburgerOpen)}
-        />
-        <div id={pageWrapId}>
-          <Navigation
-            showSearch={showSearch}
-            toggleHamburgerMenu={() => setHamburgerOpen(!hamburgerOpen)}
-          />
-          {showBanner && <Banner />}
-          <div className="container">
-            <Router setPopUpMessage={setPopUpMessage} />
-          </div>
-          {popUpMessage && <PopUpMessage popUpMessage={popUpMessage} />}
-        </div>
+        <Navigation />
       </AppProvider>
     </div>
   );