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

Commita513a80

Browse files
committed
cleanup select/summary pages
1 parent5cad8e1 commita513a80

File tree

5 files changed

+94
-70
lines changed

5 files changed

+94
-70
lines changed

‎.vscode/extensions.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
// See http://go.microsoft.com/fwlink/?LinkId=827846
33
// for the documentation about the extensions.json format
4-
"recommendations": ["dbaeumer.vscode-eslint","apollographql.vscode-apollo"]
4+
"recommendations": ["dbaeumer.vscode-eslint"]
55
}

‎web-app/src/components/TutorialOverview/index.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,23 +70,24 @@ const styles = {
7070

7171
interfaceProps{
7272
tutorial:TT.Tutorial
73-
onNext:()=>void
73+
onNext():void
74+
onClear():void
7475
}
7576

7677
constSummary=(props:Props)=>{
7778
return(
7879
<divcss={styles.page}>
7980
<divcss={styles.content}>
8081
<divcss={styles.header}>
81-
{/*<div css={styles.nav}>
82+
<divcss={styles.nav}>
8283
<Breadcrumbseparator="/">
8384
<Breadcrumb.Item>
84-
<div css={styles.navLink} onClick={props.onBack}>
85+
<divcss={styles.navLink}onClick={props.onClear}>
8586
&lt; Back to Tutorials
8687
</div>
8788
</Breadcrumb.Item>
8889
</Breadcrumb>
89-
</div> */}
90+
</div>
9091
<h1css={styles.title}>{props.tutorial.summary.title}</h1>
9192
<h3>{props.tutorial.summary.description}</h3>
9293
{/* <h5 css={styles.meta}>
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import*asReactfrom'react'
2+
importuseFetchfrom'../../services/hooks/useFetch'
3+
import*asTTfrom'typings/tutorial'
4+
importTutorialOverviewfrom'../../components/TutorialOverview'
5+
6+
interfaceProps{
7+
url:string
8+
send:any
9+
onClear():void
10+
}
11+
12+
constLoadTutorialSummary=(props:Props)=>{
13+
const{ data, error, loading}=useFetch<TT.Tutorial>(props.url)
14+
if(loading){
15+
return<div>Loading...</div>
16+
}
17+
if(error){
18+
return<div>{JSON.stringify(error)}</div>
19+
}
20+
if(!data){
21+
return<div>No data returned</div>
22+
}
23+
constonNext=()=>{
24+
props.send({
25+
type:'TUTORIAL_START',
26+
payload:{
27+
tutorial:data,
28+
},
29+
})
30+
}
31+
return<TutorialOverviewonNext={onNext}tutorial={data}onClear={props.onClear}/>
32+
}
33+
34+
exportdefaultLoadTutorialSummary
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import*asReactfrom'react'
2+
importuseFetchfrom'../../services/hooks/useFetch'
3+
import{Form,Select}from'@alifd/next'
4+
5+
constFormItem=Form.Item
6+
constOption=Select.Option
7+
8+
// configurable url to tutorials
9+
consttutorialUrl='https://raw.githubusercontent.com/coderoad/tutorials/master/tutorials.json'
10+
11+
typeTutorialList=Array<{id:string;title:string;configUrl:string}>
12+
13+
interfaceProps{
14+
onUrlChange(url:string):void
15+
}
16+
17+
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+
}
28+
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>
40+
)
41+
}
42+
43+
exportdefaultSelectTutorialForm

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

Lines changed: 11 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
33
import*asTTfrom'typings/tutorial'
4-
import{Form,Select}from'@alifd/next'
5-
importuseFetchfrom'../../services/hooks/useFetch'
6-
importTutorialOverviewfrom'../../components/TutorialOverview'
7-
8-
constFormItem=Form.Item
9-
constOption=Select.Option
4+
importSelectTutorialFormfrom'./SelectTutorialForm'
5+
importLoadTutorialSummaryfrom'./LoadTutorialSummary'
106

117
conststyles={
12-
page:{},
8+
page:{
9+
width:'100%',
10+
},
1311
header:{
1412
padding:'1rem',
1513
},
@@ -24,73 +22,21 @@ interface TutorialsData {
2422
tutorials:TT.Tutorial[]
2523
}
2624

27-
interfaceGitHubFetchProps{
28-
url:string
29-
send:any
30-
}
31-
32-
constGitHubFetch=(props:GitHubFetchProps)=>{
33-
const{ data, error, loading}=useFetch<TT.Tutorial>(props.url)
34-
if(loading){
35-
return<div>Loading...</div>
36-
}
37-
if(error){
38-
return<div>{JSON.stringify(error)}</div>
39-
}
40-
if(!data){
41-
return<div>No data returned</div>
42-
}
43-
constonNext=()=>{
44-
console.log('called tutorial start')
45-
props.send({
46-
type:'TUTORIAL_START',
47-
payload:{
48-
tutorial:data,
49-
},
50-
})
51-
}
52-
return<TutorialOverviewonNext={onNext}tutorial={data}/>
53-
}
54-
55-
consttutorials=[
56-
{
57-
id:'1',
58-
title:'Basic Node & Express',
59-
configUrl:'https://raw.githubusercontent.com/coderoad/fcc-basic-node-and-express/master/coderoad-config.json',
60-
},
61-
{
62-
id:'2',
63-
title:'Learn NPM',
64-
configUrl:'https://raw.githubusercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json',
65-
},
66-
]
67-
6825
interfaceProps{
6926
send:any
7027
context:any
7128
}
7229

7330
constSelectTutorialPage=(props:Props)=>{
7431
const[url,setUrl]=React.useState<string|null>(null)
75-
consthandleUrlChange=(value:string)=>{
76-
setUrl(value)
77-
}
7832
return(
7933
<divcss={styles.page}>
80-
<divcss={styles.header}>
81-
<Formstyle={{maxWidth:'500px'}}>
82-
<FormItemlabel="Select Tutorial:">
83-
<SelectonChange={handleUrlChange}style={{width:'100%'}}>
84-
{tutorials.map((tutorial)=>(
85-
<Optionkey={tutorial.id}value={tutorial.configUrl}>
86-
{tutorial.title}
87-
</Option>
88-
))}
89-
</Select>
90-
</FormItem>
91-
</Form>
92-
</div>
93-
{url&&<GitHubFetchurl={url}send={props.send}/>}
34+
{!url&&(
35+
<divcss={styles.header}>
36+
<SelectTutorialFormonUrlChange={setUrl}/>
37+
</div>
38+
)}
39+
{url&&<LoadTutorialSummaryurl={url}send={props.send}onClear={()=>setUrl(null)}/>}
9440
</div>
9541
)
9642
}

0 commit comments

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