load json file

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

@@ -5,7 +5,7 @@ import Loading from '../Loading'
 
 interface Props {
   url: string
-  onSetDataFromUrl(data: TT.Tutorial): void
+  onLoadSummary(data: TT.Tutorial): void
 }
 
 const LoadTutorialSummary = (props: Props) => {
@@ -20,7 +20,7 @@ const LoadTutorialSummary = (props: Props) => {
   if (!data) {
     return <div>No data returned for tutorial</div>
   }
-  props.onSetDataFromUrl(data)
+  props.onLoadSummary(data)
   return null
 }
 

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

@@ -1,3 +1,4 @@
+import * as TT from 'typings/tutorial'
 import * as React from 'react'
 import { Radio } from '@alifd/next'
 import TutorialSelect from './forms/TutorialSelect'
@@ -16,7 +17,8 @@ interface Props {
   tab: string
   setTab(tab: 'list' | 'url'): void
   url: string | null
-  onTutorialLoad(url: string): void
+  onTutorialLoadFromUrl(url: string): void
+  onLoadSummary(data: TT.Tutorial | null): void
 }
 
 const SelectTutorialForm = (props: Props) => {
@@ -35,9 +37,9 @@ const SelectTutorialForm = (props: Props) => {
       </Radio.Group>
       <br />
       <br />
-      {props.tab === 'list' && <TutorialSelect onTutorialLoad={props.onTutorialLoad} />}
-      {props.tab === 'url' && <TutorialUrl onTutorialLoad={props.onTutorialLoad} defaultUrl={props.url || ''} />}
-      {props.tab === 'file' && <TutorialFile onTutorialLoad={props.onTutorialLoad} />}
+      {props.tab === 'list' && <TutorialSelect onTutorialLoad={props.onTutorialLoadFromUrl} />}
+      {props.tab === 'url' && <TutorialUrl onTutorialLoad={props.onTutorialLoadFromUrl} defaultUrl={props.url || ''} />}
+      {props.tab === 'file' && <TutorialFile onLoadSummary={props.onLoadSummary} />}
     </div>
   )
 }

web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react'
+import * as TT from 'typings/tutorial'
 import { Form } from '@alifd/next'
 
 const FormItem = Form.Item
 
 interface Props {
-  onTutorialLoad(url: string): void
+  onLoadSummary(data: TT.Tutorial): void
 }
 
 const TutorialFile = (props: Props) => {
-  const [json, setJson] = React.useState<JSON | null>(null)
-
   const onChange = (evt: any) => {
     const files = evt.target.files
 
@@ -20,9 +19,9 @@ const TutorialFile = (props: Props) => {
     const uploadedFile = files[0]
     const reader = new FileReader()
     reader.onload = (e: any) => {
-      // TODO: handle errors from bad JSON
-      const fileJson: JSON = JSON.parse(e.target.result)
-      setJson(fileJson)
+      // TODO: handle errors from invalid JSON
+      const fileJson: TT.Tutorial = JSON.parse(e.target.result)
+      props.onLoadSummary(fileJson)
     }
     reader.readAsText(uploadedFile)
   }
@@ -32,7 +31,7 @@ const TutorialFile = (props: Props) => {
       <FormItem label="Load coderoad config.json">
         <input type="file" accept="application/json" onChange={onChange} />
       </FormItem>
-      &nbsp;&nbsp;
+      <br />
     </Form>
   )
 }

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

@@ -34,11 +34,11 @@ const SelectTutorialPage = (props: Props) => {
       },
     })
   }
-  const onTutorialLoad = (url: string) => {
+  const onTutorialLoadFromUrl = (url: string) => {
     setUrl(url)
     setPage('loading')
   }
-  const onSetDataFromUrl = (d: TT.Tutorial) => {
+  const onLoadSummary = (d: TT.Tutorial) => {
     setData(d)
     setPage('summary')
   }
@@ -48,8 +48,16 @@ const SelectTutorialPage = (props: Props) => {
   }
   return (
     <div css={styles.page}>
-      {page === 'form' && <SelectTutorialForm url={url} onTutorialLoad={onTutorialLoad} tab={tab} setTab={setTab} />}
-      {page === 'loading' && url && <LoadTutorialSummary url={url} onSetDataFromUrl={onSetDataFromUrl} />}
+      {page === 'form' && (
+        <SelectTutorialForm
+          url={url}
+          onLoadSummary={onLoadSummary}
+          onTutorialLoadFromUrl={onTutorialLoadFromUrl}
+          tab={tab}
+          setTab={setTab}
+        />
+      )}
+      {page === 'loading' && url && <LoadTutorialSummary url={url} onLoadSummary={onLoadSummary} />}
       {page === 'summary' && data && <TutorialOverview onNext={onNext} tutorial={data} onClear={onClear} />}
     </div>
   )