🔨 Switch Live to use useOvermind

Author: MichaelDeBoey

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

@@ -9,60 +9,58 @@ 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({});
 
-export const roomJoined: AsyncAction<{
-  roomId: string;
-}> = withLoadApp(async ({ state, effects, actions }, { roomId }) => {
-  if (!state.isLoggedIn) {
-    return;
+    if (state.isLoggedIn) {
+      await actions.live.roomJoined(roomId);
+    }
   }
+);
 
-  await effects.vscode.initialized;
-  await effects.vscode.closeAllTabs();
+export const roomJoined: AsyncAction<string> = withLoadApp(
+  async ({ actions, effects, state }, roomId) => {
+    if (!state.isLoggedIn) {
+      return;
+    }
 
-  if (state.live.isLive) {
-    actions.live.internal.disconnect();
-  }
+    await effects.vscode.initialized;
+    await effects.vscode.closeAllTabs();
 
-  const sandbox = await actions.live.internal.initialize(roomId);
+    if (state.live.isLive) {
+      actions.live.internal.disconnect();
+    }
 
-  if (!sandbox) {
-    return;
-  }
+    const sandbox = await actions.live.internal.initialize(roomId);
 
-  if (state.updateStatus === 'available') {
-    const modal = 'liveVersionMismatch';
-    effects.analytics.track('Open Modal', { modal });
-    state.currentModal = modal;
-  }
+    if (!sandbox) {
+      return;
+    }
 
-  await actions.internal.setCurrentSandbox(sandbox);
+    if (state.updateStatus === 'available') {
+      const modal = 'liveVersionMismatch';
+      effects.analytics.track('Open Modal', { modal });
+      state.currentModal = modal;
+    }
 
-  const items = getItems(state);
-  const defaultItem = items.find(i => i.defaultOpen) || items[0];
+    await actions.internal.setCurrentSandbox(sandbox);
 
-  state.workspace.openedWorkspaceItem = defaultItem.id;
+    const items = getItems(state);
+    const defaultItem = items.find(i => i.defaultOpen) || items[0];
 
-  await effects.vscode.changeSandbox(sandbox, fs => {
-    state.editor.modulesByPath = fs;
-  });
+    state.workspace.openedWorkspaceItem = defaultItem.id;
 
-  effects.live.sendModuleStateSyncRequest();
-  effects.vscode.openModule(state.editor.currentModule);
-  effects.preview.executeCodeImmediately({ initialRender: true });
-  state.editor.isLoading = false;
-});
+    await effects.vscode.changeSandbox(sandbox, fs => {
+      state.editor.modulesByPath = fs;
+    });
+
+    effects.live.sendModuleStateSyncRequest();
+    effects.vscode.openModule(state.editor.currentModule);
+    effects.preview.executeCodeImmediately({ initialRender: true });
+    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,18 @@
+import RecordIconBase from 'react-icons/lib/md/fiber-manual-record';
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  font-size: 4rem;
+  display: block;
+  color: rgb(253, 36, 57);
+
+  svg {
+    transition: 0.3s ease opacity;
+  }
+`;
+
+export const RecordIcon = styled(RecordIconBase)<{ showing: boolean }>`
+  ${({ showing }) => css`
+    opacity: ${showing ? 1 : 0};
+  `};
+`;

packages/app/src/app/pages/Live/Loading/BlinkingDot/elements.ts

@@ -0,0 +1,19 @@
+import React, { FunctionComponent, useEffect, useState } from 'react';
+
+import { Container, RecordIcon } from './elements';
+
+export const BlinkingDot: FunctionComponent = () => {
+  const [showing, setShowing] = useState(true);
+
+  useEffect(() => {
+    const timer = setInterval(() => setShowing(show => !show), 1000);
+
+    return () => clearInterval(timer);
+  });
+
+  return (
+    <Container>
+      <RecordIcon showing={showing} />
+    </Container>
+  );
+};

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

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from 'react';
+
+import { Skeleton } from 'app/components/Skeleton';
+
+import { BlinkingDot } from './BlinkingDot';
+
+export const Loading: FunctionComponent = () => (
+  <Skeleton
+    titles={[
+      {
+        content: <BlinkingDot />,
+        delay: 0,
+      },
+      {
+        content: 'Joining Live Session...',
+        delay: 0.5,
+      },
+    ]}
+  />
+);

packages/app/src/app/pages/Live/Loading/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;
+`;