Merge pull request coderoad#513 from ShubhamCanCreate/feat/reset-whole-tutorial

Reset whole tutorial

Author: ShMcK

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 (
     <>
       <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>

web-app/src/containers/Tutorial/components/SideMenu.tsx

@@ -81,19 +81,18 @@ const SideMenu = (props: Props) => {
           <Icon type="prompt" size="xs" color="#EBEBEB" />
           <span style={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')
           }}
         >
           <Icon type="set" size="small" color="#EBEBEB" />
           <span style={styles.itemText}>Settings</span>
-        </Item>{' '}
-        */}
+        </Item>
       </Menu>
     </Drawer>
   )

web-app/src/containers/Tutorial/containers/Settings.tsx

@@ -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

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: {
@@ -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,
@@ -155,7 +168,7 @@ const TutorialPage = (props: PageProps) => {
         )}
         {page === 'review' && <ReviewPage levels={levels} onResetToPosition={onResetToPosition} />}
 
-        {/* {page === 'settings' && <SettingsPage />} */}
+        {page === 'settings' && <SettingsPage onReset={onSettingsReset} />}
       </div>
 
       {props.state === 'Completed' ? (

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 <Settings onReset={() => console.log('Reset...')} />
+  })