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"