🔨 Switch More to use useOvermind (codesandbox#2534)

Author: MichaelDeBoey

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

@@ -1,57 +1,51 @@
-import React, { useEffect } from 'react';
-import ProgressButton from '@codesandbox/common/lib/components/ProgressButton';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import ProgressButton from '@codesandbox/common/lib/components/ProgressButton';
 import track from '@codesandbox/common/lib/utils/analytics';
-import { inject, hooksObserver } from 'app/componentConnectors';
+import React, { FunctionComponent, useEffect } from 'react';
 
+import { useOvermind } from 'app/overmind';
 import { SignInButton } from 'app/pages/common/SignInButton';
 
 import { Description } from '../../elements';
 
 interface Props {
   id: string;
   message: string | JSX.Element;
-  store: any;
-  signals: any;
 }
 
-export const More = inject('store', 'signals')(
-  hooksObserver(
-    ({
-      id,
-      message,
-      signals: {
-        editor: { forkSandboxClicked },
-      },
-      store: {
-        isLoggedIn,
-        editor: { isForkingSandbox },
-      },
-    }: Props) => {
-      useEffect(() => {
-        track('Workspace - More Opened', { id });
-      }, [id]);
+export const More: FunctionComponent<Props> = ({ id, message }) => {
+  const {
+    actions: {
+      editor: { forkSandboxClicked },
+    },
+    state: {
+      isLoggedIn,
+      editor: { isForkingSandbox },
+    },
+  } = useOvermind();
+
+  useEffect(() => {
+    track('Workspace - More Opened', { id });
+  }, [id]);
 
-      return (
-        <div>
-          <Description>{message}</Description>
+  return (
+    <div>
+      <Description>{message}</Description>
 
-          <Margin margin={1}>
-            {!isLoggedIn ? (
-              <SignInButton block />
-            ) : (
-              <ProgressButton
-                block
-                loading={isForkingSandbox}
-                onClick={() => forkSandboxClicked()}
-                small
-              >
-                {isForkingSandbox ? 'Forking Sandbox...' : 'Fork Sandbox'}
-              </ProgressButton>
-            )}
-          </Margin>
-        </div>
-      );
-    }
-  )
-);
+      <Margin margin={1}>
+        {!isLoggedIn ? (
+          <SignInButton block />
+        ) : (
+          <ProgressButton
+            block
+            loading={isForkingSandbox}
+            onClick={() => forkSandboxClicked()}
+            small
+          >
+            {isForkingSandbox ? 'Forking Sandbox...' : 'Fork Sandbox'}
+          </ProgressButton>
+        )}
+      </Margin>
+    </div>
+  );
+};