load tutorial from url

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

@@ -1,10 +1,7 @@
 import * as React from 'react'
-import useFetch from '../../services/hooks/useFetch'
-import { Form, Select } from '@alifd/next'
-import { TUTORIAL_URL } from '../../environment'
-
-const FormItem = Form.Item
-const Option = Select.Option
+import { Radio } from '@alifd/next'
+import TutorialSelect from './forms/TutorialSelect'
+import TutorialUrl from './forms/TutorialUrl'
 
 const styles = {
   formWrapper: {
@@ -14,31 +11,31 @@ const styles = {
   },
 }
 
-type TutorialList = Array<{ id: string; title: string; configUrl: string }>
-
 interface Props {
-  onUrlChange(url: string): void
+  tab: string
+  setTab(tab: 'list' | 'url'): void
+  url: string | null
+  onTutorialLoad(url: string): void
 }
 
 const SelectTutorialForm = (props: Props) => {
-  // load tutorial from a path to a tutorial list json
-  const { data, error, loading } = useFetch<TutorialList>(TUTORIAL_URL)
-  // TODO: display errors
-  const selectState = loading ? 'loading' : error || !data ? 'error' : undefined
   return (
     <div css={styles.formWrapper}>
-      <Form style={{ maxWidth: '500px' }}>
-        <FormItem label="Select Tutorial:">
-          <Select onChange={props.onUrlChange} style={{ width: '100%' }} placeholder="Tutorials..." state={selectState}>
-            {data &&
-              data.map((tutorial) => (
-                <Option key={tutorial.id} value={tutorial.configUrl}>
-                  {tutorial.title}
-                </Option>
-              ))}
-          </Select>
-        </FormItem>
-      </Form>
+      <Radio.Group
+        style={{ marginLeft: 8 }}
+        shape="button"
+        value={props.tab}
+        // @ts-ignore ts lib validation issue
+        onChange={props.setTab}
+      >
+        <Radio value="list">List</Radio>
+        <Radio value="url">URL</Radio>
+        {/* <Radio value="file">File</Radio> */}
+      </Radio.Group>
+      <br />
+      <br />
+      {props.tab === 'list' && <TutorialSelect onTutorialLoad={props.onTutorialLoad} />}
+      {props.tab === 'url' && <TutorialUrl onTutorialLoad={props.onTutorialLoad} defaultUrl={props.url || ''} />}
     </div>
   )
 }

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

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import useFetch from '../../../services/hooks/useFetch'
+import { TUTORIAL_LIST_URL } from '../../../environment'
+import { Form, Select } from '@alifd/next'
+
+const FormItem = Form.Item
+const Option = Select.Option
+
+type TutorialList = Array<{ id: string; title: string; configUrl: string }>
+
+interface Props {
+  onTutorialLoad(url: string): void
+}
+
+const TutorialSelect = (props: Props) => {
+  // load tutorial from a path to a tutorial list json
+  const { data, error, loading } = useFetch<TutorialList>(TUTORIAL_LIST_URL)
+  // TODO: display errors
+  const selectState = loading ? 'loading' : error || !data ? 'error' : undefined
+  return (
+    <Form style={{ maxWidth: '500px' }}>
+      <FormItem label="Select Tutorial:">
+        <Select
+          onChange={props.onTutorialLoad}
+          style={{ width: '100%' }}
+          placeholder="Tutorials..."
+          state={selectState}
+        >
+          {data &&
+            data.map((tutorial) => (
+              <Option key={tutorial.id} value={tutorial.configUrl}>
+                {tutorial.title}
+              </Option>
+            ))}
+        </Select>
+      </FormItem>
+    </Form>
+  )
+}
+
+export default TutorialSelect

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

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { Button, Form, Radio, Input } from '@alifd/next'
+
+const FormItem = Form.Item
+
+interface Props {
+  defaultUrl: string
+  onTutorialLoad(url: string): void
+}
+
+const TutorialUrl = (props: Props) => {
+  const [url, setUrl] = React.useState(props.defaultUrl)
+  const onSubmit = (e: any) => {
+    e.preventDefault()
+    console.log('tutorial url', url)
+    props.onTutorialLoad(url)
+  }
+
+  return (
+    // @ts-ignore seems to be an onSubmit event ts error in lib
+    <Form style={{ maxWidth: '600px' }} onSubmit={onSubmit}>
+      <FormItem label="URL path to coderoad config.json">
+        <Input
+          size="large"
+          placeholder="https://raw.githubusercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json"
+          defaultValue={props.defaultUrl}
+          onChange={setUrl}
+          aria-label="input url path to coderoad config.json"
+        />
+      </FormItem>
+      <Button htmlType="submit" type="primary">
+        Load
+      </Button>{' '}
+      &nbsp;&nbsp;
+    </Form>
+  )
+}
+
+export default TutorialUrl

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

@@ -19,11 +19,17 @@ interface Props {
 }
 
 const SelectTutorialPage = (props: Props) => {
+  const [page, setPage] = React.useState<'form' | 'summary'>('form')
+  const [tab, setTab] = React.useState<'list' | 'url'>('list')
   const [url, setUrl] = React.useState<string | null>(null)
+  const onTutorialLoad = (url: string) => {
+    setUrl(url)
+    setPage('summary')
+  }
   return (
     <div css={styles.page}>
-      {!url && <SelectTutorialForm onUrlChange={setUrl} />}
-      {url && <LoadTutorialSummary url={url} send={props.send} onClear={() => setUrl(null)} />}
+      {page === 'form' && <SelectTutorialForm url={url} onTutorialLoad={onTutorialLoad} tab={tab} setTab={setTab} />}
+      {page === 'summary' && url && <LoadTutorialSummary url={url} send={props.send} onClear={() => setPage('form')} />}
     </div>
   )
 }

web-app/src/environment.ts

@@ -1,5 +1,5 @@
 // validate .env
-const requiredKeys = ['REACT_APP_TUTORIAL_URL']
+const requiredKeys = ['REACT_APP_TUTORIAL_LIST_URL']
 for (const required of requiredKeys) {
   if (!process.env[required]) {
     throw new Error(`Missing Environmental Variable: ${required}`)
@@ -10,4 +10,4 @@ export const DEBUG: boolean = (process.env.REACT_APP_DEBUG || '').toLowerCase()
 export const VERSION: string = process.env.VERSION || 'unknown'
 export const NODE_ENV: string = process.env.NODE_ENV || 'development'
 export const LOG_STATE: boolean = (process.env.REACT_APP_LOG_STATE || '').toLowerCase() === 'true'
-export const TUTORIAL_URL: string = process.env.REACT_APP_TUTORIAL_URL || ''
+export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL || ''