Refactor CLI to functional components with hooks (codesandbox#1953)

Author: MichaelDeBoey

packages/app/src/app/pages/CLI/Prompt/index.js

@@ -6,14 +6,16 @@ import { Button } from '@codesandbox/common/lib/components/Button';
 
 import { Container, Buttons, TokenContainer } from './elements';
 
-const select = event => event.target.select();
+const select = ({ target }) => target.select();
 
-function Prompt({ error, token, loading, username, signIn }) {
+const Prompt = ({ error, token, loading, username, signIn }) => {
   if (error) {
     return (
       <Container>
         <Title>An error occured:</Title>
+
         <SubTitle>{error}</SubTitle>
+
         <Buttons>
           <Button href="/?from-app=1">Go to homepage</Button>
         </Buttons>
@@ -25,9 +27,11 @@ function Prompt({ error, token, loading, username, signIn }) {
     return (
       <Container>
         <Title>Welcome to CodeSandbox!</Title>
+
         <SubTitle>
           You need to sign in with your GitHub account to use the CLI.
         </SubTitle>
+
         <Buttons>
           <Button onClick={signIn}>Sign in with GitHub</Button>
         </Buttons>
@@ -46,14 +50,16 @@ function Prompt({ error, token, loading, username, signIn }) {
   return (
     <Container>
       <Title>Hello {username}!</Title>
+
       <SubTitle>
         The CLI needs authorization to work.
         <br />
         Please paste the following code in the CLI:
       </SubTitle>
+
       <TokenContainer onClick={select} value={token} />
     </Container>
   );
-}
+};
 
 export default Prompt;

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

@@ -1,32 +1,35 @@
-import * as React from 'react';
 import { inject, observer } from 'mobx-react';
+import React, { useEffect } from 'react';
 
 import Navigation from 'app/pages/common/Navigation';
 
-import Prompt from './Prompt';
 import { Container } from './elements';
+import Prompt from './Prompt';
 
-class CLI extends React.Component {
-  componentDidMount() {
-    this.props.signals.cliMounted();
-  }
+const CLI = ({
+  authToken,
+  error,
+  isLoadingCLI,
+  signals: { cliMounted, signInCliClicked },
+  user,
+}) => {
+  useEffect(() => {
+    cliMounted();
+  }, [cliMounted]);
 
-  render() {
-    const { user, authToken, isLoadingCLI, error } = this.props.store;
+  return (
+    <Container>
+      <Navigation title="CLI Authorization" />
 
-    return (
-      <Container>
-        <Navigation title="CLI Authorization" />
-        <Prompt
-          error={error}
-          token={authToken}
-          loading={isLoadingCLI}
-          username={user && user.username}
-          signIn={this.props.signals.signInCliClicked}
-        />
-      </Container>
-    );
-  }
-}
+      <Prompt
+        error={error}
+        loading={isLoadingCLI}
+        signIn={signInCliClicked}
+        token={authToken}
+        username={user && user.username}
+      />
+    </Container>
+  );
+};
 
 export default inject('store', 'signals')(observer(CLI));