refactored live index

packages/app/src/app/pages/Live/index.js → packages/app/src/app/pages/Live/index.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useEffect, useCallback } from 'react';
+import { Link, RouteProps } from 'react-router-dom';
+import { useOvermind } from 'app/overmind';
 import Helmet from 'react-helmet';
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
 import Padding from '@codesandbox/common/lib/components/spacing/Padding';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
-import { inject, observer } from 'app/componentConnectors';
 import { Title } from 'app/components/Title';
 import { SubTitle } from 'app/components/SubTitle';
 import { Skeleton } from 'app/components/Skeleton';
@@ -16,46 +16,48 @@ import { hasAuthToken } from 'app/utils/user';
 import Editor from '../Sandbox/Editor';
 import { BlinkingDot } from './BlinkingDot';
 
-class LivePage extends React.Component {
-  loggedIn = this.props.store.hasLogIn;
-
-  UNSAFE_componentWillMount() {
-    this.initializeLive();
-  }
-
-  disconnectLive() {
-    if (this.props.store.live.isLive) {
-      this.props.signals.live.onNavigateAway({});
+export const LivePage: React.FunctionComponent<RouteProps> = ({ match }) => {
+  const {
+    state: {
+      hasLogIn,
+      live: { isLive, error, isLoading },
+      editor: { currentSandbox },
+      user,
+    },
+    actions: { live, editor },
+  } = useOvermind();
+  let loggedIn = hasLogIn;
+
+  const initializeLive = useCallback(() => {
+    if (hasAuthToken()) {
+      loggedIn = true;
+      live.roomJoined({
+        roomId: match.params.id,
+      });
     }
-  }
+  }, [match.params.id]);
 
-  componentWillUnmount() {
-    this.disconnectLive();
-    this.props.signals.editor.onNavigateAway({});
-  }
+  initializeLive();
 
-  initializeLive = () => {
-    if (hasAuthToken()) {
-      this.loggedIn = true;
-      this.props.signals.live.roomJoined({
-        roomId: this.props.match.params.id,
-      });
+  const disconnectLive = () => {
+    if (isLive) {
+      live.onNavigateAway();
     }
   };
 
-  componentDidUpdate(prevProps) {
-    if (
-      prevProps.match.params.id !== this.props.match.params.id ||
-      (hasAuthToken() && !this.loggedIn)
-    ) {
-      this.disconnectLive();
-      this.initializeLive();
+  useEffect(() => {
+    if (hasAuthToken() && !loggedIn) {
+      disconnectLive();
+      initializeLive();
     }
-  }
 
-  getContent = () => {
-    const { store } = this.props;
+    return () => {
+      disconnectLive();
+      editor.onNavigateAway();
+    };
+  }, [disconnectLive, editor, initializeLive, loggedIn, match.params.id]);
 
+  const getContent = () => {
     if (!hasAuthToken()) {
       return (
         <>
@@ -80,8 +82,8 @@ class LivePage extends React.Component {
       );
     }
 
-    if (store.live.error) {
-      if (store.live.error === 'room not found') {
+    if (error) {
+      if (error === 'room not found') {
         return (
           <>
             <div
@@ -107,15 +109,15 @@ class LivePage extends React.Component {
       return (
         <>
           <Title>An error occured while connecting to the live session:</Title>
-          <SubTitle>{store.live.error}</SubTitle>
+          <SubTitle>{error}</SubTitle>
           <br />
           <br />
           <Link to="/s">Create Sandbox</Link>
         </>
       );
     }
 
-    if (store.live.isLoading || !store.editor.currentSandbox) {
+    if (isLoading || !currentSandbox) {
       return (
         <>
           <Skeleton
@@ -137,54 +139,45 @@ class LivePage extends React.Component {
     return null;
   };
 
-  render() {
-    const { match, store } = this.props;
-
-    // eslint-disable-next-line
-    store.user; // Force observer call
+  // eslint-disable-next-line
+  user; // Force observer call
 
-    const content = this.getContent();
-
-    if (content) {
-      return (
-        <Fullscreen>
-          <Padding
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              width: '100vw',
-              height: '100vh',
-            }}
-            margin={1}
-          >
-            <Navigation title="Live Session" />
-            <Centered
-              style={{ flex: 1, width: '100%', height: '100%' }}
-              horizontal
-              vertical
-            >
-              {content}
-            </Centered>
-          </Padding>
-        </Fullscreen>
-      );
-    }
-
-    const sandbox = store.editor.currentSandbox;
+  const content = getContent();
 
+  if (content) {
     return (
-      <>
-        {sandbox && (
-          <Helmet>
-            <title>{getSandboxName(sandbox)} - CodeSandbox</title>
-          </Helmet>
-        )}
-        <Editor match={match} />
-        <QuickActions />
-      </>
+      <Fullscreen>
+        <Padding
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100vw',
+            height: '100vh',
+          }}
+          margin={1}
+        >
+          <Navigation title="Live Session" />
+          <Centered
+            style={{ flex: 1, width: '100%', height: '100%' }}
+            horizontal
+            vertical
+          >
+            {content}
+          </Centered>
+        </Padding>
+      </Fullscreen>
     );
   }
-}
 
-// eslint-disable-next-line import/no-default-export
-export default inject('signals', 'store')(observer(LivePage));
+  return (
+    <>
+      {currentSandbox && (
+        <Helmet>
+          <title>{getSandboxName(currentSandbox)} - CodeSandbox</title>
+        </Helmet>
+      )}
+      <Editor match={match} />
+      <QuickActions />
+    </>
+  );
+};