Merge branch 'master' into sandbox-downloader

Author: SaraVieira

packages/app/package.json

@@ -74,7 +74,7 @@
     "@babel/plugin-transform-destructuring": "^7.5.0",
     "@babel/preset-env": "^7.5.5",
     "@codesandbox/executors": "^0.1.0",
-    "@codesandbox/template-icons": "^1.0.2",
+    "@codesandbox/template-icons": "^1.1.0",
     "@emmetio/codemirror-plugin": "^0.3.5",
     "@sentry/webpack-plugin": "^1.8.0",
     "@styled-system/css": "^5.0.23",
@@ -158,9 +158,9 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^21.0.0-1575912749783",
+    "overmind": "^21.0.0-1576231149763",
     "overmind-devtools": "^19.0.0",
-    "overmind-react": "^22.0.0-1575912749783",
+    "overmind-react": "^22.0.0-1576231149763",
     "phoenix": "^1.4.11",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",
@@ -252,6 +252,7 @@
     "@types/phoenix": "^1.4.0",
     "@types/prop-types": "^15.7.0",
     "@types/react": "^16.8.12",
+    "@types/react-color": "^2.17.3",
     "@types/react-dom": "^16.8.3",
     "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",

packages/app/src/app/hooks/index.ts

@@ -1 +1,2 @@
+export { useInterval } from './useInterval';
 export { useScript } from './useScript';

packages/app/src/app/hooks/useInterval.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+const noop = () => undefined;
+
+export const useInterval = (callback: () => void, delay: number | null) => {
+  const savedCallback = useRef<() => void>();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (delay !== null) {
+      const tick = () => {
+        if (savedCallback?.current) {
+          savedCallback.current();
+        }
+      };
+
+      const interval = setInterval(tick, delay);
+
+      return () => clearInterval(interval);
+    }
+
+    return noop;
+  }, [delay]);
+};

packages/app/src/app/index.js

@@ -25,10 +25,10 @@ import { createOvermind } from 'overmind';
 import { Provider as ActualOvermindProvider } from 'overmind-react';
 import React from 'react';
 import { ApolloProvider } from 'react-apollo';
+import { DndProvider } from 'react-dnd';
 import { render } from 'react-dom';
 import { Router } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-import { DndProvider } from 'react-dnd';
 
 import { config } from './overmind';
 import { Provider as OvermindProvider } from './overmind/Provider';

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

@@ -19,8 +19,8 @@ import {
   UploadedFilesInfo,
   UserSandbox,
 } from '@codesandbox/common/lib/types';
-import { client } from 'app/graphql/client';
 import { LIST_PERSONAL_TEMPLATES } from 'app/components/CreateNewSandbox/queries';
+import { client } from 'app/graphql/client';
 
 import {
   transformDirectory,
@@ -116,10 +116,12 @@ export default {
       )
       .then(transformModule);
   },
-  saveModules(sandboxId: string, modules: Module[]) {
-    return api.put(`/sandboxes/${sandboxId}/modules/mupdate`, {
-      modules,
-    });
+  saveModules(sandboxId: string, modules: Module[]): Promise<Module[]> {
+    return api
+      .put<IModuleAPIResponse[]>(`/sandboxes/${sandboxId}/modules/mupdate`, {
+        modules,
+      })
+      .then(modulesResult => modulesResult.map(transformModule));
   },
   getGitChanges(sandboxId: string): Promise<GitChanges> {
     return api.get(`/sandboxes/${sandboxId}/git/diff`);

packages/app/src/app/overmind/factories.ts

@@ -3,6 +3,10 @@ import { IDerive, IState, json } from 'overmind';
 
 import { AsyncAction } from '.';
 
+/*
+  Ensures that we have loaded the app with the initial user
+  and settings
+*/
 export const withLoadApp = <T>(
   continueAction?: AsyncAction<T>
 ): AsyncAction<T> => async (context, value) => {
@@ -18,6 +22,7 @@ export const withLoadApp = <T>(
 
   state.isAuthenticating = true;
   state.jwt = effects.jwt.get() || null;
+
   effects.connection.addListener(actions.connectionChanged);
   actions.internal.setStoredSettings();
   effects.keybindingManager.set(

packages/app/src/app/overmind/internalActions.ts

@@ -36,6 +36,7 @@ export const signIn: AsyncAction<{ useExtraScopes?: boolean }> = async (
     effects.live.connect();
     actions.userNotifications.internal.initialize(); // Seemed a bit different originally?
     actions.refetchSandboxInfo();
+    state.isAuthenticating = false;
   } catch (error) {
     actions.internal.handleError({
       message: 'Could not authenticate with Github',
@@ -339,6 +340,46 @@ export const closeTabByIndex: Action<number> = ({ state }, tabIndex) => {
   state.editor.tabs.splice(tabIndex, 1);
 };
 
+export const getErrorMessage: Action<{ error: ApiError | Error }, string> = (
+  context,
+  { error }
+) => {
+  const isGenericError = !('response' in error) || error.response.status >= 500;
+
+  if (isGenericError) {
+    return error.message;
+  }
+
+  const { response } = error as ApiError;
+  /*
+    Update error message with what is coming from the server
+  */
+  const result = response.data;
+
+  if (result) {
+    if (typeof result === 'string') {
+      return result;
+    }
+    if ('errors' in result) {
+      const errors = values(result.errors)[0];
+      const fields = Object.keys(result.errors);
+      if (Array.isArray(errors)) {
+        if (errors[0]) {
+          return `${fields[0]}: ${errors[0]}`; // eslint-disable-line no-param-reassign,prefer-destructuring
+        }
+      } else {
+        return errors; // eslint-disable-line no-param-reassign
+      }
+    } else if (result.error) {
+      return result.error; // eslint-disable-line no-param-reassign
+    } else if (response.status === 413) {
+      return 'File too large, upload limit is 5MB.';
+    }
+  }
+
+  return error.message;
+};
+
 export const handleError: Action<{
   /*
     The message that will show as title of the notification
@@ -385,30 +426,7 @@ export const handleError: Action<{
     return;
   }
 
-  /*
-    Update error message with what is coming from the server
-  */
-  const result = response.data;
-
-  if (result) {
-    if (typeof result === 'string') {
-      error.message = result;
-    } else if ('errors' in result) {
-      const errors = values(result.errors)[0];
-      const fields = Object.keys(result.errors);
-      if (Array.isArray(errors)) {
-        if (errors[0]) {
-          error.message = `${fields[0]}: ${errors[0]}`; // eslint-disable-line no-param-reassign,prefer-destructuring
-        }
-      } else {
-        error.message = errors; // eslint-disable-line no-param-reassign
-      }
-    } else if (result.error) {
-      error.message = result.error; // eslint-disable-line no-param-reassign
-    } else if (response.status === 413) {
-      error.message = 'File too large, upload limit is 5MB.';
-    }
-  }
+  error.message = actions.internal.getErrorMessage({ error });
 
   const notificationActions = {
     primary: [],

packages/app/src/app/overmind/modals.ts

@@ -1,3 +1,5 @@
 export const forkFrozenModal = {
   result: 'fork' as 'fork' | 'cancel' | 'unfreeze',
 };
+
+export const authenticateUserModal = {};

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

@@ -30,16 +30,16 @@ export const orderByChanged: Action<{ orderBy: OrderBy }> = (
   state.dashboard.orderBy = orderBy;
 };
 
-export const blacklistedTemplateAdded: Action<{ template: string }> = (
+export const blacklistedTemplateAdded: Action<string> = (
   { state },
-  { template }
+  template
 ) => {
   state.dashboard.filters.blacklistedTemplates.push(template);
 };
 
-export const blacklistedTemplateRemoved: Action<{ template: string }> = (
+export const blacklistedTemplateRemoved: Action<string> = (
   { state },
-  { template }
+  template
 ) => {
   state.dashboard.filters.blacklistedTemplates = state.dashboard.filters.blacklistedTemplates.filter(
     currentTemplate => currentTemplate !== template
@@ -50,9 +50,9 @@ export const blacklistedTemplatesCleared: Action = ({ state }) => {
   state.dashboard.filters.blacklistedTemplates = [];
 };
 
-export const blacklistedTemplatesChanged: Action<{ templates: string[] }> = (
+export const blacklistedTemplatesChanged: Action<string[]> = (
   { state },
-  { templates }
+  templates
 ) => {
   state.dashboard.filters.blacklistedTemplates = templates;
 };

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

@@ -87,10 +87,6 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   state.editor.isLoading = !hasExistingSandbox;
   state.editor.notFound = false;
 
-  // Only reset changed modules if sandbox wasn't in memory, otherwise a fork
-  // can mark real changed modules as unchanged
-  state.editor.changedModuleShortids = [];
-
   try {
     const sandbox = await effects.api.getSandbox(newId);
 
@@ -232,17 +228,42 @@ export const codeChanged: Action<{
 export const saveClicked: AsyncAction = withOwnedSandbox(
   async ({ state, effects, actions }) => {
     const sandbox = state.editor.currentSandbox;
-    const currentlyChangedModuleShortids = state.editor.changedModuleShortids.slice();
 
     try {
       const changedModules = sandbox.modules.filter(module =>
         state.editor.changedModuleShortids.includes(module.shortid)
       );
 
-      state.editor.changedModuleShortids = [];
+      const updatedModules = await effects.api.saveModules(
+        sandbox.id,
+        changedModules
+      );
+
+      updatedModules.forEach(updatedModule => {
+        const module = sandbox.modules.find(
+          moduleItem => moduleItem.shortid === updatedModule.shortid
+        );
 
-      await effects.api.saveModules(sandbox.id, changedModules);
-      effects.moduleRecover.clearSandbox(sandbox.id);
+        if (module) {
+          module.insertedAt = updatedModule.insertedAt;
+          module.updatedAt = updatedModule.updatedAt;
+
+          module.savedCode =
+            updatedModule.code === module.code ? null : updatedModule.code;
+
+          effects.vscode.sandboxFsSync.writeFile(
+            state.editor.modulesByPath,
+            module
+          );
+          effects.moduleRecover.remove(sandbox.id, module);
+        } else {
+          // We might not have the module, as it was created by the server. In
+          // this case we put it in. There is an edge case here where the user
+          // might delete the module while it is being updated, but it will very
+          // likely not happen
+          sandbox.modules.push(updatedModule);
+        }
+      });
 
       if (
         state.editor.currentSandbox.originalGit &&
@@ -253,13 +274,6 @@ export const saveClicked: AsyncAction = withOwnedSandbox(
 
       effects.preview.executeCodeImmediately();
     } catch (error) {
-      // Put back any unsaved modules taking into account that you
-      // might have changed some modules waiting for saving
-      currentlyChangedModuleShortids.forEach(moduleShortid => {
-        if (!state.editor.changedModuleShortids.includes(moduleShortid)) {
-          state.editor.changedModuleShortids.push(moduleShortid);
-        }
-      });
       actions.internal.handleError({
         message: 'There was a problem with saving the files, please try again',
         error,
@@ -292,6 +306,7 @@ export const forkSandboxClicked: AsyncAction = async ({
 }) => {
   if (
     state.editor.currentSandbox.owned &&
+    !state.editor.currentSandbox.customTemplate &&
     !effects.browser.confirm('Do you want to fork your own sandbox?')
   ) {
     return;
@@ -510,11 +525,6 @@ export const discardModuleChanges: Action<{
 
   module.updatedAt = new Date().toString();
   effects.vscode.revertModule(module);
-
-  state.editor.changedModuleShortids.splice(
-    state.editor.changedModuleShortids.indexOf(moduleShortid),
-    1
-  );
 };
 
 export const fetchEnvironmentVariables: AsyncAction = async ({