98 lines
2.1 KiB
JavaScript
98 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
|
|
import { List, ListItem, Button } from 'react-toolbox';
|
|
|
|
import AddGroupDialog from '../components/addgroupdialog';
|
|
|
|
export default class PageGroups extends React.Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
this.state = {
|
|
groups: [],
|
|
addGroupDialogActive: false,
|
|
};
|
|
|
|
this.showAddGroupDialog = this.showAddGroupDialog.bind(this);
|
|
this.hideAddGroupDialog = this.hideAddGroupDialog.bind(this);
|
|
this.fetchGroups = this.fetchGroups.bind(this);
|
|
|
|
this.fetchGroups(context);
|
|
}
|
|
|
|
async fetchGroups(context = this.context) {
|
|
return fetch(`/api/v1/schools/${context.user.school}/users/${context.user.id}/groups/`, {
|
|
headers: {
|
|
FakeAuth: true,
|
|
FakeID: context.user.id,
|
|
},
|
|
})
|
|
.then(data => data.json())
|
|
.then((data) => {
|
|
this.setState({
|
|
groups: data,
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
}
|
|
|
|
showAddGroupDialog() {
|
|
this.setState({
|
|
addGroupDialogActive: true,
|
|
});
|
|
}
|
|
|
|
hideAddGroupDialog() {
|
|
this.setState({
|
|
addGroupDialogActive: false,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<main>
|
|
<List
|
|
selectable
|
|
ripple
|
|
>
|
|
{this.state.groups.map(group =>
|
|
<ListItem
|
|
key={group.id}
|
|
caption={group.name}
|
|
legend="X upcoming events, X members"
|
|
onClick={() => this.context.router.history.push(`/groups/${group.id}`)}
|
|
/>,
|
|
)}
|
|
</List>
|
|
<Button
|
|
style={{ position: 'fixed', bottom: '1em', right: '1em' }}
|
|
floating
|
|
accent
|
|
icon="add"
|
|
onClick={this.showAddGroupDialog}
|
|
/>
|
|
<AddGroupDialog
|
|
active={this.state.addGroupDialogActive}
|
|
onCancel={this.hideAddGroupDialog}
|
|
onEscKeyDown={this.hideAddGroupDialog}
|
|
onOverlayClick={this.hideAddGroupDialog}
|
|
onDone={() => { this.fetchGroups(); this.hideAddGroupDialog(); }}
|
|
/>
|
|
</main>
|
|
);
|
|
}
|
|
}
|
|
|
|
PageGroups.contextTypes = {
|
|
router: React.PropTypes.shape({
|
|
history: React.PropTypes.shape({
|
|
push: React.PropTypes.func.isRequired,
|
|
}).isRequired,
|
|
}).isRequired,
|
|
// eslint-disable-next-line react/forbid-prop-types
|
|
user: React.PropTypes.object.isRequired,
|
|
token: React.PropTypes.string,
|
|
};
|
|
|