API & Client: add timezone to user - #11

fittrackee_client/src/components/App.css

@@ -208,6 +208,15 @@ input, textarea {
   max-width: 45px;
   max-height: 45px;
 }
+
+.timezone-picker {
+  padding: 0;
+}
+
+.timezone-picker-textfield {
+  font-size: 15px;
+}
+
 .unlink {
   color: black;
 }

fittrackee_client/src/components/User/Profile.jsx

@@ -43,6 +43,7 @@ function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
                     <p>Birth Date: {user.birthDate}</p>
                     <p>Location: {user.location}</p>
                     <p>Bio: {user.bio}</p>
+                    <p>Time zone: {user.timezone}</p>
                   </div>
                   <div className="col-md-4">
                     { user.picture === true && (

fittrackee_client/src/components/User/ProfileEdit.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
+import TimezonePicker from 'react-timezone'
 
 import {
   initProfileForm,
@@ -151,6 +152,27 @@ class ProfileEdit extends React.Component {
                           />
                         </label>
                       </div>
+                      <div className="form-group">
+                        <label>
+                          Timezone:
+                          <TimezonePicker
+                            className="form-control"
+                            onChange={tz => {
+                              const e = { target:
+                                {
+                                  name: 'timezone',
+                                  value: tz ? tz : 'Europe/Paris'
+                                }
+                              }
+                              onHandleFormChange(e)
+                            }}
+                            value={formProfile.timezone
+                              ? formProfile.timezone
+                              : 'Europe/Paris'
+                            }
+                          />
+                        </label>
+                      </div>
                       <input
                         type="submit"
                         className="btn btn-primary btn-lg btn-block"

fittrackee_client/src/fitTrackeeApi/user.js

@@ -53,6 +53,7 @@ export default class FitTrackeeApi {
         birth_date: form.birthDate,
         password: form.password,
         password_conf: form.passwordConf,
+        timezone: form.timezone,
       },
       type: 'application/json',
     }

fittrackee_client/src/reducers/index.js

@@ -87,6 +87,7 @@ const formProfile = (state = initial.formProfile, action) => {
           birthDate: action.user.birthDate,
           location: action.user.location,
           bio: action.user.bio,
+          timezone: action.user.timezone,
         },
       }
     case 'PROFILE_SUCCESS':
@@ -185,6 +186,9 @@ const user = (state = initial.user, action) => {
         picture: action.message.data.picture === true
                    ? action.message.data.picture
                    : false,
+        timezone: action.message.data.timezone
+                   ? action.message.data.timezone
+                   : '',
         nbActivities: action.message.data.nb_activities,
         nbSports: action.message.data.nb_sports,
         totalDistance: action.message.data.total_distance,