diff --git a/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx b/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx index ceb19dbb..d029a849 100644 --- a/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx +++ b/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx @@ -1,4 +1,5 @@ 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' @@ -6,10 +7,24 @@ import LoadingPage from '../Loading' interface Props { url: string onLoadSummary(data: TT.Tutorial): void + onReturnToSelection(): void } const LoadTutorialSummary = (props: Props) => { const { data, error, loading } = useFetch(props.url) + if (!data) { + return ( + + No data returned for tutorial + + ) + } if (loading) { return } @@ -17,9 +32,6 @@ const LoadTutorialSummary = (props: Props) => { console.log(`Failed to load tutorial summary: ${error}`) return
Error loading summary
} - if (!data) { - return
No data returned for tutorial
- } props.onLoadSummary(data) return null } diff --git a/web-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx b/web-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx index 0dc2d0bf..b97c1730 100644 --- a/web-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx +++ b/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() + 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
@@ -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" /> - {' '}    diff --git a/web-app/src/containers/SelectTutorial/index.tsx b/web-app/src/containers/SelectTutorial/index.tsx index 2f586c84..3ad60fb6 100644 --- a/web-app/src/containers/SelectTutorial/index.tsx +++ b/web-app/src/containers/SelectTutorial/index.tsx @@ -58,7 +58,9 @@ const SelectTutorialPage = (props: Props) => { setTab={setTab} /> )} - {page === 'loading' && url && } + {page === 'loading' && url && ( + setPage('form')} /> + )} {page === 'summary' && data && } )