@@ -9,14 +9,23 @@ interface Props {
99onTutorialLoad ( url :string ) :void
1010}
1111
12+ const urlRegex = / [ - a - z A - Z 0 - 9 @ : % . _ \+ ~ # = ] { 1 , 256 } \. [ a - z A - Z 0 - 9 ( ) ] { 1 , 6 } \b ( [ - a - z A - Z 0 - 9 ( ) @ : % _ \+ . ~ # ? & / / = ] * ) \. j s o n /
13+
1214const TutorialUrl = ( props :Props ) => {
1315const [ url , setUrl ] = React . useState ( props . defaultUrl )
16+ const [ inputState , setInputState ] = React . useState < undefined | 'success' | 'error' > ( )
17+
1418const onSubmit = ( e :any ) => {
1519e . preventDefault ( )
1620logger ( `Tutorial url:${ url } )
1721props . onTutorialLoad ( url )
1822}
1923
24+ const handleChange = ( text :string ) => {
25+ setUrl ( text )
26+ ! ! text . match ( urlRegex ) ?setInputState ( 'success' ) :setInputState ( 'error' )
27+ }
28+
2029return (
2130//@ts -ignore seems to be an onSubmit event ts error in lib
2231< Form style = { { maxWidth :'600px' } } onSubmit = { onSubmit } >
@@ -25,11 +34,12 @@ const TutorialUrl = (props: Props) => {
2534size = "large"
2635placeholder = "https://raw.githubusercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json"
2736defaultValue = { props . defaultUrl }
28- onChange = { setUrl }
37+ onChange = { handleChange }
38+ state = { inputState }
2939aria-label = "input url path to coderoad config.json"
3040/>
3141</ FormItem >
32- < Button htmlType = "submit" type = "primary" >
42+ < Button htmlType = "submit" type = "primary" disabled = { inputState !== 'success' } >
3343 Load
3444</ Button > { ' ' }
3545