Formatage des dates dans l'interface

client/src/components/DecisionSupportFilePage/MetadataPanel.tsx

@@ -4,7 +4,7 @@ import { useWorkgroups } from '../../gql/queries/workgroups';
 import { useUserProfile } from '../../gql/queries/profile';
 import { inWorkgroup } from '../../types/workgroup';
 import { DecisionSupportFileUpdaterProps } from './DecisionSupportFileUpdaterProps';
-import { asDate } from '../../util/date';
+import { asDate, formatDate } from '../../util/date';
 import { Link } from 'react-router-dom';
 
 export interface MetadataPanelProps extends DecisionSupportFileUpdaterProps {};
@@ -81,13 +81,13 @@ export const MetadataPanel: FunctionComponent<MetadataPanelProps> = ({ dsf, upda
           <div className="field">
             <div className="label">Créé le</div>
             <div className="control">
-              <p>{asDate(dsf.createdAt).toISOString()}</p>
+              <p>{formatDate(dsf.createdAt)}</p>
             </div>
           </div>
           <div className="field">
             <div className="label">Voté le</div>
             <div className="control">
-              <p>{dsf.votedAt ? dsf.votedAt : '--'}</p>
+              <p>{dsf.votedAt ? formatDate(dsf.votedAt) : '--'}</p>
             </div>
           </div>
         </div>

client/src/components/ProfilePage/ProfilePage.tsx

@@ -25,12 +25,14 @@ export function ProfilePage() {
         <section className="section">
           <div className="columns">
             <div className="column is-6 is-offset-3">
-              <h2 className="is-size-2 subtitle">Mon profil</h2>
-              <WithLoader loading={isLoading || !userProfile}>
-              {
-                <UserForm onChange={onUserChange} user={userProfile} />
-              }
-              </WithLoader>
+              <div className="box">
+                <h2 className="is-size-2 subtitle">Mon profil</h2>
+                <WithLoader loading={isLoading || !userProfile}>
+                {
+                  <UserForm onChange={onUserChange} user={userProfile} /> 
+                }
+                </WithLoader>
+              </div>
             </div>
           </div>
         </section>

client/src/components/UserForm.tsx

@@ -1,5 +1,6 @@
 import React, { useState, ChangeEvent, useEffect } from 'react';
 import { User } from '../types/user';
+import { formatDate } from '../util/date';
 
 export interface UserFormProps {
   user: User
@@ -62,13 +63,13 @@ export function UserForm({ user, onChange }: UserFormProps) {
       <div className="field">
         <label className="label">Date de dernière connexion</label>
         <div className="control">
-          <p className="input is-static">{state.user.connectedAt}</p>
+          <p className="input is-static">{formatDate(state.user.connectedAt)}</p>
         </div>
       </div>
       <div className="field">
         <label className="label">Date de création</label>
         <div className="control">
-          <p className="input is-static">{state.user.createdAt}</p>
+          <p className="input is-static">{formatDate(state.user.createdAt)}</p>
         </div>
       </div>
       <div className="buttons is-right">

client/src/util/date.ts

@@ -1,4 +1,16 @@
 export function asDate(d: string|Date): Date {
   if (typeof d === 'string') return new Date(d);
   return d;
+}
+
+const intl = Intl.DateTimeFormat(navigator.language, { 
+  weekday: 'long', 
+  month: 'short', 
+  day: 'numeric',
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+});
+
+export function formatDate(d: Date|string): string {
+  d = asDate(d);
+  return intl.format(d);
 }