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

Load/tutorial from url#178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
ShMcK merged 2 commits intomasterfromload/tutorial-from-url
Apr 3, 2020
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 22 additions & 25 deletionsweb-app/src/containers/SelectTutorial/SelectTutorialForm.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
import * as React from 'react'
import useFetch from '../../services/hooks/useFetch'
import { Form, Select } from '@alifd/next'
import { TUTORIAL_URL } from '../../environment'

const FormItem = Form.Item
const Option = Select.Option
import { Radio } from '@alifd/next'
import TutorialSelect from './forms/TutorialSelect'
import TutorialUrl from './forms/TutorialUrl'

const styles = {
formWrapper: {
Expand All@@ -14,31 +11,31 @@ const styles = {
},
}

type TutorialList = Array<{ id: string; title: string; configUrl: string }>

interface Props {
onUrlChange(url: string): void
tab: string
setTab(tab: 'list' | 'url'): void
url: string | null
onTutorialLoad(url: string): void
}

const SelectTutorialForm = (props: Props) => {
// load tutorial from a path to a tutorial list json
const { data, error, loading } = useFetch<TutorialList>(TUTORIAL_URL)
// TODO: display errors
const selectState = loading ? 'loading' : error || !data ? 'error' : undefined
return (
<div css={styles.formWrapper}>
<Form style={{ maxWidth: '500px' }}>
<FormItem label="Select Tutorial:">
<Select onChange={props.onUrlChange} style={{ width: '100%' }} placeholder="Tutorials..." state={selectState}>
{data &&
data.map((tutorial) => (
<Option key={tutorial.id} value={tutorial.configUrl}>
{tutorial.title}
</Option>
))}
</Select>
</FormItem>
</Form>
<Radio.Group
style={{ marginLeft: 8 }}
shape="button"
value={props.tab}
// @ts-ignore ts lib validation issue
onChange={props.setTab}
>
<Radio value="list">List</Radio>
<Radio value="url">URL</Radio>
{/* <Radio value="file">File</Radio> */}
</Radio.Group>
<br />
<br />
{props.tab === 'list' && <TutorialSelect onTutorialLoad={props.onTutorialLoad} />}
{props.tab === 'url' && <TutorialUrl onTutorialLoad={props.onTutorialLoad} defaultUrl={props.url || ''} />}
</div>
)
}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
import*asReactfrom'react'
importuseFetchfrom'../../../services/hooks/useFetch'
import{TUTORIAL_LIST_URL}from'../../../environment'
import{Form,Select}from'@alifd/next'

constFormItem=Form.Item
constOption=Select.Option

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

interfaceProps{
onTutorialLoad(url:string):void
}

constTutorialSelect=(props:Props)=>{
// load tutorial from a path to a tutorial list json
const{ data, error, loading}=useFetch<TutorialList>(TUTORIAL_LIST_URL)
// TODO: display errors
constselectState=loading ?'loading' :error||!data ?'error' :undefined
return(
<Formstyle={{maxWidth:'500px'}}>
<FormItemlabel="Select Tutorial:">
<Select
onChange={props.onTutorialLoad}
style={{width:'100%'}}
placeholder="Tutorials..."
state={selectState}
>
{data&&
data.map((tutorial)=>(
<Optionkey={tutorial.id}value={tutorial.configUrl}>
{tutorial.title}
</Option>
))}
</Select>
</FormItem>
</Form>
)
}

exportdefaultTutorialSelect
39 changes: 39 additions & 0 deletionsweb-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
import*asReactfrom'react'
import{Button,Form,Radio,Input}from'@alifd/next'

constFormItem=Form.Item

interfaceProps{
defaultUrl:string
onTutorialLoad(url:string):void
}

constTutorialUrl=(props:Props)=>{
const[url,setUrl]=React.useState(props.defaultUrl)
constonSubmit=(e:any)=>{
e.preventDefault()
console.log('tutorial url',url)
props.onTutorialLoad(url)
}

return(
//@ts-ignore seems to be an onSubmit event ts error in lib
<Formstyle={{maxWidth:'600px'}}onSubmit={onSubmit}>
<FormItemlabel="URL path to coderoad config.json">
<Input
size="large"
placeholder="https://raw.githubusercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json"
defaultValue={props.defaultUrl}
onChange={setUrl}
aria-label="input url path to coderoad config.json"
/>
</FormItem>
<ButtonhtmlType="submit"type="primary">
Load
</Button>{' '}
&nbsp;&nbsp;
</Form>
)
}

exportdefaultTutorialUrl
10 changes: 8 additions & 2 deletionsweb-app/src/containers/SelectTutorial/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,11 +19,17 @@ interface Props {
}

constSelectTutorialPage=(props:Props)=>{
const[page,setPage]=React.useState<'form'|'summary'>('form')
const[tab,setTab]=React.useState<'list'|'url'>('list')
const[url,setUrl]=React.useState<string|null>(null)
constonTutorialLoad=(url:string)=>{
setUrl(url)
setPage('summary')
}
return(
<divcss={styles.page}>
{!url&&<SelectTutorialFormonUrlChange={setUrl}/>}
{url&&<LoadTutorialSummaryurl={url}send={props.send}onClear={()=>setUrl(null)}/>}
{page==='form'&&<SelectTutorialFormurl={url}onTutorialLoad={onTutorialLoad}tab={tab}setTab={setTab}/>}
{page==='summary'&&url&&<LoadTutorialSummaryurl={url}send={props.send}onClear={()=>setPage('form')}/>}
</div>
)
}
Expand Down
4 changes: 2 additions & 2 deletionsweb-app/src/environment.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
// validate .env
constrequiredKeys=['REACT_APP_TUTORIAL_URL']
constrequiredKeys=['REACT_APP_TUTORIAL_LIST_URL']
for(constrequiredofrequiredKeys){
if(!process.env[required]){
thrownewError(`Missing Environmental Variable:${required}`)
Expand All@@ -10,4 +10,4 @@ export const DEBUG: boolean = (process.env.REACT_APP_DEBUG || '').toLowerCase()
exportconstVERSION:string=process.env.VERSION||'unknown'
exportconstNODE_ENV:string=process.env.NODE_ENV||'development'
exportconstLOG_STATE:boolean=(process.env.REACT_APP_LOG_STATE||'').toLowerCase()==='true'
exportconstTUTORIAL_URL:string=process.env.REACT_APP_TUTORIAL_URL||''
exportconstTUTORIAL_LIST_URL:string=process.env.REACT_APP_TUTORIAL_LIST_URL||''
43 changes: 0 additions & 43 deletionsweb-app/stories/API.stories.tsx
View file
Open in desktop

This file was deleted.

19 changes: 0 additions & 19 deletionsweb-app/stories/GitHubFetch.stories.tsx
View file
Open in desktop

This file was deleted.

99 changes: 57 additions & 42 deletionsweb-app/stories/Overview.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,69 @@
import*asTTfrom'../../typings/tutorial'
import{linkTo}from'@storybook/addon-links'
import{action}from'@storybook/addon-actions'
import{storiesOf}from'@storybook/react'
importReactfrom'react'
importOverViewPagefrom'../src/containers/Overview/OverviewPage'
importOverViewPagefrom'../src/components/TutorialOverview'
importSideBarDecoratorfrom'./utils/SideBarDecorator'

storiesOf('Overview',module)
.addDecorator(SideBarDecorator)
.add('OverView Page',()=>{
constlevels=[
{
id:'L1',
title:'The First Level',
summary:'A Summary of the first level',
consttutorial:TT.Tutorial={
id:'1',
version:'0.1.0',
config:{
testRunner:{command:''},
repo:{uri:'',branch:'master'},
},
{
id:'L2',
title:'The Second Level',
summary:'A Summary of the second level',
summary:{
title:'Manage NPM package.json',
description:'Learn to use the package manager at the core of JavaScript projects.',
},
{
id:'L3',
title:'The Third Level',
summary:'A Summary of the third level',
},
{
id:'L4',
title:'The Fourth Level',
summary:'A Summary of the fourth level',
},
{
id:'L5',
title:'The Fifth Level',
summary:'A Summary of the fifth level',
},
{
id:'L6',
title:'The Sixth Level',
summary:'A Summary of the sixth level',
},
]
return(
<OverViewPage
title="Manage NPM package.json"
description="Learn to use the package manager at the core of JavaScript projects."
createdBy={{name:'Shawn McKay'}}
updatedAt={newDate().toUTCString()}
levels={levels}
onBack={action('back')}
onNext={linkTo('Tutorial SideBar','Level')}
/>
)
levels:[
{
id:'L1',
title:'The First Level',
summary:'A Summary of the first level',
content:'',
steps:[],
},
{
id:'L2',
title:'The Second Level',
summary:'A Summary of the second level',
content:'',
steps:[],
},
{
id:'L3',
title:'The Third Level',
summary:'A Summary of the third level',
content:'',
steps:[],
},
{
id:'L4',
title:'The Fourth Level',
summary:'A Summary of the fourth level',
content:'',
steps:[],
},
{
id:'L5',
title:'The Fifth Level',
summary:'A Summary of the fifth level',
content:'',
steps:[],
},
{
id:'L6',
title:'The Sixth Level',
summary:'A Summary of the sixth level',
content:'',
steps:[],
},
],
}
return<OverViewPagetutorial={tutorial}onClear={action('clear')}onNext={linkTo('Tutorial SideBar','Level')}/>
})
16 changes: 2 additions & 14 deletionsweb-app/stories/SelectTutorial.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
import{action}from'@storybook/addon-actions'
import{storiesOf}from'@storybook/react'
importReactfrom'react'
importSelectTutorialfrom'../src/containers/SelectTutorial/SelectTutorial'
importTutorialItemfrom'../src/containers/SelectTutorial/TutorialItem'
importSelectTutorialfrom'../src/containers/SelectTutorial'
importSideBarDecoratorfrom'./utils/SideBarDecorator'

consttutorialList=[
Expand DownExpand Up@@ -31,16 +30,5 @@ const tutorialList = [
storiesOf('Select Tutorial',module)
.addDecorator(SideBarDecorator)
.add('Select Tutorial Page',()=>{
return<SelectTutorialtutorialList={tutorialList}send={action('send')}/>
})
.add('Tutorial Item',()=>{
consttutorial=tutorialList[0]
return(
<TutorialItem
onSelect={action('onSelect')}
title={tutorial.summary.title}
description={tutorial.summary.description}
createdBy={{name:'First Lastname'}}
/>
)
return<SelectTutorialsend={action('send')}context={{}}/>
})
[8]ページ先頭
©2009-2025 Movatter.jp