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

Commitb624b8d

Browse files
committed
replace select tutorial page
1 parent09dea17 commitb624b8d

File tree

5 files changed

+85
-210
lines changed

5 files changed

+85
-210
lines changed

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

Lines changed: 0 additions & 52 deletions
This file was deleted.

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

Lines changed: 0 additions & 72 deletions
This file was deleted.
Lines changed: 60 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import{useQuery}from'@apollo/react-hooks'
21
import*asReactfrom'react'
32
import*asTfrom'typings'
43
import*asTTfrom'typings/tutorial'
5-
importErrorViewfrom'../../components/Error'
6-
importLoadingPagefrom'../Loading'
7-
importSelectTutorialfrom'./SelectTutorial'
4+
import{Form,Select}from'@alifd/next'
5+
importuseFetchfrom'../../services/hooks/useFetch'
6+
7+
constFormItem=Form.Item
8+
constOption=Select.Option
89

910
interfaceContainerProps{
1011
send(action:T.Action):void
@@ -15,8 +16,60 @@ interface TutorialsData {
1516
tutorials:TT.Tutorial[]
1617
}
1718

18-
constSelectPageContainer=(props:ContainerProps)=>{
19-
return<div>SelectTutorial</div>
19+
interfaceGitHubFetchProps{
20+
url:string
21+
}
22+
23+
constGitHubFetch=({ url}:GitHubFetchProps)=>{
24+
const{ data, error, loading}=useFetch(url)
25+
if(loading){
26+
return<div>Loading...</div>
27+
}
28+
if(error){
29+
return<div>{JSON.stringify(error)}</div>
30+
}
31+
return<div>{JSON.stringify(data)}</div>
32+
}
33+
34+
consttutorials=[
35+
{
36+
id:'1',
37+
title:'Basic Node & Express',
38+
configUrl:'https://raw.githubusercontent.com/coderoad/fcc-basic-node-and-express/master/coderoad-config.json',
39+
},
40+
{
41+
id:'2',
42+
title:'Learn NPM',
43+
configUrl:'https://raw.githubusercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json',
44+
},
45+
]
46+
47+
interfaceProps{
48+
send:any
49+
context:any
50+
}
51+
52+
constSelectTutorialPage=({ send}:Props)=>{
53+
const[url,setUrl]=React.useState<string|null>(null)
54+
consthandleUrlChange=(value:string)=>{
55+
setUrl(value)
56+
}
57+
return(
58+
<div>
59+
<Formstyle={{maxWidth:'500px'}}>
60+
<FormItemlabel="Select Tutorial:">
61+
<SelectonChange={handleUrlChange}style={{width:'100%'}}>
62+
{tutorials.map((tutorial)=>(
63+
<Optionkey={tutorial.id}value={tutorial.configUrl}>
64+
{tutorial.title}
65+
</Option>
66+
))}
67+
</Select>
68+
</FormItem>
69+
</Form>
70+
{url&&<GitHubFetchurl={url}/>}
71+
</div>
72+
)
2073
}
2174

22-
exportdefaultSelectPageContainer
75+
exportdefaultSelectTutorialPage
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import*asReactfrom'react'
2+
3+
constuseFetch=(url:string,options?:object)=>{
4+
const[data,setData]=React.useState(null)
5+
const[error,setError]=React.useState(null)
6+
const[loading,setLoading]=React.useState(true)
7+
React.useEffect(()=>{
8+
constfetchData=async()=>{
9+
try{
10+
constres=awaitfetch(url,options)
11+
setLoading(false)
12+
constjson=awaitres.json()
13+
setData(json)
14+
}catch(error){
15+
setError(error)
16+
}
17+
}
18+
fetchData()
19+
},[url])
20+
return{ data, error, loading}
21+
}
22+
23+
exportdefaultuseFetch

‎web-app/stories/GitHubFetch.stories.tsx

Lines changed: 2 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@ import { storiesOf } from '@storybook/react'
22
import{action}from'@storybook/addon-actions'
33
importReactfrom'react'
44
import{css,jsx}from'@emotion/core'
5-
importSelectWorkspacefrom'../src/containers/Check/SelectWorkspace'
65
importSideBarDecoratorfrom'./utils/SideBarDecorator'
7-
import{Form,Input,Select}from'@alifd/next'
8-
9-
constFormItem=Form.Item
10-
constOption=Select.Option
6+
importSelectTutorialPagefrom'../src/containers/SelectTutorial'
117

128
conststyles={
139
container:{
@@ -16,81 +12,8 @@ const styles = {
1612
},
1713
}
1814

19-
constuseFetch=(url:string,options?:object)=>{
20-
const[data,setData]=React.useState(null)
21-
const[error,setError]=React.useState(null)
22-
const[loading,setLoading]=React.useState(true)
23-
React.useEffect(()=>{
24-
constfetchData=async()=>{
25-
try{
26-
constres=awaitfetch(url,options)
27-
setLoading(false)
28-
constjson=awaitres.json()
29-
setData(json)
30-
}catch(error){
31-
setError(error)
32-
}
33-
}
34-
fetchData()
35-
},[url])
36-
return{ data, error, loading}
37-
}
38-
39-
constGitHubFetch=({ url})=>{
40-
if(!url){
41-
returnnull
42-
}
43-
const{ data, error, loading}=useFetch(url)
44-
if(loading){
45-
return<div>Loading...</div>
46-
}
47-
if(error){
48-
return<div>{JSON.stringify(error)}</div>
49-
}
50-
return<div>{JSON.stringify(data)}</div>
51-
}
52-
53-
consttutorials=[
54-
{
55-
id:'1',
56-
title:'Basic Node & Express',
57-
configUrl:'https://raw.githubusercontent.com/coderoad/fcc-basic-node-and-express/master/coderoad-config.json',
58-
},
59-
{
60-
id:'2',
61-
title:'Learn NPM',
62-
configUrl:'https://raw.githubusercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json',
63-
},
64-
]
65-
66-
constSelectTutorial=()=>{
67-
const[url,setUrl]=React.useState(null)
68-
consthandleUrlChange=(value)=>{
69-
setUrl(value)
70-
}
71-
return(
72-
<div>
73-
<Formstyle={{maxWidth:'500px'}}>
74-
<FormItemlabel="Select Tutorial:">
75-
<SelectonChange={handleUrlChange}style={{width:'100%'}}>
76-
{tutorials.map((tutorial)=>(
77-
<Optionkey={tutorial.id}value={tutorial.configUrl}>
78-
{tutorial.title}
79-
</Option>
80-
))}
81-
</Select>
82-
</FormItem>
83-
</Form>
84-
<GitHubFetchurl={url}/>
85-
</div>
86-
)
87-
}
88-
8915
storiesOf('GitHub Fetch',module)
9016
.addDecorator(SideBarDecorator)
91-
.add('Request',()=>{
92-
return<GitHubFetchurl={tutorials[0].configUrl}/>
93-
})
9417
.add('Select Tutorial',()=>{
95-
return<SelectTutorial/>
18+
return<SelectTutorialPagesend={action('send')}context={{}}/>
9619
})

0 commit comments

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