🔨 Switch CLI to use useOvermind

Author: MichaelDeBoey

packages/app/src/app/pages/CLI/Prompt/elements.ts

@@ -16,7 +16,7 @@ export const Buttons = styled.div`
   }
 `;
 
-export const TokenContainer = styled.input`
+export const TokenInput = styled.input`
   color: white;
 
   width: 100%;

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

@@ -1,26 +1,19 @@
-import React from 'react';
 import { Button } from '@codesandbox/common/lib/components/Button';
-import { Title } from 'app/components/Title';
+import React, { FunctionComponent, useRef } from 'react';
+
 import { SubTitle } from 'app/components/SubTitle';
-import { Container, Buttons, TokenContainer } from './elements';
+import { Title } from 'app/components/Title';
+import { useOvermind } from 'app/overmind';
 
-interface IPromptProps {
-  error: string;
-  token: string;
-  loading: boolean;
-  username: string;
-  signIn: () => void;
-}
+import { Buttons, Container, TokenInput } from './elements';
 
-const select = ({ target }: { target: any }) => target.select();
+export const Prompt: FunctionComponent = () => {
+  const {
+    actions: { signInCliClicked },
+    state: { authToken, error, isLoadingCLI, user },
+  } = useOvermind();
+  const tokenInputRef = useRef<HTMLInputElement>(null);
 
-export const Prompt: React.FC<IPromptProps> = ({
-  error,
-  token,
-  loading,
-  username,
-  signIn,
-}) => {
   if (error) {
     return (
       <Container>
@@ -35,7 +28,7 @@ export const Prompt: React.FC<IPromptProps> = ({
     );
   }
 
-  if (!username) {
+  if (!user?.username) {
     return (
       <Container>
         <Title>Welcome to CodeSandbox!</Title>
@@ -45,13 +38,15 @@ export const Prompt: React.FC<IPromptProps> = ({
         </SubTitle>
 
         <Buttons>
-          <Button onClick={signIn}>Sign in with GitHub</Button>
+          <Button onClick={() => signInCliClicked()}>
+            Sign in with GitHub
+          </Button>
         </Buttons>
       </Container>
     );
   }
 
-  if (loading) {
+  if (isLoadingCLI) {
     return (
       <Container>
         <Title>Fetching authorization key...</Title>
@@ -61,15 +56,19 @@ export const Prompt: React.FC<IPromptProps> = ({
 
   return (
     <Container>
-      <Title>Hello {username}!</Title>
+      <Title>Hello {user.username}!</Title>
 
       <SubTitle>
         The CLI needs authorization to work.
         <br />
         Please paste the following code in the CLI:
       </SubTitle>
 
-      <TokenContainer onClick={select} value={token} />
+      <TokenInput
+        onClick={() => tokenInputRef.current.select()}
+        ref={tokenInputRef}
+        value={authToken}
+      />
     </Container>
   );
 };

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

@@ -1,17 +1,14 @@
-import React, { useEffect } from 'react';
-import { Navigation } from 'app/pages/common/Navigation';
+import React, { FunctionComponent, useEffect } from 'react';
+
 import { useOvermind } from 'app/overmind';
+import { Navigation } from 'app/pages/common/Navigation';
+
 import { Container } from './elements';
 import { Prompt } from './Prompt';
 
-interface CliProps {
-  small: boolean;
-}
-
-const CLI: React.FunctionComponent<CliProps> = ({ small }) => {
+export const CLI: FunctionComponent = () => {
   const {
-    state: { user, authToken, isLoadingCLI, error },
-    actions: { cliMounted, signInCliClicked },
+    actions: { cliMounted },
   } = useOvermind();
 
   useEffect(() => {
@@ -22,16 +19,7 @@ const CLI: React.FunctionComponent<CliProps> = ({ small }) => {
     <Container>
       <Navigation title="CLI Authorization" />
 
-      <Prompt
-        error={error}
-        loading={isLoadingCLI}
-        signIn={signInCliClicked}
-        token={authToken}
-        username={user && user.username}
-      />
+      <Prompt />
     </Container>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default CLI;

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

@@ -47,7 +47,11 @@ const Search = Loadable(() =>
     default: module.Search,
   }))
 );
-const CLI = Loadable(() => import(/* webpackChunkName: 'page-cli' */ './CLI'));
+const CLI = Loadable(() =>
+  import(/* webpackChunkName: 'page-cli' */ './CLI').then(module => ({
+    default: module.CLI,
+  }))
+);
 
 const GitHub = Loadable(() =>
   import(/* webpackChunkName: 'page-github' */ './GitHub').then(module => ({