INTERMEDIO - feature/#73-Funcionalidad-reset-password-en-Editar-Usuario-a-mock-server

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

@@ -27,4 +27,11 @@ export const userRepository = {
     }
     return index !== -1;
   },
+  resetPassword: async (id: string, nuevaContraseña: string): Promise<boolean> => {
+    const index = db.users.findIndex(user => user._id.toHexString() === id);
+    if (index !== -1) {
+      db.users[index].contraseña = nuevaContraseña;
+    }
+    return index !== -1;
+  },
 };

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

@@ -63,4 +63,29 @@ userApi
     } catch (error) {
       next(error);
     }
+  })
+  // TODO: Implementar la lógica para actualizar el password
+  .put('/resetPassword/:id', async (req, res, next) => {
+    try {
+      //const { id } = req.params;
+      //const { contraseña } = req.body;
+      // comporabar si existe el usuario sino mandamos un erro un 404
+      //const estaActualizado = await userRepository.resetPassword(id, contraseña);
+      // if (usaarioexiste) {
+      //   await userRepository.resetPassword(id, password);
+      // } else {
+      //   res.sendStatus(404);
+      // }
+      //res.status(201).send(estaActualizado);
+      const { id } = req.params;
+      const { contraseña } = req.body;
+      const contraseñaEstaActualizada = await userRepository.resetPassword(id, contraseña);
+      if (contraseñaEstaActualizada) {
+        res.status(200).send(contraseñaEstaActualizada);
+      } else {
+        res.sendStatus(404);
+      }
+    } catch (error) {
+      next(error);
+    }
   });

src/common/components/index.ts

@@ -4,3 +4,4 @@ export * from './sidebar-menu';
 export * from './navigation-button';
 export * from './spinner';
 export * from './form';
+export * from './snackbar';

src/common/components/snackbar/index.ts

@@ -0,0 +1,4 @@
+export * from './snackbar.component';
+export { SnackbarProvider } from './snackbar.context';
+export { useSnackbarContext } from './snackbar.hook';
+export * from './snackbar.vm';

src/common/components/snackbar/snackbar.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';
+import SnackbarContent from '@mui/material/SnackbarContent';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { useSnackbar } from './snackbar.context';
+import * as classes from './snackbar.styles';
+
+interface Props {
+  autoHideDuration?: number;
+  position?: SnackbarOrigin;
+}
+
+export const SnackbarComponent: React.FunctionComponent<Props> = props => {
+  const { position = { horizontal: 'right', vertical: 'top' }, autoHideDuration = 3000 } = props;
+  const { open, onClose, options } = useSnackbar();
+
+  return (
+    <Snackbar anchorOrigin={position} open={open} autoHideDuration={autoHideDuration} onClose={onClose}>
+      <SnackbarContent
+        className={classes[options.variant]}
+        classes={{
+          root: classes.snackbarContent,
+          message: classes.message,
+        }}
+        message={options.message}
+        action={[
+          <IconButton key="close" color="inherit" onClick={onClose}>
+            <CloseIcon />
+          </IconButton>,
+        ]}
+      />
+    </Snackbar>
+  );
+};

src/common/components/snackbar/snackbar.context.tsx

@@ -0,0 +1,51 @@
+import React, { PropsWithChildren } from 'react';
+import { SnackbarOptions } from './snackbar.vm';
+import { SnackbarCloseReason } from '@mui/material';
+
+interface Context {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onClose: (event?: React.SyntheticEvent | Event, reason?: SnackbarCloseReason) => void;
+  options: SnackbarOptions;
+  setOptions: (options: SnackbarOptions) => void;
+}
+
+export const SnackbarContext = React.createContext<Context | null>(null);
+
+export const SnackbarProvider: React.FC<PropsWithChildren> = props => {
+  const { children } = props;
+  const [open, setOpen] = React.useState(false);
+  const [options, setOptions] = React.useState<SnackbarOptions>({
+    message: '',
+    variant: 'success',
+  });
+
+  const handleClose = (_?: React.SyntheticEvent | Event, reason?: SnackbarCloseReason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpen(false);
+  };
+
+  return (
+    <SnackbarContext.Provider
+      value={{
+        open,
+        setOpen,
+        onClose: handleClose,
+        options,
+        setOptions,
+      }}
+    >
+      {children}
+    </SnackbarContext.Provider>
+  );
+};
+
+export const useSnackbar = () => {
+  const context = React.useContext(SnackbarContext);
+  if (!context) {
+    throw new Error('useSnackbar must be used within a SnackbarProvider');
+  }
+  return context;
+};

src/common/components/snackbar/snackbar.hook.tsx

@@ -0,0 +1,13 @@
+import { useSnackbar } from './snackbar.context';
+import { Variant } from './snackbar.vm';
+
+export const useSnackbarContext = () => {
+  const { setOptions, setOpen } = useSnackbar();
+
+  return {
+    showMessage: (message: string, variant: Variant) => {
+      setOptions({ message, variant });
+      setOpen(true);
+    },
+  };
+};

src/common/components/snackbar/snackbar.styles.ts

@@ -0,0 +1,35 @@
+import { css } from '@emotion/css';
+import { theme } from '#core/theme';
+
+export const success = css`
+  &.MuiSnackbarContent-root {
+    background-color: ${theme.palette.success.main};
+  }
+`;
+
+export const error = css`
+  &.MuiSnackbarContent-root {
+    background-color: ${theme.palette.error.dark};
+  }
+`;
+
+export const info = css`
+  &.MuiSnackbarContent-root {
+    background-color: ${theme.palette.info.main};
+  }
+`;
+
+export const warning = css`
+  &.MuiSnackbarContent-root {
+    background-color: ${theme.palette.warning.main};
+  }
+`;
+
+export const snackbarContent = css`
+  align-items: flex-start;
+`;
+
+export const message = css`
+  align-self: center;
+  white-space: pre;
+`;

src/common/components/snackbar/snackbar.vm.ts

@@ -0,0 +1,6 @@
+export type Variant = 'success' | 'info' | 'warning' | 'error';
+
+export interface SnackbarOptions {
+  message: string;
+  variant: Variant;
+}

src/core/notification/index.ts

@@ -0,0 +1,2 @@
+export * from './notification.provider';
+export * from './notification.hooks';

src/core/notification/notification.hooks.ts

@@ -0,0 +1,16 @@
+import { Variant, useSnackbarContext } from '#common/components';
+
+export type Notify = {
+  notify: (message: string, variant?: Variant) => void;
+};
+
+export const useNotification = (): Notify => {
+  const { showMessage } = useSnackbarContext();
+  const notify = (message: string, variant: Variant = 'error') => {
+    showMessage(message, variant);
+  };
+
+  return {
+    notify,
+  };
+};

src/core/notification/notification.provider.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SnackbarComponent, SnackbarProvider } from '#common/components';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const NotificationProvider: React.FC<Props> = props => {
+  const { children } = props;
+
+  return (
+    <SnackbarProvider>
+      <SnackbarComponent />
+      {children}
+    </SnackbarProvider>
+  );
+};

src/main.tsx

@@ -6,6 +6,7 @@ import { RouterProvider } from '@tanstack/react-router';
 import { queryClient } from './core/react-query';
 import { router } from './core/router';
 import { ThemeProvider } from './core/theme';
+import { NotificationProvider } from './core/notification';
 
 const App = () => {
   return <RouterProvider router={router} />;
@@ -15,8 +16,10 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <ThemeProvider>
-        <App />
-        <ReactQueryDevtools />
+        <NotificationProvider>
+          <App />
+          <ReactQueryDevtools />
+        </NotificationProvider>
       </ThemeProvider>
     </QueryClientProvider>
   </StrictMode>

src/modules/users/edit-reset-password/api/edit-reset-password.api.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+export const updatePassword = async (password: string, id: string): Promise<boolean> => {
+  const response = await axios.put<boolean>(`/api/user/resetPassword/${id}`, { contraseña: password });
+
+  return response.data;
+};

src/modules/users/edit-reset-password/api/index.ts

@@ -0,0 +1 @@
+export * from './edit-reset-password.api';

src/modules/users/edit-reset-password/components/confirm-reset-dialog.component.tsx

@@ -5,33 +5,39 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
+import { Spinner } from '#common/components/spinner/spinner.component.tsx';
 
 interface Props {
   open: boolean;
   handleClose: () => void;
+  onConfirm: () => void;
+  isLoading: boolean;
 }
 
 export const ConfirmResetDialog: React.FC<Props> = props => {
-  const { open, handleClose } = props;
+  const { open, handleClose, onConfirm, isLoading } = props;
 
   return (
-    <React.Fragment>
-      <Dialog open={open} onClose={handleClose}>
-        <DialogTitle id="alert-dialog-title">
-          {'¿Está seguro que desea resetear la contraseña de este usuario?'}
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
-            Si está seguro de cambiar la contraseña presiona CONFIRMAR, de lo contrario presiona CANCELAR
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose}>Cancelar</Button>
-          <Button onClick={handleClose} variant="contained" autoFocus>
-            Confirmar
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </React.Fragment>
+    <>
+      <Spinner isSpinnerShowing={isLoading} />
+      <React.Fragment>
+        <Dialog open={open} onClose={handleClose}>
+          <DialogTitle id="alert-dialog-title">
+            {'¿Está seguro que desea resetear la contraseña de este usuario?'}
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              Si está seguro de cambiar la contraseña presiona CONFIRMAR, de lo contrario presiona CANCELAR
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose}>Cancelar</Button>
+            <Button onClick={onConfirm} variant="contained" autoFocus>
+              Confirmar
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    </>
   );
 };