Merge branch 'master' into prototype-common-sync

Author: Saeris

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Create/Create.tsx

@@ -44,7 +44,7 @@ export const Create = () => {
               <LinkButton onClick={actions.signInGithubClicked}>
                 Sign in
               </LinkButton>{' '}
-              to create templates or bookmark templates for later use.
+              to create and bookmark templates for later use.
             </div>
           </CenteredMessage>
         )}

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Create/PersonalTemplates/PersonalTemplates.tsx

@@ -97,25 +97,25 @@ export const PersonalTemplates = ({
     data.me.templates.length === 0 &&
     data.me.bookmarkedTemplates.length === 0;
 
-  if (hasNoTemplates) {
-    return (
-      <CenteredMessage>
-        You don{"'"}t have any templates yet, go on and create or bookmark some!
-      </CenteredMessage>
-    );
-  }
-
   return filter ? (
     <FilteredTemplates
       forkOnOpen
       query={filter}
       templateInfos={allTemplateInfos}
     />
   ) : (
-    <DynamicWidthTemplateList
-      showSecondaryShortcuts
-      forkOnOpen
-      templateInfos={allTemplateInfos}
-    />
+    <>
+      {hasNoTemplates && (
+        <CenteredMessage>
+          You don{"'"}t have any templates yet, go on and create or bookmark
+          some!
+        </CenteredMessage>
+      )}
+      <DynamicWidthTemplateList
+        showSecondaryShortcuts
+        forkOnOpen
+        templateInfos={allTemplateInfos}
+      />
+    </>
   );
 };

packages/app/src/app/components/DelayedAnimation.ts

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
 import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
+import styled from 'styled-components';
 
-export const DelayedAnimation = styled.div<{ delay: number }>`
-  ${({ delay }) => delayEffect(delay || 0)};
+export const DelayedAnimation = styled.div<{ delay?: number }>`
+  ${({ delay = 0 }) => delayEffect(delay)};
 `;

packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts

@@ -117,6 +117,17 @@ export async function initializeBrowserFS({
       }
 
       if (syncSandbox) {
+        // Resolve after 3s, if it doesn't resolve, vscode won't be able to resolve the ext host
+        // and it won't try to reconnect.
+        const timeout = setTimeout(() => {
+          resolve();
+        }, 3000);
+
+        const callResolve = () => {
+          clearTimeout(timeout);
+          resolve();
+        };
+
         self.addEventListener('message', evt => {
           // Some messages are specific to this worker
           if (!evt.data.$fs_ids || !evt.data.$fs_ids.includes(fsId)) {
@@ -142,7 +153,7 @@ export async function initializeBrowserFS({
               touchFileSystem();
               if (isInitialSync) {
                 isInitialSync = false;
-                resolve();
+                callResolve();
               }
               break;
             }
@@ -170,7 +181,7 @@ export async function initializeBrowserFS({
                   $data: {},
                 });
               } else {
-                resolve();
+                callResolve();
               }
               break;
             }

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

@@ -371,7 +371,7 @@ export const onApiError: Action<ApiError> = (
       error.message = result;
     } else if ('errors' in result) {
       const errors = values(result.errors)[0];
-      const fields = Object.keys(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

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

@@ -163,9 +163,10 @@ export const deleteDeployment: AsyncAction = async ({
   );
 };
 
-export const aliasDeployment: AsyncAction<{
-  id: string;
-}> = async ({ state, effects, actions }, { id }) => {
+export const aliasDeployment: AsyncAction<string> = async (
+  { state, effects, actions },
+  id
+) => {
   const zeitConfig = effects.zeit.getConfig(state.editor.currentSandbox);
 
   try {

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

@@ -301,9 +301,10 @@ export const forkSandboxClicked: AsyncAction = async ({
   });
 };
 
-export const likeSandboxToggled: AsyncAction<{
-  id: string;
-}> = async ({ state, effects }, { id }) => {
+export const likeSandboxToggled: AsyncAction<string> = async (
+  { state, effects },
+  id
+) => {
   if (state.editor.sandboxes[id].userLiked) {
     state.editor.sandboxes[id].likeCount--;
     await effects.api.unlikeSandbox(id);

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

@@ -1,19 +1,20 @@
+import { PickedSandboxDetails } from '@codesandbox/common/lib/types';
 import { AsyncAction, Action } from 'app/overmind';
 import { withLoadApp } from 'app/overmind/factories';
 
-export const popularSandboxesMounted: AsyncAction<{
-  date: string;
-}> = withLoadApp(async ({ state, effects }, { date }) => {
-  try {
-    state.explore.popularSandboxes = await effects.api.getPopularSandboxes(
-      date
-    );
-  } catch (error) {
-    effects.notificationToast.error(
-      'There has been a problem getting the sandboxes'
-    );
+export const popularSandboxesMounted: AsyncAction<string> = withLoadApp(
+  async ({ state, effects }, date) => {
+    try {
+      state.explore.popularSandboxes = await effects.api.getPopularSandboxes(
+        date
+      );
+    } catch (error) {
+      effects.notificationToast.error(
+        'There has been a problem getting the sandboxes'
+      );
+    }
   }
-});
+);
 
 export const pickSandbox: AsyncAction<{
   id: string;
@@ -43,13 +44,10 @@ export const pickSandbox: AsyncAction<{
   }
 };
 
-export const pickSandboxModal: Action<{
-  details: {
-    id: string;
-    title: string;
-    description: string;
-  };
-}> = ({ state }, { details }) => {
+export const pickSandboxModal: Action<PickedSandboxDetails> = (
+  { state },
+  details
+) => {
   state.explore.pickedSandboxDetails = details;
   state.currentModal = 'pickSandbox';
 };

packages/app/src/app/pages/CLI/Prompt/elements.ts

@@ -16,7 +16,7 @@ export const Buttons = styled.div`
   }
 `;
 
-export const TokenContainer = styled.input`
+export const TokenInput = styled.input`
   color: white;
 
   width: 100%;

packages/app/src/app/pages/CLI/Prompt/index.tsx

@@ -1,26 +1,19 @@
-import React from 'react';
 import { Button } from '@codesandbox/common/lib/components/Button';
-import { Title } from 'app/components/Title';
+import React, { FunctionComponent, useRef } from 'react';
+
 import { SubTitle } from 'app/components/SubTitle';
-import { Container, Buttons, TokenContainer } from './elements';
+import { Title } from 'app/components/Title';
+import { useOvermind } from 'app/overmind';
 
-interface IPromptProps {
-  error: string;
-  token: string;
-  loading: boolean;
-  username: string;
-  signIn: () => void;
-}
+import { Buttons, Container, TokenInput } from './elements';
 
-const select = ({ target }: { target: any }) => target.select();
+export const Prompt: FunctionComponent = () => {
+  const {
+    actions: { signInCliClicked },
+    state: { authToken, error, isLoadingCLI, user },
+  } = useOvermind();
+  const tokenInputRef = useRef<HTMLInputElement>(null);
 
-export const Prompt: React.FC<IPromptProps> = ({
-  error,
-  token,
-  loading,
-  username,
-  signIn,
-}) => {
   if (error) {
     return (
       <Container>
@@ -35,7 +28,7 @@ export const Prompt: React.FC<IPromptProps> = ({
     );
   }
 
-  if (!username) {
+  if (!user?.username) {
     return (
       <Container>
         <Title>Welcome to CodeSandbox!</Title>
@@ -45,13 +38,15 @@ export const Prompt: React.FC<IPromptProps> = ({
         </SubTitle>
 
         <Buttons>
-          <Button onClick={signIn}>Sign in with GitHub</Button>
+          <Button onClick={() => signInCliClicked()}>
+            Sign in with GitHub
+          </Button>
         </Buttons>
       </Container>
     );
   }
 
-  if (loading) {
+  if (isLoadingCLI) {
     return (
       <Container>
         <Title>Fetching authorization key...</Title>
@@ -61,15 +56,19 @@ export const Prompt: React.FC<IPromptProps> = ({
 
   return (
     <Container>
-      <Title>Hello {username}!</Title>
+      <Title>Hello {user.username}!</Title>
 
       <SubTitle>
         The CLI needs authorization to work.
         <br />
         Please paste the following code in the CLI:
       </SubTitle>
 
-      <TokenContainer onClick={select} value={token} />
+      <TokenInput
+        onClick={() => tokenInputRef.current.select()}
+        ref={tokenInputRef}
+        value={authToken}
+      />
     </Container>
   );
 };