🔨 Switch GitHub to use useOvermind

Author: MichaelDeBoey

packages/app/src/app/pages/GitHub/elements.js renamed to packages/app/src/app/pages/GitHub/elements.ts

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import Input from '@codesandbox/common/lib/components/Input';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import InputBase from '@codesandbox/common/lib/components/Input';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   height: 100%;
@@ -10,7 +10,7 @@ export const Container = styled.div`
 
 export const Content = styled(Centered)`
   max-width: 50em;
-  margin: auto;
+  margin: 5rem auto auto;
 `;
 
 export const Wrapper = styled.div`
@@ -28,12 +28,14 @@ export const Description = styled.div`
   margin-bottom: 1rem;
 `;
 
-export const StyledInput = styled(Input)`
+export const Input = styled(InputBase)`
   font-size: 1.25rem;
   margin-bottom: 2rem;
 `;
 
 export const ErrorMessage = styled.div`
-  color: ${props => props.theme.red};
-  margin-bottom: 2rem;
+  ${({ theme }) => css`
+    color: ${theme.red};
+    margin-bottom: 2rem;
+  `};
 `;

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

@@ -1,42 +1,50 @@
-import React, { useCallback, useEffect, useState } from 'react';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import {
   gitHubToSandboxUrl,
-  protocolAndHost,
   gitHubRepoPattern,
+  protocolAndHost,
 } from '@codesandbox/common/lib/utils/url-generator';
-import { useOvermind } from 'app/overmind';
-import { Title } from 'app/components/Title';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  useEffect,
+  useState,
+} from 'react';
+
 import { SubTitle } from 'app/components/SubTitle';
+import { Title } from 'app/components/Title';
+import { useOvermind } from 'app/overmind';
 import { Navigation } from 'app/pages/common/Navigation';
+
 import {
   Container,
   Content,
   Description,
   ErrorMessage,
+  Input,
   Label,
-  StyledInput,
 } from './elements';
 
-const getFullGitHubUrl = url =>
+const getFullGitHubUrl = (url: string) =>
   `${protocolAndHost()}${gitHubToSandboxUrl(url)}`;
 
-export const GitHub = () => {
-  const [error, setError] = useState(null);
-  const [transformedUrl, setTransformedUrl] = useState('');
-  const [url, setUrl] = useState('');
-
+export const GitHub: FunctionComponent = () => {
   const {
     actions: { githubPageMounted },
   } = useOvermind();
+  const [error, setError] = useState(null);
+  const [transformedUrl, setTransformedUrl] = useState('');
+  const [url, setUrl] = useState('');
 
   useEffect(() => {
     githubPageMounted();
   }, [githubPageMounted]);
 
-  const updateUrl = useCallback(({ target: { value: newUrl } }) => {
+  const updateUrl = ({
+    target: { value: newUrl },
+  }: ChangeEvent<HTMLInputElement>) => {
     if (!newUrl) {
       setError(null);
       setTransformedUrl('');
@@ -50,21 +58,15 @@ export const GitHub = () => {
       setTransformedUrl(getFullGitHubUrl(newUrl.trim()));
       setUrl(newUrl);
     }
-  }, []);
+  };
 
   return (
     <MaxWidth>
       <Margin vertical={1.5} horizontal={1.5}>
         <Container>
           <Navigation title="GitHub Import" />
 
-          <Content
-            vertical
-            horizontal
-            css={`
-              margin-top: 5rem;
-            `}
-          >
+          <Content horizontal vertical>
             <Description>
               <Title>Import from GitHub</Title>
 
@@ -87,7 +89,7 @@ export const GitHub = () => {
               URL to GitHub Repository (supports branches and paths too)
             </Label>
 
-            <StyledInput
+            <Input
               name="githuburl"
               onChange={updateUrl}
               placeholder="Insert GitHub URL..."
@@ -98,7 +100,7 @@ export const GitHub = () => {
 
             <Label htmlFor="sandboxurl">Converted Sandbox URL</Label>
 
-            <StyledInput
+            <Input
               name="sandboxurl"
               placeholder="The Sandbox URL"
               value={transformedUrl}