🔨 Switch Live to use useOvermind (#3063)

* 🔨 Switch Live to use useOvermind

* Resolve discussions

* Fix types

Author: MichaelDeBoey

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

@@ -39,9 +39,10 @@ export const roomJoined: AsyncAction<{
   state.live.isLoading = false;
 });
 
-export const createLiveClicked: AsyncAction<{
-  sandboxId: string;
-}> = async ({ state, effects, actions }, { sandboxId }) => {
+export const createLiveClicked: AsyncAction<string> = async (
+  { actions, effects, state },
+  sandboxId
+) => {
   effects.analytics.track('Create Live Session');
 
   const roomId = await effects.api.createLiveRoom(sandboxId);
@@ -186,9 +187,9 @@ export const onSendChat: Action<{ message: string }> = (
   effects.live.sendChat(message);
 };
 
-export const onChatEnabledChange: Action<{ enabled: boolean }> = (
+export const onChatEnabledChange: Action<boolean> = (
   { effects, state },
-  { enabled }
+  enabled
 ) => {
   effects.analytics.track('Enable Live Chat');
 

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx

@@ -1,51 +1,52 @@
-import { useOvermind } from 'app/overmind';
 import React, { FunctionComponent } from 'react';
 
+import { useOvermind } from 'app/overmind';
+
 import {
   Description,
   ErrorDescription,
   WorkspaceInputContainer,
   WorkspaceSubtitle,
 } from '../../elements';
+
 import { More } from '../More';
+
 import LiveButton from './LiveButton';
 import LiveInfo from './LiveInfo';
 
 export const Live: FunctionComponent = () => {
   const {
+    actions: {
+      live: {
+        createLiveClicked,
+        onAddEditorClicked,
+        onChatEnabledChange,
+        onFollow,
+        onModeChanged,
+        onRemoveEditorClicked,
+        onSessionCloseClicked,
+        onToggleNotificationsHidden,
+      },
+    },
     state: {
-      isLoggedIn,
+      editor: {
+        currentSandbox: { id, owned },
+        isAllModulesSynced,
+      },
       live: {
+        followingUserId,
         isLive,
+        isLoading,
         isOwner,
         isTeam,
-        roomInfo,
         liveUserId,
-        reconnecting,
         notificationsHidden,
-        followingUserId,
-        isLoading,
-      },
-      editor: {
-        isAllModulesSynced,
-        currentSandbox: { owned, id },
-      },
-    },
-    actions: {
-      live: {
-        onModeChanged,
-        onAddEditorClicked,
-        onRemoveEditorClicked,
-        onSessionCloseClicked,
-        onToggleNotificationsHidden,
-        onChatEnabledChange,
-        onFollow,
-        createLiveClicked,
+        reconnecting,
+        roomInfo,
       },
+      isLoggedIn,
     },
   } = useOvermind();
-  const hasUnsyncedModules = !isAllModulesSynced;
-
   const showPlaceHolder = (!isLive && !owned) || !isLoggedIn;
 
   if (showPlaceHolder) {
@@ -66,26 +67,22 @@ export const Live: FunctionComponent = () => {
     <div>
       {isLive ? (
         <LiveInfo
-          setMode={onModeChanged}
           addEditor={onAddEditorClicked}
-          removeEditor={onRemoveEditorClicked}
+          chatEnabled={roomInfo.chatEnabled}
+          currentUserId={liveUserId}
+          followingUserId={followingUserId}
           isOwner={isOwner}
           isTeam={isTeam}
-          roomInfo={roomInfo}
+          notificationsHidden={notificationsHidden}
+          onSessionCloseClicked={onSessionCloseClicked}
           ownerIds={roomInfo.ownerIds}
-          currentUserId={liveUserId}
           reconnecting={reconnecting}
-          onSessionCloseClicked={onSessionCloseClicked}
-          notificationsHidden={notificationsHidden}
-          toggleNotificationsHidden={onToggleNotificationsHidden}
-          chatEnabled={roomInfo.chatEnabled}
-          toggleChatEnabled={() => {
-            onChatEnabledChange({
-              enabled: !roomInfo.chatEnabled,
-            });
-          }}
+          removeEditor={onRemoveEditorClicked}
+          roomInfo={roomInfo}
           setFollowing={onFollow}
-          followingUserId={followingUserId}
+          setMode={onModeChanged}
+          toggleChatEnabled={() => onChatEnabledChange(!roomInfo.chatEnabled)}
+          toggleNotificationsHidden={onToggleNotificationsHidden}
         />
       ) : (
         <>
@@ -95,29 +92,25 @@ export const Live: FunctionComponent = () => {
             re doing it live!
           </Description>
 
-          <>
-            <WorkspaceSubtitle>Create live room</WorkspaceSubtitle>
-            <Description>
-              To invite others you need to generate a URL that others can join.
-            </Description>
+          <WorkspaceSubtitle>Create live room</WorkspaceSubtitle>
+
+          <Description>
+            To invite others you need to generate a URL that others can join.
+          </Description>
+
+          {!isAllModulesSynced && (
+            <ErrorDescription>
+              Save all your files before going live
+            </ErrorDescription>
+          )}
 
-            {hasUnsyncedModules && (
-              <ErrorDescription>
-                Save all your files before going live
-              </ErrorDescription>
-            )}
-            <WorkspaceInputContainer>
-              <LiveButton
-                onClick={() => {
-                  createLiveClicked({
-                    sandboxId: id,
-                  });
-                }}
-                isLoading={isLoading}
-                disable={hasUnsyncedModules}
-              />
-            </WorkspaceInputContainer>
-          </>
+          <WorkspaceInputContainer>
+            <LiveButton
+              disable={!isAllModulesSynced}
+              isLoading={isLoading}
+              onClick={() => createLiveClicked(id)}
+            />
+          </WorkspaceInputContainer>
         </>
       )}
     </div>