Skip to content

Commit fe0c662

Browse files
ShMcKShMcK
committed
add completed banner
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent b59d9e5 commit fe0c662

File tree

8 files changed

+148
-121
lines changed

8 files changed

+148
-121
lines changed

‎web-app/src/Routes.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import ErrorView from './components/Error'
55
import LoadingPage from './containers/Loading'
66
import StartPage from './containers/Start'
77
import SelectTutorialPage from './containers/SelectTutorial'
8-
import CompletedPage from './containers/Tutorial/CompletedPage'
98
import TutorialPage from './containers/Tutorial'
109

1110
/*
@@ -39,12 +38,8 @@ const Routes = () => {
3938
<Route paths={{ Tutorial: { Level: { Load: true } } }}>
4039
<LoadingPage text="Loading Level..." processes={context.processes} />
4140
</Route>
42-
<Route paths={{ Tutorial: { Level: true } }}>
43-
<TutorialPage send={send} context={context} state={route.replace('Tutorial.Level.', '')} />
44-
</Route>
45-
{/* Completed */}
46-
<Route paths={{ Tutorial: { Completed: true } }}>
47-
<CompletedPage context={context} />
41+
<Route paths={{ Tutorial: { Level: true, Completed: true } }}>
42+
<TutorialPage send={send} context={context} state={route.replace('Tutorial.', '')} />
4843
</Route>
4944
</Router>
5045
)

‎web-app/src/containers/Tutorial/CompletedPage.tsx‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎web-app/src/containers/Tutorial/components/CompletedBanner.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import * as React from 'react'
2+
import { css, jsx } from '@emotion/core'
3+
import { Icon } from '@alifd/next'
4+
5+
const styles = {
6+
banner: {
7+
height: 'auto',
8+
width: '100%',
9+
backgroundColor: 'rgb(85, 132, 255)',
10+
color: 'white',
11+
padding: '0.5rem',
12+
},
13+
header: {
14+
position: 'relative' as 'relative',
15+
width: '100%',
16+
},
17+
headerMessage: {
18+
marginLeft: '0.5rem',
19+
},
20+
// close: {
21+
// position: 'absolute' as 'absolute',
22+
// right: '0.5rem',
23+
// top: '0.5rem',
24+
// padding: '2px',
25+
// },
26+
section: {
27+
padding: '0rem 0.5rem 1rem 0.5rem',
28+
},
29+
}
30+
31+
interface Props {
32+
title: string
33+
}
34+
35+
const CompletedBanner = (props: Props) => {
36+
return (
37+
<div css={styles.banner}>
38+
<div css={styles.header}>
39+
{/* <div css={styles.close} onClick={() => setOpen(false)}>
40+
<Icon type="close" size="xs" />
41+
</div> */}
42+
<h3>
43+
<Icon type="success-filling" size="large" />
44+
<span css={styles.headerMessage}>Congratulations on completing "{props.title}"!</span>
45+
</h3>
46+
</div>
47+
<div css={styles.section}>
48+
<h5>You've reached the end of the road...</h5>
49+
<p>To go down another path:</p>
50+
<ul>
51+
<li>- open a new VSCode workspace</li>
52+
<li>- relaunch the CodeRoad app</li>
53+
<li>- select a new tutorial</li>
54+
</ul>
55+
</div>
56+
</div>
57+
)
58+
}
59+
60+
export default CompletedBanner

‎web-app/src/containers/Tutorial/containers/About.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ For learners, there are a number of advantages to running tutorials inside VSCod
4444
4545
a. Learn in a real world coding environment
4646
b. Get rapid feedback on save and helpful error messages
47-
c. Users own the code, and can build a Git timeline and deploy a portfolio
47+
c.Users own the code, and can build a Git timeline and deploy a portfolio
4848
4949
##### Subscribe
5050

‎web-app/src/containers/Tutorial/containers/Review.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ interface Props {
1010

1111
const styles = {
1212
container: {
13+
height: 'auto',
14+
width: '100%',
1315
display: 'flex' as 'flex',
1416
flexDirection: 'column' as 'column',
1517
},

‎web-app/src/containers/Tutorial/index.tsx‎

Lines changed: 69 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import formatLevels from './formatLevels'
1515
import Reset from './components/Reset'
1616
import Continue from './components/Continue'
1717
import ScrollContent from './components/ScrollContent'
18+
import CompletedBanner from './components/CompletedBanner'
1819

1920
const styles = {
2021
page: {
@@ -54,6 +55,13 @@ const styles = {
5455
color: 'white',
5556
zIndex: 1000,
5657
},
58+
completeFooter: {
59+
position: 'fixed' as 'fixed',
60+
bottom: 0,
61+
left: 0,
62+
right: 0,
63+
zIndex: 1000,
64+
},
5765
processes: {
5866
padding: '0 1rem',
5967
position: 'fixed' as 'fixed',
@@ -74,7 +82,7 @@ const styles = {
7482
interface PageProps {
7583
context: T.MachineContext
7684
send(action: T.Action): void
77-
state: string // 'Normal' | 'TestRunning' | 'TestFail' | 'TestPass' | 'LevelComplete'
85+
state: string // 'Normal' | 'TestRunning' | 'TestFail' | 'TestPass' | 'Level.LevelComplete'
7886
}
7987

8088
/**
@@ -114,7 +122,9 @@ const TutorialPage = (props: PageProps) => {
114122
testStatus,
115123
})
116124

117-
const disableOptions = processes.length > 0 || props.state === 'TestRunning'
125+
const disableOptions = processes.length > 0 || props.state === 'Level.TestRunning'
126+
127+
console.log(`STATE: ${props.state}`)
118128

119129
return (
120130
<div>
@@ -134,62 +144,70 @@ const TutorialPage = (props: PageProps) => {
134144
</ScrollContent>
135145
)}
136146
{page === 'review' && <ReviewPage levels={levels} />}
147+
137148
{/* {page === 'settings' && <SettingsPage />} */}
138149
</div>
139-
<div css={styles.footer}>
140-
{/* Process Modal */}
141-
{processes.length > 0 && (
142-
<div css={styles.processes}>
143-
<ProcessMessages processes={processes} />
144-
</div>
145-
)}
146-
{/* Test Fail Modal */}
147-
{testStatus && testStatus.type === 'warning' && (
148-
<div css={styles.testMessage}>
149-
<TestMessage message={testStatus.title} />
150-
</div>
151-
)}
152-
{/* Left */}
153-
<div css={{ flex: 1 }}>
154-
{DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
155-
<Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={disableOptions}>
156-
Run
157-
</Button>
158-
) : null}
159-
</div>
160150

161-
{/* Center */}
162-
<div css={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
163-
<Reset onReset={onReset} disabled={disableOptions || props.state === 'LevelComplete'} />
151+
{props.state === 'Completed' ? (
152+
<div css={styles.completeFooter}>
153+
<CompletedBanner title={tutorial.summary.title || 'Unknown'} />
164154
</div>
165-
166-
{/* Right */}
167-
<div css={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
168-
{!level.steps.length ? (
169-
<div css={{ marginRight: '0.5rem' }}>
170-
<Continue
171-
onContinue={onContinue}
172-
current={levelIndex + 1}
173-
max={levels.length}
174-
title={tutorial.summary.title}
175-
defaultOpen={false}
176-
/>
155+
) : (
156+
<div css={styles.footer}>
157+
{/* Process Modal */}
158+
{processes.length > 0 && (
159+
<div css={styles.processes}>
160+
<ProcessMessages processes={processes} />
177161
</div>
178-
) : props.state === 'LevelComplete' ? (
179-
<div css={{ marginRight: '0.5rem' }}>
180-
<Continue
181-
onContinue={onContinue}
182-
current={levelIndex + 1}
183-
max={levels.length}
184-
title={tutorial.summary.title}
185-
defaultOpen={true}
186-
/>
162+
)}
163+
{/* Test Fail Modal */}
164+
{testStatus && testStatus.type === 'warning' && (
165+
<div css={styles.testMessage}>
166+
<TestMessage message={testStatus.title} />
187167
</div>
188-
) : level.steps.length > 1 ? (
189-
<StepProgress current={stepIndex + 1} max={level.steps.length} />
190-
) : null}
168+
)}
169+
{/* Left */}
170+
<div css={{ flex: 1 }}>
171+
{DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? (
172+
<Button style={{ marginLeft: '1rem' }} type="primary" onClick={onRunTest} disabled={disableOptions}>
173+
Run
174+
</Button>
175+
) : null}
176+
</div>
177+
178+
{/* Center */}
179+
<div css={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
180+
<Reset onReset={onReset} disabled={disableOptions || props.state === 'Level.LevelComplete'} />
181+
</div>
182+
183+
{/* Right */}
184+
<div css={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
185+
{!level.steps.length ? (
186+
<div css={{ marginRight: '0.5rem' }}>
187+
<Continue
188+
onContinue={onContinue}
189+
current={levelIndex + 1}
190+
max={levels.length}
191+
title={tutorial.summary.title}
192+
defaultOpen={false}
193+
/>
194+
</div>
195+
) : props.state === 'Level.LevelComplete' ? (
196+
<div css={{ marginRight: '0.5rem' }}>
197+
<Continue
198+
onContinue={onContinue}
199+
current={levelIndex + 1}
200+
max={levels.length}
201+
title={tutorial.summary.title}
202+
defaultOpen={true}
203+
/>
204+
</div>
205+
) : level.steps.length > 1 ? (
206+
<StepProgress current={stepIndex + 1} max={level.steps.length} />
207+
) : null}
208+
</div>
191209
</div>
192-
</div>
210+
)}
193211
<SideMenu visible={menuVisible} toggleVisible={setMenuVisible} page={page} setPage={setPage} />
194212
</div>
195213
)

‎web-app/stories/Completed.stories.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { action } from '@storybook/addon-actions'
21
import { storiesOf } from '@storybook/react'
32
import React from 'react'
4-
import CompletedPage from '../src/containers/Tutorial/CompletedPage'
3+
import CompletedBanner from '../src/containers/Tutorial/components/CompletedBanner'
54
import SideBarDecorator from './utils/SideBarDecorator'
65

76
storiesOf('Completed', module)
87
.addDecorator(SideBarDecorator)
9-
.add('Page', () => <CompletedPage context={{}} />)
8+
.add('Page', () => <CompletedBanner title="A tutorial name" />)

‎web-app/stories/Tutorial.stories.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,29 +146,37 @@ storiesOf('Tutorial', module)
146146
position: { levelId: '1', stepId: '1.2' },
147147
progress: { levels: {}, steps: {}, complete: false },
148148
}
149-
return <Tutorial state="Normal" context={firstLevel} send={action('send')} />
149+
return <Tutorial state="Level.Normal" context={firstLevel} send={action('send')} />
150150
})
151151
.add('1.3 Level Complete', () => {
152152
const levelComplete = {
153153
...context,
154154
position: { levelId: '1', stepId: '1.2' },
155155
progress: { levels: {}, steps: { '1.1': true }, complete: false },
156156
}
157-
return <Tutorial state="LevelComplete" context={levelComplete} send={action('send')} />
157+
return <Tutorial state="Level.LevelComplete" context={levelComplete} send={action('send')} />
158158
})
159159
.add('3.1 Level Start', () => {
160160
const newLevel = {
161161
...context,
162162
position: { levelId: '1', stepId: '1.2' },
163163
progress: { levels: { '1': true, '2': true }, steps: {}, complete: false },
164164
}
165-
return <Tutorial state="Normal" context={newLevel} send={action('send')} />
165+
return <Tutorial state="Level.Normal" context={newLevel} send={action('send')} />
166166
})
167167
.add('3.3 Final', () => {
168168
const lastLevel = {
169169
...context,
170170
position: { levelId: '3', stepId: '3.3' },
171171
progress: { levels: { '3': true }, steps: { '3.3': true }, complete: true },
172172
}
173-
return <Tutorial state="LevelComplete" context={lastLevel} send={action('send')} />
173+
return <Tutorial state="Level.LevelComplete" context={lastLevel} send={action('send')} />
174+
})
175+
.add('3.3 Completed', () => {
176+
const lastLevel = {
177+
...context,
178+
position: { levelId: '3', stepId: '3.3' },
179+
progress: { levels: { '3': true }, steps: { '3.3': true }, complete: true },
180+
}
181+
return <Tutorial state="Completed" context={lastLevel} send={action('send')} />
174182
})

0 commit comments

Comments
 (0)