cleanup

web-app/src/components/Error/index.tsx

@@ -1,4 +1,3 @@
-import { ApolloError } from 'apollo-boost'
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
 import onError from '../../services/sentry/onError'
@@ -14,7 +13,7 @@ const styles = {
 }
 
 interface Props {
-  error?: ApolloError
+  error?: Error
 }
 
 const ErrorView = ({ error }: Props) => {

web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import useFetch from '../../services/hooks/useFetch'
 import * as TT from 'typings/tutorial'
 import TutorialOverview from '../../components/TutorialOverview'
+import Loading from '../Loading'
 
 interface Props {
   url: string
@@ -12,13 +13,14 @@ interface Props {
 const LoadTutorialSummary = (props: Props) => {
   const { data, error, loading } = useFetch<TT.Tutorial>(props.url)
   if (loading) {
-    return <div>Loading...</div>
+    return <Loading text="Loading tutorial summary..." />
   }
+  // TODO: improve error handling
   if (error) {
     return <div>{JSON.stringify(error)}</div>
   }
   if (!data) {
-    return <div>No data returned</div>
+    return <div>No data returned for tutorial</div>
   }
   const onNext = () => {
     props.send({

web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx

@@ -11,7 +11,6 @@ const styles = {
     padding: '1rem',
     width: '100%',
     height: 'auto',
-    backgroundColor: 'yellow',
   },
 }
 

web-app/src/containers/SelectTutorial/index.tsx

@@ -1,27 +1,18 @@
 import * as React from 'react'
-import * as T from 'typings'
-import * as TT from 'typings/tutorial'
 import SelectTutorialForm from './SelectTutorialForm'
 import LoadTutorialSummary from './LoadTutorialSummary'
 
 const styles = {
   page: {
+    position: 'relative' as 'relative',
+    height: 'auto',
     width: '100%',
   },
-  header: {
+  selectPage: {
     padding: '1rem',
   },
 }
 
-interface ContainerProps {
-  send(action: T.Action): void
-  context: T.MachineContext
-}
-
-interface TutorialsData {
-  tutorials: TT.Tutorial[]
-}
-
 interface Props {
   send: any
   context: any
@@ -31,11 +22,7 @@ const SelectTutorialPage = (props: Props) => {
   const [url, setUrl] = React.useState<string | null>(null)
   return (
     <div css={styles.page}>
-      {!url && (
-        <div css={styles.header}>
-          <SelectTutorialForm onUrlChange={setUrl} />
-        </div>
-      )}
+      {!url && <SelectTutorialForm onUrlChange={setUrl} />}
       {url && <LoadTutorialSummary url={url} send={props.send} onClear={() => setUrl(null)} />}
     </div>
   )