client/src/components/Navbar.js
changeset 171 03334a31130a
parent 170 7da1d5137b0b
child 172 4b780ebbedc6
equal deleted inserted replaced
170:7da1d5137b0b 171:03334a31130a
     3 import PropTypes from 'prop-types';
     3 import PropTypes from 'prop-types';
     4 import React, { Component } from 'react';
     4 import React, { Component } from 'react';
     5 import { connect } from 'react-redux';
     5 import { connect } from 'react-redux';
     6 import { withRouter } from 'react-router';
     6 import { withRouter } from 'react-router';
     7 import { bindActionCreators } from 'redux';
     7 import { bindActionCreators } from 'redux';
       
     8 import { withNamespaces, Trans } from 'react-i18next';
       
     9 
     8 // import logo from './logo.svg';
    10 // import logo from './logo.svg';
     9 import Modal from 'react-modal';
    11 import Modal from 'react-modal';
    10 import * as authActions from '../actions/authActions';
    12 import * as authActions from '../actions/authActions';
    11 import * as sessionsActions from '../actions/sessionsActions';
    13 import * as sessionsActions from '../actions/sessionsActions';
    12 import { forceSync } from '../actions/networkActions';
    14 import { forceSync } from '../actions/networkActions';
    58 }
    60 }
    59 
    61 
    60 const OffLineMessage = ({isAuthenticated}) => {
    62 const OffLineMessage = ({isAuthenticated}) => {
    61   if (!isAuthenticated) {
    63   if (!isAuthenticated) {
    62     return (
    64     return (
    63         <span className="sticky-top text-warning text-right float-right mr-4 offline-message">Vous êtes en mode Offline. N'oubliez pas de
    65         <span className="sticky-top text-warning text-right float-right mr-4 offline-message"><Trans i18nKey="navbar.offline_message"></Trans></span>
    64         vous connecter ou de créer un compte pour sauvegarder vos sessions</span>
       
    65     );
    66     );
    66   }
    67   }
    67     return (
    68     return (
    68       <span></span>
    69       <span></span>
    69   );
    70   );
   144       this.props.groupActions.groupSetCurrent(groupName);
   145       this.props.groupActions.groupSetCurrent(groupName);
   145     }
   146     }
   146   }
   147   }
   147 
   148 
   148   render() {
   149   render() {
       
   150     const t = this.props.t;
   149     return (
   151     return (
   150       <div>
   152       <div>
   151       <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
   153       <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
   152         <div className="container-fluid">
   154         <div className="container-fluid">
   153         <div className="navbar-header">
   155         <div className="navbar-header">
   160             </button>
   162             </button>
   161           </div>
   163           </div>
   162           <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
   164           <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
   163             <ul className="navbar-nav mr-auto">
   165             <ul className="navbar-nav mr-auto">
   164               <li className="nav-item text-secondary">
   166               <li className="nav-item text-secondary">
   165                 <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Sessions</a>
   167                 <a className="nav-link text-capitalize" onClick={this.onClickSessions} href="/sessions">{t('common.session', {count: 2})}</a>
   166                 {/* <CreateSession
   168                 {/* <CreateSession
   167                     history={this.props.history}
   169                     history={this.props.history}
   168                     group={this.props.currentGroup}
   170                     group={this.props.currentGroup}
   169                     createSession={this.props.sessionsActions.createSession}
   171                     createSession={this.props.sessionsActions.createSession}
   170                   /> */}
   172                   /> */}
   195           >
   197           >
   196             <div id="logout-modal" className="modal-content">
   198             <div id="logout-modal" className="modal-content">
   197               <span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
   199               <span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
   198               <div className="modal-body text-center">
   200               <div className="modal-body text-center">
   199               <span className="material-icons modal-warning text-info pb-5">warning</span>
   201               <span className="material-icons modal-warning text-info pb-5">warning</span>
   200                 <p className="modal-text">
   202                 <p className="modal-text"><Trans i18nKey="navbar.logout_modal">
   201                   Certaines sessions n'ont pas encore été sauvegardées.
   203                   Certaines sessions n'ont pas encore été sauvegardées.
   202                   <br />
   204                   <br />
   203                   Si vous continuez, elles seront perdues.
   205                   Si vous continuez, elles seront perdues.
   204                 </p>
   206                   </Trans></p>
   205               <button type="button" className="btn btn-danger text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
   207               <button type="button" className="btn btn-danger text-secondary font-weight-bold py-1 px-2 mb-3 text-capitalize" id="logout-modal-button" onClick={ this.confirmLogout }>{t('common.confirm')}</button>
   206               </div>
   208               </div>
   207             </div>
   209             </div>
   208           </Modal>
   210           </Modal>
   209         </div>
   211         </div>
   210       </nav>
   212       </nav>
   237     groupActions: bindActionCreators({ groupSetCurrent }, dispatch),
   239     groupActions: bindActionCreators({ groupSetCurrent }, dispatch),
   238     sessionsActions: bindActionCreators(sessionsActions, dispatch),
   240     sessionsActions: bindActionCreators(sessionsActions, dispatch),
   239   }
   241   }
   240 }
   242 }
   241 
   243 
   242 export default connect(mapStateToProps, mapDispatchToProps)(withRouter(AppNavbar));
   244 export default withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(withRouter(AppNavbar)));