-
Notifications
You must be signed in to change notification settings - Fork 479
/
SectionProgressToggle.jsx
101 lines (91 loc) · 2.86 KB
/
SectionProgressToggle.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React, { PropTypes } from 'react';
import ToggleGroup from '../ToggleGroup';
import color from "@cdo/apps/util/color";
import FontAwesome from '@cdo/apps/templates/FontAwesome';
import { connect } from 'react-redux';
import {setCurrentView, ViewType} from './sectionProgressRedux';
import firehoseClient from '@cdo/apps/lib/util/firehose';
const styles = {
toggleButton: {
padding: '3px 10px'
}
};
/**
* A toggle that provides a way to switch between detail and summary views of
* the progress a section of students have made in a course. Teacher view.
*/
class SectionProgressToggle extends React.Component {
static propTypes = {
currentView: PropTypes.string.isRequired,
setCurrentView: PropTypes.func.isRequired,
};
state = {
selectedToggle: this.props.currentView,
};
componentWillReceiveProps(nextProps) {
// currentView can be set externally, and the component will
// still need to update when that happens.
if (this.state.selectedToggle !== nextProps.currentView) {
this.setState({selectedToggle: nextProps.currentView});
}
}
onChange = () => {
// Display the toggle based on the internal state so that it is
// more immediately responsive. Once setting internal state is
// complete, then update the redux currentView.
// Timeouts forces a render of the local state before dispatching
// the action.
if (this.state.selectedToggle === ViewType.SUMMARY) {
firehoseClient.putRecord(
{
study: 'teacher-dashboard',
study_group: 'react',
event: 'progress-detail'
}
);
this.setState({selectedToggle: ViewType.DETAIL}, () => {
setTimeout(() => {
this.props.setCurrentView(ViewType.DETAIL);
}, 0);
});
} else {
firehoseClient.putRecord(
{
study: 'teacher-dashboard',
study_group: 'react',
event: 'progress-summary'
}
);
this.setState({selectedToggle: ViewType.SUMMARY}, () => {
setTimeout(() => {
this.props.setCurrentView(ViewType.SUMMARY);
}, 0);
});
}
};
render() {
const { selectedToggle } = this.state;
return (
<ToggleGroup
selected={selectedToggle}
activeColor={color.teal}
onChange={this.onChange}
>
<button value={ViewType.SUMMARY} style={styles.toggleButton}>
<FontAwesome icon="search-minus"/>
</button>
<button value={ViewType.DETAIL} style={styles.toggleButton}>
<FontAwesome icon="search-plus"/>
</button>
</ToggleGroup>
);
}
}
export const UnconnectedSectionProgressToggle = SectionProgressToggle;
export default connect(state => ({
currentView: state.sectionProgress.currentView,
}), dispatch => ({
setCurrentView(viewType) {
dispatch(setCurrentView(viewType));
},
}))(SectionProgressToggle);