🔨 Refactored 🧠 Overmind Hacktober | /app/pages/CliInstructions/index.tsx : refactor to replace Cerebral with Overmind (#2656)

* ref: CliInstructions - replace Cerebral with Overmind

* use named export

* use named import for CliInstructions

Author: ilhamwahabi

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

@@ -1,46 +1,44 @@
 import React, { useEffect } from 'react';
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import { inject, hooksObserver } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 import { Title } from 'app/components/Title';
 import { SubTitle } from 'app/components/SubTitle';
 import { Navigation } from 'app/pages/common/Navigation';
 import { Container, Content, Code } from './elements';
 
-const CLIInstructions = inject('signals')(
-  hooksObserver(({ signals: { cliInstructionsMounted } }) => {
-    useEffect(() => {
-      cliInstructionsMounted();
-    }, [cliInstructionsMounted]);
+export const CLIInstructions: React.FC = () => {
+  const {
+    actions: { cliInstructionsMounted },
+  } = useOvermind();
 
-    return (
-      <MaxWidth>
-        <Margin vertical={1.5} horizontal={1.5}>
-          <Container>
-            <Navigation title="CLI Import" />
+  useEffect(() => {
+    cliInstructionsMounted();
+  }, [cliInstructionsMounted]);
 
-            <Content vertical>
-              <Title>Import from CLI</Title>
+  return (
+    <MaxWidth>
+      <Margin vertical={1.5} horizontal={1.5}>
+        <Container>
+          <Navigation title="CLI Import" />
 
-              <SubTitle>
-                1. Install the CLI <Code>npm i -g codesandbox</Code>
-              </SubTitle>
+          <Content vertical>
+            <Title>Import from CLI</Title>
 
-              <SubTitle>
-                2. Go to your project <Code>cd path-of-your-project</Code>
-              </SubTitle>
+            <SubTitle>
+              1. Install the CLI <Code>npm i -g codesandbox</Code>
+            </SubTitle>
 
-              <SubTitle>
-                3. Deploy your project to CodeSandbox{' '}
-                <Code>codesandbox ./</Code>
-              </SubTitle>
-            </Content>
-          </Container>
-        </Margin>
-      </MaxWidth>
-    );
-  })
-);
+            <SubTitle>
+              2. Go to your project <Code>cd path-of-your-project</Code>
+            </SubTitle>
 
-// eslint-disable-next-line import/no-default-export
-export default CLIInstructions;
+            <SubTitle>
+              3. Deploy your project to CodeSandbox <Code>codesandbox ./</Code>
+            </SubTitle>
+          </Content>
+        </Container>
+      </Margin>
+    </MaxWidth>
+  );
+};

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

@@ -44,7 +44,9 @@ const GitHub = Loadable(() =>
   import(/* webpackChunkName: 'page-github' */ './GitHub')
 );
 const CliInstructions = Loadable(() =>
-  import(/* webpackChunkName: 'page-cli-instructions' */ './CliInstructions')
+  import(
+    /* webpackChunkName: 'page-cli-instructions' */ './CliInstructions'
+  ).then(module => ({ default: module.CLIInstructions }))
 );
 const Patron = Loadable(() =>
   import(/* webpackChunkName: 'page-patron' */ './Patron')