🔨 Switch Live to use useOvermind

Author: MichaelDeBoey

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

@@ -17,17 +17,15 @@ import * as liveMessage from './liveMessageOperators';
 
 export const internal = internalActions;
 
-export const signInToRoom: AsyncAction<{
-  roomId: string;
-}> = withLoadApp(async ({ state, effects, actions }, { roomId }) => {
-  await actions.internal.signIn({});
-
-  if (state.isLoggedIn) {
-    await actions.live.roomJoined({
-      roomId,
-    });
+export const signInToRoom: AsyncAction<string> = withLoadApp(
+  async ({ actions, state }, roomId) => {
+    await actions.internal.signIn({});
+
+    if (state.isLoggedIn) {
+      await actions.live.roomJoined(roomId);
+    }
   }
-});
+);
 
 export const onOperationError: Action<{
   moduleShortid: string;
@@ -39,57 +37,57 @@ export const onOperationError: Action<{
   });
 };
 
-export const roomJoined: AsyncAction<{
-  roomId: string;
-}> = withLoadApp(async ({ state, effects, actions }, { roomId }) => {
-  if (!state.isLoggedIn) {
-    return;
-  }
+export const roomJoined: AsyncAction<string> = withLoadApp(
+  async ({ actions, effects, state }, roomId) => {
+    if (!state.isLoggedIn) {
+      return;
+    }
 
-  await effects.vscode.initialized;
-  await effects.vscode.closeAllTabs();
+    await effects.vscode.initialized;
+    await effects.vscode.closeAllTabs();
 
-  state.live.joinSource = 'live';
+    state.live.joinSource = 'live';
 
-  if (state.live.isLive) {
-    actions.live.internal.disconnect();
-  }
+    if (state.live.isLive) {
+      actions.live.internal.disconnect();
+    }
 
-  const sandbox = await actions.live.internal.initialize(roomId);
+    const sandbox = await actions.live.internal.initialize(roomId);
 
-  if (!sandbox) {
-    return;
-  }
+    if (!sandbox) {
+      return;
+    }
 
-  if (state.updateStatus === 'available') {
-    const modal = 'liveVersionMismatch';
-    effects.analytics.track('Open Modal', { modal });
-    state.currentModal = modal;
-  }
+    if (state.updateStatus === 'available') {
+      const modal = 'liveVersionMismatch';
+      effects.analytics.track('Open Modal', { modal });
+      state.currentModal = modal;
+    }
 
-  await actions.internal.setCurrentSandbox(sandbox);
+    await actions.internal.setCurrentSandbox(sandbox);
 
-  actions.editor.listenToSandboxChanges({ sandboxId: sandbox.id });
-  const items = getItems(state);
-  const defaultItem = items.find(i => i.defaultOpen) || items[0];
+    actions.editor.listenToSandboxChanges({ sandboxId: sandbox.id });
+    const items = getItems(state);
+    const defaultItem = items.find(i => i.defaultOpen) || items[0];
 
-  state.workspace.openedWorkspaceItem = defaultItem.id;
+    state.workspace.openedWorkspaceItem = defaultItem.id;
 
-  await effects.vscode.changeSandbox(sandbox, fs => {
-    state.editor.modulesByPath = fs;
-  });
+    await effects.vscode.changeSandbox(sandbox, fs => {
+      state.editor.modulesByPath = fs;
+    });
 
-  effects.vscode.openModule(state.editor.currentModule);
+    effects.vscode.openModule(state.editor.currentModule);
 
-  if (
-    sandbox.featureFlags.comments &&
-    hasPermission(sandbox.authorization, 'comment')
-  ) {
-    actions.comments.getSandboxComments(sandbox.id);
-  }
+    if (
+      sandbox.featureFlags.comments &&
+      hasPermission(sandbox.authorization, 'comment')
+    ) {
+      actions.comments.getSandboxComments(sandbox.id);
+    }
 
-  state.editor.isLoading = false;
-});
+    state.editor.isLoading = false;
+  }
+);
 
 export const createLiveClicked: AsyncAction<string> = async (
   { actions, effects, state },

packages/app/src/app/pages/Live/BlinkingDot.tsx

@@ -0,0 +1,20 @@
+import { Button, Text } from '@codesandbox/components';
+import css from '@styled-system/css';
+import React, { FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
+
+export const RoomNotFoundError: FunctionComponent = () => (
+  <>
+    <Text size={6} weight="bold">
+      Something went wrong
+    </Text>
+
+    <Text block marginTop={4} size={4}>
+      {`It seems like this session doesn't exist or has been closed`}
+    </Text>
+
+    <Link css={css({ textDecoration: 'none' })} to="/s">
+      <Button marginTop={5}>Create Sandbox</Button>
+    </Link>
+  </>
+);

packages/app/src/app/pages/Live/Error/RoomNotFoundError.tsx

@@ -0,0 +1,36 @@
+import { Button, Text } from '@codesandbox/components';
+import css from '@styled-system/css';
+import React, { FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
+
+import { useOvermind } from 'app/overmind';
+
+import { RoomNotFoundError } from './RoomNotFoundError';
+
+export const Error: FunctionComponent = () => {
+  const {
+    state: {
+      live: { error },
+    },
+  } = useOvermind();
+
+  if (error === 'room not found') {
+    return <RoomNotFoundError />;
+  }
+
+  return (
+    <>
+      <Text size={6} weight="bold">
+        An error occurred while connecting to the live session:
+      </Text>
+
+      <Text block marginTop={4} size={4}>
+        {error}
+      </Text>
+
+      <Link css={css({ textDecoration: 'none' })} to="/s">
+        <Button marginTop={5}>Create Sandbox</Button>
+      </Link>
+    </>
+  );
+};

packages/app/src/app/pages/Live/Error/index.tsx

@@ -0,0 +1,36 @@
+import { Button, Element, Stack, Text } from '@codesandbox/components';
+import React, { FunctionComponent } from 'react';
+import GithubIcon from 'react-icons/lib/go/mark-github';
+import { useParams } from 'react-router-dom';
+
+import { useOvermind } from 'app/overmind';
+
+export const NotAuthenticated: FunctionComponent = () => {
+  const {
+    actions: {
+      live: { signInToRoom },
+    },
+  } = useOvermind();
+  const { roomId } = useParams();
+
+  return (
+    <>
+      <Text weight="bold" size={6}>
+        Sign in required
+      </Text>
+
+      <Text block marginTop={4} size={4}>
+        You need to sign in to join this session
+      </Text>
+
+      <Element marginTop={4}>
+        <Button onClick={() => signInToRoom(roomId)} autoWidth>
+          <Stack gap={2} align="center">
+            <GithubIcon />{' '}
+            <Text style={{ lineHeight: 1 }}>Sign in with GitHub</Text>
+          </Stack>
+        </Button>
+      </Element>
+    </>
+  );
+};