Typescript and Overmind refactor (#2039)

* refactored sandboxPageMounted with related stuff

* more sequences refactored

* Added some more actions, not tested

* initial refactor of root singals

* a lot of refactoring

* more refactoring

* more refactor

* More refactor

* jup, more refactor

* finished first iteration on editor domain

* Files done

* live refactored

* profile refactored

* server and user notifications refactored

* Whoo, all done

* update overmind

Author: christianalfoni

packages/app/package.json

@@ -217,9 +217,9 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^18.0.0-1557824735814",
-    "overmind-devtools": "^19.0.0-1557824735814",
-    "overmind-react": "^19.0.0-1557824735814",
+    "overmind": "^19.0.1",
+    "overmind-devtools": "^19.0.0",
+    "overmind-react": "^19.0.0",
     "phoenix": "^1.3.0",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",

packages/app/src/app/components/CodeEditor/types.ts

@@ -30,6 +30,7 @@ type ModuleTab = {
 };
 
 type DiffTab = {
+  id: string;
   type: 'DIFF';
   codeA: string;
   codeB: string;

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

@@ -1,11 +1,190 @@
-import { Action } from '.';
+import { Action, AsyncAction } from '.';
 import * as internalActions from './internalActions';
 import { withLoadApp } from './factories';
+import { NotificationType } from '@codesandbox/common/lib/utils/notifications';
 
 export const internal = internalActions;
 
-export const appUnmounted: Action = async ({ effects, actions }) => {
-  effects.connection.removeListener(actions.internal.onConnectionChange);
+export const appUnmounted: AsyncAction = async ({ effects, actions }) => {
+  effects.connection.removeListener(actions.connectionChanged);
 };
 
-export const sandboxPageMounted: Action = withLoadApp(() => {});
+export const sandboxPageMounted: AsyncAction = withLoadApp();
+
+export const searchMounted: AsyncAction = withLoadApp();
+
+export const cliMounted: AsyncAction = withLoadApp(
+  async ({ state, actions }) => {
+    if (state.user) {
+      await actions.internal.authorize();
+    }
+  }
+);
+
+export const forceRender: Action = ({ state }) => {
+  state.editor.forceRender++;
+};
+
+export const cliInstructionsMounted: AsyncAction = withLoadApp();
+
+export const githubPageMounted: AsyncAction = withLoadApp();
+
+export const connectionChanged: Action<boolean> = ({ state }, connected) => {
+  state.connected = connected;
+};
+
+export const modalOpened: Action<{ modal: string; message: string }> = (
+  { state, effects },
+  { modal, message }
+) => {
+  effects.analytics.track('Open Modal', { modal });
+  state.currentModalMessage = message;
+  state.currentModal = modal;
+};
+
+export const modalClosed: Action = ({ state }) => {
+  state.currentModal = null;
+};
+
+export const signInClicked: AsyncAction<{ useExtraScopes: boolean }> = (
+  { actions },
+  options
+) => actions.internal.signIn(options);
+
+export const signInCliClicked: AsyncAction = async ({ state, actions }) => {
+  await actions.internal.signIn({
+    useExtraScopes: false,
+  });
+
+  if (state.user) {
+    await actions.internal.authorize();
+  }
+};
+
+export const userMenuOpened: Action = ({ state }) => {
+  state.userMenuOpen = true;
+};
+
+export const userMenuClosed: Action = ({ state }) => {
+  state.userMenuOpen = false;
+};
+
+export const addNotification: Action<{
+  message: string;
+  type: NotificationType;
+  timeAlive: number;
+}> = ({ effects }, { message, type, timeAlive }) => {
+  effects.notificationToast.add({
+    message,
+    status: effects.notificationToast.convertTypeToStatus(type),
+    timeAlive: timeAlive * 1000,
+  });
+};
+
+export const removeNotification: Action<number> = ({ state }, id) => {
+  const notificationToRemoveIndex = state.notifications.findIndex(
+    notification => notification.id === id
+  );
+
+  state.notifications.splice(notificationToRemoveIndex, 1);
+};
+
+export const signInZeitClicked: AsyncAction = async ({
+  state,
+  effects: { browser, api, notificationToast },
+  actions,
+}) => {
+  state.isLoadingZeit = true;
+
+  const popup = browser.openPopup('/auth/zeit', 'sign in');
+  const data: { code: string } = await browser.waitForMessage('signin');
+
+  popup.close();
+
+  if (data && data.code) {
+    try {
+      state.user = await api.post(`/users/current_user/integrations/zeit`, {
+        code: data.code,
+      });
+      await actions.internal.getZeitUserDetails();
+    } catch (error) {
+      notificationToast.add({
+        message: 'Could not authorize with ZEIT',
+        status: notificationToast.convertTypeToStatus('error'),
+      });
+    }
+  } else {
+    notificationToast.add({
+      message: 'Could not authorize with ZEIT',
+      status: notificationToast.convertTypeToStatus('error'),
+    });
+  }
+
+  state.isLoadingZeit = false;
+};
+
+export const signOutZeitClicked: AsyncAction = async ({ state, effects }) => {
+  await effects.http.delete(`/users/current_user/integrations/zeit`);
+  state.user.integrations.zeit = null;
+};
+
+export const authTokenRequested: AsyncAction = async ({ actions }) => {
+  await actions.internal.authorize();
+};
+
+export const requestAuthorisation: AsyncAction = async ({ actions }) => {
+  await actions.internal.authorize();
+};
+
+export const signInGithubClicked: AsyncAction = async ({ state, actions }) => {
+  state.isLoadingGithub = true;
+  await actions.internal.signIn({ useExtraScopes: false });
+  state.isLoadingGithub = false;
+};
+
+export const signOutClicked: AsyncAction = async ({
+  state,
+  effects,
+  actions,
+}) => {
+  effects.analytics.track('Sign Out', {});
+  state.workspace.openedWorkspaceItem = 'files';
+  if (state.live.isLive) {
+    actions.live.internal.disconnect();
+  }
+  await effects.api.delete(`/users/signout`);
+  actions.internal.removeJwtFromStorage();
+  state.user = null;
+  await actions.refetchSandboxInfo();
+};
+
+export const signOutGithubIntegration: AsyncAction = async ({
+  state,
+  effects,
+}) => {
+  await effects.api.delete(`/users/current_user/integrations/github`);
+  state.user.integrations.github = null;
+};
+
+export const setUpdateStatus: Action<string> = ({ state }, status) => {
+  state.updateStatus = status;
+};
+
+export const refetchSandboxInfo: AsyncAction = async ({ state, actions }) => {
+  if (state.editor.currentId) {
+    const id = state.editor.currentId;
+    const sandbox = await actions.internal.getSandbox(id);
+
+    state.editor.sandboxes[id].collection = sandbox.collection;
+    state.editor.sandboxes[id].owned = sandbox.owned;
+    state.editor.sandboxes[id].userLiked = sandbox.userLiked;
+    state.editor.sandboxes[id].title = sandbox.title;
+  }
+};
+
+export const track: Action<{ name: string; data: any }> = (
+  { effects },
+  { name, data }
+) => {
+  effects.analytics.track(name, data);
+};

packages/app/src/app/overmind/constants.ts

@@ -0,0 +1 @@
+export const NetlifyBaseURL = 'https://netlify.deploy.codesandbox.io/site';

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

@@ -0,0 +1,21 @@
+import track, {
+  identify,
+  setUserId,
+} from '@codesandbox/common/lib/utils/analytics';
+
+export default (() => {
+  const trackedEvents = {};
+
+  return {
+    track,
+    trackOnce(event: string, data: any) {
+      if (trackedEvents[event]) {
+        return;
+      }
+      trackedEvents[event] = true;
+      track(event, data);
+    },
+    identify,
+    setUserId,
+  };
+})();

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

@@ -97,7 +97,11 @@ export default (() => {
     initialize(options: Options) {
       _options = options;
     },
-    get(path: string, params?: { [key: string]: string }, options?: {}) {
+    get<T>(
+      path: string,
+      params?: { [key: string]: string },
+      options?: {}
+    ): Promise<T> {
       return axios
         .get(API_ROOT + path, {
           params,
@@ -106,31 +110,31 @@ export default (() => {
         .then(response => handleResponse(response, options))
         .catch(e => handleError(e));
     },
-    post(path, body, options) {
+    post<T>(path, body, options?): Promise<T> {
       return axios
         .post(API_ROOT + path, decamelizeKeys(body), {
           headers: createHeaders(_options.provideJwtToken()),
         })
         .then(response => handleResponse(response, options))
         .catch(e => handleError(e));
     },
-    patch(path, body, options) {
+    patch<T>(path, body, options?): Promise<T> {
       return axios
         .patch(API_ROOT + path, decamelizeKeys(body), {
           headers: createHeaders(_options.provideJwtToken()),
         })
         .then(response => handleResponse(response, options))
         .catch(e => handleError(e));
     },
-    put(path, body, options) {
+    put<T>(path, body, options?): Promise<T> {
       return axios
         .put(API_ROOT + path, decamelizeKeys(body), {
           headers: createHeaders(_options.provideJwtToken()),
         })
         .then(response => handleResponse(response, options))
         .catch(e => handleError(e));
     },
-    delete(path, params, options) {
+    delete<T>(path, params?, options?): Promise<T> {
       return axios
         .delete(API_ROOT + path, {
           params,

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

@@ -45,7 +45,7 @@ export default {
       close: () => popup.close(),
     };
   },
-  waitForMessage(type) {
+  waitForMessage<T>(type): Promise<T> {
     return new Promise(resolve => {
       window.addEventListener('message', function onMessage(event) {
         if (event.data.type === type) {

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

@@ -8,7 +8,9 @@ export default {
     listeners.set(listener, disposer);
   },
   removeListener(listener: (connected: boolean) => void) {
-    listeners.get(listener)();
-    listeners.delete(listener);
+    if (listeners.has(listener)) {
+      listeners.get(listener)();
+      listeners.delete(listener);
+    }
   },
 };

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

@@ -1,5 +1,3 @@
-export default {
-  get<T>(url: string): Promise<T> {
-    return window.fetch(url).then(response => response.json());
-  },
-};
+import axios from 'axios';
+
+export default axios;

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

@@ -16,3 +16,6 @@ export { default as settingsStore } from './settingsStore';
 export { default as socket } from './socket';
 export { default as sse } from './sse';
 export { default as http } from './http';
+export { default as analytics } from './analytics';
+export { default as notificationToast } from './notificationToast';
+export { default as vscode } from './vscode';