🔨 Switch Dashboard to use useOvermind (codesandbox#3486)

Author: MichaelDeBoey

packages/app/src/app/pages/Dashboard/elements.ts

@@ -1,3 +1,5 @@
+import RightIconBase from 'react-icons/lib/md/keyboard-arrow-right';
+import LeftIconBase from 'react-icons/lib/md/keyboard-arrow-left';
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
@@ -7,6 +9,14 @@ export const Container = styled.div`
   color: rgba(255, 255, 255, 0.8);
 `;
 
+export const LeftIcon = styled(LeftIconBase)`
+  color: #ffffff;
+`;
+
+export const RightIcon = styled(RightIconBase)`
+  color: #ffffff;
+`;
+
 export const ShowSidebarButton = styled.button`
   display: none;
   transition: opacity 200ms ease;
@@ -22,7 +32,7 @@ const paddingTop = css`
   padding-top: 100px;
 `;
 
-export const Sidebar = styled.div<{ active: boolean }>`
+export const SidebarContainer = styled.div<{ active: boolean }>`
   display: flex;
   box-sizing: border-box;
 
@@ -47,7 +57,7 @@ export const Sidebar = styled.div<{ active: boolean }>`
   }
 `;
 
-export const Content = styled.div`
+export const ContentContainer = styled.div`
   ${paddingTop};
 
   box-sizing: border-box;

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

@@ -1,74 +1,47 @@
-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, Redirect } from 'react-router-dom';
-import { Navigation } from 'app/pages/common/Navigation';
 import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { useState, useEffect, FunctionComponent } from 'react';
+import { withRouter, Redirect, RouteComponentProps } from 'react-router-dom';
+
 import { client } from 'app/graphql/client';
+import { useOvermind } from 'app/overmind';
+import { Navigation } from 'app/pages/common/Navigation';
 
-import { Sidebar } from './Sidebar';
 import Content from './Content';
 import {
   Container,
-  Content as ContentContainer,
-  Sidebar as SidebarStyled,
+  ContentContainer,
+  LeftIcon,
+  RightIcon,
+  SidebarContainer,
   ShowSidebarButton,
 } from './elements';
+import { Sidebar } from './Sidebar';
 
-const Dashboard = props => {
-  const [showSidebar, setShowSidebar] = useState(false);
-
+type Props = RouteComponentProps;
+const DashboardComponent: FunctionComponent<Props> = ({ history }) => {
   const {
+    actions: {
+      dashboard: { dashboardMounted },
+    },
     state: { hasLogIn },
-    actions: { dashboard },
   } = useOvermind();
+  const [showSidebar, setShowSidebar] = useState(false);
 
   useEffect(() => {
-    dashboard.dashboardMounted();
-    return () => {
-      // Reset store so new visits get fresh data
-      client.resetStore();
-    };
-  }, [dashboard]);
+    dashboardMounted();
 
-  const onRouteChange = () => {
-    setShowSidebar(false);
-  };
-
-  const toggleSidebar = () => {
-    setShowSidebar(!showSidebar);
-  };
-
-  const { history } = props;
+    // Reset store so new visits get fresh data
+    return () => client.resetStore();
+  }, [dashboardMounted]);
 
   history.listen(({ state }) => {
-    if (!!state && state.from === 'sandboxSearchFocused') {
+    if (state?.from === 'sandboxSearchFocused') {
       return;
     }
 
-    onRouteChange();
+    setShowSidebar(false);
   });
 
-  const DashboardContent = (
-    <>
-      <SidebarStyled active={showSidebar}>
-        <Sidebar />
-        <ShowSidebarButton onClick={toggleSidebar}>
-          {showSidebar ? (
-            <LeftIcon style={{ color: 'white' }} />
-          ) : (
-            <RightIcon style={{ color: 'white' }} />
-          )}
-        </ShowSidebarButton>
-      </SidebarStyled>
-
-      <ContentContainer>
-        <Content />
-      </ContentContainer>
-    </>
-  );
-
   if (!hasLogIn) {
     return <Redirect to={signInPageUrl()} />;
   }
@@ -78,10 +51,20 @@ const Dashboard = props => {
       <Navigation float searchNoInput title="Dashboard" />
 
       <div style={{ display: 'flex', overflow: 'hidden' }}>
-        {DashboardContent}
+        <SidebarContainer active={showSidebar}>
+          <Sidebar />
+
+          <ShowSidebarButton onClick={() => setShowSidebar(show => !show)}>
+            {showSidebar ? <LeftIcon /> : <RightIcon />}
+          </ShowSidebarButton>
+        </SidebarContainer>
+
+        <ContentContainer>
+          <Content />
+        </ContentContainer>
       </div>
     </Container>
   );
 };
 
-export default withRouter(Dashboard);
+export const Dashboard = withRouter(DashboardComponent);

packages/app/src/app/pages/index.tsx

@@ -11,7 +11,7 @@ import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
 
 import { ErrorBoundary } from './common/ErrorBoundary';
 import { Modals } from './common/Modals';
-import Dashboard from './Dashboard';
+import { Dashboard } from './Dashboard';
 import { DevAuthPage } from './DevAuth';
 import { Container, Content } from './elements';
 import { NewSandbox } from './NewSandbox';