M app/src/containers/EventDetails/index.js → app/src/containers/EventDetails/index.js

@@ -19,6 +19,20 @@ const idPrefix = isEditing ? 'EditEvent' : 'Event';
   return (
     <div>
       <div className={classes.section}>
+        {isEditing && (
+          <div className={classes.section}>
+            <Typography variant="h6">{t('event.fields.name')}</Typography>
+            <TextField
+              light
+              value={editingEvent.name ?? event.name}
+              onChange={e =>
+                setEditingEvent({...editingEvent, name: e.target.value})
+              }
+              id="EditEventName"
+              name="name"
+            />
+          </div>
+        )}
         <Typography variant="h6">{t('event.fields.starts_on')}</Typography>
         {isEditing ? (
           <DatePicker
@@ -38,7 +52,7 @@ TextFieldComponent={p => <TextField light {...p} />}
           />
         ) : (
           <Typography variant="body1" id={`${idPrefix}Date`}>
-            {event.date}
+            {event.date || t('event.fields.empty')}
           </Typography>
         )}
       </div>
@@ -58,7 +72,7 @@ name="address"
           />
         ) : (
           <Typography variant="body1" id={`${idPrefix}Address`}>
-            {event.address}
+            {event.address || t('event.fields.empty')}
           </Typography>
         )}
       </div>

M app/src/locales/fr.json → app/src/locales/fr.json

@@ -10,7 +10,9 @@ },
   "event": {
     "fields": {
       "starts_on": "Commence le",
-      "address": "Adresse"
+      "address": "Adresse",
+      "name": "Nom de l'événement",
+      "empty": "Non précisé"
     },
     "creation": {
       "event_name": "Nom de l'événement",

M app/src/pages/Event.js → app/src/pages/Event.js

@@ -1,7 +1,6 @@ 
 import React, {useState, useReducer, useEffect} from 'react';
 import {useTranslation} from 'react-i18next';
 import AppBar from '@material-ui/core/AppBar';
-import TextField from '../components/TextField';
 import Toolbar from '@material-ui/core/Toolbar';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
@@ -25,14 +24,7 @@ const [anchorEl, setAnchorEl] = useState(null);
   const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
   const classes = useStyles({detailsOpen});
   const [openNewCar, toggleNewCar] = useReducer(i => !i, false);
-  const {
-    event,
-    isEditing,
-    setIsEditing,
-    editingEvent,
-    setEditingEvent,
-    updateEvent,
-  } = useEvent();
+  const {event, isEditing, setIsEditing, updateEvent} = useEvent();
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -62,25 +54,13 @@ className={classes.appbar}
         id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
       >
         <Toolbar>
-          {isEditing ? (
-            <TextField
-              light
-              value={editingEvent.name ?? event.name}
-              onChange={e =>
-                setEditingEvent({...editingEvent, name: e.target.value})
-              }
-              id="EditEventName"
-              name="name"
-            />
-          ) : (
-            <Typography
-              variant="h6"
-              className={classes.name}
-              id="MenuHeaderTitle"
-            >
-              {event.name}
-            </Typography>
-          )}
+          <Typography
+            variant="h6"
+            className={classes.name}
+            id="MenuHeaderTitle"
+          >
+            {event.name}
+          </Typography>
           {!detailsOpen && (
             <IconButton
               edge="end"