fix: Refactor user edit view to have only one

Author: Zenoo

README.md

@@ -12,7 +12,7 @@
 
 ![](https://i.imgur.com/Hc0JsXs.png)
 
-- Copy `.env.sample` to `.env` and adapt the database URL
+- Copy `.env.sample` to `.env` and adapt the variables
 
 - Install dependencies: `npm i` (This should also setup your database from the `schema.prisma` file and the migrations)
 
@@ -32,7 +32,7 @@
 
 *This project should deploy successfully as-is on Heroku*
 
-- Set the DATABASE_URL environment variable
+- Set the environment variables
 
 - Install dependencies: `npm ci` (This should also setup your database from the `schema.prisma` file and the migrations)
 

client/public/static/i18n/en/user.json

@@ -1,4 +1,6 @@
 {
+  "newUser": "New User",
+  "editUser": "Edit User",
   "informationCanBeEdited": "The information can be edited",
   "profile": "Profile",
   "firstName": "First Name",

client/public/static/i18n/fr/user.json

@@ -1,12 +1,14 @@
 {
+  "newUser": "Nouvel utilisateur",
+  "editUser": "Modification d'un utilisateur",
   "informationCanBeEdited": "Ces informations peuvent être modifiées",
   "profile": "Profil",
   "firstName": "Prénom",
   "lastName": "Nom",
   "email": "Email",
   "phone": "Téléphone",
   "password": "Mot de passe",
-  "passwordConfirm": "Confirmer le mot de passe",
+"passwordConfirm": "Confirmer le mot de passe",
   "giveAdminRights": "Donner les droits d'administrateur",
   "newUserAdded": "Nouvel utilisateur ajouté"
 }

client/src/api/RecordRoutes.ts

@@ -10,6 +10,7 @@ export type RecordWithAuthor = Record & {
 export type RecordUpdate = Partial<Record> & {
   author?: {
     create?: Prisma.RecordCreateWithoutAuthorInput;
+    connect?: Prisma.RecordWhereUniqueInput;
     update?: Prisma.RecordUpdateWithoutAuthorInput;
   }
 };

client/src/api/UserRoutes.ts

@@ -9,8 +9,9 @@ export interface User extends Omit<_User, 'password'> {
 export type UserUpdate = Partial<_User> & {
   person?: {
     create?: Prisma.PersonCreateWithoutUserInput;
+    connect?: Prisma.PersonWhereUniqueInput;
     update?: Prisma.PersonUpdateWithoutUserInput;
-  }
+  },
 };
 
 const UserRoutes = {

client/src/components/forms/UserForm.tsx

@@ -65,6 +65,7 @@ const UserForm = ({ data }: Props) => {
       }).then(() => {
         Alert.open('success', t('common:saved'));
       }).catch(catchError(Alert));
+      Loader.close();
     } else { // Addition
       processedData.password = formData.password;
       await UserRoutes.insert({
@@ -78,8 +79,8 @@ const UserForm = ({ data }: Props) => {
         navigate('/app/admin/user/list');
         reset();
       }).catch(catchError(Alert));
+      Loader.close();
     }
-    Loader.close();
   };
 
   return (

client/src/hooks/useAuth.tsx

@@ -9,7 +9,7 @@ interface AuthContextInterface {
   updateData: (data: User) => void,
 }
 
-const emptyUser: User = {
+export const emptyUser: User = {
   id: 0,
   login: '',
   admin: false,

client/src/routes.tsx

@@ -5,7 +5,6 @@ import AdminLayout from './layouts/AdminLayout';
 import DashboardLayout from './layouts/DashboardLayout/DashboardLayout';
 import MainLayout from './layouts/MainLayout/MainLayout';
 import AccountView from './views/account/AccountView/AccountView';
-import UserAddView from './views/admin/user/UserAddView';
 import UserEditView from './views/admin/user/UserEditView';
 import UserListView from './views/admin/user/UserListView';
 import LoginView from './views/auth/LoginView';
@@ -26,7 +25,7 @@ const routes = [
             path: 'user',
             children: [
               { path: 'list', element: <UserListView /> },
-              { path: 'add', element: <UserAddView /> },
+              { path: 'add', element: <UserEditView /> },
               { path: 'edit/:id', element: <UserEditView /> },
             ],
           },

client/src/views/admin/user/UserAddView.tsx

@@ -1,42 +1,45 @@
 import { Card, CardContent, CardHeader, Divider } from '@mui/material';
 import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import UserRoutes from '../../../api/UserRoutes';
 import UserForm from '../../../components/forms/UserForm';
 import Loader from '../../../components/Loader';
 import Page from '../../../components/Page';
+import { emptyUser } from '../../../hooks/useAuth';
 import useStateAsync from '../../../hooks/useStateAsync';
 
 const UserEditView = () => {
-  const { id } = useParams();
+  const { t } = useTranslation('user');
+  const { id: _id } = useParams();
+
+  const id = useMemo(() => (_id ? +_id : 0), [_id]);
 
   const callParams = useMemo(() => ({
-    id: id ? +id : 0,
+    id,
     include: { person: true },
   }), [id]);
   const { data: user } = useStateAsync(
-    null,
+    emptyUser,
     UserRoutes.get,
     callParams,
   );
 
   return (
-    <Page
-      title="New user"
-    >
+    <Page title={id ? t('editUser') : t('newUser')}>
       <Card>
         <CardHeader
-          subheader="Edit the user information"
-          title="Edit user"
+          subheader={t('informationCanBeEdited')}
+          title={id ? t('editUser') : t('newUser')}
         />
         <Divider />
         <CardContent>
-          {!user
+          {(!!id && !user.id)
             ? <Loader />
             : (
               <UserForm
                 data={{
-                  id: id ? +id : 0,
+                  id: user.id,
                   admin: user.admin,
                   login: user.login,
                   idperson: user.person.id ? +user.person.id : 0,