client/src/components/SessionForm.js
changeset 192 e4c2c1919c20
parent 191 3f71ad81a5a9
equal deleted inserted replaced
191:3f71ad81a5a9 192:e4c2c1919c20
     2 import { connect } from 'react-redux';
     2 import { connect } from 'react-redux';
     3 import { bindActionCreators } from 'redux';
     3 import { bindActionCreators } from 'redux';
     4 import * as sessionsActions from '../actions/sessionsActions';
     4 import * as sessionsActions from '../actions/sessionsActions';
     5 import * as authActions from '../actions/authActions';
     5 import * as authActions from '../actions/authActions';
     6 import _ from 'lodash';
     6 import _ from 'lodash';
       
     7 import { withNamespaces } from 'react-i18next';
       
     8 
     7 
     9 
     8 class SessionForm extends Component {
    10 class SessionForm extends Component {
     9 
    11 
    10   state = {
    12   state = {
    11     createGroup: false,
    13     createGroup: false,
   111     }
   113     }
   112   }
   114   }
   113 
   115 
   114   titleEditMode = () => {
   116   titleEditMode = () => {
   115 
   117 
       
   118     const t = this.props.t;
       
   119 
   116     if (this.state.titleEditMode === false) {
   120     if (this.state.titleEditMode === false) {
   117       return (
   121       return (
   118       <div
   122       <div
   119         onClick={this.toggleOnTitleEditMode}
   123         onClick={this.toggleOnTitleEditMode}
   120         className='session-page-title border-0 bg-irinotes-headers text-muted ml-3'
   124         className='session-page-title border-0 bg-irinotes-headers text-muted ml-3'
   121       >
   125       >
   122         { this.props.currentSession.title || <span className='session-placeholder'>Espace titre</span> }
   126         { this.props.currentSession.title || <span className='session-placeholder'>{ t('session_form.empty_title_placeholder') }</span> }
   123       </div>
   127       </div>
   124     );
   128     );
   125     }
   129     }
   126 
   130 
   127     if (this.state.titleEditMode === true) {
   131     if (this.state.titleEditMode === true) {
   131         onKeyDown={ this.saveEdit }
   135         onKeyDown={ this.saveEdit }
   132         onChange={ this.onChange }
   136         onChange={ this.onChange }
   133         type="textarea"
   137         type="textarea"
   134         name="title"
   138         name="title"
   135         defaultValue={ this.props.currentSession.title }
   139         defaultValue={ this.props.currentSession.title }
   136         placeholder="Espace titre"
   140         placeholder={ t('session_form.empty_title_placeholder') }
   137         ref={title => this.title = title}
   141         ref={title => this.title = title}
   138       ></textarea>
   142       ></textarea>
   139     </div>
   143     </div>
   140     );
   144     );
   141     }
   145     }
   142   }
   146   }
   143 
   147 
   144   descriptionEditMode = () => {
   148   descriptionEditMode = () => {
       
   149 
       
   150   const t = this.props.t;
   145 
   151 
   146   if (this.state.descriptionEditMode === false) {
   152   if (this.state.descriptionEditMode === false) {
   147     return (
   153     return (
   148     <div
   154     <div
   149       onClick={this.toggleOnDescriptionEditMode}
   155       onClick={this.toggleOnDescriptionEditMode}
   150       className="session-page-description border-0 bg-irinotes-headers text-muted ml-3"
   156       className="session-page-description border-0 bg-irinotes-headers text-muted ml-3"
   151     >
   157     >
   152       { this.props.currentSession.description || <span className='session-placeholder'>Espace description</span> }
   158       { this.props.currentSession.description || <span className='session-placeholder'>{ t('session_form.empty_description_placeholder') }</span> }
   153     </div>
   159     </div>
   154   );
   160   );
   155   }
   161   }
   156 
   162 
   157   if (this.state.descriptionEditMode === true) {
   163   if (this.state.descriptionEditMode === true) {
   161         onKeyDown={ this.saveEdit }
   167         onKeyDown={ this.saveEdit }
   162         onChange={ this.onChange }
   168         onChange={ this.onChange }
   163         type="textarea"
   169         type="textarea"
   164         name="description"
   170         name="description"
   165         defaultValue={ this.props.currentSession.description }
   171         defaultValue={ this.props.currentSession.description }
   166         placeholder="Espace description"
   172         placeholder={ t('session_form.empty_description_placeholder') }
   167         ref={desc => this.desc = desc}
   173         ref={desc => this.desc = desc}
   168       ></textarea>
   174       ></textarea>
   169     </div>
   175     </div>
   170   );
   176   );
   171   }
   177   }
   212     sessionsActions: bindActionCreators(sessionsActions, dispatch),
   218     sessionsActions: bindActionCreators(sessionsActions, dispatch),
   213     authActions: bindActionCreators(authActions, dispatch),
   219     authActions: bindActionCreators(authActions, dispatch),
   214   }
   220   }
   215 }
   221 }
   216 
   222 
   217 export default connect(mapStateToProps, mapDispatchToProps)(SessionForm);
   223 export default withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(SessionForm));