🔨 Switch Live to use useOvermind

Author: MichaelDeBoey

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

@@ -15,17 +15,15 @@ import { IModuleStateModule } from './types';
 
 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;
@@ -55,50 +53,50 @@ export const onOperationError: Action<{
   effects.vscode.setModuleCode(module);
 };
 
-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.live.sendModuleStateSyncRequest();
-  effects.vscode.openModule(state.editor.currentModule);
-  state.editor.isLoading = false;
-});
+    effects.live.sendModuleStateSyncRequest();
+    effects.vscode.openModule(state.editor.currentModule);
+    state.editor.isLoading = false;
+  }
+);
 
 export const createLiveClicked: AsyncAction<string> = async (
   { actions, effects, state },

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

@@ -0,0 +1,18 @@
+import React, { FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
+
+import { Notice, Title } from '../elements';
+
+export const RoomNotFoundError: FunctionComponent = () => (
+  <>
+    <Notice>Something went wrong</Notice>
+
+    <Title>
+      {`It seems like this session doesn't exist or has been closed`}
+    </Title>
+
+    <br />
+
+    <Link to="/s">Create Sandbox</Link>
+  </>
+);

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

@@ -0,0 +1,34 @@
+import React, { FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
+
+import { SubTitle } from 'app/components/SubTitle';
+import { Title } from 'app/components/Title';
+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 (
+    <>
+      <Title>An error occured while connecting to the live session:</Title>
+
+      <SubTitle>{error}</SubTitle>
+
+      <br />
+
+      <br />
+
+      <Link to="/s">Create Sandbox</Link>
+    </>
+  );
+};

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

@@ -0,0 +1,6 @@
+import GithubIconBase from 'react-icons/lib/go/mark-github';
+import styled from 'styled-components';
+
+export const GitHubIcon = styled(GithubIconBase)`
+  margin-right: 0.5rem;
+`;

packages/app/src/app/pages/Live/NotAuthenticated/elements.ts

@@ -0,0 +1,38 @@
+import { Button } from '@codesandbox/common/lib/components/Button';
+import Row from '@codesandbox/common/lib/components/flex/Row';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Notice, Title } from '../elements';
+
+import { GitHubIcon } from './elements';
+
+type Props = {
+  roomId: string;
+};
+export const NotAuthenticated: FunctionComponent<Props> = ({ roomId }) => {
+  const {
+    actions: {
+      live: { signInToRoom },
+    },
+  } = useOvermind();
+
+  return (
+    <>
+      <Notice>Sign in required</Notice>
+
+      <Title>You need to sign in to join this session</Title>
+
+      <br />
+
+      <div>
+        <Button onClick={() => signInToRoom(roomId)} small>
+          <Row>
+            <GitHubIcon /> Sign in with GitHub
+          </Row>
+        </Button>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,29 @@
+import CenteredBase from '@codesandbox/common/lib/components/flex/Centered';
+import PaddingBase from '@codesandbox/common/lib/components/spacing/Padding';
+import styled from 'styled-components';
+
+import { Title as TitleBase } from 'app/components/Title';
+
+export const Centered = styled(CenteredBase)`
+  flex: 1;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Notice = styled.div`
+  font-weight: 300;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+`;
+
+export const Padding = styled(PaddingBase)`
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+`;
+
+export const Title = styled(TitleBase)`
+  font-size: 1.25rem;
+`;