🔨 Switch GitHub to use useOvermind (codesandbox#2533)

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/GitHub.tsx

@@ -1,6 +1,6 @@
-import { inject, hooksObserver } from 'app/componentConnectors';
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
+import { useOvermind } from 'app/overmind';
 import { GithubIntegration } from 'app/pages/common/GithubIntegration';
 
 import { Description } from '../../elements';
@@ -10,61 +10,59 @@ import { CreateRepo } from './CreateRepo';
 import { Git } from './Git';
 import { More } from '../More';
 
-export const GitHub = inject('store')(
-  hooksObserver(({ store }) => {
-    const showPlaceHolder =
-      !store.editor.currentSandbox.owned || !store.isLoggedIn;
-
-    if (showPlaceHolder) {
-      const message = store.isLoggedIn ? (
-        <>
-          You need to own this sandbox to export this sandbox to GitHub and make
-          commits and pull requests to it.{' '}
-          <p>Make a fork to own the sandbox.</p>
-        </>
-      ) : (
-        `You need to be signed in to export this sandbox to GitHub and make commits and pull requests to it.`
-      );
-
-      return <More message={message} id="github" />;
-    }
-
-    const {
+export const GitHub: FunctionComponent = () => {
+  const {
+    state: {
       editor: {
-        currentSandbox: { originalGit },
+        currentSandbox: { originalGit, owned },
       },
+      isLoggedIn,
       user: {
         integrations: { github },
       },
-    } = store;
+    },
+  } = useOvermind();
+  const showPlaceHolder = !owned || !isLoggedIn;
+
+  if (showPlaceHolder) {
+    const message = isLoggedIn ? (
+      <>
+        You need to own this sandbox to export this sandbox to GitHub and make
+        commits and pull requests to it. <p>Make a fork to own the sandbox.</p>
+      </>
+    ) : (
+      `You need to be signed in to export this sandbox to GitHub and make commits and pull requests to it.`
+    );
 
-    return github ? ( // eslint-disable-line
-      originalGit ? (
-        <>
-          <Git />
+    return <More message={message} id="github" />;
+  }
 
-          <WorkspaceItem title="Export to GitHub">
-            <CreateRepo />
-          </WorkspaceItem>
-        </>
-      ) : (
-        <>
-          <Description>Export your sandbox to GitHub.</Description>
+  return github ? ( // eslint-disable-line
+    originalGit ? (
+      <>
+        <Git />
 
+        <WorkspaceItem title="Export to GitHub">
           <CreateRepo />
-        </>
-      )
+        </WorkspaceItem>
+      </>
     ) : (
       <>
-        <Description>
-          You can create commits and open pull requests if you add GitHub to
-          your integrations.
-        </Description>
+        <Description>Export your sandbox to GitHub.</Description>
 
-        <div style={{ margin: '1rem' }}>
-          <GithubIntegration small />
-        </div>
+        <CreateRepo />
       </>
-    );
-  })
-);
+    )
+  ) : (
+    <>
+      <Description>
+        You can create commits and open pull requests if you add GitHub to your
+        integrations.
+      </Description>
+
+      <div style={{ margin: '1rem' }}>
+        <GithubIntegration small />
+      </div>
+    </>
+  );
+};