From 60365ef244105784c6ebddb4978a1a86cedfd02b Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 16 Jul 2020 20:57:01 -0700 Subject: [PATCH 1/5] add modal stories Signed-off-by: shmck --- .../Tutorial/components/Continue.tsx | 42 +++++++++++++++++++ .../containers/Tutorial/components/Reset.tsx | 2 +- web-app/stories/Modals.stories.tsx | 13 ++++++ web-app/stories/Tutorial.stories.tsx | 7 ---- 4 files changed, 56 insertions(+), 8 deletions(-) create mode 100644 web-app/src/containers/Tutorial/components/Continue.tsx create mode 100644 web-app/stories/Modals.stories.tsx diff --git a/web-app/src/containers/Tutorial/components/Continue.tsx b/web-app/src/containers/Tutorial/components/Continue.tsx new file mode 100644 index 00000000..6a8ea485 --- /dev/null +++ b/web-app/src/containers/Tutorial/components/Continue.tsx @@ -0,0 +1,42 @@ +import * as React from 'react' +import { Dialog, Message } from '@alifd/next' +import Button from '../../../components/Button' + +interface Props { + onContinue(): void +} + +const Continue = (props: Props) => { + const [modalState, setModalState] = React.useState<'none' | 'continue'>('none') + + const onClose = () => { + setModalState('none') + } + + const onOk = () => { + setModalState('continue') + props.onContinue() + return setTimeout(() => { + setModalState('none') + }, 3000) + } + + return ( + <> + + + Level Complete + + + ) +} + +export default Continue diff --git a/web-app/src/containers/Tutorial/components/Reset.tsx b/web-app/src/containers/Tutorial/components/Reset.tsx index 70c09808..a079c0dc 100644 --- a/web-app/src/containers/Tutorial/components/Reset.tsx +++ b/web-app/src/containers/Tutorial/components/Reset.tsx @@ -3,7 +3,7 @@ import { Dialog, Message } from '@alifd/next' import Button from '../../../components/Button' interface Props { - disabled: boolean + disabled?: boolean onReset(): void } diff --git a/web-app/stories/Modals.stories.tsx b/web-app/stories/Modals.stories.tsx new file mode 100644 index 00000000..588991b3 --- /dev/null +++ b/web-app/stories/Modals.stories.tsx @@ -0,0 +1,13 @@ +import { action } from '@storybook/addon-actions' +import { withKnobs } from '@storybook/addon-knobs' +import { storiesOf } from '@storybook/react' +import React from 'react' +import SideBarDecorator from './utils/SideBarDecorator' +import Reset from '../src/containers/Tutorial/components/Reset' +import Continue from '../src/containers/Tutorial/components/Continue' + +storiesOf('Modals', module) + .addDecorator(SideBarDecorator) + .addDecorator(withKnobs) + .add('Reset', () => ) + .add('Continue', () => ) diff --git a/web-app/stories/Tutorial.stories.tsx b/web-app/stories/Tutorial.stories.tsx index 4854a57e..a1236a90 100644 --- a/web-app/stories/Tutorial.stories.tsx +++ b/web-app/stories/Tutorial.stories.tsx @@ -3,16 +3,9 @@ import { withKnobs } from '@storybook/addon-knobs' import { storiesOf } from '@storybook/react' import React from 'react' import * as T from '../../typings' -import * as TT from '../../typings/tutorial' import Tutorial from '../src/containers/Tutorial' import SideBarDecorator from './utils/SideBarDecorator' -type ModifiedLevel = TT.Level & { - status: T.ProgressStatus - index: number - steps: Array -} - const context: Partial = { env: { machineId: '', sessionId: '', token: '' }, error: null, From 60c171dc32c857d0784c59e18b307fac82b93502 Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 16 Jul 2020 21:18:49 -0700 Subject: [PATCH 2/5] create progress pie component Signed-off-by: shmck --- .../Tutorial/components/Continue.tsx | 7 ++--- .../Tutorial/components/ProgressPie.tsx | 26 +++++++++++++++++++ 2 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 web-app/src/containers/Tutorial/components/ProgressPie.tsx diff --git a/web-app/src/containers/Tutorial/components/Continue.tsx b/web-app/src/containers/Tutorial/components/Continue.tsx index 6a8ea485..d4c34db2 100644 --- a/web-app/src/containers/Tutorial/components/Continue.tsx +++ b/web-app/src/containers/Tutorial/components/Continue.tsx @@ -1,6 +1,7 @@ import * as React from 'react' -import { Dialog, Message } from '@alifd/next' +import { Dialog } from '@alifd/next' import Button from '../../../components/Button' +import ProgressPie from './ProgressPie' interface Props { onContinue(): void @@ -31,9 +32,9 @@ const Continue = (props: Props) => { onOk={onOk} onCancel={onClose} onClose={onClose} - footerActions={['ok', 'cancel']} + footerActions={['ok']} > - Level Complete + ) diff --git a/web-app/src/containers/Tutorial/components/ProgressPie.tsx b/web-app/src/containers/Tutorial/components/ProgressPie.tsx new file mode 100644 index 00000000..44ef6175 --- /dev/null +++ b/web-app/src/containers/Tutorial/components/ProgressPie.tsx @@ -0,0 +1,26 @@ +import * as React from 'react' +import { Progress, Icon } from '@alifd/next' + +const ProgressPie = () => { + const [progress, setProgress] = React.useState(0) + + React.useEffect(() => { + if (progress < 100) { + const intervals = [10, 20] + const randomInteval = intervals[Math.floor(Math.random() * intervals.length)] + setTimeout(() => { + setProgress(progress + randomInteval) + }, 200) + } + }, [progress]) + + return ( + (progress === 100 ? : null)} + /> + ) +} + +export default ProgressPie From e192e4371d775c6d63e8cfc795da2f8a2761dc46 Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 16 Jul 2020 21:49:44 -0700 Subject: [PATCH 3/5] progress indicator continue Signed-off-by: shmck --- .../Tutorial/components/Continue.tsx | 51 ++++++++++++++----- .../Tutorial/components/ProgressPie.tsx | 29 +++++++---- .../src/containers/Tutorial/formatLevels.ts | 3 +- web-app/src/containers/Tutorial/index.tsx | 12 +++-- web-app/stories/Modals.stories.tsx | 5 +- 5 files changed, 72 insertions(+), 28 deletions(-) diff --git a/web-app/src/containers/Tutorial/components/Continue.tsx b/web-app/src/containers/Tutorial/components/Continue.tsx index d4c34db2..11da17ee 100644 --- a/web-app/src/containers/Tutorial/components/Continue.tsx +++ b/web-app/src/containers/Tutorial/components/Continue.tsx @@ -1,40 +1,65 @@ import * as React from 'react' import { Dialog } from '@alifd/next' +import { css, jsx } from '@emotion/core' import Button from '../../../components/Button' import ProgressPie from './ProgressPie' +const styles = { + content: { + display: 'flex' as 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + message: { + textAlign: 'center' as 'center', + }, +} + interface Props { + title: string + current: number // level index + max: number // level count onContinue(): void } const Continue = (props: Props) => { - const [modalState, setModalState] = React.useState<'none' | 'continue'>('none') + const [modalState, setModalState] = React.useState<'closed' | 'open'>('closed') const onClose = () => { - setModalState('none') + setModalState('closed') + } + + const onOpen = () => { + setModalState('open') } - const onOk = () => { - setModalState('continue') + const onContinue = () => { props.onContinue() - return setTimeout(() => { - setModalState('none') - }, 3000) + onClose() } return ( <> - - +
+ +
+

{props.title}

+
+ +
+
) diff --git a/web-app/src/containers/Tutorial/components/ProgressPie.tsx b/web-app/src/containers/Tutorial/components/ProgressPie.tsx index 44ef6175..6bd3d95d 100644 --- a/web-app/src/containers/Tutorial/components/ProgressPie.tsx +++ b/web-app/src/containers/Tutorial/components/ProgressPie.tsx @@ -1,24 +1,35 @@ import * as React from 'react' import { Progress, Icon } from '@alifd/next' -const ProgressPie = () => { +interface Props { + current: number + max: number +} + +const ProgressPie = (props: Props) => { const [progress, setProgress] = React.useState(0) React.useEffect(() => { - if (progress < 100) { - const intervals = [10, 20] - const randomInteval = intervals[Math.floor(Math.random() * intervals.length)] - setTimeout(() => { - setProgress(progress + randomInteval) - }, 200) + let timeout: any + if (progress < props.current) { + timeout = setTimeout(() => { + setProgress(progress + 1) + }, 100) + } + return () => { + if (timeout) { + clearTimeout(timeout) + } } }, [progress]) + const progressPercent = Math.floor((progress / props.max) * 100) + return ( (progress === 100 ? : null)} + textRender={() => (progressPercent === 100 ? : `${progressPercent}%`)} /> ) } diff --git a/web-app/src/containers/Tutorial/formatLevels.ts b/web-app/src/containers/Tutorial/formatLevels.ts index 1be43328..9e2b7c84 100644 --- a/web-app/src/containers/Tutorial/formatLevels.ts +++ b/web-app/src/containers/Tutorial/formatLevels.ts @@ -11,6 +11,7 @@ interface Input { type Output = { level: T.LevelUI levels: T.LevelUI[] + levelIndex: number stepIndex: number } @@ -89,7 +90,7 @@ const formatLevels = ({ progress, position, levels, testStatus }: Input): Output if (stepIndex === -1) { stepIndex = levels[levelIndex].steps.length } - return { level: levelUI, levels: levelsUI, stepIndex } + return { level: levelUI, levels: levelsUI, levelIndex, stepIndex } } export default formatLevels diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index 79d0a10b..bbe9f7fc 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -13,6 +13,7 @@ import { DISPLAY_RUN_TEST_BUTTON } from '../../environment' import formatLevels from './formatLevels' // import SettingsPage from './containers/Settings' import Reset from './components/Reset' +import Continue from './components/Continue' const styles = { header: { @@ -103,7 +104,7 @@ const TutorialPage = (props: PageProps) => { const [page, setPage] = React.useState<'level' | 'settings' | 'review'>('level') // format level code with status for easy rendering - const { level, levels, stepIndex } = formatLevels({ + const { level, levels, levelIndex, stepIndex } = formatLevels({ progress, position, levels: tutorial.levels, @@ -154,9 +155,12 @@ const TutorialPage = (props: PageProps) => { {/* Right */}
{level.status === 'COMPLETE' || !level.steps.length ? ( - + ) : ( )} diff --git a/web-app/stories/Modals.stories.tsx b/web-app/stories/Modals.stories.tsx index 588991b3..adf58d12 100644 --- a/web-app/stories/Modals.stories.tsx +++ b/web-app/stories/Modals.stories.tsx @@ -10,4 +10,7 @@ storiesOf('Modals', module) .addDecorator(SideBarDecorator) .addDecorator(withKnobs) .add('Reset', () => ) - .add('Continue', () => ) + .add('Continue', () => ) + .add('Continue Complete', () => ( + + )) From 78d9a713ef7212a68fe8e4f8e253c827c2f6056f Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 16 Jul 2020 21:53:55 -0700 Subject: [PATCH 4/5] no progress on single task level Signed-off-by: shmck --- web-app/src/containers/Tutorial/index.tsx | 4 +-- web-app/stories/Tutorial.stories.tsx | 30 +++++++---------------- 2 files changed, 11 insertions(+), 23 deletions(-) diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index bbe9f7fc..6332880a 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -161,9 +161,9 @@ const TutorialPage = (props: PageProps) => { max={level.steps.length} title={tutorial.summary.title} /> - ) : ( + ) : level.steps.length > 1 ? ( - )} + ) : null}
diff --git a/web-app/stories/Tutorial.stories.tsx b/web-app/stories/Tutorial.stories.tsx index a1236a90..044feddc 100644 --- a/web-app/stories/Tutorial.stories.tsx +++ b/web-app/stories/Tutorial.stories.tsx @@ -51,26 +51,6 @@ const context: Partial = { }, hints: ['First Hint', 'Second Hint'], }, - { - id: '1.2', - content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!', - setup: { - commits: ['abcdefg'], - }, - solution: { - commits: ['hijklmn'], - }, - }, - { - id: '1.3', - content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!', - setup: { - commits: ['abcdefg'], - }, - solution: { - commits: ['hijklmn'], - }, - }, ], }, { @@ -161,4 +141,12 @@ const context: Partial = { storiesOf('Tutorial', module) .addDecorator(SideBarDecorator) .addDecorator(withKnobs) - .add('Example', () => ) + .add('1 step', () => { + const firstLevel = { + ...context, + position: { levelId: '1', stepId: '1.2' }, + progress: { levels: {}, steps: {}, complete: false }, + } + return + }) + .add('3 step', () => ) From bd28a702194c1be96e4acab5c6023a1f3be264d6 Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 16 Jul 2020 22:11:29 -0700 Subject: [PATCH 5/5] fix continue button positioning Signed-off-by: shmck --- .../containers/Tutorial/components/Continue.tsx | 5 +++-- web-app/src/containers/Tutorial/index.tsx | 16 +++++++++------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/web-app/src/containers/Tutorial/components/Continue.tsx b/web-app/src/containers/Tutorial/components/Continue.tsx index 11da17ee..0667fb39 100644 --- a/web-app/src/containers/Tutorial/components/Continue.tsx +++ b/web-app/src/containers/Tutorial/components/Continue.tsx @@ -7,8 +7,9 @@ import ProgressPie from './ProgressPie' const styles = { content: { display: 'flex' as 'flex', - flexDirection: 'column', - justifyContent: 'center', + flexDirection: 'column' as 'column', + justifyContent: 'center' as 'center', + alignItems: 'center' as 'center', }, message: { textAlign: 'center' as 'center', diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index 6332880a..bac17481 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -155,14 +155,16 @@ const TutorialPage = (props: PageProps) => { {/* Right */}
{level.status === 'COMPLETE' || !level.steps.length ? ( - +
+ +
) : level.steps.length > 1 ? ( - + ) : null}