added React Select + timezone select now uses react-select

package.json

@@ -36,6 +36,7 @@
     "react-i18next": "^7.4.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
+    "react-select": "^1.2.1",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",

src/component/Account/Timezone.jsx

@@ -1,6 +1,10 @@
 import React from 'react'
+import Select from 'react-select'
+import 'react-select/dist/react-select.css'
 
 export const Timezone = props => {
+  const handleChangeTimezone = selectedTimezone => props.onChangeTimezone(props.timezone.find(t => t.place === selectedTimezone.place))
+
   return (
     <div className='account__userpreference__setting__calendar'>
 
@@ -13,13 +17,17 @@ export const Timezone = props => {
       </div>
 
       <div className='calendar__timezone ml-2 ml-sm-0 dropdown'>
-        <button className='calendar__timezone__btn btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-          Fuseau Horaire
-        </button>
-        <div className='calendar__timezone__submenu dropdown-menu'>
-          {props.timezone.map((t, i) => <div className='calendar__timezone__submenu__item dropdown-item' key={i}>{t.place} {t.gmt}</div>)}
-        </div>
+        <Select
+          name='timezoneSelect'
+          className='calendar__timezone__select'
+          value={props.timezoneUser}
+          labelKey='place'
+          valueKey='place'
+          options={props.timezone}
+          onChange={handleChangeTimezone}
+        />
       </div>
+
     </div>
   )
 }

src/container/Account.jsx

@@ -71,6 +71,8 @@ class Account extends React.Component {
   handleChangeSubscriptionNotif = (workspaceId, subscriptionNotif) =>
     this.props.dispatch(updateUserWorkspaceSubscriptionNotif(workspaceId, subscriptionNotif))
 
+  handleChangeTimezone = newTimezone => console.log('(NYI) new timezone : ', newTimezone)
+
   render () {
     const subComponent = (() => {
       switch (this.state.subComponentMenu.find(({active}) => active).name) {
@@ -87,7 +89,7 @@ class Account extends React.Component {
           />
 
         case 'timezone':
-          return <Timezone timezone={this.props.timezone} />
+          return <Timezone timezone={this.props.timezone} onChangeTimezone={this.handleChangeTimezone} />
 
         case 'password':
           return <Password />

src/container/WorkspaceContent.jsx

@@ -21,10 +21,9 @@ const qs = require('query-string')
 
 class WorkspaceContent extends React.Component {
   async componentDidMount () {
-    console.log('WorkspaceContent did mount')
     const { workspaceList, app, match, location, dispatch } = this.props
 
-    if (Object.keys(app).length === 0) await dispatch(getAppList())
+    if (Object.keys(app).length === 0) dispatch(getAppList()) // async but no need await
 
     const wsToLoad = (() => {
       if (match.params.idws !== undefined) return match.params.idws

src/css/AccountPage.styl

@@ -153,24 +153,8 @@ settingText()
           padding 10px 25px
         &__timezone
           margin 15px 0 30px 0
-          &__btn
-            border 1px solid thirdColor
-            border-radius 5px
-            padding 10px 35px
-            color thirdColor
-            background-color transparent
-            &::after
-              margin-left 10px
-            &:hover, &:focus
-              background-color thirdColor
-              color white
-          &__submenu
-            max-height 265px
-            overflow-Y auto
-            &__item
-              &:hover, &:focus
-                background-color thirdColor
-                color white
+          &__select
+            max-width 300px
       .notification
         &__text
           settingText()