-
Notifications
You must be signed in to change notification settings - Fork 482
/
ManageStudentsAgeCell.jsx
58 lines (53 loc) · 1.65 KB
/
ManageStudentsAgeCell.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
import React, {Component, PropTypes} from 'react';
import {ages} from '../AgeDropdown';
import {connect} from 'react-redux';
import {editStudent, setSharingDefault} from './manageStudentsRedux';
class ManageStudentAgeCell extends Component {
static propTypes = {
id: PropTypes.number.isRequired,
age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
isEditing: PropTypes.bool,
editedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
// Provided by redux
editStudent: PropTypes.func.isRequired,
setSharingDefault: PropTypes.func.isRequired,
};
// For privacy reasons, we disable sharing by default if the student is
// under the age of 13 if the age was previously not set.
onChangeAge = (e) => {
this.props.editStudent(this.props.id, {age: e.target.value});
if (this.props.age === '') {
this.props.setSharingDefault(this.props.id);
}
};
render() {
const {age, editedValue} = this.props;
return (
<div>
{!this.props.isEditing &&
<div>
{age}
</div>
}
{this.props.isEditing &&
<select
name="age"
value={editedValue}
onChange={this.onChangeAge}
>
{ages.map(age => <option key={age} value={age}>{age}</option>)}
</select>
}
</div>
);
}
}
export const UnconnectedManageStudentAgeCell = ManageStudentAgeCell;
export default connect(state => ({}), dispatch => ({
editStudent(id, studentInfo) {
dispatch(editStudent(id, studentInfo));
},
setSharingDefault(id) {
dispatch(setSharingDefault(id));
}
}))(ManageStudentAgeCell);