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 * as React from 'react'
import useFetch from '../../../services/hooks/useFetch'
import { TUTORIAL_LIST_URL } from '../../../environment'
import { Form, Select } from '@alifd/next'

const FormItem = Form.Item
const Option = Select.Option

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

interface Props {
onTutorialLoad(url: string): void
}

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

export default TutorialSelect
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 * as React from 'react'
import { Button, Form, Radio, Input } from '@alifd/next'

const FormItem = Form.Item

interface Props {
defaultUrl: string
onTutorialLoad(url: string): void
}

const TutorialUrl = (props: Props) => {
const [url, setUrl] = React.useState(props.defaultUrl)
const onSubmit = (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
<Form style={{ maxWidth: '600px' }} onSubmit={onSubmit}>
<FormItem label="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>
<Button htmlType="submit" type="primary">
Load
</Button>{' '}
&nbsp;&nbsp;
</Form>
)
}

export default TutorialUrl
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 {
}

const SelectTutorialPage = (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)
const onTutorialLoad = (url: string) => {
setUrl(url)
setPage('summary')
}
return (
<div css={styles.page}>
{!url&& <SelectTutorialFormonUrlChange={setUrl} />}
{url && <LoadTutorialSummary url={url} send={props.send} onClear={() =>setUrl(null)} />}
{page === 'form'&& <SelectTutorialFormurl={url} onTutorialLoad={onTutorialLoad} tab={tab} setTab={setTab} />}
{page === 'summary' &&url && <LoadTutorialSummary url={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
const requiredKeys = ['REACT_APP_TUTORIAL_URL']
const requiredKeys = ['REACT_APP_TUTORIAL_LIST_URL']
for (const required of requiredKeys) {
if (!process.env[required]) {
throw new Error(`Missing Environmental Variable: ${required}`)
Expand All@@ -10,4 +10,4 @@ export const DEBUG: boolean = (process.env.REACT_APP_DEBUG || '').toLowerCase()
export const VERSION: string = process.env.VERSION || 'unknown'
export const NODE_ENV: string = process.env.NODE_ENV || 'development'
export const LOG_STATE: boolean = (process.env.REACT_APP_LOG_STATE || '').toLowerCase() === 'true'
export constTUTORIAL_URL: string = process.env.REACT_APP_TUTORIAL_URL || ''
export constTUTORIAL_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 * as TT from '../../typings/tutorial'
import { linkTo } from '@storybook/addon-links'
import { action } from '@storybook/addon-actions'
import { storiesOf } from '@storybook/react'
import React from 'react'
import OverViewPage from '../src/containers/Overview/OverviewPage'
import OverViewPage from '../src/components/TutorialOverview'
import SideBarDecorator from './utils/SideBarDecorator'

storiesOf('Overview', module)
.addDecorator(SideBarDecorator)
.add('OverView Page', () => {
const levels = [
{
id: 'L1',
title: 'The First Level',
summary: 'A Summary of the first level',
const tutorial: 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={new Date().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 <OverViewPage tutorial={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'
import React from 'react'
import SelectTutorial from '../src/containers/SelectTutorial/SelectTutorial'
import TutorialItem from '../src/containers/SelectTutorial/TutorialItem'
import SelectTutorial from '../src/containers/SelectTutorial'
import SideBarDecorator from './utils/SideBarDecorator'

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