Mercurial Mercurial > irinotes / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client/src/components/CreateSession.js
changeset 155 e55ae84508bf
parent 154 a28361bda28c
child 161 a642639dbc07
equal deleted inserted replaced
154:a28361bda28c 155:e55ae84508bf 
     1 import React, { Component } from 'react';
 
     1 import React, { Component } from 'react';
 
     2 import { connect } from 'react-redux';
 
       
     3 import { bindActionCreators } from 'redux';
 
       
     4 import Modal from 'react-modal';
 
     2 import Modal from 'react-modal';
 
       
     3 import PropTypes from 'prop-types';
 
     5 import uuidV1 from 'uuid/v1';
 
     4 import uuidV1 from 'uuid/v1';
 
     6 import '../App.css';
 
     5 import '../App.css';
 
     7 import * as sessionsActions from '../actions/sessionsActions';
 
       
     8 import * as authActions from '../actions/authActions';
 
       
     9 // import _ from 'lodash';
 
       
    10 import './CreateSession.css';
 
     6 import './CreateSession.css';
 
    11 
     7 
    12 class CreateSession extends Component {
 
     8 export default class CreateSession extends Component {
 
    13     state = {
 
     9 
    14       createGroup: false,
 
    10   static propTypes = {
 
    15       protocolOpen: false,
 
    11     history: PropTypes.object.isRequired,
 
    16       // protocol:null
 
    12     group: PropTypes.object.isRequired,
 
    17     }
 
    13     createSession: PropTypes.func.isRequired,
 
       
    14   };
 
       
    15 
       
    16   state = {
 
       
    17     createGroup: false,
 
       
    18     protocolOpen: false,
 
       
    19     title: "",
 
       
    20     description: ""
 
       
    21     // protocol:null
 
       
    22   }
 
    18 
    23 
    19   componentWillMount() {
 
    24   componentWillMount() {
 
    20     Modal.setAppElement('body');
 
    25     Modal.setAppElement('body');
 
    21   }
 
    26   }
 
    22 
    27 
    23 
    28 
    24   openSessionModal = () => {
 
    29   openSessionModal = () => {
 
    25     this.setState({modalIsOpen: true});
 
    30     this.setState({modalIsOpen: true});
 
    26     let groupName = null;
 
       
    27     // let protocol = null;
 
       
    28     if(this.props.currentGroup) {
 
       
    29       groupName = this.props.currentGroup.get('name');
 
       
    30       // protocol = this.props.currentGroup.get('protocol');
 
       
    31     }
 
       
    32     if(groupName === null) {
 
       
    33       groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
 
       
    34       if(groupName != null) {
 
       
    35         const group = this.props.groups.find((g) => g.name === groupName);
 
       
    36         if(group) {
 
       
    37           return(
 
       
    38           this.setState({
 
       
    39           protocol: group.get('protocol')
 
       
    40           }))
 
       
    41         }
 
       
    42       }
 
       
    43     }
 
       
    44 
       
    45   }
 
    31   }
 
    46 
    32 
    47   createSession = () => {
 
    33   createSession = () => {
 
    48     const sessionId = uuidV1();
 
    34     const sessionId = uuidV1();
 
    49     let groupName = null;
 
    35     const groupName = this.props.group ? this.props.group.get('name') : null;
 
    50     let protocol = null;
 
    36     const protocol = this.props.group ? this.props.group.get('protocol') : null;
 
    51     if(this.props.currentGroup) {
 
    37     const {title, description} = this.state;
 
    52       groupName = this.props.currentGroup.get('name');
 
       
    53       protocol = this.props.currentGroup.get('protocol');
 
       
    54     }
 
       
    55     if(groupName === null) {
 
       
    56       groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
 
       
    57       if(groupName != null) {
 
       
    58         const group = this.props.groups.find((g) => g.name === groupName);
 
       
    59         if(group) {
 
       
    60           protocol = group.get('protocol');
 
       
    61         }
 
       
    62       }
 
       
    63     }
 
       
    64 
    38 
    65     this.props.sessionsActions.createSession(sessionId, groupName, protocol);
 
    39     this.props.createSession(sessionId, groupName, protocol, title, description);
 
    66     this.props.history.push('/sessions/' + sessionId);
 
    40     this.props.history.push('/sessions/' + sessionId);
 
    67   }
 
    41   }
 
    68 
    42 
    69   getGroupProtocol = () => {
 
    43   getGroupProtocol = () => {
 
    70     let groupName = null;
 
    44     if (this.props.group) {
 
    71     let protocol = null;
 
    45       return this.props.group.protocol;
 
    72     if(this.props.currentGroup) {
 
       
    73       groupName = this.props.currentGroup.get('name');
 
       
    74       protocol = this.props.currentGroup.get('protocol');
 
       
    75     }
 
    46     }
 
    76     if(groupName === null) {
 
    47     return null;
 
    77       groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
 
       
    78       if(groupName != null) {
 
       
    79         const group = this.props.groups.find((g) => g.name === groupName);
 
       
    80         if(group) {
 
       
    81           protocol = group.get('protocol');
 
       
    82           return(
 
       
    83             protocol
 
       
    84           );
 
       
    85         }
 
       
    86       }
 
       
    87     }
 
       
    88   }
 
    48   }
 
    89 
    49 
    90   // onChange = (e) => {
 
    50   onChange = (e) => {
 
    91   //   const { name, value } = e.target;
 
    51     const { name, value } = e.target;
 
    92   //   const changes = { [name]: value }
 
    52     this.setState({[name]: value});
 
    93   //   this.onChangeThrottle(changes);
 
       
    94   // }
 
       
    95 
       
    96   // onChangeThrottle = _.debounce((changes) => {
 
       
    97   //   this.props.sessionsActions.updateSession(this.props.currentSession, changes);
 
       
    98   // }, 750)
 
       
    99 
       
   100   onGroupChange = (e) => {
 
       
   101     const groupName = e.target.value;
 
       
   102 
       
   103     const group = this.props.groups.find((g) => g.get('name') === groupName);
 
       
   104 
       
   105     this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });
 
       
   106   }
 
       
   107 
       
   108   componentWillUpdate = (nextProps, nextState) => {
 
       
   109     if (nextState.createGroup && nextProps.createGroup.get('success')) {
 
       
   110       this.setState({ createGroup: false })
 
       
   111     }
 
       
   112   }
 
    53   }
 
   113 
    54 
   114   toggleProtocol = () => {
 
    55   toggleProtocol = () => {
 
   115     this.setState({
 
    56     this.setState({
 
   116       protocolOpen: !this.state.protocolOpen,
 
    57       protocolOpen: !this.state.protocolOpen,
 
   117       show: false
 
    58       show: false
 
   118 
       
   119     });
 
    59     });
 
   120   }
 
    60   }
 
   121 
    61 
   122   closeModal = () => {
 
    62   closeModal = () => {
 
   123     this.setState({modalIsOpen: false});
 
    63     this.setState({modalIsOpen: false});
 
   124   }
 
    64   }
 
   125 
    65 
   126   handleModalCloseRequest = (e) => {
 
    66   handleModalCloseRequest = (e) => {
 
   127     // opportunity to validate something and keep the modal open even if it
 
       
   128     // requested to be closed
 
       
   129     e.preventDefault();
 
    67     e.preventDefault();
 
   130     this.setState({modalIsOpen: false});
 
    68     this.setState({modalIsOpen: false});
 
   131   }
 
    69   }
 
   132 
    70 
   133   render() {
 
    71   render() {
 
   134 
    72 
   135     // if (!this.props.currentSession) {
 
       
   136     //   return (
 
       
   137     //     <form></form>
 
       
   138     //   )
 
       
   139     // }
 
       
   140 
       
   141     return (
 
    73     return (
 
   142       <div>
 
    74       <div>
 
   143       <a id="session-button" className="text-center" onClick={this.openSessionModal}>Créer une nouvelle session</a>
 
    75       <a id="session-button" className="text-center" onClick={this.openSessionModal}>Créer une nouvelle session</a>
 
   144       <Modal
 
    76       <Modal
 
   145       className="Modal__Bootstrap modal-dialog"
 
    77       className="Modal__Bootstrap modal-dialog"
 
   146       // closeTimeoutMS={150}
 
       
   147       isOpen={this.state.modalIsOpen}
 
    78       isOpen={this.state.modalIsOpen}
 
   148       onRequestClose={this.handleModalCloseRequest}
 
    79       onRequestClose={this.handleModalCloseRequest}
 
   149       >
 
    80       >
 
   150         <div className="modal-content bg-primary w-75">
 
    81         <div className="modal-content bg-primary w-75">
 
   151           <div className="modal-body">
 
    82           <div className="modal-body">
 
   152             <form onSubmit={ e => { e.preventDefault() } }>
 
    83             <form onSubmit={ e => { e.preventDefault() } }>
 
   153             <div className="form-group ml-5 pl-5">
 
       
   154                 <label className="col-form-label text-secondary">Groupe</label>
 
       
   155                 {/* <p>{this.props.currentSession.group}</p> */}
 
       
   156               </div>
 
       
   157               <div className="form-group">
 
    84               <div className="form-group">
 
   158                 <label className="col-form-label text-secondary font-weight-bold pt-3">Titre</label>
 
    85                 <label className="col-form-label text-secondary font-weight-bold pt-3">Titre</label>
 
   159                 <input className="form-control text-primary w-100"
 
    86                 <input className="form-control text-primary w-100"
 
   160                   name="title"
 
    87                   name="title"
 
   161                   // defaultValue={ this.props.currentSession.title }
 
    88                   // defaultValue={ this.props.currentSession.title }
 
   170                   type="textarea"
 
    97                   type="textarea"
 
   171                   name="description"
 
    98                   name="description"
 
   172                   // defaultValue={ this.props.currentSession.description }
 
    99                   // defaultValue={ this.props.currentSession.description }
 
   173                   onChange={ this.onChange }
 
   100                   onChange={ this.onChange }
 
   174                   placeholder="Entrez une description"
 
   101                   placeholder="Entrez une description"
 
   175                   row="3"></textarea>
 
   102                   ></textarea>
 
   176               </div>
 
   103               </div>
 
   177               <div className="form-group">
 
   104               <div className="form-group">
 
   178                 <label className="col-form-label text-secondary font-weight-bold mt-5 ml-5" onClick={this.toggleProtocol}>Protocole de la prise de note {this.state.protocolOpen?<span className="material-icons protocol-toggle">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</label>
 
   105                 <label className="col-form-label text-secondary font-weight-bold mt-5 ml-5" onClick={this.toggleProtocol}>Protocole de la prise de note {this.state.protocolOpen?<span className="material-icons protocol-toggle">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</label>
 
   179                 <div className={ `collapse ${this.state.protocolOpen?'in':''}`} >
 
   106                 <div className={ `collapse ${this.state.protocolOpen?'in':''}`} >
 
   180                   {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */}
 
   107                   {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */}
 
   190       </Modal>
 
   117       </Modal>
 
   191       </div>
 
   118       </div>
 
   192     );
 
   119     );
 
   193   }
 
   120   }
 
   194 }
 
   121 }
 
   195 
       
   196 function mapStateToProps(state, props) {
 
       
   197 
       
   198   let group;
 
       
   199   if (props.session && props.session.get('group')) {
 
       
   200     group = state.get('groups').find(group => props.session.get('group') === group.get('name'))
 
       
   201   }
 
       
   202 
       
   203   return {
 
       
   204     currentSession: props.session,
 
       
   205     createGroup: state.get('createGroup'),
 
       
   206     groups: state.get('groups'),
 
       
   207     group
 
       
   208   };
 
       
   209 }
 
       
   210 
       
   211 function mapDispatchToProps(dispatch) {
 
       
   212   return {
 
       
   213     sessionsActions: bindActionCreators(sessionsActions, dispatch),
 
       
   214     authActions: bindActionCreators(authActions, dispatch),
 
       
   215   }
 
       
   216 }
 
       
   217 
       
   218 export default connect(mapStateToProps, mapDispatchToProps)(CreateSession);
irinotes