From 5465c1d16a4ca7ee7e3a3224f24a9a61e827f757 Mon Sep 17 00:00:00 2001 From: Ambrose Chua Date: Fri, 14 Apr 2017 18:53:15 +0800 Subject: [PATCH] Again --- app/components/addgroupdialog.jsx | 3 +- app/components/app.jsx | 4 +- app/pages/group.jsx | 89 +++++++++++++++++++++++++++++++ app/pages/groups.jsx | 4 -- server/api.js | 7 +++ server/database.js | 36 +++++++++++++ 6 files changed, 137 insertions(+), 6 deletions(-) create mode 100644 app/pages/group.jsx diff --git a/app/components/addgroupdialog.jsx b/app/components/addgroupdialog.jsx index fa54dd2..44fc9a4 100644 --- a/app/components/addgroupdialog.jsx +++ b/app/components/addgroupdialog.jsx @@ -99,12 +99,13 @@ export default class AddGroupDialog extends React.Component { } render() { + // TODO: make scrollable return ( // TODO: make scrollable + > - + + ); diff --git a/app/pages/group.jsx b/app/pages/group.jsx new file mode 100644 index 0000000..ba88c22 --- /dev/null +++ b/app/pages/group.jsx @@ -0,0 +1,89 @@ +import React from 'react'; + +import { List, ListSubHeader, ListItem } from 'react-toolbox'; + +export default class PageGroup extends React.Component { + constructor(props, context) { + super(props); + this.state = { + id: parseInt(props.match.params.id, 10), + group: {}, + addGroupDialogActive: false, + }; + + this.fetchGroup(context); + } + + async fetchGroup(context = this.context) { + return fetch(`/api/v1/schools/${context.user.school}/groups/${this.state.id}`, { + headers: { + FakeAuth: true, + FakeID: context.user.id, + }, + }) + .then(data => data.json()) + .then((data) => { + this.setState({ + group: data, + }); + }) + .catch((err) => { + console.error(err); + }); + } + + render() { + return ( +
+

{this.state.group.name}

+ + + {this.state.group.events && this.state.group.events.map(e => ( + + ))} + { + // TODO: cca schedule or class timetable + } + + + + {this.state.group.members && this.state.group.members.map(m => ( + + ))} + +
+ ); + } +} + +PageGroup.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, +}; + +PageGroup.propTypes = { + match: React.PropTypes.shape({ + params: React.PropTypes.shape({ + id: React.PropTypes.string.isRequired, + }).isRequired, + }).isRequired, +}; diff --git a/app/pages/groups.jsx b/app/pages/groups.jsx index a6c916a..726707c 100644 --- a/app/pages/groups.jsx +++ b/app/pages/groups.jsx @@ -9,10 +9,6 @@ export default class PageGroups extends React.Component { super(props); this.state = { groups: [ - { id: 0, name: 'Test' }, - { id: 1, name: 'Test 2' }, - { id: 2, name: 'Test 3' }, - { id: 3, name: 'Test 4' }, ], addGroupDialogActive: false, }; diff --git a/server/api.js b/server/api.js index a9f9204..365efaf 100644 --- a/server/api.js +++ b/server/api.js @@ -110,6 +110,13 @@ export default class API { }) .catch(next); }); + this.router.get('/schools/:school/groups/:id', this.auth, (req, res, next) => { + this.database.getGroup(req.params.school, req.params.id) + .then((data) => { + res.json(data); + }) + .catch(next); + }); this.router.use('/*', (req, res, next) => { next(new NotFoundError()); diff --git a/server/database.js b/server/database.js index 437da8f..677fd6f 100644 --- a/server/database.js +++ b/server/database.js @@ -110,6 +110,42 @@ export default class Database { `, [u, group.insertId]); await Promise.all(data.members.map(insertMember)); } + async getGroup(school, id) { + return this.query(` + SELECT + group_.id as group_id, + group_.name as group_name, + group_mentor.year as group_mentor_year, + group_mentor.level as group_mentor_level, + user.id, + user.name + user.email + FROM + ( + group_mentor RIGHT JOIN group_ + ON group_mentor.id = group_.id + ) + RIGHT JOIN (member, user) + ON member.group_ = group_.id + AND member.user = user.id + WHERE group_.id = ? + `, [id], { + required: true, + }) + .then(results => ({ + id: results[0].group_id, + name: results[0].group_name, + level: results[0].group_mentor_level, + year: results[0].group_mentor_year, + members: results[0].id ? results.map(r => Object.assign(r, { + group_id: undefined, + group_name: undefined, + group_mentor_level: undefined, + group_mentor_year: undefined, + })) : [], + })) + .catch(attachNoun('Group')); + } query(query, values, options = {}) { console.log('QUERY:', query.replace(/[\n\t]+/g, ' ').replace(/^ /g, '').replace(/ $/g, ''));