refactor: streamline user data loading and updating logic in edit user components

Author: manudous

mock-server/.env.example

@@ -1,3 +1,3 @@
 NODE_ENV=development
 PORT=3000
-SIMULATED_DELAY=2000
+SIMULATED_DELAY=2000

mock-server/src/dals/user/user.repository.ts

@@ -1,7 +1,6 @@
 import { paginateItems } from '#common/helpers/index.js';
 import { CollectionQuery } from '#common/models/index.js';
 import { db } from '#dals/mock.data.js';
-//import { mapStringToObjectId } from '#common/mappers/index.js';
 import * as model from './user.model.js';
 
 export const userRepository = {
@@ -22,16 +21,10 @@ export const userRepository = {
   },
   getUserById: async (id: string): Promise<model.Usuario> => db.users.find(user => user._id.toHexString() === id),
   actualizarUsuario: async (id: string, usuarioActualizado: model.Usuario): Promise<boolean> => {
-    // const listaAcualizada = db.users.map(usuario =>
-    //   usuario._id.toHexString() === usuarioActualizado._id.toHexString() ? { ...usuarioActualizado } : { ...usuario }
-    // );
-    // db.users = [...listaAcualizada];
-    // return true;
-    const usuarioIndex = db.users.findIndex(user => user._id.toHexString() === id);
-    if (usuarioIndex !== -1) {
-      db.users[usuarioIndex] = { ...db.users[usuarioIndex], ...usuarioActualizado };
-      return true;
+    const index = db.users.findIndex(user => user._id.toHexString() === id);
+    if (index !== -1) {
+      db.users[index] = { ...db.users[index], ...usuarioActualizado };
     }
-    return false;
+    return index !== -1;
   },
 };

mock-server/src/pods/user/user.rest-api.ts

@@ -41,18 +41,16 @@ userApi
   .get('/:id', async (req, res, next) => {
     try {
       const { id } = req.params;
-
       const user = await userRepository.getUserById(id);
-      console.log(mapUserFromModelToApi(user));
       res.send(mapUserFromModelToApi(user));
     } catch (error) {
       next(error);
     }
   })
   .put('/:id', async (req, res, next) => {
     try {
-      const usuarioActualizado: Usuario = req.body;
       const { id } = req.params;
+      const usuarioActualizado: Usuario = req.body;
       const modelUser = mapUserFromApiToModel(usuarioActualizado);
       const estaActualizado = await userRepository.actualizarUsuario(id, modelUser);
 

src/modules/users/edit-user-sheet/edit-user-sheet.pod.tsx

@@ -2,37 +2,31 @@ import React from 'react';
 import { Spinner } from '#common/components/';
 import { useUnidadRolList } from '#core/api/lookups/unidad-rol';
 import { EditUser } from './edit.component';
-import { getUserByIdRepository } from './edit.repository';
-import { Usuario, createEmptyUsuario } from './edit.vm';
-import { useUpdateUserMutation } from './edit.query.hook';
+import { Usuario } from './edit.vm';
+import { useLoadUser, useUpdateUserMutation } from './edit.query.hook';
 
 interface Props {
   id: string;
 }
 
 export const EditUserSheet: React.FC<Props> = props => {
-  const [usuario, setUsuario] = React.useState<Usuario>(createEmptyUsuario());
   const { id } = props;
-  const { unidadRolList, isLoading } = useUnidadRolList();
+  const { unidadRolList, isLoading: isLoadingUnidadRolList } = useUnidadRolList();
   const { saveUser, isPending } = useUpdateUserMutation();
+  const { usuario, isLoading: isLoadingUsuario } = useLoadUser(id);
 
   const handleSubmit = (usuarioActualizado: Usuario) => {
     saveUser(usuarioActualizado);
   };
 
-  React.useEffect(() => {
-    cargarDatos();
-  }, []);
-
-  const cargarDatos = async () => {
-    const usuario = await getUserByIdRepository(id);
-    setUsuario(usuario);
-  };
+  const isLoading = React.useMemo(
+    () => isLoadingUsuario || isLoadingUnidadRolList || isPending,
+    [isLoadingUsuario, isLoadingUnidadRolList, isPending]
+  );
 
   return (
     <>
-      <h3>User id: {id}</h3>
-      <Spinner isSpinnerShowing={isLoading || isPending} />
+      <Spinner isSpinnerShowing={isLoading} />
       <EditUser usuario={usuario} unidadRolList={unidadRolList} onSubmit={handleSubmit} />
     </>
   );

src/modules/users/edit-user-sheet/edit.mappers.ts

@@ -17,7 +17,7 @@ export const mapUserFromApiToVm = (user: apiModel.Usuario): viewModel.Usuario =>
 });
 
 export const mapUserFromVmToApi = (usuario: viewModel.Usuario): apiModel.Usuario => ({
-  id: usuario.unidad,
+  id: usuario.id,
   nombre: usuario.nombre,
   apellido: usuario.apellido,
   telefono: usuario.telefono,

src/modules/users/edit-user-sheet/edit.query.hook.ts

@@ -1,9 +1,9 @@
-import { useMutation } from '@tanstack/react-query';
-import { useNavigate } from '@tanstack/react-router';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { queryClient } from '#core/react-query';
-import { updateUser } from './edit.repository';
-import { Usuario } from './edit.vm';
+import { getUserByIdRepository, updateUser } from './edit.repository';
+import { createEmptyUsuario, Usuario } from './edit.vm';
 import { usersQueryKeys } from '../users-keys';
+import { useNavigate } from '@tanstack/react-router';
 
 interface UseSaveUserMutationResult {
   saveUser: (user: Usuario) => void;
@@ -15,20 +15,34 @@ export const useUpdateUserMutation = (): UseSaveUserMutationResult => {
 
   const { mutate: saveUser, isPending } = useMutation({
     mutationFn: (user: Usuario) => updateUser(user),
-    onSuccess: (_, variables) => {
+    onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [usersQueryKeys.user(variables.id), usersQueryKeys.userCollection()],
+        queryKey: usersQueryKeys.userCollection(),
       });
 
       navigate({ to: '/users' });
     },
-    onError: () => {
-      console.error('Error updating user');
-    },
   });
 
   return {
     saveUser,
     isPending,
   };
 };
+
+interface UseLoadUser {
+  usuario: Usuario;
+  isLoading: boolean;
+}
+
+export const useLoadUser = (id: string): UseLoadUser => {
+  const { data = createEmptyUsuario(), isLoading } = useQuery({
+    queryKey: usersQueryKeys.user(id),
+    queryFn: () => getUserByIdRepository(id),
+  });
+
+  return {
+    usuario: data,
+    isLoading,
+  };
+};

src/modules/users/edit-user-sheet/edit.repository.ts

@@ -12,7 +12,6 @@ export const getUserByIdRepository = async (id: string): Promise<viewModel.Usuar
 
 export const updateUser = async (usuarioActualizado: viewModel.Usuario): Promise<boolean> => {
   const usuarioMapeado = mapUserFromVmToApi(usuarioActualizado);
-  console.log(usuarioMapeado);
   const estaActualizado = await api.updateUser(usuarioMapeado);
 
   return estaActualizado;