replace select tutorial page

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

@@ -1,10 +1,11 @@
-import { useQuery } from '@apollo/react-hooks'
 import * as React from 'react'
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
-import ErrorView from '../../components/Error'
-import LoadingPage from '../Loading'
-import SelectTutorial from './SelectTutorial'
+import { Form, Select } from '@alifd/next'
+import useFetch from '../../services/hooks/useFetch'
+
+const FormItem = Form.Item
+const Option = Select.Option
 
 interface ContainerProps {
   send(action: T.Action): void
@@ -15,8 +16,60 @@ interface TutorialsData {
   tutorials: TT.Tutorial[]
 }
 
-const SelectPageContainer = (props: ContainerProps) => {
-  return <div>SelectTutorial</div>
+interface GitHubFetchProps {
+  url: string
+}
+
+const GitHubFetch = ({ url }: GitHubFetchProps) => {
+  const { data, error, loading } = useFetch(url)
+  if (loading) {
+    return <div>Loading...</div>
+  }
+  if (error) {
+    return <div>{JSON.stringify(error)}</div>
+  }
+  return <div>{JSON.stringify(data)}</div>
+}
+
+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 = ({ send }: Props) => {
+  const [url, setUrl] = React.useState<string | null>(null)
+  const handleUrlChange = (value: string) => {
+    setUrl(value)
+  }
+  return (
+    <div>
+      <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>
+      {url && <GitHubFetch url={url} />}
+    </div>
+  )
 }
 
-export default SelectPageContainer
+export default SelectTutorialPage

web-app/src/services/hooks/useFetch.ts

@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+const useFetch = (url: string, options?: object) => {
+  const [data, setData] = React.useState(null)
+  const [error, setError] = React.useState(null)
+  const [loading, setLoading] = React.useState(true)
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const res = await fetch(url, options)
+        setLoading(false)
+        const json = await res.json()
+        setData(json)
+      } catch (error) {
+        setError(error)
+      }
+    }
+    fetchData()
+  }, [url])
+  return { data, error, loading }
+}
+
+export default useFetch

web-app/stories/GitHubFetch.stories.tsx

@@ -2,12 +2,8 @@ import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import React from 'react'
 import { css, jsx } from '@emotion/core'
-import SelectWorkspace from '../src/containers/Check/SelectWorkspace'
 import SideBarDecorator from './utils/SideBarDecorator'
-import { Form, Input, Select } from '@alifd/next'
-
-const FormItem = Form.Item
-const Option = Select.Option
+import SelectTutorialPage from '../src/containers/SelectTutorial'
 
 const styles = {
   container: {
@@ -16,81 +12,8 @@ const styles = {
   },
 }
 
-const useFetch = (url: string, options?: object) => {
-  const [data, setData] = React.useState(null)
-  const [error, setError] = React.useState(null)
-  const [loading, setLoading] = React.useState(true)
-  React.useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const res = await fetch(url, options)
-        setLoading(false)
-        const json = await res.json()
-        setData(json)
-      } catch (error) {
-        setError(error)
-      }
-    }
-    fetchData()
-  }, [url])
-  return { data, error, loading }
-}
-
-const GitHubFetch = ({ url }) => {
-  if (!url) {
-    return null
-  }
-  const { data, error, loading } = useFetch(url)
-  if (loading) {
-    return <div>Loading...</div>
-  }
-  if (error) {
-    return <div>{JSON.stringify(error)}</div>
-  }
-  return <div>{JSON.stringify(data)}</div>
-}
-
-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',
-  },
-]
-
-const SelectTutorial = () => {
-  const [url, setUrl] = React.useState(null)
-  const handleUrlChange = (value) => {
-    setUrl(value)
-  }
-  return (
-    <div>
-      <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>
-      <GitHubFetch url={url} />
-    </div>
-  )
-}
-
 storiesOf('GitHub Fetch', module)
   .addDecorator(SideBarDecorator)
-  .add('Request', () => {
-    return <GitHubFetch url={tutorials[0].configUrl} />
-  })
   .add('Select Tutorial', () => {
-    return <SelectTutorial />
+    return <SelectTutorialPage send={action('send')} context={{}} />
   })