select tutorial loading

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

@@ -1,12 +1,19 @@
 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
 
-// configurable url to tutorials
-const tutorialUrl = 'https://raw.githubusercontent.com/coderoad/tutorials/master/tutorials.json'
+const styles = {
+  formWrapper: {
+    padding: '1rem',
+    width: '100%',
+    height: 'auto',
+    backgroundColor: 'yellow',
+  },
+}
 
 type TutorialList = Array<{ id: string; title: string; configUrl: string }>
 
@@ -15,28 +22,25 @@ interface Props {
 }
 
 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>
-  }
+  // 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 (
-    <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>
+    <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>
+    </div>
   )
 }
 

web-app/src/environment.ts

@@ -1,14 +1,13 @@
 // validate .env
-const requiredKeys = ['REACT_APP_GQL_URI']
+const requiredKeys = ['REACT_APP_TUTORIAL_URL']
 for (const required of requiredKeys) {
   if (!process.env[required]) {
-    throw new Error(`Missing Environmental Variables: ${required}`)
+    throw new Error(`Missing Environmental Variable: ${required}`)
   }
 }
 
-export const GQL_URI: string = process.env.REACT_APP_GQL_URI || 'NO API URI PROVIDED'
 export const DEBUG: boolean = (process.env.REACT_APP_DEBUG || '').toLowerCase() === 'true'
 export const VERSION: string = process.env.VERSION || 'unknown'
-export const NODE_ENV: string = process.env.NODE_ENV || 'production'
-export const AUTH_TOKEN: string | null = process.env.AUTH_TOKEN || null
+export const NODE_ENV: string = process.env.NODE_ENV || 'development'
 export const LOG_STATE: boolean = (process.env.LOG_STATE || '').toLowerCase() === 'true'
+export const TUTORIAL_URL: string = process.env.REACT_APP_TUTORIAL_URL || ''