Oct 30, 2021 · Sep 14, 2021 · Sep 14, 2021 · Sep 28, 2021 · Sep 28, 2021
diff --git a/web-app/src/containers/Tutorial/components/Reset.tsx b/web-app/src/containers/Tutorial/components/Reset.tsx
 interfaceProps{
 disabled?:boolean
 onReset():void
 warning?:boolean
 style?:React.CSSProperties
 }

 constReset=(props:Props)=>{
 return(
 <>
 <Button
 ghost="dark"
 type="secondary"
 ghost={props.warning ?false :'dark'}
 type={props.warning ?'normal' :'secondary'}
 size="medium"
 onClick={()=>setModalState('confirm')}
 disabled={props.disabled}
 warning={props.warning}
 style={props.style}
 >
        Reset
 </Button>
diff --git a/web-app/src/containers/Tutorial/components/SideMenu.tsx b/web-app/src/containers/Tutorial/components/SideMenu.tsx
 <Icontype="prompt"size="xs"color="#EBEBEB"/>
 <spanstyle={styles.itemText}>About</span>
 </Item>
 {/*<Item
 <Item
 key="settings"
 disabled={props.page==='settings'}
          style={props.page === 'settings' ? styles.active : {}}
 style={props.page==='settings' ?styles.active(theme) :{}}
 onClick={()=>{
 onMenuClose()
 props.setPage('settings')
 }}
 >
 <Icontype="set"size="small"color="#EBEBEB"/>
 <spanstyle={styles.itemText}>Settings</span>
        </Item>{' '}
        */}
 </Item>
 </Menu>
 </Drawer>
 )
diff --git a/web-app/src/containers/Tutorial/containers/Settings.tsx b/web-app/src/containers/Tutorial/containers/Settings.tsx
 import * as React from 'react'
 import Button from 'components/Button'
 import React, { useState, useEffect } from 'react'
 import { Theme } from '../../../styles/theme'
 import Reset from '../components/Reset'

 import * as T from 'typings'

 const styles = {
  container: {
  flexColumn: {
    display: 'flex' as 'flex',
    flexDirection: 'column' as 'column',
  },
  container: (theme: Theme) => ({
    display: 'flex' as 'flex',
    flexDirection: 'column' as 'column',
    padding: '1rem',
    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',
  },
 }

 interface Props {
  onReset(): void
 }

 const SettingsPage = () => {
  return <div css={styles.container}>Settings coming soon...</div>
 const SettingsPage = (props: Props) => {
  return (
    <div css={styles.container}>
      <div css={styles.header}>
        <div>Settings</div>
      </div>
      <div css={styles.content}>
        <div css={styles.menu}>
          <div css={styles.menuItem}>
            <div css={styles.flexColumn}>
              <div css={styles.menuItemHeader}>Reset Tutorial</div>
              <div css={styles.menuItemContent}>
                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. This will reset the whole tutorial and change the source files back to the first
                level and first task checkpoint.
              </div>
            </div>
            <Reset style={styles.menuItemButton} warning onReset={props.onReset} />
          </div>
        </div>
      </div>
    </div>
  )
 }

 export default SettingsPage
diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx
 import CompletedBanner from './components/CompletedBanner'
 import { Theme } from '../../styles/theme'
 import { useTheme } from 'emotion-theming'
 import SettingsPage from './containers/Settings'

 const styles = {
  page: {

  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,
        )}
        {page === 'review' && <ReviewPage levels={levels} onResetToPosition={onResetToPosition} />}

        {/* {page === 'settings' && <SettingsPage/>} */}
        {page === 'settings' && <SettingsPageonReset={onSettingsReset} />}
      </div>

      {props.state === 'Completed' ? (
diff --git a/web-app/stories/Settings.stories.tsx b/web-app/stories/Settings.stories.tsx
 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 <Settings onReset={() => console.log('Reset...')} />
  })
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,6 +4,8 @@ import { Button, Dialog, Message } from '@alifd/next'
		interfaceProps{
		disabled?:boolean
		onReset():void
		warning?:boolean
		style?:React.CSSProperties
		}

		constReset=(props:Props)=>{
Expand All		@@ -24,11 +26,13 @@ const Reset = (props: Props) => {
		return(
		<>
		<Button
		ghost="dark"
		type="secondary"
		ghost={props.warning ?false :'dark'}
		type={props.warning ?'normal' :'secondary'}
		size="medium"
		onClick={()=>setModalState('confirm')}
		disabled={props.disabled}
		warning={props.warning}
		style={props.style}
		>
		Reset
		</Button>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -81,19 +81,18 @@ const SideMenu = (props: Props) => {
		<Icontype="prompt"size="xs"color="#EBEBEB"/>
		<spanstyle={styles.itemText}>About</span>
		</Item>
		{/*<Item
		<Item
		key="settings"
		disabled={props.page==='settings'}
		style={props.page === 'settings' ? styles.active : {}}
		style={props.page==='settings' ?styles.active(theme) :{}}
		onClick={()=>{
		onMenuClose()
		props.setPage('settings')
		}}
		>
		<Icontype="set"size="small"color="#EBEBEB"/>
		<spanstyle={styles.itemText}>Settings</span>
		</Item>{' '}
		*/}
		</Item>
		</Menu>
		</Drawer>
		)
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,15 +1,78 @@
		import * as React from 'react'
		import Button from 'components/Button'
		import React, { useState, useEffect } from 'react'
		import { Theme } from '../../../styles/theme'
		import Reset from '../components/Reset'

		import * as T from 'typings'

		const styles = {
		container: {
		flexColumn: {
		display: 'flex' as 'flex',
		flexDirection: 'column' as 'column',
		},
		container: (theme: Theme) => ({
		display: 'flex' as 'flex',
		flexDirection: 'column' as 'column',
		padding: '1rem',
		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',
		},
		}

		interface Props {
		onReset(): void
		}

		const SettingsPage = () => {
		return <div css={styles.container}>Settings coming soon...</div>
		const SettingsPage = (props: Props) => {
		return (
		<div css={styles.container}>
		<div css={styles.header}>
		<div>Settings</div>
		</div>
		<div css={styles.content}>
		<div css={styles.menu}>
		<div css={styles.menuItem}>
		<div css={styles.flexColumn}>
		<div css={styles.menuItemHeader}>Reset Tutorial</div>
		<div css={styles.menuItemContent}>
		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. This will reset the whole tutorial and change the source files back to the first
		level and first task checkpoint.
		</div>
		</div>
		<Reset style={styles.menuItemButton} warning onReset={props.onReset} />
		</div>
		</div>
		</div>
		</div>
		)
		}

		export default SettingsPage
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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: {
Expand DownExpand Up		@@ -127,6 +128,18 @@ 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,
Expand DownExpand Up		@@ -155,7 +168,7 @@ const TutorialPage = (props: PageProps) => {
		)}
		{page === 'review' && <ReviewPage levels={levels} onResetToPosition={onResetToPosition} />}

		{/* {page === 'settings' && <SettingsPage/>} */}
		{page === 'settings' && <SettingsPageonReset={onSettingsReset} />}
		</div>

		{props.state === 'Completed' ? (
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 <Settings onReset={() => console.log('Reset...')} />
		})