Refactors /Sandbox/Editor/Workspace/items/Live/index.js to replace Cerebral with Overmind

Author: Saagar Takhi

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 
 import LiveInfo from './LiveInfo';
 import LiveButton from './LiveButton';
@@ -12,15 +12,46 @@ import {
 } from '../../elements';
 import { More } from '../More';
 
-const Live = ({ signals, store }) => {
-  const hasUnsyncedModules = !store.editor.isAllModulesSynced;
+const Live: React.FC = () => {
+  const {
+    state: {
+      isLoggedIn,
+      live: {
+        isLive,
+        isOwner,
+        isTeam,
+        roomInfo,
+        liveUserId,
+        reconnecting,
+        notificationsHidden,
+        followingUserId,
+        isLoading,
+      },
+      editor: {
+        isAllModulesSynced,
+        currentSandbox: { owned },
+        currentId,
+      },
+    },
+    actions: {
+      live: {
+        onModeChanged,
+        onAddEditorClicked,
+        onRemoveEditorClicked,
+        onSessionCloseClicked,
+        onToggleNotificationsHidden,
+        onChatEnabledChange,
+        onFollow,
+        createLiveClicked,
+      },
+    },
+  } = useOvermind();
+  const hasUnsyncedModules = !isAllModulesSynced;
 
-  const showPlaceHolder =
-    (!store.live.isLive && !store.editor.currentSandbox.owned) ||
-    !store.isLoggedIn;
+  const showPlaceHolder = (!isLive && !owned) || !isLoggedIn;
 
   if (showPlaceHolder) {
-    const message = store.isLoggedIn ? (
+    const message = isLoggedIn ? (
       <>
         You need to own this sandbox to open a live session to collaborate with
         others in real time.{' '}
@@ -35,28 +66,28 @@ const Live = ({ signals, store }) => {
 
   return (
     <div>
-      {store.live.isLive ? (
+      {isLive ? (
         <LiveInfo
-          setMode={signals.live.onModeChanged}
-          addEditor={signals.live.onAddEditorClicked}
-          removeEditor={signals.live.onRemoveEditorClicked}
-          isOwner={store.live.isOwner}
-          isTeam={store.live.isTeam}
-          roomInfo={store.live.roomInfo}
-          ownerIds={store.live.roomInfo.ownerIds}
-          currentUserId={store.live.liveUserId}
-          reconnecting={store.live.reconnecting}
-          onSessionCloseClicked={signals.live.onSessionCloseClicked}
-          notificationsHidden={store.live.notificationsHidden}
-          toggleNotificationsHidden={signals.live.onToggleNotificationsHidden}
-          chatEnabled={store.live.roomInfo.chatEnabled}
+          setMode={onModeChanged}
+          addEditor={onAddEditorClicked}
+          removeEditor={onRemoveEditorClicked}
+          isOwner={isOwner}
+          isTeam={isTeam}
+          roomInfo={roomInfo}
+          ownerIds={roomInfo.ownerIds}
+          currentUserId={liveUserId}
+          reconnecting={reconnecting}
+          onSessionCloseClicked={onSessionCloseClicked}
+          notificationsHidden={notificationsHidden}
+          toggleNotificationsHidden={onToggleNotificationsHidden}
+          chatEnabled={roomInfo.chatEnabled}
           toggleChatEnabled={() => {
-            signals.live.onChatEnabledChange({
-              enabled: !store.live.roomInfo.chatEnabled,
+            onChatEnabledChange({
+              enabled: !roomInfo.chatEnabled,
             });
           }}
-          setFollowing={signals.live.onFollow}
-          followingUserId={store.live.followingUserId}
+          setFollowing={onFollow}
+          followingUserId={followingUserId}
         />
       ) : (
         <>
@@ -80,11 +111,11 @@ const Live = ({ signals, store }) => {
             <WorkspaceInputContainer>
               <LiveButton
                 onClick={() => {
-                  signals.live.createLiveClicked({
-                    sandboxId: store.editor.currentId,
+                  createLiveClicked({
+                    sandboxId: currentId,
                   });
                 }}
-                isLoading={store.live.isLoading}
+                isLoading={isLoading}
                 disable={hasUnsyncedModules}
               />
             </WorkspaceInputContainer>
@@ -95,4 +126,4 @@ const Live = ({ signals, store }) => {
   );
 };
 
-export default inject('signals', 'store')(observer(Live));
+export default Live;