From cdab9e4b5ecdac87ec21293a1ee703bda9484fc3 Mon Sep 17 00:00:00 2001
From: Saagar Takhi <saagar.takhi@sprinklr.com>
Date: Sun, 6 Oct 2019 02:44:29 +0530
Subject: [PATCH] Refactors /Sandbox/Editor/Workspace/items/Live/index.js to
 replace Cerebral with Overmind & convert js to tsx

---
 .../pages/Sandbox/Editor/Workspace/index.tsx  |   2 +-
 .../Editor/Workspace/items/Live/index.js      |  98 --------------
 .../Editor/Workspace/items/Live/index.tsx     | 127 ++++++++++++++++++
 3 files changed, 128 insertions(+), 99 deletions(-)
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.js
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
index f38fa1ff9ec..7b7eba2cc97 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
@@ -22,7 +22,7 @@ import ConfigurationFiles from './items/ConfigurationFiles';
 import { Deployment } from './items/Deployment';
 import { FilesItem } from './items/Files';
 import { GitHub } from './items/GitHub';
-import Live from './items/Live';
+import { Live } from './items/Live';
 import { More } from './items/More';
 import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo';
 import { ProjectInfo } from './items/ProjectInfo';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.js
deleted file mode 100644
index 27f93049ee0..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
-
-import LiveInfo from './LiveInfo';
-import LiveButton from './LiveButton';
-
-import {
-  Description,
-  WorkspaceInputContainer,
-  WorkspaceSubtitle,
-  ErrorDescription,
-} from '../../elements';
-import { More } from '../More';
-
-const Live = ({ signals, store }) => {
-  const hasUnsyncedModules = !store.editor.isAllModulesSynced;
-
-  const showPlaceHolder =
-    (!store.live.isLive && !store.editor.currentSandbox.owned) ||
-    !store.isLoggedIn;
-
-  if (showPlaceHolder) {
-    const message = store.isLoggedIn ? (
-      <>
-        You need to own this sandbox to open a live session to collaborate with
-        others in real time.{' '}
-        <p>Fork this sandbox to live share it with others!</p>
-      </>
-    ) : (
-      `You need to be signed in to open a live session to collaborate with others in real time. Sign in to live share this sandbox!`
-    );
-
-    return <More message={message} id="live" />;
-  }
-
-  return (
-    <div>
-      {store.live.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}
-          toggleChatEnabled={() => {
-            signals.live.onChatEnabledChange({
-              enabled: !store.live.roomInfo.chatEnabled,
-            });
-          }}
-          setFollowing={signals.live.onFollow}
-          followingUserId={store.live.followingUserId}
-        />
-      ) : (
-        <>
-          <Description style={{ marginBottom: '1rem' }}>
-            Invite others to live edit this sandbox with you. We
-            {"'"}
-            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>
-
-            {hasUnsyncedModules && (
-              <ErrorDescription>
-                Save all your files before going live
-              </ErrorDescription>
-            )}
-            <WorkspaceInputContainer>
-              <LiveButton
-                onClick={() => {
-                  signals.live.createLiveClicked({
-                    sandboxId: store.editor.currentId,
-                  });
-                }}
-                isLoading={store.live.isLoading}
-                disable={hasUnsyncedModules}
-              />
-            </WorkspaceInputContainer>
-          </>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default inject('signals', 'store')(observer(Live));
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx
new file mode 100644
index 00000000000..76cb2ba9829
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx
@@ -0,0 +1,127 @@
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
+
+import LiveInfo from './LiveInfo';
+import LiveButton from './LiveButton';
+
+import {
+  Description,
+  WorkspaceInputContainer,
+  WorkspaceSubtitle,
+  ErrorDescription,
+} from '../../elements';
+import { More } from '../More';
+
+export const Live: FunctionComponent = () => {
+  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 = (!isLive && !owned) || !isLoggedIn;
+
+  if (showPlaceHolder) {
+    const message = isLoggedIn ? (
+      <>
+        You need to own this sandbox to open a live session to collaborate with
+        others in real time.{' '}
+        <p>Fork this sandbox to live share it with others!</p>
+      </>
+    ) : (
+      `You need to be signed in to open a live session to collaborate with others in real time. Sign in to live share this sandbox!`
+    );
+
+    return <More message={message} id="live" />;
+  }
+
+  return (
+    <div>
+      {isLive ? (
+        <LiveInfo
+          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={() => {
+            onChatEnabledChange({
+              enabled: !roomInfo.chatEnabled,
+            });
+          }}
+          setFollowing={onFollow}
+          followingUserId={followingUserId}
+        />
+      ) : (
+        <>
+          <Description style={{ marginBottom: '1rem' }}>
+            Invite others to live edit this sandbox with you. We
+            {"'"}
+            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>
+
+            {hasUnsyncedModules && (
+              <ErrorDescription>
+                Save all your files before going live
+              </ErrorDescription>
+            )}
+            <WorkspaceInputContainer>
+              <LiveButton
+                onClick={() => {
+                  createLiveClicked({
+                    sandboxId: currentId,
+                  });
+                }}
+                isLoading={isLoading}
+                disable={hasUnsyncedModules}
+              />
+            </WorkspaceInputContainer>
+          </>
+        </>
+      )}
+    </div>
+  );
+};