client/src/components/Sessions.js
changeset 12 48ddaa42b810
child 29 4cfeabef7d5e
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Sessions.js	Wed May 31 17:51:54 2017 +0200
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Grid, Row, Col, ListGroup, ListGroupItem, Button } from 'react-bootstrap';
+import moment from 'moment';
+import '../App.css';
+import Navbar from './Navbar';
+import * as sessionsActions from '../actions/sessionsActions';
+
+class Sessions extends Component {
+
+  createNewSession = () => {
+    const result = this.props.actions.createNewSession();
+    // FIXME Feels ugly, change location after state has changed?
+    this.props.history.push('/sessions/' + result.session.id)
+  }
+
+  render() {
+    return (
+      <div>
+        <Navbar history={this.props.history} />
+        <Grid fluid>
+          <Row>
+            <Col md={6} mdOffset={3}>
+              <ListGroup>
+                {this.props.sessions.map((session) =>
+                  <ListGroupItem
+                    key={session.id}
+                    onClick={() => this.props.history.push('/sessions/' + session.id)}>
+                    {session.title || 'No title'} {session.id} {moment(session.date).format('DD/MM/YYYY')}
+                  </ListGroupItem>
+                )}
+              </ListGroup>
+              <Button bsStyle="success" onClick={this.createNewSession}>Create new session</Button>
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state, props) {
+  return {
+    currentSession: state.get('currentSession'),
+    sessions: state.get('sessions')
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(sessionsActions, dispatch)
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Sessions);