Merge branch 'master' into vscodeeffect

Author: CompuIves

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

@@ -70,11 +70,10 @@ type ModalName =
   | 'netlifyLogs'
   | 'newSandbox'
   | 'preferences'
-  | 'share'
   | 'searchDependencies'
+  | 'share'
   | 'signInForTemplates'
   | 'userSurvey';
-
 export const modalOpened: Action<{ modal: ModalName; message?: string }> = (
   { state, effects },
   { modal, message }

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

@@ -65,7 +65,7 @@ export const searchChanged: Action<{ search: string }> = (
 };
 
 export const createSandboxClicked: AsyncAction<{
+  body: { collectionId: string };
   sandboxId: string;
-  body: { collectionId: string | undefined };
-}> = ({ actions }, { sandboxId, body }) =>
-  actions.editor.internal.forkSandbox({ sandboxId, body });
+}> = ({ actions }, { body, sandboxId }) =>
+  actions.editor.internal.forkSandbox({ body, sandboxId });

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

@@ -23,14 +23,14 @@ import * as internalActions from './internalActions';
 
 export const internal = internalActions;
 
-export const onNavigateAway: Action = () => { };
+export const onNavigateAway: Action = () => {};
 
 export const addNpmDependency: AsyncAction<{
   name: string;
   version?: string;
   isDev?: boolean;
 }> = withOwnedSandbox(
-  async ({ effects, actions, state }, { name, version, isDev }) => {
+  async ({ actions, effects, state }, { name, version, isDev }) => {
     effects.analytics.track('Add NPM Dependency');
     state.currentModal = null;
     let newVersion = version;
@@ -465,7 +465,7 @@ export const quickActionsClosed: Action = ({ state }) => {
   state.editor.quickActionsOpen = false;
 };
 
-export const setPreviewContent: Action = () => { };
+export const setPreviewContent: Action = () => {};
 
 export const togglePreviewContent: Action = ({ state }) => {
   state.editor.previewWindowVisible = !state.editor.previewWindowVisible;

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

@@ -1,6 +1,8 @@
-import { Action, AsyncAction } from 'app/overmind';
+import { Badge } from '@codesandbox/common/lib/types';
 import { json } from 'overmind';
 
+import { Action, AsyncAction } from 'app/overmind';
+
 export const viewModeChanged: Action<{
   showEditor: boolean;
   showPreview: boolean;
@@ -58,13 +60,11 @@ export const settingChanged: Action<{
   });
 };
 
-export const setBadgeVisibility: AsyncAction<{
-  id: string;
-  visible: boolean;
-}> = async ({ state, effects }, { id, visible }) => {
-  const { badges } = state.user;
-
-  badges.forEach((badge, index) => {
+export const setBadgeVisibility: AsyncAction<Pick<
+  Badge,
+  'id' | 'visible'
+>> = async ({ effects, state }, { id, visible }) => {
+  state.user.badges.forEach((badge, index) => {
     if (badge.id === id) {
       state.user.badges[index].visible = visible;
     }

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

@@ -123,42 +123,48 @@ export const sandboxInfoUpdated: AsyncAction = withOwnedSandbox(
   }
 );
 
-export const externalResourceAdded: AsyncAction<{
-  resource: string;
-}> = withOwnedSandbox(async ({ state, effects, actions }, { resource }) => {
-  const { externalResources } = state.editor.currentSandbox;
+export const externalResourceAdded: AsyncAction<string> = withOwnedSandbox(
+  async ({ effects, state, actions }, resource) => {
+    const { externalResources } = state.editor.currentSandbox;
 
-  externalResources.push(resource);
-  actions.editor.internal.updatePreviewCode();
-
-  try {
-    await effects.api.createResource(state.editor.currentSandbox.id, resource);
-  } catch (error) {
-    externalResources.splice(externalResources.indexOf(resource), 1);
-    effects.notificationToast.error('Could not save external resource');
+    externalResources.push(resource);
     actions.editor.internal.updatePreviewCode();
-  }
-});
 
-export const externalResourceRemoved: AsyncAction<{
-  resource: string;
-}> = withOwnedSandbox(async ({ state, effects, actions }, { resource }) => {
-  const { externalResources } = state.editor.currentSandbox;
-  const resourceIndex = externalResources.indexOf(resource);
+    try {
+      await effects.api.createResource(
+        state.editor.currentSandbox.id,
+        resource
+      );
+    } catch (error) {
+      externalResources.splice(externalResources.indexOf(resource), 1);
+      effects.notificationToast.error('Could not save external resource');
+      actions.editor.internal.updatePreviewCode();
+    }
+  }
+);
 
-  externalResources.splice(resourceIndex, 1);
-  actions.editor.internal.updatePreviewCode();
+export const externalResourceRemoved: AsyncAction<string> = withOwnedSandbox(
+  async ({ effects, state, actions }, resource) => {
+    const { externalResources } = state.editor.currentSandbox;
+    const resourceIndex = externalResources.indexOf(resource);
 
-  try {
-    await effects.api.deleteResource(state.editor.currentSandbox.id, resource);
-  } catch (error) {
-    externalResources.splice(resourceIndex, 0, resource);
-    effects.notificationToast.error(
-      'Could not save removal of external resource'
-    );
+    externalResources.splice(resourceIndex, 1);
     actions.editor.internal.updatePreviewCode();
+
+    try {
+      await effects.api.deleteResource(
+        state.editor.currentSandbox.id,
+        resource
+      );
+    } catch (error) {
+      externalResources.splice(resourceIndex, 0, resource);
+      effects.notificationToast.error(
+        'Could not save removal of external resource'
+      );
+      actions.editor.internal.updatePreviewCode();
+    }
   }
-});
+);
 
 export const integrationsOpened: Action = ({ state }) => {
   state.preferences.itemId = 'integrations';

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/elements.ts

@@ -1,6 +1,6 @@
-import styled, { css, keyframes } from 'styled-components';
 import { Link } from 'react-router-dom';
 import { animated } from 'react-spring/renderprops';
+import styled, { css, keyframes } from 'styled-components';
 
 const fadeIn = keyframes`
   0%   { opacity: 0; }
@@ -17,6 +17,7 @@ export const DarkBG = styled.div<{ closing: boolean }>`
     background-color: black;
     opacity: 0;
     transition: 0.3s ease opacity;
+
     ${!closing &&
       css`
         animation: ${fadeIn} 0.3s;
@@ -52,7 +53,11 @@ export const Container = styled.div<{ hide?: boolean }>`
     cursor: pointer;
     user-select: none;
     transition: 0.3s ease background-color;
-    ${hide && 'opacity: 0'};
+
+    ${hide &&
+      css`
+        opacity: 0;
+      `};
 
     &:first-child {
       border-bottom: 0;
@@ -79,24 +84,5 @@ export const AnimatedModalContainer = styled(animated.div)<{
     css`
       position: fixed;
       transition: 0.15s ease all;
-    `}
-`;
-
-export const FullsizeContainer = styled.div`
-  position: fixed;
-  top: 25vh;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  opacity: 0;
-  z-index: 0;
-  width: 950px;
-  height: auto;
-  margin: 0 auto 15vh;
-  pointer-events: none;
-`;
-
-export const MeasureContainer = styled.div`
-  width: 100%;
-  height: 100%;
+    `};
 `;