🔨 Refactored 🧠 Overmind Hacktober | /Sandbox/Editor/Header/He… (#2644)

Author: chinmaychaudhary

packages/app/src/app/pages/Sandbox/Editor/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { dashboardUrl } from '@codesandbox/common/lib/utils/url-generator';
-import { inject, hooksObserver } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 import React from 'react';
 
 import { UserMenu } from 'app/pages/common/UserMenu';
@@ -29,50 +29,59 @@ import {
 import { Logo } from './Logo';
 import { MenuBar } from './MenuBar';
 import { SandboxName } from './SandboxName';
-import { HeaderProps } from './types';
+import { IHeaderProps } from './types';
 
-export const Header = inject('store')(
-  hooksObserver(({ zenMode, store }: HeaderProps & { store: any }) => {
-    const vscode = store.preferences.settings.experimentVSCode;
+export const Header: React.FC<IHeaderProps> = ({ zenMode }) => {
+  const {
+    state: {
+      preferences: {
+        settings: { experimentVSCode: vscode },
+      },
+      isPatron,
+      updateStatus,
+      hasLogIn,
+      isLoggedIn,
+      user,
+    },
+  } = useOvermind();
 
-    return (
-      <Container zenMode={zenMode}>
-        <Left>
-          {store.hasLogIn ? (
-            <DashboardLink to={dashboardUrl()}>
-              <DashboardIcon />
-            </DashboardLink>
-          ) : (
-            <Logo />
-          )}
+  return (
+    <Container zenMode={zenMode}>
+      <Left>
+        {hasLogIn ? (
+          <DashboardLink to={dashboardUrl()}>
+            <DashboardIcon />
+          </DashboardLink>
+        ) : (
+          <Logo />
+        )}
 
-          {vscode ? <MenuBar /> : <SaveAllButton />}
-        </Left>
+        {vscode ? <MenuBar /> : <SaveAllButton />}
+      </Left>
 
-        <Centered>
-          <SandboxName />
-        </Centered>
+      <Centered>
+        <SandboxName />
+      </Centered>
 
-        <Right>
-          {store.updateStatus === 'available' && <RefreshButton />}
-          {!store.isLoggedIn || (!store.isPatron && <PatronButton />)}
-          {!store.isLoggedIn && <PreferencesButton />}
-          <NewSandboxButton />
-          {store.isLoggedIn && <LikeButton />}
-          {store.user && store.user.curatorAt && <PickButton />}
-          <ShareButton />
-          <ForkButton />
-          <AccountContainer>
-            {store.isLoggedIn ? (
-              <UserMenuContainer>
-                <UserMenu />
-              </UserMenuContainer>
-            ) : (
-              <SignInButton />
-            )}
-          </AccountContainer>
-        </Right>
-      </Container>
-    );
-  })
-);
+      <Right>
+        {updateStatus === 'available' && <RefreshButton />}
+        {!isLoggedIn || (!isPatron && <PatronButton />)}
+        {!isLoggedIn && <PreferencesButton />}
+        <NewSandboxButton />
+        {isLoggedIn && <LikeButton />}
+        {user && user.curatorAt && <PickButton />}
+        <ShareButton />
+        <ForkButton />
+        <AccountContainer>
+          {isLoggedIn ? (
+            <UserMenuContainer>
+              <UserMenu />
+            </UserMenuContainer>
+          ) : (
+            <SignInButton />
+          )}
+        </AccountContainer>
+      </Right>
+    </Container>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Header/types.ts

@@ -1,6 +1,3 @@
-import React from 'react';
-
-export interface HeaderProps extends React.FunctionComponent {
+export interface IHeaderProps {
   zenMode: boolean;
-  store: any;
 }