Refactor CliInstructions to functional component with hooks (codesandbox#1952)

Author: MichaelDeBoey

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

@@ -1,44 +1,44 @@
-import React from 'react';
-
+import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import { inject } from 'mobx-react';
+import React, { useEffect } from 'react';
 
 import Navigation from 'app/pages/common/Navigation';
-import Title from 'app/components/Title';
 import SubTitle from 'app/components/SubTitle';
-import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import Title from 'app/components/Title';
 
 import { Container, Content, Code } from './elements';
 
-class CliInstructions extends React.PureComponent {
-  componentDidMount() {
-    this.props.signals.cliInstructionsMounted();
-  }
-
-  render() {
-    return (
-      <MaxWidth>
-        <Margin vertical={1.5} horizontal={1.5}>
-          <Container>
-            <Navigation title="CLI Import" />
-            <Content vertical>
-              <Title>Import from CLI</Title>
-              <SubTitle>
-                1. Install the CLI <Code>npm i -g codesandbox</Code>
-              </SubTitle>
-              <SubTitle>
-                2. Go to your project <Code>cd path-of-your-project</Code>
-              </SubTitle>
-              <SubTitle>
-                3. Deploy your project to CodeSandbox{' '}
-                <Code>codesandbox ./</Code>
-              </SubTitle>
-            </Content>
-          </Container>
-        </Margin>
-      </MaxWidth>
-    );
-  }
-}
-
-export default inject(['signals'])(CliInstructions);
+const CLIInstructions = ({ signals: { cliInstructionsMounted } }) => {
+  useEffect(() => {
+    cliInstructionsMounted();
+  }, [cliInstructionsMounted]);
+
+  return (
+    <MaxWidth>
+      <Margin vertical={1.5} horizontal={1.5}>
+        <Container>
+          <Navigation title="CLI Import" />
+
+          <Content vertical>
+            <Title>Import from CLI</Title>
+
+            <SubTitle>
+              1. Install the CLI <Code>npm i -g codesandbox</Code>
+            </SubTitle>
+
+            <SubTitle>
+              2. Go to your project <Code>cd path-of-your-project</Code>
+            </SubTitle>
+
+            <SubTitle>
+              3. Deploy your project to CodeSandbox <Code>codesandbox ./</Code>
+            </SubTitle>
+          </Content>
+        </Container>
+      </Margin>
+    </MaxWidth>
+  );
+};
+
+export default inject(['signals'])(CLIInstructions);