move load from url into its own function

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

@@ -1,13 +1,11 @@
 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
-  send: any
-  onClear(): void
+  onSetDataFromUrl(data: TT.Tutorial): void
 }
 
 const LoadTutorialSummary = (props: Props) => {
@@ -22,15 +20,8 @@ const LoadTutorialSummary = (props: Props) => {
   if (!data) {
     return <div>No data returned for tutorial</div>
   }
-  const onNext = () => {
-    props.send({
-      type: 'TUTORIAL_START',
-      payload: {
-        tutorial: data,
-      },
-    })
-  }
-  return <TutorialOverview onNext={onNext} tutorial={data} onClear={props.onClear} />
+  props.onSetDataFromUrl(data)
+  return null
 }
 
 export default LoadTutorialSummary

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

@@ -1,5 +1,7 @@
+import * as TT from 'typings/tutorial'
 import * as React from 'react'
 import SelectTutorialForm from './SelectTutorialForm'
+import TutorialOverview from '../../components/TutorialOverview'
 import LoadTutorialSummary from './LoadTutorialSummary'
 
 const styles = {
@@ -19,17 +21,36 @@ interface Props {
 }
 
 const SelectTutorialPage = (props: Props) => {
-  const [page, setPage] = React.useState<'form' | 'summary'>('form')
+  const [data, setData] = React.useState<TT.Tutorial | null>()
+  const [page, setPage] = React.useState<'form' | 'loading' | 'summary'>('form')
   const [tab, setTab] = React.useState<'list' | 'url'>('list')
   const [url, setUrl] = React.useState<string | null>(null)
+
+  const onNext = () => {
+    props.send({
+      type: 'TUTORIAL_START',
+      payload: {
+        tutorial: data,
+      },
+    })
+  }
   const onTutorialLoad = (url: string) => {
     setUrl(url)
+    setPage('loading')
+  }
+  const onSetDataFromUrl = (d: TT.Tutorial) => {
+    setData(d)
     setPage('summary')
   }
+  const onClear = () => {
+    setData(null)
+    setPage('form')
+  }
   return (
     <div css={styles.page}>
       {page === 'form' && <SelectTutorialForm url={url} onTutorialLoad={onTutorialLoad} tab={tab} setTab={setTab} />}
-      {page === 'summary' && url && <LoadTutorialSummary url={url} send={props.send} onClear={() => setPage('form')} />}
+      {page === 'loading' && url && <LoadTutorialSummary url={url} onSetDataFromUrl={onSetDataFromUrl} />}
+      {page === 'summary' && data && <TutorialOverview onNext={onNext} tutorial={data} onClear={onClear} />}
     </div>
   )
 }