Again

app/components/addgroupdialog.jsx

@@ -99,12 +99,13 @@ export default class AddGroupDialog extends React.Component {
 	}
 
 	render() {
+		// TODO: make scrollable
 		return (
 			<Dialog
 				{...this.props}
 				actions={this.actions}
 				title="Create a new group"
-			> // TODO: make scrollable
+			>
 				<Input
 					type="text"
 					label="Name"

app/components/app.jsx

@@ -6,6 +6,7 @@ import PageHome from '../pages/home';
 import PageLogin from '../pages/login';
 import PageLoginSchool from '../pages/login_school';
 import PageGroups from '../pages/groups';
+import PageGroup from '../pages/group';
 
 export default class App extends React.Component {
 	getChildContext() {
@@ -22,7 +23,8 @@ export default class App extends React.Component {
 					<Route exact path="/" component={PageHome} />
 					<Route path="/login" component={PageLogin} />
 					<Route path="/login/:id" component={PageLoginSchool} />
-					<Route path="/groups" component={PageGroups} />
+					<Route exact path="/groups" component={PageGroups} />
+					<Route path="/groups/:id" component={PageGroup} />
 				</LayoutMain>
 			</Router>
 		);

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 (
+			<main>
+				<h1>{this.state.group.name}</h1>
+				<List
+					selectable
+					ripple
+				>
+					<ListSubHeader
+						caption="Events"
+					/>
+					{this.state.group.events && this.state.group.events.map(e => (
+						<ListItem
+							key={e.id}
+							caption={e.name}
+						/>
+					))}
+					{
+					// TODO: cca schedule or class timetable
+					}
+				</List>
+				<List>
+					<ListSubHeader
+						caption="Members"
+					/>
+					{this.state.group.members && this.state.group.members.map(m => (
+						<ListItem
+							key={m.id}
+							caption={m.name}
+						/>
+					))}
+				</List>
+			</main>
+		);
+	}
+}
+
+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,
+};

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,
 		};

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());

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, ''));