Upgrade Website

package.json

@@ -35,9 +35,6 @@
       "packages/*"
     ],
     "nohoist": [
-      "@celo/web/@timkendrick/monaco-editor",
-      "@celo/web/@types/react-i18next",
-      "@celo/web/next-i18next",
       "**/openzeppelin-solidity"
     ]
   },

packages/web/.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["next/babel", "@zeit/next-typescript/babel"],
+  "presets": ["next/babel"],
   "plugins": [
     [
       "module-resolver",

packages/web/next-env.d.ts

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

packages/web/next.config.js

@@ -1,35 +1,32 @@
-const withTypescript = require('@zeit/next-typescript')
 const withSass = require('@zeit/next-sass')
 const withImages = require('next-images')
 const webpack = require('webpack')
 const envConfig = require('./env-config')
 const serverEnvConfig = require('./server-env-config')
 
 module.exports = withImages(
-  withTypescript(
-    withSass({
-      cssLoaderOptions: {
-        importLoaders: 1,
-        localIdentName: '[local]___[hash:base64:5]',
-      },
-      cssModules: true,
-      publicRuntimeConfig: envConfig,
-      serverRuntimeConfig: serverEnvConfig,
-      // options: {buildId, dev, isServer, defaultLoaders, webpack}   https://nextjs.org/docs#customizing-webpack-config
-      webpack: (config, { dev, isServer }) => {
-        config.node = {
-          fs: 'empty',
-        }
-        config.resolve.alias = {
-          ...config.resolve.alias,
-          'react-native$': 'react-native-web',
-        }
-        if (!isServer) {
-          config.resolve.alias['@sentry/node'] = '@sentry/browser'
-        }
+  withSass({
+    cssLoaderOptions: {
+      importLoaders: 1,
+      localIdentName: '[local]___[hash:base64:5]',
+    },
+    cssModules: true,
+    publicRuntimeConfig: envConfig,
+    serverRuntimeConfig: serverEnvConfig,
+    // options: {buildId, dev, isServer, defaultLoaders, webpack}   https://nextjs.org/docs#customizing-webpack-config
+    webpack: (config, { dev, isServer }) => {
+      config.node = {
+        fs: 'empty',
+      }
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        'react-native$': 'react-native-web',
+      }
+      if (!isServer) {
+        config.resolve.alias['@sentry/node'] = '@sentry/browser'
+      }
 
-        return config
-      },
-    })
-  )
+      return config
+    },
+  })
 )

packages/web/nodemon.json

@@ -1,4 +1,4 @@
 {
-  "watch": ["server/**/*.ts"],
+  "watch": ["server/**/*.ts", "server/*.ts"],
   "exec": "ts-node --project tsconfig.server.json server/index.ts"
 }

packages/web/package.json

@@ -19,88 +19,86 @@
   },
   "dependencies": {
     "@celo/utils": "^0.1.0",
-    "@segment/in-eu": "^0.2.1",
-    "@sentry/browser": "^5.6.2",
-    "@sentry/node": "^5.6.2",
+    "@segment/in-eu": "^0.3.0",
+    "@sentry/browser": "^5.10.2",
+    "@sentry/node": "^5.10.2",
     "@zeit/next-sass": "^1.0.1",
-    "@zeit/next-typescript": "^1.1.1",
-    "airtable": "^0.6.0",
-    "apollo-boost": "^0.3.1",
-    "big-integer": "^1.6.31",
-    "body-parser": "^1.18.3",
+    "airtable": "^0.8.1",
+    "apollo-boost": "^0.4.4",
+    "big-integer": "^1.6.48",
+    "body-parser": "^1.19.0",
     "colortranslator": "^1.1.1",
     "compression": "^1.7.4",
     "connect-slashes": "^1.4.0",
-    "cross-fetch": "^3.0.2",
-    "debounce": "^1.1.0",
-    "express": "^4.16.4",
+    "core-js": "^2.6.9",
+    "cross-fetch": "^3.0.4",
+    "debounce": "^1.2.0",
+    "express": "^4.17.1",
     "express-enforces-ssl": "^1.1.0",
-    "fast-xml-parser": "^3.12.16",
-    "fecha": "^3.0.2",
-    "firebase": "^7.2.2",
-    "glob": "^7.1.3",
-    "graphql": "^14.1.1",
+    "fast-xml-parser": "^3.15.1",
+    "fecha": "^3.0.3",
+    "firebase": "^7.6.0",
+    "glob": "^7.1.6",
+    "graphql": "^14.5.8",
     "hamburgers": "^0.9.3",
-    "helmet": "^3.16.0",
+    "helmet": "^3.21.2",
     "hex-rgba": "^1.0.2",
-    "html-to-formatted-text": "^2.6.0",
-    "js-cookie": "^2.2.0",
+    "html-to-formatted-text": "^2.7.0",
+    "js-cookie": "^2.2.1",
     "load-segment": "^1.0.1",
     "lodash.throttle": "^4.1.1",
-    "lottie-web": "^5.5.7",
+    "lottie-web": "^5.5.10",
     "mailgun-js": "^0.22.0",
     "memoize-one": "^5.1.1",
-    "mobile-detect": "^1.4.2",
+    "mobile-detect": "^1.4.4",
     "net": "^1.0.2",
-    "network-speed": "^2.0.3",
-    "next": "^8.0.3",
+    "network-speed": "^2.0.4",
+    "next": "^9.1.5",
     "next-i18next": "^2.1.1",
-    "next-images": "^1.1.1",
+    "next-images": "^1.2.0",
     "next-plugin-transpile-modules": "^2.0.0",
     "nuka-carousel": "^4.5.13",
     "react": "16.9.0",
-    "react-apollo": "^2.5.8",
+    "react-apollo": "^3.1.3",
     "react-autosuggest": "^9.4.3",
-    "react-debounce-input": "^3.2.0",
+    "react-debounce-input": "^3.2.2",
     "react-dom": "16.9.0",
-    "react-google-recaptcha": "^1.1.0",
-    "react-is": "^16.8.6",
-    "react-lazyload": "^2.5.0",
+    "react-google-recaptcha": "^2.0.1",
+    "react-is": "16.9.0",
+    "react-lazyload": "^2.6.5",
     "react-lazyload-fadein": "^1.1.0",
-    "react-modal": "^3.8.1",
-    "react-native-web": "^0.11.2",
+    "react-modal": "^3.11.1",
+    "react-native-web": "^0.11.7",
     "react-reveal": "^1.2.2",
     "react-youtube": "^7.9.0",
-    "scroll-into-view": "^1.11.0",
+    "scroll-into-view": "^1.13.1",
     "sha1": "^1.1.1",
     "shuffle-seed": "^1.1.6",
-    "stickyfilljs": "^2.0.5",
+    "stickyfilljs": "^2.1.0",
     "svgs": "^4.1.0",
     "tls": "^0.0.1",
     "yiq": "^3.0.1"
   },
   "devDependencies": {
-    "@firebase/app-types": "^0.4.6",
-    "@sentry/types": "^5.6.1",
-    "@types/airtable": "^0.5.6",
+    "@firebase/app-types": "^0.5.0",
+    "@sentry/types": "^5.10.0",
+    "@types/airtable": "^0.5.7",
     "@types/hex-rgba": "^1.0.0",
-    "@types/i18next": "^12.1.0",
-    "@types/mailgun-js": "^0.16.3",
-    "@types/next": "^8.0.3",
+    "@types/mailgun-js": "^0.22.3",
     "@types/node": "^10.12.18",
-    "@types/react": "^16.8.19",
-    "@types/react-autosuggest": "^9.3.11",
-    "@types/react-css-modules": "^4.6.1",
-    "@types/react-google-recaptcha": "^1.0.0",
-    "@types/react-native": "^0.60.19",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "babel-plugin-react-css-modules": "^5.0.0",
-    "babel-plugin-react-native-web": "^0.11.2",
+    "@types/react": "^16.9.16",
+    "@types/react-autosuggest": "^9.3.13",
+    "@types/react-css-modules": "^4.6.2",
+    "@types/react-google-recaptcha": "^1.1.1",
+    "@types/react-native": "^0.60.25",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-react-css-modules": "^5.2.6",
+    "babel-plugin-react-native-web": "^0.11.7",
     "cross-env": "^5.1.6",
-    "node-sass": "^4.11.0",
-    "nodemon": "^1.18.8",
-    "postcss-scss": "^1.0.5",
-    "react-native-svg": "^9.3.6",
-    "webpack": "4.20.2"
+    "node-sass": "^4.13.0",
+    "nodemon": "^2.0.2",
+    "postcss-scss": "^2.0.0",
+    "react-native-svg": "^9.13.6",
+    "webpack": "4.41.2"
   }
 }

packages/web/pages/_document.tsx

@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { DocumentContext, Head, Main, NextScript } from 'next/document'
 import * as React from 'react'
 import { AppRegistry, I18nManager } from 'react-native-web'
 import analytics from 'src/analytics/analytics'
@@ -8,18 +8,16 @@ import { isLocaleRTL } from '../server/i18nSetup'
 // @ts-ignore
 const a = analytics
 
-interface NextInitalProps {
-  pathname: string
-  query: any
-  asPath: string
-  req?: any
-  res?: object
-  err?: object
-  renderPage: () => any
+interface NextReq {
+  locale: string
+}
+
+interface PropContext {
+  req: DocumentContext['req'] & NextReq
 }
 
 export default class MyDocument extends Document {
-  static async getInitialProps(context: NextInitalProps) {
+  static async getInitialProps(context: DocumentContext & PropContext) {
     const locale = context.req.locale
     const userAgent = context.req.headers['user-agent']
     setDimensionsForScreen(userAgent)
@@ -34,7 +32,6 @@ export default class MyDocument extends Document {
     const page = context.renderPage()
     const styles = React.Children.toArray([
       // <style key={'normalize-style'} dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
-      page.styles,
       getStyleElement(),
     ])
 

packages/web/server/Announcement.ts

@@ -8,28 +8,25 @@ interface Fields {
   link: string
 }
 
-interface QueryError {
-  message: string
-  error: number
+interface Record {
+  id: string
+  fields: Fields
 }
 
-export default function latestAnnouncements(): Promise<Fields[]> {
-  return new Promise((resolve, reject) => {
-    getAirtable()
+export default async function latestAnnouncements(): Promise<Fields[]> {
+  try {
+    const records = (await getAirtable()
       .select({
         maxRecords: 1,
         filterByFormula: IS_LIVE,
         sort: [{ field: 'order', direction: 'desc' }],
       })
-      .firstPage((err: QueryError, records: Airtable.Response<Fields>) => {
-        if (err) {
-          Sentry.captureEvent(err)
-          reject(err)
-          return
-        }
-        resolve(records.map((record) => record.fields))
-      })
-  })
+      .firstPage()) as Record[]
+
+    return records.map((record) => record.fields)
+  } catch (err) {
+    Sentry.captureEvent(err)
+  }
 }
 
 function getAirtable() {

packages/web/server/AssetBase.ts

@@ -34,7 +34,7 @@ export default function getAssets(sheet: AssetSheet) {
 }
 
 function getAirtable(sheet: AssetSheet): Table<Fields> {
-  return airtableInit(getConfig().serverRuntimeConfig.AIRTABLE_BRANDKIT_ID)(sheet)
+  return airtableInit(getConfig().serverRuntimeConfig.AIRTABLE_BRANDKIT_ID)(sheet) as Table<Fields>
 }
 
 const IS_APROVED = 'Approved=1'

packages/web/server/EventHelpers.ts

@@ -1,7 +1,7 @@
 import getConfig from 'next/config'
 import { EventProps } from '../fullstack/EventProps'
 import Sentry from '../fullstack/sentry'
-import airtableInit, { AirRecord } from '../server/airtable'
+import airtableInit from '../server/airtable'
 import { abort } from '../src/utils/abortableFetch'
 const TABLE_NAME = 'Community Calendar'
 // Intermediate step Event With all String Values
@@ -64,23 +64,19 @@ export default async function getFormattedEvents() {
   return splitEvents(normalizeEvents(eventData as RawAirTableEvent[]))
 }
 
-function fetchEventsFromAirtable() {
-  return new Promise((resolve, reject) => {
-    getAirtable()
+async function fetchEventsFromAirtable() {
+  try {
+    const records = await getAirtable()
       .select({
         filterByFormula:
           'OR(Process="Complete", Process="Scheduled", Process="Conference, Speaking", Process="This Week")',
         sort: [{ field: 'Start Date', direction: 'desc' }],
       })
-      .firstPage((error: unknown, records: Array<AirRecord<RawAirTableEvent>>) => {
-        if (error) {
-          Sentry.captureEvent(error)
-          reject(error)
-        } else {
-          resolve(records.map((record) => record.fields))
-        }
-      })
-  })
+      .firstPage()
+    return records.map((record) => record.fields)
+  } catch (error) {
+    Sentry.captureEvent(error)
+  }
 }
 
 function getAirtable() {

packages/web/server/FellowshipApp.ts

@@ -9,7 +9,7 @@ function getAirtable() {
 }
 
 export async function submitFellowApp(fields: FellowApp): Promise<AirRecord<FellowApp>> {
-  return getAirtable().create(migrate(fields))
+  return getAirtable().create(migrate(fields)) as Promise<AirRecord<FellowApp>>
 }
 
 function migrate(fields: FellowApp) {

packages/web/server/airtable.ts

@@ -1,7 +1,7 @@
-import * as AirtableAPI from 'airtable'
+import AirtableAPI from 'airtable'
 import getConfig from 'next/config'
 
-let airTableSingleton
+let airTableSingleton: AirtableAPI
 
 export default function airtableInit(baseID: string) {
   const { serverRuntimeConfig } = getConfig()

packages/web/server/index.ts

@@ -1,10 +1,10 @@
-import * as bodyParser from 'body-parser'
-import * as compression from 'compression'
-import * as slashes from 'connect-slashes'
-import * as express from 'express'
-import * as expressEnforcesSsl from 'express-enforces-ssl'
-import * as helmet from 'helmet'
-import * as next from 'next'
+import bodyParser from 'body-parser'
+import compression from 'compression'
+import slashes from 'connect-slashes'
+import express from 'express'
+import expressEnforcesSsl from 'express-enforces-ssl'
+import helmet from 'helmet'
+import next from 'next'
 import nextI18NextMiddleware from 'next-i18next/middleware'
 import { Tables } from '../fullstack/EcoFundFields'
 import Sentry, { initSentry } from '../fullstack/sentry'