From 4d46bba251c576df948d3ef6e5d822758513e48d Mon Sep 17 00:00:00 2001 From: Shubham Shah Date: Tue, 14 Sep 2021 13:05:33 +0530 Subject: [PATCH 1/4] Add more functionality Signed-off-by: Shubham Shah --- web-app/src/containers/Tutorial/components/Reset.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/web-app/src/containers/Tutorial/components/Reset.tsx b/web-app/src/containers/Tutorial/components/Reset.tsx index 197a9674..7b02d329 100644 --- a/web-app/src/containers/Tutorial/components/Reset.tsx +++ b/web-app/src/containers/Tutorial/components/Reset.tsx @@ -4,6 +4,8 @@ import { Button, Dialog, Message } from '@alifd/next' interface Props { disabled?: boolean onReset(): void + warning?: boolean + style?: React.CSSProperties } const Reset = (props: Props) => { @@ -24,11 +26,13 @@ const Reset = (props: Props) => { return ( <> From 6d105c785e70b15091e67a70d2f1da6dc2b0fcdd Mon Sep 17 00:00:00 2001 From: Shubham Shah Date: Tue, 14 Sep 2021 13:05:57 +0530 Subject: [PATCH 2/4] Add a settings page Signed-off-by: Shubham Shah --- .../Tutorial/components/SideMenu.tsx | 7 +- .../Tutorial/containers/Settings.tsx | 70 +++++++++++++++++-- web-app/src/containers/Tutorial/index.tsx | 3 +- web-app/stories/Settings.stories.tsx | 10 +++ 4 files changed, 80 insertions(+), 10 deletions(-) create mode 100644 web-app/stories/Settings.stories.tsx diff --git a/web-app/src/containers/Tutorial/components/SideMenu.tsx b/web-app/src/containers/Tutorial/components/SideMenu.tsx index 68b15b05..31323880 100644 --- a/web-app/src/containers/Tutorial/components/SideMenu.tsx +++ b/web-app/src/containers/Tutorial/components/SideMenu.tsx @@ -81,10 +81,10 @@ const SideMenu = (props: Props) => { About - {/* { onMenuClose() props.setPage('settings') @@ -92,8 +92,7 @@ const SideMenu = (props: Props) => { > Settings - {' '} - */} + ) diff --git a/web-app/src/containers/Tutorial/containers/Settings.tsx b/web-app/src/containers/Tutorial/containers/Settings.tsx index 2b5cfc56..a7b6d5f8 100644 --- a/web-app/src/containers/Tutorial/containers/Settings.tsx +++ b/web-app/src/containers/Tutorial/containers/Settings.tsx @@ -1,15 +1,75 @@ -import * as React from 'react' +import Button from 'components/Button' +import React, { useState } from 'react' +import { Theme } from '../../../styles/theme' +import Reset from '../components/Reset' const styles = { - container: { + flexColumn: { display: 'flex' as 'flex', flexDirection: 'column' as 'column', - padding: '1rem', + }, + container: (theme: Theme) => ({ + display: 'flex' as 'flex', + flexDirection: 'column' as 'column', + backgroundColor: theme['$color-white'], + height: 'auto', + }), + header: (theme: Theme) => ({ + display: 'flex' as 'flex', + alignItems: 'center', + justifyContent: 'space-between', + height: '2rem', + backgroundColor: theme['$color-fill1-2'], + fontSize: '1rem', + lineHeight: '1rem', + padding: '10px 0.4rem', + }), + content: { + padding: '0.5rem', + }, + menu: {}, + menuItem: { + display: 'flex' as 'flex', + border: '1px solid rgb(173, 173, 173)', + borderRadius: '5px', + padding: '0.5rem', + }, + menuItemHeader: { + fontWeight: 'bold' as 'bold', + }, + menuItemContent: {}, + menuItemButton: { + marginLeft: 'auto' as 'auto', }, } -const SettingsPage = () => { - return
Settings coming soon...
+interface Props {} + +const SettingsPage = (props: Props) => { + const onReset = () => { + console.log('Trigger a reset event here') + } + return ( +
+
+
Settings
+
+
+
+
+
+
Reset Tutorial
+
+ This will reset the whole tutorial and change the source files back to the first level and first task + checkpoint. +
+
+ +
+
+
+
+ ) } export default SettingsPage diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index c7827e8d..7f794739 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -18,6 +18,7 @@ import ScrollContent from './components/ScrollContent' import CompletedBanner from './components/CompletedBanner' import { Theme } from '../../styles/theme' import { useTheme } from 'emotion-theming' +import SettingsPage from './containers/Settings' const styles = { page: { @@ -155,7 +156,7 @@ const TutorialPage = (props: PageProps) => { )} {page === 'review' && } - {/* {page === 'settings' && } */} + {page === 'settings' && } {props.state === 'Completed' ? ( diff --git a/web-app/stories/Settings.stories.tsx b/web-app/stories/Settings.stories.tsx new file mode 100644 index 00000000..69dcf342 --- /dev/null +++ b/web-app/stories/Settings.stories.tsx @@ -0,0 +1,10 @@ +import * as React from 'react' +import { storiesOf } from '@storybook/react' +import SideBarDecorator from './utils/SideBarDecorator' +import Settings from '../src/containers/Tutorial/containers/Settings' + +storiesOf('Settings', module) + .addDecorator(SideBarDecorator) + .add('Settings Page', () => { + return + }) From 9f45628767e76e0feb2f949e0e0930a9dac419e6 Mon Sep 17 00:00:00 2001 From: Shubham Shah Date: Tue, 28 Sep 2021 14:35:26 +0530 Subject: [PATCH 3/4] Reset tutorial to the Intro page Signed-off-by: Shubham Shah --- .../Tutorial/containers/Settings.tsx | 20 ++++++++++++++++--- web-app/src/containers/Tutorial/index.tsx | 4 ++-- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/web-app/src/containers/Tutorial/containers/Settings.tsx b/web-app/src/containers/Tutorial/containers/Settings.tsx index a7b6d5f8..a715f33c 100644 --- a/web-app/src/containers/Tutorial/containers/Settings.tsx +++ b/web-app/src/containers/Tutorial/containers/Settings.tsx @@ -3,6 +3,8 @@ import React, { useState } from 'react' import { Theme } from '../../../styles/theme' import Reset from '../components/Reset' +import * as T from 'typings' + const styles = { flexColumn: { display: 'flex' as 'flex', @@ -43,11 +45,21 @@ const styles = { }, } -interface Props {} +interface Props { + levels: T.LevelUI[] + onResetToPosition(position: T.Position): void +} const SettingsPage = (props: Props) => { const onReset = () => { - console.log('Trigger a reset event here') + const level: T.LevelUI | null = props.levels.length ? props.levels[0] : null + if (level) { + props.onResetToPosition({ + levelId: level.id, + stepId: null, + complete: false, + }) + } } return (
@@ -61,7 +73,9 @@ const SettingsPage = (props: Props) => {
Reset Tutorial
This will reset the whole tutorial and change the source files back to the first level and first task - checkpoint. + checkpoint. This will reset the whole tutorial and change the source files back to the first level and + first task checkpoint. This will reset the whole tutorial and change the source files back to the first + level and first task checkpoint.
diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index 7f794739..c3bfe571 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -134,7 +134,7 @@ const TutorialPage = (props: PageProps) => { levels: tutorial.levels, testStatus, }) - + console.log({ position }) const disableOptions = processes.length > 0 || props.state === 'Level.TestRunning' return ( @@ -156,7 +156,7 @@ const TutorialPage = (props: PageProps) => { )} {page === 'review' && } - {page === 'settings' && } + {page === 'settings' && } {props.state === 'Completed' ? ( From 640f4135508ea9ab7a2f58b637ef35ec9798493e Mon Sep 17 00:00:00 2001 From: Shubham Shah Date: Tue, 28 Sep 2021 17:41:45 +0530 Subject: [PATCH 4/4] Reset to Level 1 step 1 Signed-off-by: Shubham Shah --- .../containers/Tutorial/containers/Settings.tsx | 17 +++-------------- web-app/src/containers/Tutorial/index.tsx | 16 ++++++++++++++-- web-app/stories/Settings.stories.tsx | 2 +- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/web-app/src/containers/Tutorial/containers/Settings.tsx b/web-app/src/containers/Tutorial/containers/Settings.tsx index a715f33c..76ee9dea 100644 --- a/web-app/src/containers/Tutorial/containers/Settings.tsx +++ b/web-app/src/containers/Tutorial/containers/Settings.tsx @@ -1,5 +1,5 @@ import Button from 'components/Button' -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import { Theme } from '../../../styles/theme' import Reset from '../components/Reset' @@ -46,21 +46,10 @@ const styles = { } interface Props { - levels: T.LevelUI[] - onResetToPosition(position: T.Position): void + onReset(): void } const SettingsPage = (props: Props) => { - const onReset = () => { - const level: T.LevelUI | null = props.levels.length ? props.levels[0] : null - if (level) { - props.onResetToPosition({ - levelId: level.id, - stepId: null, - complete: false, - }) - } - } return (
@@ -78,7 +67,7 @@ const SettingsPage = (props: Props) => { level and first task checkpoint.
- + diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index c3bfe571..c16c62e2 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -128,13 +128,25 @@ const TutorialPage = (props: PageProps) => { const [page, setPage] = React.useState<'about' | 'level' | 'review' | 'settings'>('level') + const onSettingsReset = () => { + //Reset to first level first step + const level: T.LevelUI | null = levels.length ? levels[1] : null + if (level) { + onResetToPosition({ + levelId: level.id, + stepId: level.steps.length ? level.steps[0].id : null, + complete: false, + }) + setPage('level') + } + } // format level code with status for easy rendering const { level, levels, levelIndex, stepIndex } = formatLevels({ position, levels: tutorial.levels, testStatus, }) - console.log({ position }) + const disableOptions = processes.length > 0 || props.state === 'Level.TestRunning' return ( @@ -156,7 +168,7 @@ const TutorialPage = (props: PageProps) => { )} {page === 'review' && } - {page === 'settings' && } + {page === 'settings' && } {props.state === 'Completed' ? ( diff --git a/web-app/stories/Settings.stories.tsx b/web-app/stories/Settings.stories.tsx index 69dcf342..2d442aff 100644 --- a/web-app/stories/Settings.stories.tsx +++ b/web-app/stories/Settings.stories.tsx @@ -6,5 +6,5 @@ import Settings from '../src/containers/Tutorial/containers/Settings' storiesOf('Settings', module) .addDecorator(SideBarDecorator) .add('Settings Page', () => { - return + return console.log('Reset...')} /> })