Clean CreateSession component and remove trace of previous create session button
authorymh <ymh.work@gmail.com>
Wed, 05 Sep 2018 12:27:52 +0200
changeset 155 e55ae84508bf
parent 154 a28361bda28c
child 156 384f4539b76a
Clean CreateSession component and remove trace of previous create session button
client/src/App.scss
client/src/actions/sessionsActions.js
client/src/components/CreateSession.js
client/src/components/Navbar.js
client/src/components/SessionList.js
client/src/index.js
--- a/client/src/App.scss	Mon Sep 03 20:02:14 2018 +0200
+++ b/client/src/App.scss	Wed Sep 05 12:27:52 2018 +0200
@@ -193,6 +193,3 @@
     text-decoration-line: underline;
     text-decoration-style: dotted;
 }
-
-
-}
--- a/client/src/actions/sessionsActions.js	Mon Sep 03 20:02:14 2018 +0200
+++ b/client/src/actions/sessionsActions.js	Wed Sep 05 12:27:52 2018 +0200
@@ -3,14 +3,14 @@
 import * as types from '../constants/actionTypes';
 
 
-export const createSession = (sessionId, groupName, protocol) => {
+export const createSession = (sessionId, groupName, protocol, title = '', description = '') => {
 
   const newSession = {
       _id: sessionId,
       ext_id: sessionId,
       date: now(),
-      title: '',
-      description: '',
+      title: title,
+      description: description,
       group: groupName,
       protocol: protocol,
       action: ActionEnum.CREATED
--- a/client/src/components/CreateSession.js	Mon Sep 03 20:02:14 2018 +0200
+++ b/client/src/components/CreateSession.js	Wed Sep 05 12:27:52 2018 +0200
@@ -1,20 +1,25 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 import Modal from 'react-modal';
+import PropTypes from 'prop-types';
 import uuidV1 from 'uuid/v1';
 import '../App.css';
-import * as sessionsActions from '../actions/sessionsActions';
-import * as authActions from '../actions/authActions';
-// import _ from 'lodash';
 import './CreateSession.css';
 
-class CreateSession extends Component {
-    state = {
-      createGroup: false,
-      protocolOpen: false,
-      // protocol:null
-    }
+export default class CreateSession extends Component {
+
+  static propTypes = {
+    history: PropTypes.object.isRequired,
+    group: PropTypes.object.isRequired,
+    createSession: PropTypes.func.isRequired,
+  };
+
+  state = {
+    createGroup: false,
+    protocolOpen: false,
+    title: "",
+    description: ""
+    // protocol:null
+  }
 
   componentWillMount() {
     Modal.setAppElement('body');
@@ -23,99 +28,34 @@
 
   openSessionModal = () => {
     this.setState({modalIsOpen: true});
-    let groupName = null;
-    // let protocol = null;
-    if(this.props.currentGroup) {
-      groupName = this.props.currentGroup.get('name');
-      // protocol = this.props.currentGroup.get('protocol');
-    }
-    if(groupName === null) {
-      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
-      if(groupName != null) {
-        const group = this.props.groups.find((g) => g.name === groupName);
-        if(group) {
-          return(
-          this.setState({
-          protocol: group.get('protocol')
-          }))
-        }
-      }
-    }
-
   }
 
   createSession = () => {
     const sessionId = uuidV1();
-    let groupName = null;
-    let protocol = null;
-    if(this.props.currentGroup) {
-      groupName = this.props.currentGroup.get('name');
-      protocol = this.props.currentGroup.get('protocol');
-    }
-    if(groupName === null) {
-      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
-      if(groupName != null) {
-        const group = this.props.groups.find((g) => g.name === groupName);
-        if(group) {
-          protocol = group.get('protocol');
-        }
-      }
-    }
+    const groupName = this.props.group ? this.props.group.get('name') : null;
+    const protocol = this.props.group ? this.props.group.get('protocol') : null;
+    const {title, description} = this.state;
 
-    this.props.sessionsActions.createSession(sessionId, groupName, protocol);
+    this.props.createSession(sessionId, groupName, protocol, title, description);
     this.props.history.push('/sessions/' + sessionId);
   }
 
   getGroupProtocol = () => {
-    let groupName = null;
-    let protocol = null;
-    if(this.props.currentGroup) {
-      groupName = this.props.currentGroup.get('name');
-      protocol = this.props.currentGroup.get('protocol');
+    if (this.props.group) {
+      return this.props.group.protocol;
     }
-    if(groupName === null) {
-      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
-      if(groupName != null) {
-        const group = this.props.groups.find((g) => g.name === groupName);
-        if(group) {
-          protocol = group.get('protocol');
-          return(
-            protocol
-          );
-        }
-      }
-    }
+    return null;
   }
 
-  // onChange = (e) => {
-  //   const { name, value } = e.target;
-  //   const changes = { [name]: value }
-  //   this.onChangeThrottle(changes);
-  // }
-
-  // onChangeThrottle = _.debounce((changes) => {
-  //   this.props.sessionsActions.updateSession(this.props.currentSession, changes);
-  // }, 750)
-
-  onGroupChange = (e) => {
-    const groupName = e.target.value;
-
-    const group = this.props.groups.find((g) => g.get('name') === groupName);
-
-    this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });
-  }
-
-  componentWillUpdate = (nextProps, nextState) => {
-    if (nextState.createGroup && nextProps.createGroup.get('success')) {
-      this.setState({ createGroup: false })
-    }
+  onChange = (e) => {
+    const { name, value } = e.target;
+    this.setState({[name]: value});
   }
 
   toggleProtocol = () => {
     this.setState({
       protocolOpen: !this.state.protocolOpen,
       show: false
-
     });
   }
 
@@ -124,36 +64,23 @@
   }
 
   handleModalCloseRequest = (e) => {
-    // opportunity to validate something and keep the modal open even if it
-    // requested to be closed
     e.preventDefault();
     this.setState({modalIsOpen: false});
   }
 
   render() {
 
-    // if (!this.props.currentSession) {
-    //   return (
-    //     <form></form>
-    //   )
-    // }
-
     return (
       <div>
       <a id="session-button" className="text-center" onClick={this.openSessionModal}>Créer une nouvelle session</a>
       <Modal
       className="Modal__Bootstrap modal-dialog"
-      // closeTimeoutMS={150}
       isOpen={this.state.modalIsOpen}
       onRequestClose={this.handleModalCloseRequest}
       >
         <div className="modal-content bg-primary w-75">
           <div className="modal-body">
             <form onSubmit={ e => { e.preventDefault() } }>
-            <div className="form-group ml-5 pl-5">
-                <label className="col-form-label text-secondary">Groupe</label>
-                {/* <p>{this.props.currentSession.group}</p> */}
-              </div>
               <div className="form-group">
                 <label className="col-form-label text-secondary font-weight-bold pt-3">Titre</label>
                 <input className="form-control text-primary w-100"
@@ -172,7 +99,7 @@
                   // defaultValue={ this.props.currentSession.description }
                   onChange={ this.onChange }
                   placeholder="Entrez une description"
-                  row="3"></textarea>
+                  ></textarea>
               </div>
               <div className="form-group">
                 <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>
@@ -192,27 +119,3 @@
     );
   }
 }
-
-function mapStateToProps(state, props) {
-
-  let group;
-  if (props.session && props.session.get('group')) {
-    group = state.get('groups').find(group => props.session.get('group') === group.get('name'))
-  }
-
-  return {
-    currentSession: props.session,
-    createGroup: state.get('createGroup'),
-    groups: state.get('groups'),
-    group
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    sessionsActions: bindActionCreators(sessionsActions, dispatch),
-    authActions: bindActionCreators(authActions, dispatch),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(CreateSession);
--- a/client/src/components/Navbar.js	Mon Sep 03 20:02:14 2018 +0200
+++ b/client/src/components/Navbar.js	Wed Sep 05 12:27:52 2018 +0200
@@ -8,6 +8,7 @@
 // import logo from './logo.svg';
 import Modal from 'react-modal';
 import * as authActions from '../actions/authActions';
+import * as sessionsActions from '../actions/sessionsActions';
 import { forceSync } from '../actions/networkActions';
 import { groupSetCurrent } from '../actions/groupActions';
 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
@@ -153,7 +154,11 @@
             </ul>
             <ul className="navbar-nav navbar-center">
                 <li className="nav-item text-secondary">
-                  <CreateSession history={this.props.history}/>
+                  <CreateSession
+                    history={this.props.history}
+                    group={this.props.currentGroup}
+                    createSession={this.props.sessionsActions.createSession}
+                  />
                 </li>
             </ul>
             <ul className="nav navbar-nav ml-auto">
@@ -208,7 +213,8 @@
   return {
     authActions: bindActionCreators(authActions, dispatch),
     networkActions: bindActionCreators({ forceSync }, dispatch),
-    groupActions: bindActionCreators({ groupSetCurrent }, dispatch)
+    groupActions: bindActionCreators({ groupSetCurrent }, dispatch),
+    sessionsActions: bindActionCreators(sessionsActions, dispatch),
   }
 }
 
--- a/client/src/components/SessionList.js	Mon Sep 03 20:02:14 2018 +0200
+++ b/client/src/components/SessionList.js	Wed Sep 05 12:27:52 2018 +0200
@@ -42,28 +42,6 @@
     this.setState({modalIsOpen: false});
   }
 
-  createSession = () => {
-    const sessionId = uuidV1();
-    let groupName = null;
-    let protocol = null;
-    if(this.props.currentGroup) {
-      groupName = this.props.currentGroup.get('name');
-      protocol = this.props.currentGroup.get('protocol');
-    }
-    if(groupName === null) {
-      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
-      if(groupName != null) {
-        const group = this.props.groups.find((g) => g.name === groupName);
-        if(group) {
-          protocol = group.get('protocol');
-        }
-      }
-    }
-
-    this.props.sessionsActions.createSession(sessionId, groupName, protocol);
-    this.props.history.push('/sessions/' + sessionId);
-  }
-
   onClickDelete(session, e) {
     e.preventDefault();
     e.stopPropagation();
@@ -90,7 +68,6 @@
     return (
       <div>
         <Navbar history={this.props.history} />
-        {/* <button id="session-button" type="button" className="btn btn-primary btn-lg text-secondary" onClick={ this.createSession}>Créer une nouvelle session</button> */}
         <div className="container-fluid">
           <div className="row mt-5 pt-5">
                 {this.props.sessions.map((session) =>
--- a/client/src/index.js	Mon Sep 03 20:02:14 2018 +0200
+++ b/client/src/index.js	Wed Sep 05 12:27:52 2018 +0200
@@ -10,7 +10,6 @@
 import Session from './components/Session';
 import Login from './components/Login';
 import CreateGroup from './components/CreateGroup';
-import CreateSession from './components/CreateSession';
 import Register from './components/Register';
 import Settings from './components/Settings';
 import './index.css';
@@ -30,7 +29,6 @@
       <Switch>
         <Route exact path="/sessions/:id" component={Session} />
         <Route exact path="/sessions" component={SessionList} />
-        <Route exact path="/create-session" component={CreateSession} />
         <Route exact path="/register" component={Register} />
         <Route exact path="/login" component={Login} />
         <Route exact path="/create-group" component={CreateGroup} />