diff --git a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx index e938954d..4e4b568e 100644 --- a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx +++ b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx @@ -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: { @@ -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(TUTORIAL_URL) - // TODO: display errors - const selectState = loading ? 'loading' : error || !data ? 'error' : undefined return (
-
- - - -
+ + List + URL + {/* File */} + +
+
+ {props.tab === 'list' && } + {props.tab === 'url' && }
) } diff --git a/web-app/src/containers/SelectTutorial/forms/TutorialSelect.tsx b/web-app/src/containers/SelectTutorial/forms/TutorialSelect.tsx new file mode 100644 index 00000000..64987443 --- /dev/null +++ b/web-app/src/containers/SelectTutorial/forms/TutorialSelect.tsx @@ -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(TUTORIAL_LIST_URL) + // TODO: display errors + const selectState = loading ? 'loading' : error || !data ? 'error' : undefined + return ( +
+ + + +
+ ) +} + +export default TutorialSelect diff --git a/web-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx b/web-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx new file mode 100644 index 00000000..f9727261 --- /dev/null +++ b/web-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx @@ -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 +
+ + + + {' '} +    +
+ ) +} + +export default TutorialUrl diff --git a/web-app/src/containers/SelectTutorial/index.tsx b/web-app/src/containers/SelectTutorial/index.tsx index a649f2da..34e1155c 100644 --- a/web-app/src/containers/SelectTutorial/index.tsx +++ b/web-app/src/containers/SelectTutorial/index.tsx @@ -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(null) + const onTutorialLoad = (url: string) => { + setUrl(url) + setPage('summary') + } return (
- {!url && } - {url && setUrl(null)} />} + {page === 'form' && } + {page === 'summary' && url && setPage('form')} />}
) } diff --git a/web-app/src/environment.ts b/web-app/src/environment.ts index 79fbe34c..4357cdce 100644 --- a/web-app/src/environment.ts +++ b/web-app/src/environment.ts @@ -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}`) @@ -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 const TUTORIAL_URL: string = process.env.REACT_APP_TUTORIAL_URL || '' +export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL || '' diff --git a/web-app/stories/API.stories.tsx b/web-app/stories/API.stories.tsx deleted file mode 100644 index 893aa781..00000000 --- a/web-app/stories/API.stories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' -import React from 'react' -import { css, jsx } from '@emotion/core' -import SelectWorkspace from '../src/containers/Check/SelectWorkspace' -import SideBarDecorator from './utils/SideBarDecorator' - -import TUTORIALS_QUERY from '../src/services/apollo/queries/tutorials' -import { useQuery } from '@apollo/react-hooks' -import ApolloClient from 'apollo-boost' -import { ApolloProvider } from '@apollo/react-hooks' - -const styles = { - container: { - display: 'flex' as 'flex', - flexDirection: 'column' as 'column', - }, -} - -const client = new ApolloClient({ - uri: 'https://33mf420q4m.execute-api.us-west-2.amazonaws.com/stage/api-stage', -}) - -const Inner = () => { - const { loading, error, data } = useQuery(TUTORIALS_QUERY) - console.log(error) - return ( -
-
Error: {JSON.stringify(error)}
-
Data: {JSON.stringify(data)}
-
- ) -} - -storiesOf('API', module) - .addDecorator(SideBarDecorator) - .add('Request', () => { - return ( - - - - ) - }) diff --git a/web-app/stories/GitHubFetch.stories.tsx b/web-app/stories/GitHubFetch.stories.tsx deleted file mode 100644 index c3daba5b..00000000 --- a/web-app/stories/GitHubFetch.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' -import React from 'react' -import { css, jsx } from '@emotion/core' -import SideBarDecorator from './utils/SideBarDecorator' -import SelectTutorialPage from '../src/containers/SelectTutorial' - -const styles = { - container: { - display: 'flex' as 'flex', - flexDirection: 'column' as 'column', - }, -} - -storiesOf('GitHub Fetch', module) - .addDecorator(SideBarDecorator) - .add('Select Tutorial', () => { - return - }) diff --git a/web-app/stories/Overview.stories.tsx b/web-app/stories/Overview.stories.tsx index 3573554c..a4bfc9d3 100644 --- a/web-app/stories/Overview.stories.tsx +++ b/web-app/stories/Overview.stories.tsx @@ -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 ( - - ) + 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 }) diff --git a/web-app/stories/SelectTutorial.stories.tsx b/web-app/stories/SelectTutorial.stories.tsx index 26b4d7b4..a311e535 100644 --- a/web-app/stories/SelectTutorial.stories.tsx +++ b/web-app/stories/SelectTutorial.stories.tsx @@ -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 = [ @@ -31,16 +30,5 @@ const tutorialList = [ storiesOf('Select Tutorial', module) .addDecorator(SideBarDecorator) .add('Select Tutorial Page', () => { - return - }) - .add('Tutorial Item', () => { - const tutorial = tutorialList[0] - return ( - - ) + return })