Skip to content

Commit 644b665

Browse files
author
Ethan Jon
committed
welcome modal rewrite
1 parent a6b1d45 commit 644b665

File tree

5 files changed

+177
-119
lines changed

5 files changed

+177
-119
lines changed

‎react/.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ module.exports = {
2424
'react/jsx-filename-extension': 'off',
2525
'react/jsx-indent': ['warn', 2],
2626
'react/jsx-indent-props': ['warn', 2],
27+
'react/prefer-stateless-function': 'off',
2728
'no-return-assign': 'off'
2829
}
2930
}

‎react/__tests__/components/modals/interview/welcome-step.test.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// @flow
2+
3+
import {mount} from 'enzyme'
4+
import React from 'react'
5+
6+
import WelcomeStep from '../../../../components/modals/interview/welcome-step'
7+
import ModalStore from '../../../../stores/modal'
8+
9+
test('renders', () => {
10+
const store = new ModalStore()
11+
12+
const component = mount(
13+
<WelcomeStep
14+
step={0}
15+
title='title'
16+
>
17+
<div>{'Content'}</div>
18+
</WelcomeStep>
19+
, {context: {store}})
20+
store.activeSlide = 0
21+
expect(component.html()).toBeTruthy()
22+
})

‎react/components/modals/interview/welcome-step.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// @flow
2+
3+
import React, {PureComponent} from 'react'
4+
import {observer, PropTypes as MobxReactPropTypes} from 'mobx-react'
5+
6+
@observer
7+
class WelcomeStep extends PureComponent {
8+
static contextTypes = {
9+
store: MobxReactPropTypes.observableObject
10+
}
11+
12+
props: {
13+
children: Object,
14+
step: number,
15+
title: ?(string | Object)
16+
}
17+
18+
render () {
19+
if (this.props.step !== this.context.store.activeSlide) {
20+
return null
21+
}
22+
23+
return (
24+
<div>
25+
<div className='h2 bold line-height-3 mb2'>{this.props.title}</div>
26+
{this.props.children}
27+
</div>
28+
)
29+
}
30+
}
31+
32+
export default WelcomeStep

‎react/components/modals/interview/welcome.js‎

Lines changed: 122 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +1,173 @@
11
// @flow
22

3-
import React from 'react'
3+
import React, {PureComponent} from 'react'
44
import {observer, PropTypes as MobxReactPropTypes} from 'mobx-react'
55
import {
6-
// IoIosArrowBack as LeftArrow,
6+
IoIosArrowBack as LeftArrow,
77
IoIosArrowForward as RightArrow
88
} from 'react-icons/lib/io'
99

1010
import createModal from '../../../helpers/create-modal'
11+
import ModalStore from '../../../stores/modal'
12+
import WelcomeStep from './welcome-step'
1113

12-
const Welcome = observer(({store}: {store: Object}, {postStore}: {postStore: Object}) => {
13-
const handleButtonClick = () => {
14-
postStore.generateInitialResponses()
15-
store.close()
14+
@observer
15+
class Welcome extends PureComponent {
16+
static childContextTypes = {
17+
store: MobxReactPropTypes.observableObject
1618
}
1719

18-
const handleKeyDown = (e: Object) => {
20+
static contextTypes = {
21+
postStore: MobxReactPropTypes.observableObject
22+
}
23+
24+
static displayName = 'Welcome'
25+
26+
getChildContext = () => ({
27+
store: this.props.store
28+
})
29+
30+
componentWillMount () {
31+
this.props.store.numSlides = 5
32+
}
33+
34+
handleButtonClick = () => {
35+
this.context.postStore.generateInitialResponses()
36+
this.props.store.close()
37+
}
38+
39+
handleKeyDown = (e: Object) => {
1940
if (e.keyCode === 13) {
20-
store.handleNextSlideClick()
41+
this.props.store.handleNextSlideClick()
2142
}
2243
}
2344

24-
const handleVideoClick = (e: Object) => {
45+
handleVideoClick = (e: Object) => {
2546
if (e.target.paused) {
2647
e.target.play()
2748
} else {
2849
e.target.pause()
2950
}
3051
}
3152

32-
const slideTitle = (text: string | Object) => <div className='h2 bold line-height-3 mb2'>{text}</div>
33-
34-
return (
35-
<div className='pt3 px3 pb2 bg-darken-0'>
36-
<div className={store.slideClassName(0)}>
37-
{slideTitle('Welcome to your interview!')}
38-
39-
<video
40-
autoPlay
41-
className='block fit my2 border border-gray'
42-
controls
43-
loop
44-
onClick={handleVideoClick}
45-
playsInline
46-
src='//cf.coderintros.com/interview-tutorial-1.mp4'
47-
/>
48-
</div>
53+
props: {
54+
store: ModalStore
55+
}
4956

50-
<div className={store.slideClassName(1)}>
51-
{slideTitle("What's your full name?")}
57+
render () {
58+
return (
59+
<div className='pt3 px3 pb2 bg-darken-0'>
60+
<WelcomeStep
61+
step={0}
62+
title=''
63+
>
64+
<video
65+
autoPlay
66+
className='block fit my2 border border-gray'
67+
controls
68+
onClick={this.handleVideoClick}
69+
playsInline
70+
src='//cf.coderintros.com/interview-tutorial-1.mp4'
71+
/>
72+
</WelcomeStep>
5273

53-
<div>
74+
<WelcomeStep
75+
step={1}
76+
title="What's your full name?"
77+
>
5478
<input
5579
className='input h3'
5680
id='welcome-name-input'
57-
onChange={postStore.handleNameChange}
58-
onKeyDown={handleKeyDown}
81+
onChange={this.context.postStore.handleNameChange}
82+
onKeyDown={this.handleKeyDown}
5983
placeholder='Pat Riley'
6084
type='text'
61-
value={postStore.post.name}
85+
value={this.context.postStore.post.name}
6286
/>
63-
</div>
64-
</div>
87+
</WelcomeStep>
6588

66-
<div className={store.slideClassName(2)}>
67-
{slideTitle(
68-
<div>
69-
<span>{'What\'s your email address? '}</span>
70-
<span className='h3'>{'(will not be published)'}</span>
71-
</div>
72-
)}
73-
74-
<div>
89+
<WelcomeStep
90+
step={2}
91+
title={<div><span>{'What\'s your email address? '}</span><span className='h3'>{'(will not be published)'}</span></div>}
92+
>
7593
<input
7694
className='input h3'
7795
id='welcome-email-input'
78-
onChange={postStore.handleEmailChange}
79-
onKeyDown={handleKeyDown}
96+
onChange={this.context.postStore.handleEmailChange}
97+
onKeyDown={this.handleKeyDown}
8098
placeholder='you@domain.com'
8199
type='email'
82-
value={postStore.post.email}
100+
value={this.context.postStore.post.email}
83101
/>
84-
</div>
85-
</div>
86-
87-
<div className={store.slideClassName(3)}>
88-
{slideTitle('How about your current area of residence?')}
102+
</WelcomeStep>
89103

90-
<div>
104+
<WelcomeStep
105+
step={3}
106+
title='How about your current area of residence?'
107+
>
91108
<input
92109
className='input h3'
93110
id='welcome-current-location-input'
94-
onChange={postStore.handleCurrentLocationChange}
95-
onKeyDown={handleKeyDown}
111+
onChange={this.context.postStore.handleCurrentLocationChange}
112+
onKeyDown={this.handleKeyDown}
96113
placeholder='Coderville, CA'
97114
type='text'
98-
value={postStore.post.current_location}
115+
value={this.context.postStore.post.current_location}
99116
/>
117+
</WelcomeStep>
118+
119+
<WelcomeStep
120+
step={4}
121+
title=''
122+
>
123+
<video
124+
autoPlay
125+
className='block fit my2 border border-gray'
126+
controls
127+
onClick={this.handleVideoClick}
128+
playsInline
129+
src='//cf.coderintros.com/interview-tutorial-2.mp4'
130+
/>
131+
</WelcomeStep>
132+
133+
<div className='flex justify-between'>
134+
{this.props.store.showPrevButton ? (
135+
<button
136+
className='btn btn-primary muted pl1'
137+
onClick={this.props.store.handlePrevSlideClick}
138+
type='submit'
139+
>
140+
<LeftArrow />
141+
<span className='align-middle'>{'Prev'}</span>
142+
</button>
143+
) : <div />}
144+
145+
{this.props.store.showNextButton ? (
146+
<button
147+
className='btn btn-primary pr1'
148+
id='welcome-next-button'
149+
onClick={this.props.store.handleNextSlideClick}
150+
type='submit'
151+
>
152+
<span className='align-middle'>{'Next'}</span>
153+
<RightArrow />
154+
</button>
155+
) : (
156+
<button
157+
className='btn btn-primary'
158+
id='welcome-submit-button'
159+
onClick={this.handleButtonClick}
160+
type='submit'
161+
>
162+
{'Continue'}
163+
</button>
164+
)}
100165
</div>
101166
</div>
102-
103-
<div className={store.slideClassName(4)}>
104-
{slideTitle('Now it\'s time for the good questions...')}
105-
106-
<video
107-
autoPlay
108-
className='block fit my2 border border-gray'
109-
controls
110-
loop
111-
onClick={handleVideoClick}
112-
playsInline
113-
src='//cf.coderintros.com/interview-tutorial-2.mp4'
114-
/>
115-
</div>
116-
117-
<div className='flex justify-end'>
118-
{/*
119-
{store.showPrevButton ? (
120-
<button
121-
className='btn btn-primary pl1'
122-
onClick={store.handlePrevSlideClick}
123-
type='submit'
124-
>
125-
<LeftArrow />
126-
<span className='align-middle'>{'Prev'}</span>
127-
</button>
128-
) : <div />} */}
129-
130-
{store.showNextButton ? (
131-
<button
132-
className='btn btn-primary pr1'
133-
id='welcome-next-button'
134-
onClick={store.handleNextSlideClick}
135-
type='submit'
136-
>
137-
<span className='align-middle'>{'Next'}</span>
138-
<RightArrow />
139-
</button>
140-
) : (
141-
<button
142-
className='btn btn-primary'
143-
id='welcome-submit-button'
144-
onClick={handleButtonClick}
145-
type='submit'
146-
>
147-
{'Continue'}
148-
</button>
149-
)}
150-
</div>
151-
</div>
152-
)
153-
})
154-
155-
Welcome.contextTypes = {
156-
postStore: MobxReactPropTypes.observableObject
167+
)
168+
}
157169
}
158170

159-
Welcome.displayName = 'Welcome'
160-
161171
export default createModal(Welcome, {
162172
hideCloseButton: true,
163173
isOpen: true,

‎react/stores/modal.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
import {action, computed, observable} from 'mobx'
44

5-
const {max} = Math
6-
75
export default class ModalStore {
86
@observable isOpen = false
97
@observable activeSlide = 0
@@ -54,9 +52,4 @@ export default class ModalStore {
5452
@computed get showPrevButton (): boolean {
5553
return this.activeSlide > 0
5654
}
57-
58-
slideClassName = (index: number) => {
59-
this.numSlides = max(index + 1, this.numSlides || 0)
60-
return this.activeSlide === index ? '' : 'hide'
61-
}
6255
}

0 commit comments

Comments
 (0)