Merge pull request #351 from coderoad/validate-tutorial-url

Validate tutorial url

Author: ShMcK

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

@@ -1,25 +1,37 @@
 import * as React from 'react'
+import { Dialog } from '@alifd/next'
 import useFetch from '../../services/hooks/useFetch'
 import * as TT from 'typings/tutorial'
 import LoadingPage from '../Loading'
 
 interface Props {
   url: string
   onLoadSummary(data: TT.Tutorial): void
+  onReturnToSelection(): void
 }
 
 const LoadTutorialSummary = (props: Props) => {
   const { data, error, loading } = useFetch<TT.Tutorial>(props.url)
+  if (!data) {
+    return (
+      <Dialog
+        title="Tutorial Not Found"
+        visible={true}
+        closeable={false}
+        footerActions={['ok']}
+        onOk={props.onReturnToSelection}
+      >
+        No data returned for tutorial
+      </Dialog>
+    )
+  }
   if (loading) {
     return <LoadingPage text="Loading tutorial summary..." />
   }
   if (error) {
     console.log(`Failed to load tutorial summary: ${error}`)
     return <div>Error loading summary</div>
   }
-  if (!data) {
-    return <div>No data returned for tutorial</div>
-  }
   props.onLoadSummary(data)
   return null
 }

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

@@ -9,14 +9,23 @@ interface Props {
   onTutorialLoad(url: string): void
 }
 
+const urlRegex = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)\.json/
+
 const TutorialUrl = (props: Props) => {
   const [url, setUrl] = React.useState(props.defaultUrl)
+  const [inputState, setInputState] = React.useState<undefined | 'success' | 'error'>()
+
   const onSubmit = (e: any) => {
     e.preventDefault()
     logger(`Tutorial url: ${url}`)
     props.onTutorialLoad(url)
   }
 
+  const handleChange = (text: string) => {
+    setUrl(text)
+    !!text.match(urlRegex) ? setInputState('success') : setInputState('error')
+  }
+
   return (
     // @ts-ignore seems to be an onSubmit event ts error in lib
     <Form style={{ maxWidth: '600px' }} onSubmit={onSubmit}>
@@ -25,11 +34,12 @@ const TutorialUrl = (props: Props) => {
           size="large"
           placeholder="https://raw.githubusercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json"
           defaultValue={props.defaultUrl}
-          onChange={setUrl}
+          onChange={handleChange}
+          state={inputState}
           aria-label="input url path to coderoad config.json"
         />
       </FormItem>
-      <Button htmlType="submit" type="primary">
+      <Button htmlType="submit" type="primary" disabled={inputState !== 'success'}>
         Load
       </Button>{' '}
       &nbsp;&nbsp;

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

@@ -58,7 +58,9 @@ const SelectTutorialPage = (props: Props) => {
           setTab={setTab}
         />
       )}
-      {page === 'loading' && url && <LoadTutorialSummary url={url} onLoadSummary={onLoadSummary} />}
+      {page === 'loading' && url && (
+        <LoadTutorialSummary url={url} onLoadSummary={onLoadSummary} onReturnToSelection={() => setPage('form')} />
+      )}
       {page === 'summary' && data && <TutorialOverview onNext={onNext} tutorial={data} onClear={onClear} />}
     </div>
   )