1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import { connect } from 'react-redux'; |
2 import { connect } from 'react-redux'; |
3 import { bindActionCreators } from 'redux'; |
3 import { bindActionCreators } from 'redux'; |
4 import { Grid, Row, Col, ListGroup, ListGroupItem, Button, Modal } from 'react-bootstrap'; |
4 import { Modal } from 'react-bootstrap'; |
5 import moment from 'moment'; |
5 import moment from 'moment'; |
6 import '../App.css'; |
6 import '../App.css'; |
|
7 import './SessionList.css'; |
7 import Navbar from './Navbar'; |
8 import Navbar from './Navbar'; |
8 import * as sessionsActions from '../actions/sessionsActions'; |
9 import * as sessionsActions from '../actions/sessionsActions'; |
9 import uuidV1 from 'uuid/v1'; |
10 import uuidV1 from 'uuid/v1'; |
10 import { getActiveSessions } from '../selectors/coreSelectors'; |
11 import { getActiveSessions } from '../selectors/coreSelectors'; |
11 import { getCurrentUser, getGroups, getCurrentGroup } from '../selectors/authSelectors'; |
12 import { getCurrentUser, getGroups, getCurrentGroup } from '../selectors/authSelectors'; |
66 |
67 |
67 render() { |
68 render() { |
68 return ( |
69 return ( |
69 <div> |
70 <div> |
70 <Navbar history={this.props.history} /> |
71 <Navbar history={this.props.history} /> |
71 <Grid fluid> |
72 <div className="container-fluid"> |
72 <Row> |
73 <div className="row"> |
73 <Col md={6} mdOffset={3}> |
74 <div className="col-md-6 col-md-offset-3"> |
74 <ListGroup> |
75 <ul className="list-group"> |
75 {this.props.sessions.map((session) => |
76 {this.props.sessions.map((session) => |
76 <ListGroupItem key={session.get('_id')}> |
77 <li className="list-group-item" key={session.get('_id')}> |
77 <span onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>{session.title || 'No title'} {session.get('_id')} {moment(session.get('date')).format('DD/MM/YYYY')}</span> |
78 <span onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>{session.title || 'No title'} {session.get('_id')} {moment(session.get('date')).format('DD/MM/YYYY')}</span> |
78 <a className="pull-right" onClick={ this.onClickDelete.bind(this, session) }> |
79 <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }> |
79 <span className="material-icons">delete</span> |
80 <span className="material-icons">delete</span> |
80 </a> |
81 </a> |
81 </ListGroupItem> |
82 </li> |
82 )} |
83 )} |
83 </ListGroup> |
84 </ul> |
84 <Button bsStyle="success" onClick={this.createSession}>Create new session</Button> |
85 <button type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button> |
85 </Col> |
86 </div> |
86 </Row> |
87 </div> |
87 </Grid> |
88 </div> |
88 |
89 |
89 <Modal show={ this.state.showModal } onHide={ this.closeModal }> |
90 <Modal show={ this.state.showModal } onHide={ this.closeModal }> |
90 <Modal.Body> |
91 <Modal.Body> |
91 Are you sure? |
92 Êtes-vous sûr(e) ? |
92 </Modal.Body> |
93 </Modal.Body> |
93 <Modal.Footer> |
94 <Modal.Footer> |
94 <Button bsStyle="primary" onClick={ this.deleteSession }>Confirm</Button> |
95 <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button> |
95 <Button onClick={ this.closeModal }>Close</Button> |
96 <button type="button" className="btn btn-default btn-lg" onClick={ this.closeModal }>Fermer</button> |
96 </Modal.Footer> |
97 </Modal.Footer> |
97 </Modal> |
98 </Modal> |
98 |
|
99 </div> |
99 </div> |
100 ); |
100 ); |
101 } |
101 } |
102 } |
102 } |
103 |
103 |