Enable strict null check for overmind (codesandbox#3423)

* Enable strict null check for overmind

* Updates

* Fix one more!

* typing fixes

* type fixes

* Convert live

* Convert client

* Add support for @babel/plugin-proposal-nullish-coalescing-operator in app

* Clean up yarn.lock

* Fix src/app/overmind/effects/git/export-to-github.ts

* Fix the loading of sandboxes

* more null check handling

* Fix type of color

* Fix typing of module id

* Change some typechecks on currentModule

* Fix now check

* Fix check for user.id

* Handle forking errors more gracefully

Co-authored-by: Christian Alfoni <[email protected]>

Author: CompuIves

packages/app/config/babel.dev.js

@@ -33,6 +33,7 @@ module.exports = {
     require.resolve('@babel/plugin-proposal-object-rest-spread'),
     require.resolve('@babel/plugin-proposal-class-properties'),
     require.resolve('@babel/plugin-proposal-optional-chaining'),
+    require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
     require.resolve('@babel/plugin-transform-runtime'),
     require.resolve('babel-plugin-lodash'),
     require.resolve('@babel/plugin-syntax-dynamic-import'),

packages/app/config/babel.prod.js

@@ -31,6 +31,7 @@ module.exports = {
     require.resolve('@babel/plugin-proposal-object-rest-spread'),
     require.resolve('@babel/plugin-proposal-class-properties'),
     require.resolve('@babel/plugin-proposal-optional-chaining'),
+    require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
     require.resolve('@babel/plugin-transform-runtime'),
     require.resolve('babel-plugin-lodash'),
     require.resolve('@babel/plugin-syntax-dynamic-import'),

packages/app/package.json

@@ -231,7 +231,7 @@
     "@babel/core": "^7.5.5",
     "@babel/helper-module-imports": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/plugin-proposal-optional-chaining": "^7.7.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",

packages/app/src/app/components/CreateNewSandbox/queries.ts

@@ -1,21 +1,21 @@
-import gql from 'graphql-tag';
-import { client } from 'app/graphql/client';
-import immer from 'immer';
-import {
-  addSandboxesToFolder,
-  PATHED_SANDBOXES_CONTENT_QUERY,
-} from 'app/pages/Dashboard/queries';
-import { notificationState } from '@codesandbox/common/lib/utils/notifications';
 import track from '@codesandbox/common/lib/utils/analytics';
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
 import { NotificationStatus } from '@codesandbox/notifications';
+import { client } from 'app/graphql/client';
 import {
-  UnmakeSandboxesTemplateMutation,
-  UnmakeSandboxesTemplateMutationVariables,
-  ListTemplatesQueryVariables,
   ListTemplatesQuery,
-  PathedSandboxesQuery,
+  ListTemplatesQueryVariables,
   PathedSandboxesFoldersQueryVariables,
+  PathedSandboxesQuery,
+  UnmakeSandboxesTemplateMutation,
+  UnmakeSandboxesTemplateMutationVariables,
 } from 'app/graphql/types';
+import {
+  PATHED_SANDBOXES_CONTENT_QUERY,
+  addSandboxesToFolder,
+} from 'app/pages/Dashboard/queries';
+import gql from 'graphql-tag';
+import immer from 'immer';
 
 const TEMPLATE_FRAGMENT = gql`
   fragment Template on Template {
@@ -176,23 +176,32 @@ export function unmakeTemplates(selectedSandboxes: string[]) {
         });
 
         const data = immer(oldTemplatesCache, draft => {
-          draft.me.templates = draft.me.templates.filter(
-            x => selectedSandboxes.indexOf(x.sandbox.id) === -1
-          );
+          if (draft?.me?.templates && draft?.me?.teams) {
+            draft.me.templates = draft.me.templates.filter(x =>
+              x?.sandbox?.id
+                ? selectedSandboxes.indexOf(x.sandbox.id) === -1
+                : true
+            );
 
-          draft.me.teams = draft.me.teams.map(t => ({
-            ...t,
-            templates: t.templates.filter(
-              x => selectedSandboxes.indexOf(x.sandbox.id) === -1
-            ),
-          }));
+            draft.me.teams = draft.me.teams.map(t => ({
+              ...t,
+              templates: t?.templates?.filter(x =>
+                x?.sandbox?.id
+                  ? selectedSandboxes.indexOf(x.sandbox.id) === -1
+                  : true
+              ),
+              // Giving up
+            })) as any;
+          }
         });
 
-        cache.writeQuery<ListTemplatesQuery, ListTemplatesQueryVariables>({
-          query: LIST_OWNED_TEMPLATES,
-          variables,
-          data,
-        });
+        if (data) {
+          cache.writeQuery<ListTemplatesQuery, ListTemplatesQueryVariables>({
+            query: LIST_OWNED_TEMPLATES,
+            variables,
+            data,
+          });
+        }
       } catch (e) {
         // cache doesn't exist, no biggie!
       }
@@ -202,7 +211,7 @@ export function unmakeTemplates(selectedSandboxes: string[]) {
 
 export function makeTemplates(
   selectedSandboxes: string[],
-  teamId?: string,
+  teamId: string | null,
   collections?: { teamId: string | null }[]
 ) {
   const unpackedSelectedSandboxes: string[] =
@@ -238,9 +247,15 @@ export function makeTemplates(
                 });
 
                 const data = immer(oldFolderCacheData, draft => {
-                  draft.me.collection.sandboxes = oldFolderCacheData.me.collection.sandboxes.filter(
-                    x => selectedSandboxes.indexOf(x.id) === -1
-                  );
+                  if (
+                    draft?.me?.collection &&
+                    oldFolderCacheData?.me?.collection?.sandboxes
+                  ) {
+                    draft.me.collection.sandboxes = oldFolderCacheData.me.collection.sandboxes.filter(
+                      x =>
+                        x?.id ? selectedSandboxes.indexOf(x.id) === -1 : true
+                    );
+                  }
                 });
 
                 cache.writeQuery({

packages/app/src/app/overmind/actions.ts

@@ -73,18 +73,20 @@ type ModalName =
   | 'searchDependencies'
   | 'share'
   | 'signInForTemplates'
-  | 'userSurvey';
+  | 'userSurvey'
+  | 'liveSessionEnded';
 
 export const modalOpened: Action<{
   modal: ModalName;
   message?: string;
   itemId?: string;
-}> = ({ state, effects }, { modal, message, itemId }) => {
-  effects.analytics.track('Open Modal', { modal });
-  state.currentModalMessage = message;
-  state.currentModal = modal;
-  if (state.currentModal === 'preferences') {
-    state.preferences.itemId = itemId;
+}> = ({ state, effects }, props) => {
+  effects.analytics.track('Open Modal', { modal: props.modal });
+  state.currentModal = props.modal;
+  if (props.modal === 'preferences' && props.itemId) {
+    state.preferences.itemId = props.itemId;
+  } else {
+    state.currentModalMessage = props.message || null;
   }
 };
 
@@ -162,8 +164,10 @@ export const signInZeitClicked: AsyncAction = async ({
 };
 
 export const signOutZeitClicked: AsyncAction = async ({ state, effects }) => {
-  await effects.api.signoutZeit();
-  state.user.integrations.zeit = null;
+  if (state.user?.integrations?.zeit) {
+    await effects.api.signoutZeit();
+    delete state.user.integrations.zeit;
+  }
 };
 
 export const authTokenRequested: AsyncAction = async ({ actions }) => {
@@ -200,8 +204,10 @@ export const signOutGithubIntegration: AsyncAction = async ({
   state,
   effects,
 }) => {
-  await effects.api.signoutGithubIntegration();
-  state.user.integrations.github = null;
+  if (state.user?.integrations?.github) {
+    await effects.api.signoutGithubIntegration();
+    delete state.user.integrations.github;
+  }
 };
 
 export const setUpdateStatus: Action<{ status: string }> = (

packages/app/src/app/overmind/effects/browser.ts

@@ -42,7 +42,7 @@ export default {
       `scrollbars=no,toolbar=no,location=no,titlebar=no,directories=no,status=no,menubar=no, ${getPopupDimensions()}`
     );
     return {
-      close: () => popup.close(),
+      close: () => popup?.close(),
     };
   },
   waitForMessage<T>(type): Promise<T> {

packages/app/src/app/overmind/effects/git/export-to-github.ts

@@ -2,6 +2,12 @@ import { Sandbox } from '@codesandbox/common/lib/types';
 import JSZip from 'jszip';
 import { createZip, BLOB_ID } from '../zip/create-zip';
 
+interface IAPIModule {
+  content: string;
+  isBinary: boolean;
+  path: string;
+}
+
 export default async function deploy(sandbox: Sandbox) {
   // We first get the zip file, this is what we essentially need to have deployed.
   // So we convert it to an API request that ZEIT will understand
@@ -19,14 +25,14 @@ export default async function deploy(sandbox: Sandbox) {
 
   const contents = await JSZip.loadAsync(zipFile);
 
-  const apiData = { sandbox: [] };
+  const apiData: { sandbox: IAPIModule[] } = { sandbox: [] };
   const filePaths = Object.keys(contents.files);
   for (let i = 0; i < filePaths.length; i += 1) {
     const filePath = filePaths[i];
     const file = contents.files[filePath];
 
     if (!file.dir) {
-      let content = await file.async('text'); // eslint-disable-line no-await-in-loop
+      let content: string = await file.async('text'); // eslint-disable-line no-await-in-loop
       let isBinary = false;
 
       // It's marked as a binary

packages/app/src/app/overmind/effects/keybindingManager.ts

@@ -12,11 +12,11 @@ const isIOS =
   Boolean(navigator.platform.match(/(iPhone|iPod|iPad)/i));
 
 const state = {
-  keybindings: null,
+  keybindings: null as Array<{ key: string; bindings: string[] }> | null,
   keydownIndex: 0,
-  pendingPrimaryBindings: [],
-  pendingSecondaryBindings: [],
-  timeout: null,
+  pendingPrimaryBindings: [] as Array<{ key: string; bindings: string[] }>,
+  pendingSecondaryBindings: [] as Array<{ key: string; bindings: string[] }>,
+  timeout: null as NodeJS.Timeout | null,
 };
 
 function reset() {
@@ -222,7 +222,7 @@ function handleKeyDown(overmindInstance, e) {
   // We filter out any hits on full list of bindings on first key down, or just move
   // on filtering on existing pending bindings
   state.pendingPrimaryBindings = (state.keydownIndex === 0
-    ? state.keybindings
+    ? state.keybindings || []
     : state.pendingPrimaryBindings
   ).filter(
     binding =>
@@ -277,8 +277,8 @@ function handleKeyDown(overmindInstance, e) {
   }
 }
 
-let onKeyUp = null;
-let onKeyDown = null;
+let onKeyUp: EventListenerOrEventListenerObject | null = null;
+let onKeyDown: EventListenerOrEventListenerObject | null = null;
 let isStarted = false;
 let _overmindInstance;
 
@@ -289,7 +289,10 @@ export default {
     onKeyUp = handleKeyUp.bind(null);
   },
   set(userKeybindings = []) {
-    const keybindings = [...userKeybindings];
+    const keybindings = [...userKeybindings] as Array<{
+      key: string;
+      bindings: string[];
+    }>;
 
     Object.keys(KEYBINDINGS).forEach(bindingName => {
       if (keybindings.find(x => x.key === bindingName)) {
@@ -314,13 +317,17 @@ export default {
       return;
     }
 
-    window.addEventListener('keydown', onKeyDown);
-    window.addEventListener('keyup', onKeyUp);
-    isStarted = true;
+    if (onKeyDown && onKeyUp) {
+      window.addEventListener('keydown', onKeyDown);
+      window.addEventListener('keyup', onKeyUp);
+      isStarted = true;
+    }
   },
   pause() {
-    window.removeEventListener('keydown', onKeyDown);
-    window.removeEventListener('keyup', onKeyUp);
-    isStarted = false;
+    if (onKeyDown && onKeyUp) {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      isStarted = false;
+    }
   },
 };

packages/app/src/app/overmind/effects/live/clients.ts

@@ -90,7 +90,7 @@ export default (
         client = this.create(moduleShortid, revision);
       }
 
-      return client;
+      return client!;
     },
     create(moduleShortid, initialRevision) {
       const client = new CodeSandboxOTClient(