cleanup select/summary pages

.vscode/extensions.json

@@ -1,5 +1,5 @@
 {
   // See http://go.microsoft.com/fwlink/?LinkId=827846
   // for the documentation about the extensions.json format
-  "recommendations": ["dbaeumer.vscode-eslint", "apollographql.vscode-apollo"]
+  "recommendations": ["dbaeumer.vscode-eslint"]
 }

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

@@ -70,23 +70,24 @@ const styles = {
 
 interface Props {
   tutorial: TT.Tutorial
-  onNext: () => void
+  onNext(): void
+  onClear(): void
 }
 
 const Summary = (props: Props) => {
   return (
     <div css={styles.page}>
       <div css={styles.content}>
         <div css={styles.header}>
-          {/* <div css={styles.nav}>
+          <div css={styles.nav}>
             <Breadcrumb separator="/">
               <Breadcrumb.Item>
-                <div css={styles.navLink} onClick={props.onBack}>
+                <div css={styles.navLink} onClick={props.onClear}>
                   &lt; Back to Tutorials
                 </div>
               </Breadcrumb.Item>
             </Breadcrumb>
-          </div> */}
+          </div>
           <h1 css={styles.title}>{props.tutorial.summary.title}</h1>
           <h3>{props.tutorial.summary.description}</h3>
           {/* <h5 css={styles.meta}>

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

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import useFetch from '../../services/hooks/useFetch'
+import * as TT from 'typings/tutorial'
+import TutorialOverview from '../../components/TutorialOverview'
+
+interface Props {
+  url: string
+  send: any
+  onClear(): void
+}
+
+const LoadTutorialSummary = (props: Props) => {
+  const { data, error, loading } = useFetch<TT.Tutorial>(props.url)
+  if (loading) {
+    return <div>Loading...</div>
+  }
+  if (error) {
+    return <div>{JSON.stringify(error)}</div>
+  }
+  if (!data) {
+    return <div>No data returned</div>
+  }
+  const onNext = () => {
+    props.send({
+      type: 'TUTORIAL_START',
+      payload: {
+        tutorial: data,
+      },
+    })
+  }
+  return <TutorialOverview onNext={onNext} tutorial={data} onClear={props.onClear} />
+}
+
+export default LoadTutorialSummary

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

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import useFetch from '../../services/hooks/useFetch'
+import { Form, Select } from '@alifd/next'
+
+const FormItem = Form.Item
+const Option = Select.Option
+
+// configurable url to tutorials
+const tutorialUrl = 'https://raw.githubusercontent.com/coderoad/tutorials/master/tutorials.json'
+
+type TutorialList = Array<{ id: string; title: string; configUrl: string }>
+
+interface Props {
+  onUrlChange(url: string): void
+}
+
+const SelectTutorialForm = (props: Props) => {
+  const { data, error, loading } = useFetch<TutorialList>(tutorialUrl)
+  if (loading) {
+    return <div>Loading...</div>
+  }
+  if (error) {
+    return <div>{JSON.stringify(error)}</div>
+  }
+  if (!data) {
+    return <div>No data returned</div>
+  }
+  return (
+    <Form style={{ maxWidth: '500px' }}>
+      <FormItem label="Select Tutorial:">
+        <Select onChange={props.onUrlChange} style={{ width: '100%' }} placeholder="Tutorials...">
+          {data.map((tutorial) => (
+            <Option key={tutorial.id} value={tutorial.configUrl}>
+              {tutorial.title}
+            </Option>
+          ))}
+        </Select>
+      </FormItem>
+    </Form>
+  )
+}
+
+export default SelectTutorialForm

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

@@ -1,15 +1,13 @@
 import * as React from 'react'
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
-import { Form, Select } from '@alifd/next'
-import useFetch from '../../services/hooks/useFetch'
-import TutorialOverview from '../../components/TutorialOverview'
-
-const FormItem = Form.Item
-const Option = Select.Option
+import SelectTutorialForm from './SelectTutorialForm'
+import LoadTutorialSummary from './LoadTutorialSummary'
 
 const styles = {
-  page: {},
+  page: {
+    width: '100%',
+  },
   header: {
     padding: '1rem',
   },
@@ -24,73 +22,21 @@ interface TutorialsData {
   tutorials: TT.Tutorial[]
 }
 
-interface GitHubFetchProps {
-  url: string
-  send: any
-}
-
-const GitHubFetch = (props: GitHubFetchProps) => {
-  const { data, error, loading } = useFetch<TT.Tutorial>(props.url)
-  if (loading) {
-    return <div>Loading...</div>
-  }
-  if (error) {
-    return <div>{JSON.stringify(error)}</div>
-  }
-  if (!data) {
-    return <div>No data returned</div>
-  }
-  const onNext = () => {
-    console.log('called tutorial start')
-    props.send({
-      type: 'TUTORIAL_START',
-      payload: {
-        tutorial: data,
-      },
-    })
-  }
-  return <TutorialOverview onNext={onNext} tutorial={data} />
-}
-
-const tutorials = [
-  {
-    id: '1',
-    title: 'Basic Node & Express',
-    configUrl: 'https://raw.githubusercontent.com/coderoad/fcc-basic-node-and-express/master/coderoad-config.json',
-  },
-  {
-    id: '2',
-    title: 'Learn NPM',
-    configUrl: 'https://raw.githubusercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json',
-  },
-]
-
 interface Props {
   send: any
   context: any
 }
 
 const SelectTutorialPage = (props: Props) => {
   const [url, setUrl] = React.useState<string | null>(null)
-  const handleUrlChange = (value: string) => {
-    setUrl(value)
-  }
   return (
     <div css={styles.page}>
-      <div css={styles.header}>
-        <Form style={{ maxWidth: '500px' }}>
-          <FormItem label="Select Tutorial:">
-            <Select onChange={handleUrlChange} style={{ width: '100%' }}>
-              {tutorials.map((tutorial) => (
-                <Option key={tutorial.id} value={tutorial.configUrl}>
-                  {tutorial.title}
-                </Option>
-              ))}
-            </Select>
-          </FormItem>
-        </Form>
-      </div>
-      {url && <GitHubFetch url={url} send={props.send} />}
+      {!url && (
+        <div css={styles.header}>
+          <SelectTutorialForm onUrlChange={setUrl} />
+        </div>
+      )}
+      {url && <LoadTutorialSummary url={url} send={props.send} onClear={() => setUrl(null)} />}
     </div>
   )
 }