Merge next into master, include both Gatsby.js and Next.js

.eslintignore

@@ -0,0 +1,7 @@
+# Ignore Gatsby Top Layout Plugin
+src/frontend/gatsby/plugins/gatsby-plugin-top-layout
+# Ignore generated folders in Gatsby
+src/frontend/gatsby/public
+src/frontend/gatsby/.cache
+# We run eslint directly in the next frontend with its own config
+src/frontend/next/.next

.eslintrc.js

@@ -1,40 +1,85 @@
 module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2021,
+  },
   extends: [
-    'airbnb-base',
+    'airbnb',
+    'plugin:react/recommended',
     'plugin:prettier/recommended',
     'plugin:promise/recommended',
-    'plugin:react/recommended',
     'plugin:react-hooks/recommended',
   ],
-
   plugins: ['prettier', 'promise', 'react', 'react-hooks'],
-
-  env: {
-    jest: true,
-    browser: true,
-    jquery: true,
-    node: true,
-    es2017: true,
-  },
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-
   settings: {
     react: {
       version: '16.13',
     },
   },
+  overrides: [
+    // TypeScript for Next.js
+    {
+      files: ['src/frontend/next/**/*.ts', 'src/frontend/next/**/*.tsx'],
+      plugins: ['@typescript-eslint'],
+      rules: {
+        'react/prop-types': 'off',
+        'react/react-in-jsx-scope': 'off',
+        '@typescript-eslint/no-unused-vars': 'error',
+        'react/jsx-filename-extension': ['error', { extensions: ['.ts', '.tsx'] }],
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        'jsx-a11y/anchor-is-valid': [
+          'error',
+          {
+            components: ['Link'],
+            specialLink: ['hrefLeft', 'hrefRight'],
+            aspects: ['invalidHref', 'preferButton'],
+          },
+        ],
+        'import/extensions': 'off',
+      },
+    },
+
+    // JavaScript for Gatsby
+    {
+      files: ['src/frontend/gatsby/**/*.js', 'src/frontend/gatsby/**/*.jsx'],
+      env: { node: true, browser: true, jest: true },
+      rules: {
+        'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
+        'react/jsx-uses-react': 'error',
+        'react/forbid-prop-types': 'off',
+        'react/require-default-props': 'off',
+        'import/extensions': 'off',
+        'no-use-before-define': 'off',
+        '@typescript-eslint/no-use-before-define': 'off',
+      },
+    },
+
+    // JavaScript for Node.js
+    {
+      files: ['src/backend/**/*.js', 'src/tools/**/*.js'],
+      env: {
+        node: true,
+      },
+    },
 
-  /**
-   * Ignore the MUI gatsby plugin
-   */
-  ignorePatterns: ['src/frontend/plugins/gatsby-plugin-top-layout/'],
+    // Jest Test files
+    {
+      files: ['test/**/*.js', '*.test.js', '*.test.ts', '**/__mocks__/**/*.js'],
+      env: { jest: true, node: true },
+    },
+  ],
 
+  // Default rules for any file we lint
   rules: {
-    'prettier/prettier': ['error'],
+    /**
+     * Force prettier formatting
+     */
+    'prettier/prettier': 'error',
     /**
      * Disallow the use of console
      * https://eslint.org/docs/rules/no-console
@@ -50,30 +95,30 @@ module.exports = {
     /** Disallows unnecessary return await
      * https://eslint.org/docs/rules/no-return-await
      */
-    'no-return-await': ['error'],
+    'no-return-await': 'error',
     /**
      * Disallow using an async function as a Promise executor
      * https://eslint.org/docs/rules/no-async-promise-executor
      */
-    'no-async-promise-executor': ['error'],
+    'no-async-promise-executor': 'error',
     /**
      * Disallow await inside of loops
      * https://eslint.org/docs/rules/no-await-in-loop
      */
-    'no-await-in-loop': ['error'],
+    'no-await-in-loop': 'error',
 
     /**
      * Disallow assignments that can lead to race conditions due to
      * usage of await or yield
      * https://eslint.org/docs/rules/require-atomic-updates
      */
-    'require-atomic-updates': ['error'],
+    'require-atomic-updates': 'error',
 
     /**
      * Disallow async functions which have no await expression
      * https://eslint.org/docs/rules/require-await
      */
-    'require-await': ['error'],
+    'require-await': 'error',
 
     /**
      * Require or disallow named function expressions
@@ -99,18 +144,19 @@ module.exports = {
      */
     'promise/prefer-await-to-callbacks': 'warn',
 
-    'react/jsx-uses-react': 'error',
-
     'react/jsx-uses-vars': 'error',
 
-    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
-
     /**
      * Allow ES6 classes to override methods without using this
      * https://eslint.org/docs/rules/class-methods-use-this
      */
     'class-methods-use-this': 'off',
 
-    'import/no-extraneous-dependencies': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'react/jsx-wrap-multilines': 'off',
+    'react/jsx-one-expression-per-line': 'off',
+    'react/no-danger': 'off',
+
+    'jsx-a11y/control-has-associated-label': 'warn',
   },
 };

.github/workflows/node-js-ci.yml

@@ -27,5 +27,4 @@ jobs:
 
       - run: npm install
       - run: cp env.example .env
-      - run: npm run build
       - run: npm run test-ci

.gitignore

@@ -32,18 +32,8 @@ yarn-error.log*
 # Redis dump file
 dump.rdb
 
-
 # SAML certificates generated by ./tools/generate-ssl-certs.sh
 certs/
 
-# gastby ,cache directory
-.cache/
-
-# gatsby public folder
-public/
-
 # Redis data storage
 redis-data/
-
-# Ignore downloaded images
-src/frontend/src/images/backgrounds

.prettierignore

@@ -5,3 +5,4 @@ coverage/
 certs
 public
 .cache
+.next

.vscode/settings.json

@@ -4,6 +4,9 @@
   "editor.detectIndentation": false,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
   "files.eol": "\n",
   "files.insertFinalNewline": true
 }

Dockerfile

@@ -26,7 +26,7 @@ WORKDIR "/telescope"
 # Copy package.jsons for each service
 COPY package.json .
 COPY .env .
-COPY ./src/frontend/package.json ./src/frontend/package.json
+COPY ./src/frontend/gatsby/package.json ./src/frontend/gatsby/package.json
 
 # -------------------------------------
 # Context: Dependencies
@@ -39,13 +39,13 @@ FROM build AS backend_dependencies
 RUN npm install --only=production --no-package-lock --ignore-scripts
 
 FROM backend_dependencies as frontend_dependencies
-RUN cd ./src/frontend && npm install --no-package-lock
+RUN cd ./src/frontend/gatsby && npm install --no-package-lock
 
 # -------------------------------------
 # Context: Front-end Builder
 FROM frontend_dependencies as builder
 
-COPY ./src/frontend ./src/frontend
+COPY ./src/frontend/gatsby ./src/frontend/gatsby
 COPY ./.git ./.git
 
 RUN npm run build
@@ -56,7 +56,7 @@ FROM build AS release
 
 # GET production code from previous containers
 COPY --from=backend_dependencies /telescope/node_modules /telescope/node_modules
-COPY --from=builder /telescope/src/frontend/public /telescope/src/frontend/public
+COPY --from=builder /telescope/src/frontend/gatsby/public /telescope/src/frontend/gatsby/public
 COPY --from=builder /telescope/.git /telescope/.git
 COPY ./src/backend ./src/backend
 
@@ -69,4 +69,3 @@ ENV script=start
 # Running telescope when the image gets built using a script
 # `script` is one of the scripts from `package.json`, passed to the image
 CMD ["sh", "-c", "npm run ${script}"]
-

README.md

@@ -1,4 +1,4 @@
-# Telescope <img align="left" width="150" height="150" src=https://github.com/Seneca-CDOT/telescope/blob/master/src/frontend/src/images/logo.svg>
+# Telescope <img align="left" width="150" height="150" src=https://github.com/Seneca-CDOT/telescope/blob/master/src/frontend/gatsby/src/images/logo.svg>
 
 [![CircleCI](https://circleci.com/gh/Seneca-CDOT/telescope.svg?style=svg)](https://circleci.com/gh/Seneca-CDOT/telescope)
 [![js-airbnb/prettier-style](https://img.shields.io/badge/code%20style-airbnb%2Fprettier-blue)](https://github.com/airbnb/javascript)

docker-compose-production.yml

@@ -31,7 +31,7 @@ services:
       - elasticsearch
     volumes:
       # Volume to be shared with nginx for serving static content
-      - static:/telescope/src/frontend/public
+      - static:/telescope/src/frontend/gatsby/public
       # Volume to be shared for log rotation
       - rotate:/telescope/log
     restart: always

docs/gatsbyjs.md

@@ -1,15 +1,15 @@
 ## Frontend Development with GatsbyJS
 
-The Telescope frontend app lives in [`src/frontend`](../src/frontend) and is
+The Telescope GatsbyJS frontend app lives in [`src/frontend/gatsby`](../src/frontend/gatsby) and is
 built using the React frontend framework [GatsbyJS](https://www.gatsbyjs.org/).
 You are encouraged to read the [GatsbyJS docs](https://www.gatsbyjs.org/docs/)
 in order to understand how everything works, and what the [files and folders](https://www.gatsbyjs.org/docs/gatsby-project-structure/#folders) mean.
 
 From the root of the project, you can run a number of GatsbyJS specific npm scripts:
 
 1. [`npm run develop`](https://www.gatsbyjs.org/docs/gatsby-cli/#develop) to start the development server
-1. [`npm run build`](https://www.gatsbyjs.org/docs/gatsby-cli/#build) to build the site in `src/frontend/public` for production
-1. [`npm run serve`](https://www.gatsbyjs.org/docs/gatsby-cli/#serve) to serve the production site in `src/frontend/public` for testing
+1. [`npm run build`](https://www.gatsbyjs.org/docs/gatsby-cli/#build) to build the site in `src/frontend/gatsby/public` for production
+1. [`npm run serve`](https://www.gatsbyjs.org/docs/gatsby-cli/#serve) to serve the production site in `src/frontend/gatsby/public` for testing
 1. [`npm run clean`](https://www.gatsbyjs.org/docs/gatsby-cli/#clean) to delete generated build files and folders
 
 ## Running our Frontend With and Without our Backend
@@ -38,7 +38,7 @@ and re-run the command above.
 In your `.env` file, you need to make a few changes:
 
 1. set `API_URL=http://localhost:3000` to tell the frontend to connect to a backend API server running at `http://localhost:3000`.
-2. set `PROXY_GATSBY=1` so that our node server will proxy the frontend to the Gatsby development server
+2. set `PROXY_FRONTEND=1` so that our node server will proxy the frontend to the Gatsby development server
 
 Now you need to run Redis (natively or via docker-compose, see [Environment Setup docs](environment-setup.md)), then start the node app natively:
 

docs/theme-and-colours.md

@@ -44,7 +44,7 @@ Thank you for thinking to contribute to the look of the Telescope. This is a gui
 
 # Theming
 
-Here is how we construct our Theme with MUI ([frontend/src/theme.js](https://github.com/Seneca-CDOT/telescope/blob/master/src/frontend/src/theme.js))
+Here is how we construct our Theme with MUI ([frontend/src/theme.js](https://github.com/Seneca-CDOT/telescope/blob/master/src/frontend/gatsby/src/theme.js))
 
 ```node
 const theme = createMuiTheme({

env.example

@@ -17,15 +17,15 @@ PORT=3000
 #   API_URL=https://telescope.cdot.systems
 API_URL=http://localhost:3000
 
-# PROXY_GATSBY=1 will allow proxying the Gatsby dev server (http://localhost:8000)
+# PROXY_FRONTEND=1 will allow proxying the Gatsby dev server (http://localhost:8000)
 # through our node server (http://localhost:3000). Useful for testing locally.
 # To run:
 #
-# 1. set PROXY_GATSBY=1 in the .env
+# 1. set PROXY_FRONTEND=1 in the .env
 # 2. run the web server: `npm start`
 # 3. run the Gatsby dev server: `npm run develop`
 # 4. open http://localhost:3000/ and you'll get content from http://localhost:8000
-PROXY_GATSBY=
+PROXY_FRONTEND=
 
 # LOG_LEVEL is used to set the level of debugging for the logs.
 # info, error and debug are commonly used levels. See http://getpino.io/#/docs/api?id=level for more info on levels.

now.json

@@ -8,7 +8,7 @@
     {
       "src": "package.json",
       "use": "@now/static-build",
-      "config": { "distDir": "src/frontend/public" }
+      "config": { "distDir": "src/frontend/gatsby/public" }
     }
   ],
   "public": true,