refactor(/app/pages/Dashboard/index): replace Cerebral with Overmind

Author: armujahid

packages/app/src/app/pages/Dashboard/index.js

@@ -1,6 +1,6 @@
 // @ts-check
-import * as React from 'react';
-import { inject, observer } from 'app/componentConnectors';
+import React, { useState, useEffect } from 'react';
+import { useOvermind } from 'app/overmind';
 import RightIcon from 'react-icons/lib/md/keyboard-arrow-right';
 import LeftIcon from 'react-icons/lib/md/keyboard-arrow-left';
 import { withRouter } from 'react-router-dom';
@@ -22,89 +22,85 @@ import {
   OffsettedLogo,
 } from './elements';
 
-class Dashboard extends React.Component {
-  state = {
-    showSidebar: false,
-  };
+const Dashboard = props => {
+  const [showSidebar, setShowSidebar] = useState(false);
 
-  componentDidMount() {
-    this.props.signals.dashboard.dashboardMounted();
-  }
+  const {
+    state: { hasLogIn },
+    actions: { dashboard },
+  } = useOvermind();
 
-  componentWillUnmount() {
-    // Reset store so new visits get fresh data
-    client.resetStore();
-  }
+  useEffect(() => {
+    dashboard.dashboardMounted();
+    return () => {
+      // Reset store so new visits get fresh data
+      client.resetStore();
+    };
+  }, [dashboard]);
 
-  onRouteChange = () => {
-    this.setState({ showSidebar: false });
+  const onRouteChange = () => {
+    setShowSidebar(false);
   };
 
-  toggleSidebar = () => {
-    this.setState(({ showSidebar }) => ({ showSidebar: !showSidebar }));
+  const toggleSidebar = () => {
+    setShowSidebar(!showSidebar);
   };
 
-  render() {
-    const {
-      store: { hasLogIn },
-      history,
-    } = this.props;
-    const { showSidebar } = this.state;
-
-    history.listen(({ state }) => {
-      if (!!state && state.from === 'sandboxSearchFocused') {
-        return;
-      }
-
-      this.onRouteChange();
-    });
-
-    let DashboardContent = (
-      <>
-        <Sidebar active={showSidebar}>
-          <SidebarContents />
-          <ShowSidebarButton onClick={this.toggleSidebar}>
-            {showSidebar ? (
-              <LeftIcon style={{ color: 'white' }} />
-            ) : (
-              <RightIcon style={{ color: 'white' }} />
-            )}
-          </ShowSidebarButton>
-        </Sidebar>
-
-        <ContentContainer>
-          <Content />
-        </ContentContainer>
-      </>
-    );
+  const { history } = props;
 
-    if (!hasLogIn) {
-      DashboardContent = (
-        <Container>
-          <Centered>
-            <LoggedInContainer>
-              <OffsettedLogo />
-              <LoggedInTitle>Sign in to CodeSandbox</LoggedInTitle>
-
-              <SignInButton big style={{ fontSize: '1rem' }} />
-            </LoggedInContainer>
-          </Centered>
-        </Container>
-      );
+  history.listen(({ state }) => {
+    if (!!state && state.from === 'sandboxSearchFocused') {
+      return;
     }
 
-    return (
+    onRouteChange();
+  });
+
+  let DashboardContent = (
+    <>
+      <Sidebar active={showSidebar}>
+        <SidebarContents />
+        <ShowSidebarButton onClick={toggleSidebar}>
+          {showSidebar ? (
+            <LeftIcon style={{ color: 'white' }} />
+          ) : (
+            <RightIcon style={{ color: 'white' }} />
+          )}
+        </ShowSidebarButton>
+      </Sidebar>
+
+      <ContentContainer>
+        <Content />
+      </ContentContainer>
+    </>
+  );
+
+  if (!hasLogIn) {
+    DashboardContent = (
       <Container>
-        <NavigationContainer>
-          <Navigation searchNoInput title="Dashboard" />
-        </NavigationContainer>
-
-        <div style={{ display: 'flex', overflow: 'hidden' }}>
-          {DashboardContent}
-        </div>
+        <Centered>
+          <LoggedInContainer>
+            <OffsettedLogo />
+            <LoggedInTitle>Sign in to CodeSandbox</LoggedInTitle>
+
+            <SignInButton big style={{ fontSize: '1rem' }} />
+          </LoggedInContainer>
+        </Centered>
       </Container>
     );
   }
-}
 
-export default inject('store', 'signals')(withRouter(observer(Dashboard)));
+  return (
+    <Container>
+      <NavigationContainer>
+        <Navigation searchNoInput title="Dashboard" />
+      </NavigationContainer>
+
+      <div style={{ display: 'flex', overflow: 'hidden' }}>
+        {DashboardContent}
+      </div>
+    </Container>
+  );
+};
+
+export default withRouter(Dashboard);