Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit380db3e

Browse files
committed
select tutorial loading
1 parenta513a80 commit380db3e

File tree

2 files changed

+31
-28
lines changed

2 files changed

+31
-28
lines changed

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

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import*asReactfrom'react'
22
importuseFetchfrom'../../services/hooks/useFetch'
33
import{Form,Select}from'@alifd/next'
4+
import{TUTORIAL_URL}from'../../environment'
45

56
constFormItem=Form.Item
67
constOption=Select.Option
78

8-
// configurable url to tutorials
9-
consttutorialUrl='https://raw.githubusercontent.com/coderoad/tutorials/master/tutorials.json'
9+
conststyles={
10+
formWrapper:{
11+
padding:'1rem',
12+
width:'100%',
13+
height:'auto',
14+
backgroundColor:'yellow',
15+
},
16+
}
1017

1118
typeTutorialList=Array<{id:string;title:string;configUrl:string}>
1219

@@ -15,28 +22,25 @@ interface Props {
1522
}
1623

1724
constSelectTutorialForm=(props:Props)=>{
18-
const{ data, error, loading}=useFetch<TutorialList>(tutorialUrl)
19-
if(loading){
20-
return<div>Loading...</div>
21-
}
22-
if(error){
23-
return<div>{JSON.stringify(error)}</div>
24-
}
25-
if(!data){
26-
return<div>No data returned</div>
27-
}
25+
// load tutorial from a path to a tutorial list json
26+
const{ data, error, loading}=useFetch<TutorialList>(TUTORIAL_URL)
27+
// TODO: display errors
28+
constselectState=loading ?'loading' :error||!data ?'error' :undefined
2829
return(
29-
<Formstyle={{maxWidth:'500px'}}>
30-
<FormItemlabel="Select Tutorial:">
31-
<SelectonChange={props.onUrlChange}style={{width:'100%'}}placeholder="Tutorials...">
32-
{data.map((tutorial)=>(
33-
<Optionkey={tutorial.id}value={tutorial.configUrl}>
34-
{tutorial.title}
35-
</Option>
36-
))}
37-
</Select>
38-
</FormItem>
39-
</Form>
30+
<divcss={styles.formWrapper}>
31+
<Formstyle={{maxWidth:'500px'}}>
32+
<FormItemlabel="Select Tutorial:">
33+
<SelectonChange={props.onUrlChange}style={{width:'100%'}}placeholder="Tutorials..."state={selectState}>
34+
{data&&
35+
data.map((tutorial)=>(
36+
<Optionkey={tutorial.id}value={tutorial.configUrl}>
37+
{tutorial.title}
38+
</Option>
39+
))}
40+
</Select>
41+
</FormItem>
42+
</Form>
43+
</div>
4044
)
4145
}
4246

‎web-app/src/environment.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
// validate .env
2-
constrequiredKeys=['REACT_APP_GQL_URI']
2+
constrequiredKeys=['REACT_APP_TUTORIAL_URL']
33
for(constrequiredofrequiredKeys){
44
if(!process.env[required]){
5-
thrownewError(`Missing EnvironmentalVariables:${required}`)
5+
thrownewError(`Missing EnvironmentalVariable:${required}`)
66
}
77
}
88

9-
exportconstGQL_URI:string=process.env.REACT_APP_GQL_URI||'NO API URI PROVIDED'
109
exportconstDEBUG:boolean=(process.env.REACT_APP_DEBUG||'').toLowerCase()==='true'
1110
exportconstVERSION:string=process.env.VERSION||'unknown'
12-
exportconstNODE_ENV:string=process.env.NODE_ENV||'production'
13-
exportconstAUTH_TOKEN:string|null=process.env.AUTH_TOKEN||null
11+
exportconstNODE_ENV:string=process.env.NODE_ENV||'development'
1412
exportconstLOG_STATE:boolean=(process.env.LOG_STATE||'').toLowerCase()==='true'
13+
exportconstTUTORIAL_URL:string=process.env.REACT_APP_TUTORIAL_URL||''

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp