API & Client: dates handling

mpwo_api/mpwo_api/users/auth.py

@@ -1,6 +1,6 @@
 import datetime
 import os
-from flask import Blueprint, current_app, jsonify, request, send_from_directory
+from flask import Blueprint, current_app, jsonify, request
 from sqlalchemy import exc, or_
 from werkzeug.utils import secure_filename
 

mpwo_client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "date-fns": "^1.29.0",
     "history": "^4.7.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

mpwo_client/src/actions/index.js

@@ -23,8 +23,8 @@ function ProfileError(message) {
   return { type: 'PROFILE_ERROR', message }
 }
 
-function PwdError(message) {
+function ProfileUpdateError(message) {
-  return { type: 'PWD_ERROR', message }
+  return { type: 'PROFILE_UPDATE_ERROR', message }
 }
 
 function initProfileFormData(user) {
@@ -157,7 +157,9 @@ export function handleProfileFormSubmit(event) {
     const state = getState()
     if (!state.formProfile.formProfile.password ===
         state.formProfile.formProfile.passwordConf) {
-      dispatch(PwdError('Password and password confirmation don\'t match.'))
+      dispatch(ProfileUpdateError(
+          'Password and password confirmation don\'t match.'
+      ))
     } else {
       return mpwoApi
       .updateProfile(state.formProfile.formProfile)
@@ -166,7 +168,7 @@ export function handleProfileFormSubmit(event) {
           getProfile(dispatch)
           history.push('/profile')
         } else {
-          dispatch(AuthError(ret.message))
+          dispatch(ProfileUpdateError(ret.message))
         }
       })
       .catch(error => {

mpwo_client/src/components/User/Profile.jsx

@@ -1,3 +1,4 @@
+import { format } from 'date-fns'
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
@@ -33,13 +34,15 @@ function Profile ({ message, onDeletePicture, onUploadPicture, user }) {
               <div className="card-body">
                 <div className="row">
                   <div className="col-md-8">
-                    <p>Email : {user.email}</p>
+                    <p>Email: {user.email}</p>
-                    <p>Registration Date : {user.createdAt}</p>
+                    <p>Registration Date: {
-                    <p>First Name : {user.firstName}</p>
+                         format(new Date(user.createdAt), 'DD/MM/YYYY HH:mm')
-                    <p>Last Name : {user.lastName}</p>
+                       }</p>
-                    <p>Birth Date : {user.birthDate}</p>
+                    <p>First Name: {user.firstName}</p>
-                    <p>Location : {user.location}</p>
+                    <p>Last Name: {user.lastName}</p>
-                    <p>Bio : {user.bio}</p>
+                    <p>Birth Date: {user.birthDate}</p>
+                    <p>Location: {user.location}</p>
+                    <p>Bio: {user.bio}</p>
                   </div>
                   <div className="col-md-4">
                     { user.picture === true && (

mpwo_client/src/components/User/ProfileEdit.jsx

@@ -120,6 +120,8 @@ class ProfileEdit extends React.Component {
                             name="birthDate"
                             className="form-control input-lg"
                             type="text"
+                            pattern="\d{1,2}/\d{1,2}/\d{4}"
+                            placeholder="dd/mm/yyyy"
                             value={formProfile.birthDate}
                             onChange={onHandleFormChange}
                           />

mpwo_client/src/reducers/index.js

@@ -1,3 +1,4 @@
+import { format } from 'date-fns'
 import { combineReducers } from 'redux'
 
 import initial from './initial'
@@ -49,7 +50,7 @@ const message = (state = initial.message, action) => {
   switch (action.type) {
     case 'AUTH_ERROR':
     case 'PROFILE_ERROR':
-    case 'PWD_ERROR':
+    case 'PROFILE_UPDATE_ERROR':
     case 'PICTURE_ERROR':
       return action.message
     case 'LOGOUT':
@@ -102,7 +103,8 @@ const user = (state = initial.user, action) => {
                    ? action.message.data.location
                    : '',
         birthDate: action.message.data.birth_date
-                   ? action.message.data.birth_date
+                   ? format(new Date(action.message.data.birth_date),
+                            'DD/MM/YYYY')
                    : '',
         picture: action.message.data.picture === true
                    ? action.message.data.picture

package-lock.json

@@ -2520,6 +2520,11 @@
         "assert-plus": "1.0.0"
       }
     },
+    "date-fns": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
+      "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw=="
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "date-fns": "^1.29.0",
     "history": "^4.7.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",