diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx index 6ed674c3..e06eed95 100644 --- a/web-app/src/Routes.tsx +++ b/web-app/src/Routes.tsx @@ -3,7 +3,7 @@ import useRouter from './components/Router' import Workspace from './components/Workspace' import LoadingPage from './containers/Loading' import StartPage from './containers/Start' -import NewPage from './containers/New' +import SelectTutorialPage from './containers/SelectTutorial' import OverviewPage from './containers/Overview' import CompletedPage from './containers/Tutorial/CompletedPage' import LevelSummaryPage from './containers/Tutorial/LevelPage' @@ -27,7 +27,7 @@ const Routes = () => { - + diff --git a/web-app/src/components/Tag/index.tsx b/web-app/src/components/Tag/index.tsx new file mode 100644 index 00000000..b9d05b48 --- /dev/null +++ b/web-app/src/components/Tag/index.tsx @@ -0,0 +1,18 @@ +import * as React from 'react' +import { css, jsx } from '@emotion/core' + +const styles = { + tag: { + padding: '3px', + backgroundColor: 'rgb(225, 236, 244)', + color: 'rgb(57, 115, 157)', + }, +} + +type Props = { + children: string +} + +const Tag = (props: Props) =>
{props.children}
+ +export default Tag diff --git a/web-app/src/containers/New/NewPage.tsx b/web-app/src/containers/New/NewPage.tsx deleted file mode 100644 index 9d88bbf6..00000000 --- a/web-app/src/containers/New/NewPage.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react' -import * as T from 'typings' -import * as G from 'typings/graphql' -import { css, jsx } from '@emotion/core' -import TutorialList from './TutorialList' - -const styles = { - page: { - position: 'relative' as 'relative', - width: '100%', - }, - header: { - height: '2rem', - backgroundColor: '#EBEBEB', - fontSize: '1rem', - lineHeight: '1rem', - padding: '10px 1rem', - }, - banner: { - height: '3rem', - fontSize: '1rem', - padding: '1rem', - }, -} - -interface Props { - send(action: T.Action): void - tutorialList: G.Tutorial[] -} - -const NewPage = (props: Props) => ( -
-
- CodeRoad -
-
- Select a tutorial to launch in this workspace: -
- -
-) - -export default NewPage diff --git a/web-app/src/containers/New/TutorialList/index.tsx b/web-app/src/containers/New/TutorialList/index.tsx deleted file mode 100644 index b131db41..00000000 --- a/web-app/src/containers/New/TutorialList/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react' -import * as T from 'typings' -import * as G from 'typings/graphql' -import TutorialItem from './TutorialItem' - -interface Props { - send(action: T.Action): void - tutorialList: G.Tutorial[] -} - -const TutorialList = (props: Props) => { - const onSelect = (tutorial: G.Tutorial) => { - props.send({ - type: 'SELECT_TUTORIAL', - payload: { - tutorial, - }, - }) - } - return ( -
- {props.tutorialList.map((tutorial: G.Tutorial) => ( - onSelect(tutorial)} - title={tutorial.summary.title || ''} - description={tutorial.summary.description || ''} - /> - ))} -
- ) -} - -export default TutorialList diff --git a/web-app/src/containers/SelectTutorial/SelectTutorial.tsx b/web-app/src/containers/SelectTutorial/SelectTutorial.tsx new file mode 100644 index 00000000..d24435af --- /dev/null +++ b/web-app/src/containers/SelectTutorial/SelectTutorial.tsx @@ -0,0 +1,62 @@ +import * as React from 'react' +import * as T from 'typings' +import * as G from 'typings/graphql' +import { css, jsx } from '@emotion/core' +import TutorialItem from './TutorialItem' + +const styles = { + page: { + position: 'relative' as 'relative', + width: '100%', + }, + header: { + height: '2rem', + backgroundColor: '#EBEBEB', + fontSize: '1rem', + lineHeight: '1rem', + padding: '10px 1rem', + }, + banner: { + minHeight: '3rem', + fontSize: '1rem', + padding: '1rem', + }, +} + +interface Props { + send(action: T.Action): void + tutorialList: G.Tutorial[] +} + +const SelectTutorial = (props: Props) => { + const onSelect = (tutorial: G.Tutorial) => { + props.send({ + type: 'SELECT_TUTORIAL', + payload: { + tutorial, + }, + }) + } + return ( +
+
+ CodeRoad +
+
+ Select a tutorial to launch in this workspace: +
+
+ {props.tutorialList.map((tutorial: G.Tutorial) => ( + onSelect(tutorial)} + title={tutorial.summary.title || ''} + description={tutorial.summary.description || ''} + /> + ))} +
+
+ ) +} + +export default SelectTutorial diff --git a/web-app/src/containers/New/TutorialList/TutorialItem.tsx b/web-app/src/containers/SelectTutorial/TutorialItem.tsx similarity index 64% rename from web-app/src/containers/New/TutorialList/TutorialItem.tsx rename to web-app/src/containers/SelectTutorial/TutorialItem.tsx index 5178d71e..ebbef0c7 100644 --- a/web-app/src/containers/New/TutorialList/TutorialItem.tsx +++ b/web-app/src/containers/SelectTutorial/TutorialItem.tsx @@ -1,11 +1,36 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' -import Card from '../../../components/Card' -import Markdown from '../../../components/Markdown' +import Card from '../../components/Card' +import Tag from '../../components/Tag' const styles = { card: { cursor: 'pointer', + display: 'inline-flex' as 'inline-flex', + flexDirection: 'row' as 'row', + minWidth: 500, + }, + left: { + width: 80, + display: 'flex' as 'flex', + alignItems: 'center' as 'center', + }, + right: { + flex: '1', + display: 'flex' as 'flex', + flexDirection: 'column' as 'column', + }, + title: { + margin: 0, + }, + author: { + margin: '0 0 2px 0', + color: 'grey', + }, + tags: { + display: 'flex' as 'flex', + alignItems: 'center' as 'center', + padding: '2px', }, languages: { display: 'flex' as 'flex', @@ -38,11 +63,18 @@ const LanguageIcon = () => ( ) const TutorialItem = (props: Props) => ( - -

{props.title || 'Title'}

- {props.description || 'Description'} -
- + +
+
+ +
+
+

{props.title || 'Title'}

+

Author Name

+
+ javascript +
+
) diff --git a/web-app/src/containers/New/index.tsx b/web-app/src/containers/SelectTutorial/index.tsx similarity index 77% rename from web-app/src/containers/New/index.tsx rename to web-app/src/containers/SelectTutorial/index.tsx index 89ec7e1b..9265d1c0 100644 --- a/web-app/src/containers/New/index.tsx +++ b/web-app/src/containers/SelectTutorial/index.tsx @@ -5,7 +5,7 @@ import * as G from 'typings/graphql' import ErrorView from '../../components/Error' import queryTutorials from '../../services/apollo/queries/tutorials' import LoadingPage from '../Loading' -import NewPage from './NewPage' +import SelectTutorial from './SelectTutorial' interface ContainerProps { send(action: T.Action): void @@ -16,7 +16,7 @@ interface TutorialsData { tutorials: G.Tutorial[] } -const NewPageContainer = (props: ContainerProps) => { +const SelectPageContainer = (props: ContainerProps) => { const { data, loading, error } = useQuery(queryTutorials, { fetchPolicy: 'no-cache', }) @@ -33,7 +33,7 @@ const NewPageContainer = (props: ContainerProps) => { return null } - return + return } -export default NewPageContainer +export default SelectPageContainer diff --git a/web-app/stories/New.stories.tsx b/web-app/stories/SelectTutorial.stories.tsx similarity index 67% rename from web-app/stories/New.stories.tsx rename to web-app/stories/SelectTutorial.stories.tsx index 6cd3f587..23582c0d 100644 --- a/web-app/stories/New.stories.tsx +++ b/web-app/stories/SelectTutorial.stories.tsx @@ -1,9 +1,8 @@ import { action } from '@storybook/addon-actions' import { storiesOf } from '@storybook/react' import React from 'react' -import NewPage from '../src/containers/New/NewPage' -import TutorialList from '../src/containers/New/TutorialList' -import TutorialItem from '../src/containers/New/TutorialList/TutorialItem' +import SelectTutorial from '../src/containers/SelectTutorial/SelectTutorial' +import TutorialItem from '../src/containers/SelectTutorial/TutorialItem' import SideBarDecorator from './utils/SideBarDecorator' const tutorialList = [ @@ -25,11 +24,8 @@ const tutorialList = [ storiesOf('Select Tutorial', module) .addDecorator(SideBarDecorator) - .add('New Page', () => { - return - }) - .add('Tutorial List', () => { - return + .add('Select Tutorial Page', () => { + return }) .add('Tutorial Item', () => { const tutorial = tutorialList[0]