From fd4b3d71be039975b9d2fe58521f5ba15ee4b6e8 Mon Sep 17 00:00:00 2001
From: Alexandre Titeux <alexandretiteux@gmail.com>
Date: Tue, 19 Sep 2023 11:10:36 +0200
Subject: [PATCH] :goal_net: Add error handling for GRPC

---
 src/components/dashboard/UsersManagement.tsx  | 222 +++++++++++-------
 .../backend/userService/useInviteUserRPC.tsx  |  13 +-
 src/pages/ProfilePage.tsx                     | 147 +++++++-----
 src/providers/AuthProvider.tsx                | 139 +++++------
 4 files changed, 303 insertions(+), 218 deletions(-)

diff --git a/src/components/dashboard/UsersManagement.tsx b/src/components/dashboard/UsersManagement.tsx
index f7bb435..5a59e04 100644
--- a/src/components/dashboard/UsersManagement.tsx
+++ b/src/components/dashboard/UsersManagement.tsx
@@ -1,12 +1,25 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from "react";
 import {
-  Typography, TextField, Button, Grid, List, ListItem, ListItemText, Box, Select, MenuItem, Card, CardContent, Snackbar, Alert, IconButton
-} from '@mui/material';
-import useGetUsersRPC from '@hooks/backend/userService/useGetUsersRPC';
-import useInviteUserRPC from '@hooks/backend/userService/useInviteUserRPC';
-import useChangeRightsRPC from '@hooks/backend/userService/useChangeRightsRPC';
-import useDeleteUserRPC from '@hooks/backend/userService/useDeleteUserRPC';
-import DeleteIcon from '@mui/icons-material/Delete';
+  Alert,
+  Box,
+  Button,
+  Grid,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  MenuItem,
+  Select,
+  Snackbar,
+  TextField,
+  Typography,
+} from "@mui/material";
+import useGetUsersRPC from "@hooks/backend/userService/useGetUsersRPC";
+import useInviteUserRPC from "@hooks/backend/userService/useInviteUserRPC";
+import useChangeRightsRPC from "@hooks/backend/userService/useChangeRightsRPC";
+import useDeleteUserRPC from "@hooks/backend/userService/useDeleteUserRPC";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { RpcError } from "@protobuf-ts/runtime-rpc";
 
 interface User {
   email: string;
@@ -16,13 +29,17 @@ interface User {
 }
 
 const UsersManagement: React.FC = () => {
-  const [selectedRights, setSelectedRights] = useState<Record<string, string>>({});
+  const [selectedRights, setSelectedRights] = useState<Record<string, string>>(
+    {},
+  );
   const [email, setEmail] = useState<string>("");
   const [users, setUsers] = useState<User[]>([]);
 
   const [open, setOpen] = React.useState(false);
-  const [alertText, setAlertText] = React.useState('');
-  const [alertSeverity, setAlertSeverity] = useState<'success' | 'error'>('success');
+  const [alertText, setAlertText] = React.useState("");
+  const [alertSeverity, setAlertSeverity] = useState<"success" | "error">(
+    "success",
+  );
 
   const { getUsers } = useGetUsersRPC();
   const { inviteUser } = useInviteUserRPC();
@@ -32,16 +49,18 @@ const UsersManagement: React.FC = () => {
   const myButton = (email: string, right: boolean) => (
     <>
       <Select
-        value={selectedRights[email] || (right ? "Administrateur" : "Utilisateur")}
-        onChange={(e) => {
+        value={
+          selectedRights[email] || (right ? "Administrateur" : "Utilisateur")
+        }
+        onChange={async (e) => {
           setSelectedRights((prevSelectedRights) => ({
             ...prevSelectedRights,
             [email]: e.target.value as string,
           }));
-          const admin = e.target.value === "Administrateur";  // Cette ligne transforme la valeur en un booléen
-          changeRightsClick(email, admin);
+          const admin = e.target.value === "Administrateur"; // Cette ligne transforme la valeur en un booléen
+          await changeRightsClick(email, admin);
         }}
-        sx={{ width: '150px' }}
+        sx={{ width: "150px" }}
         label="Changer les droitas"
       >
         <MenuItem value="Utilisateur">Utilisateur</MenuItem>
@@ -51,62 +70,79 @@ const UsersManagement: React.FC = () => {
   );
 
   const deleteButton = (email: string) => (
-    <IconButton edge="end" sx={{ marginLeft: '3px' }} aria-label="delete" onClick={() => { deleteUserClick(email); }}>
-        <DeleteIcon color="error" />
-      </IconButton>
-  )
+    <IconButton
+      edge="end"
+      sx={{ marginLeft: "3px" }}
+      aria-label="delete"
+      onClick={() => {
+        deleteUserClick(email);
+      }}
+    >
+      <DeleteIcon color="error" />
+    </IconButton>
+  );
 
   const changeRightsClick = async (email: string, admin: boolean) => {
     try {
-      changeRights(email, admin);
+      await changeRights(email, admin);
     } catch (error: any) {
-      setAlertText("Une erreur s'est produite lors du changement de droit de l'utilisateur.");
-      setAlertSeverity('error');
+      setAlertText(
+        "Une erreur s'est produite lors du changement de droit de l'utilisateur.",
+      );
+      setAlertSeverity("error");
       setOpen(true);
     }
   };
 
   const deleteUserClick = async (email: string) => {
     try {
-      deleteUser(email);
-      fetchUsers();
-    } catch (error: any) {
-      setAlertText("Une erreur s'est produite lors de la suppression de l'utilisateur.");
-      setAlertSeverity('error');
+      await deleteUser(email);
+      await fetchUsers();
+    } catch (error) {
+      setAlertText(
+        "Une erreur s'est produite lors de la suppression de l'utilisateur.",
+      );
+      setAlertSeverity("error");
       setOpen(true);
     }
   };
 
   const inviteUserClick = async (email: string) => {
     try {
-      inviteUser(email);
+      await inviteUser(email);
       setAlertText("Utilisateur invité avec succès!");
-      setAlertSeverity('success');
+      setAlertSeverity("success");
       setOpen(true);
-      fetchUsers();
-    } catch (error: any) {
-      if (error.toString().toLowerCase().includes("exists")) {
-        setAlertText("Un compte avec cet email existe déjà.");
-      } else {
-        setAlertText("Une erreur s'est produite lors de l'invitation de l'utilisateur.");
-      }
-      setAlertSeverity('error');
+      await fetchUsers();
+    } catch (error) {
+      setAlertSeverity("error");
       setOpen(true);
+      if (error instanceof RpcError) {
+        if (error.code == "ALREADY_EXISTS")
+          return setAlertText("Un compte avec cet email existe déjà.");
+      }
+      setAlertText(
+        "Une erreur s'est produite lors de l'invitation de l'utilisateur.",
+      );
     }
   };
 
   const fetchUsers = async () => {
     try {
-        const fetchedUsers = (await getUsers()).map((userString: string) => JSON.parse(userString) as User);
-        setUsers(fetchedUsers);
-
-        const initialRights: Record<string, string> = {};
-        fetchedUsers.forEach(user => {
-            initialRights[user.email] = user.admin ? "Administrateur" : "Utilisateur";
-        });
-        setSelectedRights(initialRights);
+      const fetchedUsers = (await getUsers()).map(
+        (userString: string) => JSON.parse(userString) as User,
+      );
+      setUsers(fetchedUsers);
+
+      const initialRights: Record<string, string> = {};
+      fetchedUsers.forEach((user) => {
+        initialRights[user.email] = user.admin
+          ? "Administrateur"
+          : "Utilisateur";
+      });
+      setSelectedRights(initialRights);
     } catch (error) {
-        console.error("Erreur lors de la récupération des utilisateurs:", error);
+      console.error("Erreur lors de la récupération des utilisateurs:", error);
     }
   };
 
@@ -121,31 +157,34 @@ const UsersManagement: React.FC = () => {
   return (
     <Grid container direction="column" spacing={2}>
       <Grid item>
-        <Typography variant="h4">
-          Gestion des utilisateurs
-        </Typography>
+        <Typography variant="h4">Gestion des utilisateurs</Typography>
       </Grid>
       <Grid item>
-        <Typography variant="h6" mb={2}>Inviter un nouvel utilisateur</Typography>
+        <Typography variant="h6" mb={2}>
+          Inviter un nouvel utilisateur
+        </Typography>
         <Grid container spacing={2} direction="column">
-            <Grid item>
-                <TextField
-                    type="email"
-                    label="Email nouvel utilisateur"
-                    variant="outlined"
-                    fullWidth
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                />
-            </Grid>
-            <Grid item>
-                <Button 
-                    variant="contained" 
-                    color="primary"
-                    onClick={() => { inviteUserClick(email) }}>
-                    Envoyer l'invitation
-                </Button>
-            </Grid>
+          <Grid item>
+            <TextField
+              type="email"
+              label="Email nouvel utilisateur"
+              variant="outlined"
+              fullWidth
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </Grid>
+          <Grid item>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={() => {
+                inviteUserClick(email);
+              }}
+            >
+              Envoyer l'invitation
+            </Button>
+          </Grid>
         </Grid>
       </Grid>
       <Grid item>
@@ -156,31 +195,37 @@ const UsersManagement: React.FC = () => {
       <Grid item xs sx={{ marginBottom: 0.4 }}>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            alignItems: 'stretch',
-            height: '100%',
-            maxHeight: 'calc(100vh - 440px)', // Set max height
-            overflow: 'auto',
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            alignItems: "stretch",
+            height: "100%",
+            maxHeight: "calc(100vh - 440px)", // Set max height
+            overflow: "auto",
           }}
         >
           <List>
             {users.map((user, index) => (
-              <ListItem key={index} sx={{
-                my: 1,
-                px: 2,
-                bgcolor: index % 2 === 0 ? 'action.hover' : 'background.default',
-                borderRadius: 1
-              }}>
+              <ListItem
+                key={index}
+                sx={{
+                  my: 1,
+                  px: 2,
+                  bgcolor:
+                    index % 2 === 0 ? "action.hover" : "background.default",
+                  borderRadius: 1,
+                }}
+              >
                 <ListItemText
                   primary={`${user.email}`}
-                  secondary={`${user.activated ? "Activé" : "En attente d'activation"}`}
+                  secondary={`${
+                    user.activated ? "Activé" : "En attente d'activation"
+                  }`}
                 />
-                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
                   {myButton(user.email, user.admin)}
                 </Box>
-                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
                   {deleteButton(user.email)}
                 </Box>
               </ListItem>
@@ -189,13 +234,16 @@ const UsersManagement: React.FC = () => {
         </Box>
       </Grid>
       <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity={alertSeverity} sx={{ width: '100%' }}>
+        <Alert
+          onClose={handleClose}
+          severity={alertSeverity}
+          sx={{ width: "100%" }}
+        >
           {alertText}
         </Alert>
       </Snackbar>
     </Grid>
   );
-
 };
 
 export default UsersManagement;
diff --git a/src/hooks/backend/userService/useInviteUserRPC.tsx b/src/hooks/backend/userService/useInviteUserRPC.tsx
index c114239..8970a57 100644
--- a/src/hooks/backend/userService/useInviteUserRPC.tsx
+++ b/src/hooks/backend/userService/useInviteUserRPC.tsx
@@ -1,22 +1,19 @@
 import React from "react";
 import { transport } from "../../../environment";
-import { UserClient } from '@protos/user.client';
-import { InviteUserRequest } from '@protos/user';
+import { UserClient } from "@protos/user.client";
+import { InviteUserRequest } from "@protos/user";
 
 const useInviteUserRPC = () => {
   const client = React.useMemo(() => new UserClient(transport), []);
 
-  const inviteUser = React.useCallback( async (email: string) => {
+  const inviteUser = React.useCallback(async (email: string) => {
     const request: InviteUserRequest = InviteUserRequest.create();
     request.email = email;
     request.admin = true;
     await client.inviteUser(request, {});
   }, []);
 
-  return {
-    inviteUser,
-  };
-
+  return { inviteUser };
 };
 
-export default useInviteUserRPC;
\ No newline at end of file
+export default useInviteUserRPC;
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index d839dbe..d4cbb38 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -1,76 +1,109 @@
-import React from 'react';
-import { TextField, Box, Button, Paper, Typography } from '@mui/material';
-import useChangeMailRPC from '@hooks/backend/userService/useChangeMailRPC';
-import useResetPasswordRPC from '@hooks/backend/userService/useResetPasswordRPC';
+import React from "react";
+import { TextField, Box, Button, Paper, Typography } from "@mui/material";
+import useChangeMailRPC from "@hooks/backend/userService/useChangeMailRPC";
+import useResetPasswordRPC from "@hooks/backend/userService/useResetPasswordRPC";
 import { useTranslation } from "react-i18next";
 
 const ProfilePage = () => {
   const { changeMail } = useChangeMailRPC();
   const { resetPassword } = useResetPasswordRPC();
-  const [email, setEmail] = React.useState<string>('');
-  const [password, setPassword] = React.useState<string>('');
+  const [email, setEmail] = React.useState<string>("");
+  const [password, setPassword] = React.useState<string>("");
   const [submitted, setSubmitted] = React.useState<boolean>(false);
   const [submittedEmail, setSubmittedEmail] = React.useState<boolean>(false);
   const { t } = useTranslation();
 
-  const changePassword = React.useCallback(async (e) => {
-    e.preventDefault();
+  const changePassword = React.useCallback(
+    async (e) => {
+      e.preventDefault();
 
-    try {
-      await resetPassword(password);
-      setSubmitted(true);
-    } catch (error) {
-      console.error(error);
-    }
-  }, [password, setSubmitted]);
-
-  const changeEmail = React.useCallback(async (e) => {
-    e.preventDefault();
+      try {
+        await resetPassword(password);
+        setSubmitted(true);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [password, setSubmitted],
+  );
 
-    try {
-      await changeMail(email);
-      setSubmittedEmail(true);
-    } catch (error) {
-      console.error(error);
-    }
-  }, [email, setSubmitted]);
+  const changeEmail = React.useCallback(
+    async (e) => {
+      e.preventDefault();
+      try {
+        await changeMail(email);
+        setSubmittedEmail(true);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [email, setSubmitted],
+  );
 
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 'calc(100vh - 110px)'}}>
-      <Paper sx={{ p: 2, width: '25em' }}>
-        <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 4 }} onSubmit={changePassword}>
-          <Typography variant="h6">{t('profilePage.passwordChange')}</Typography>
-          {submitted && (<Typography>{t('profilePage.resetEmailSent')}</Typography>)
-          }
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "calc(100vh - 110px)",
+      }}
+    >
+      <Paper sx={{ p: 2, width: "25em" }}>
+        <Box
+          component="form"
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            marginBottom: 4,
+          }}
+          onSubmit={changePassword}
+        >
+          <Typography variant="h6">
+            {t("profilePage.passwordChange")}
+          </Typography>
+          {submitted && (
+            <Typography>{t("profilePage.resetEmailSent")}</Typography>
+          )}
           {!submitted && (
-          <>
-            <TextField
-              type="password"
-              name='password'
-              label={t('profilePage.newPassword')}
-              value={password}
-              required
-              onChange={(e) => setPassword(e.target.value)}
-            />
-            <Button type="submit" variant="contained" color="primary">{t('profilePage.resetPassword')}</Button>
-          </>
-        )}
+            <>
+              <TextField
+                type="password"
+                name="password"
+                label={t("profilePage.newPassword")}
+                value={password}
+                required
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <Button type="submit" variant="contained" color="primary">
+                {t("profilePage.resetPassword")}
+              </Button>
+            </>
+          )}
         </Box>
-        <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }} onSubmit={changeEmail}>
-          <Typography variant="h6">{t('profilePage.emailChange')}</Typography>
-          {submittedEmail && (<Typography>{t('profilePage.emailUpdated')}</Typography>)
-          }
+        <Box
+          component="form"
+          sx={{ display: "flex", flexDirection: "column", gap: 2 }}
+          onSubmit={changeEmail}
+        >
+          <Typography variant="h6">{t("profilePage.emailChange")}</Typography>
+          {submittedEmail && (
+            <Typography>{t("profilePage.emailUpdated")}</Typography>
+          )}
           {!submittedEmail && (
-          <>
-          <TextField
-            name="email"
-            label={t('profilePage.newEmail')}
-            value = {email}
-            required
-            onChange={(e) => setEmail(e.target.value)}
-          />
-          <Button type="submit" variant="contained" color="primary">{t('profilePage.validate')}</Button>
-          </>
+            <>
+              <TextField
+                name="email"
+                label={t("profilePage.newEmail")}
+                value={email}
+                required
+                onChange={(e) => setEmail(e.target.value)}
+              />
+              <Button type="submit" variant="contained" color="primary">
+                {t("profilePage.validate")}
+              </Button>
+            </>
           )}
         </Box>
       </Paper>
diff --git a/src/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
index a49544c..c6be4a0 100644
--- a/src/providers/AuthProvider.tsx
+++ b/src/providers/AuthProvider.tsx
@@ -1,72 +1,79 @@
-import React, { useState, useEffect, ReactNode } from 'react';
-import { useHistory } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import AuthContext from '@contexts/AuthContext'
-import useSignInRPC from '@hooks/backend/userService/useSignInRPC';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+import { toast } from "react-toastify";
+import AuthContext from "@contexts/AuthContext";
+import useSignInRPC from "@hooks/backend/userService/useSignInRPC";
+import { useTranslation } from "react-i18next";
 
 export const AuthProvider = ({ children }) => {
-    const { signIn } = useSignInRPC();
-    const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-    const history = useHistory();
-    const [token, setToken] = React.useState<string | null>(null);
-    const { t } = useTranslation();
-  
-    useEffect(() => {
-      const storedToken = localStorage.getItem('token');
+  const { signIn } = useSignInRPC();
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const history = useHistory();
+  const [token, setToken] = React.useState<string | null>(null);
+  const { t } = useTranslation();
 
-      if (storedToken) {
-        setToken(storedToken);
-        setIsLoggedIn(true);
-      }
-    }, []);
-  
-    const login = React.useCallback(async (email: string, password: string) => {
-      try {
-        const token = await signIn(email, password);
-        localStorage.setItem('token', token);
-        setToken(token);
-        setIsLoggedIn(true);
-        history.push('/');
-      } catch (error) {
-        throw error;
-      }
-    }, []);
+  useEffect(() => {
+    const storedToken = localStorage.getItem("token");
 
-    const loginWithToken = React.useCallback(async (token: string) => {
-      try {
-        localStorage.setItem('token', token);
-        console.log(token);
-        setToken(token);
-        setIsLoggedIn(true);
-        history.push('/');
-      } catch (error) {
-        throw error;
-      }
-    }, []);
-  
-    const logout = React.useCallback(async () => {
-      try {
-        localStorage.removeItem('token');
-        setToken(null);
-        setIsLoggedIn(false);
+    if (storedToken) {
+      setToken(storedToken);
+      setIsLoggedIn(true);
+    }
+  }, []);
 
-        toast.success(t('AuthContext.logout'), {
-          position: toast.POSITION.BOTTOM_CENTER
-        });
+  const login = React.useCallback(async (email: string, password: string) => {
+    try {
+      const token = await signIn(email, password);
+      localStorage.setItem("token", token);
+      setToken(token);
+      setIsLoggedIn(true);
+      history.push("/");
+    } catch (error) {
+      // if (error instanceof RpcError) {
+      //   if (error.code === "UNAUTHENTICATED")
+      //     toast.error("Mauvais email ou mots de passe.", {
+      //       position: toast.POSITION.BOTTOM_CENTER,
+      //     });
+      // }
+      throw error;
+    }
+  }, []);
 
-        setTimeout(() => {
-          history.push('/login');
-        }, 2000);
-      }
-      catch (error) {
-        throw error;
-      }
-    }, []);
-  
-    return (
-      <AuthContext.Provider value={{ isLoggedIn, token, login, loginWithToken, logout }}>
-        {children}
-      </AuthContext.Provider>
-    );
-  };
+  const loginWithToken = React.useCallback(async (token: string) => {
+    try {
+      localStorage.setItem("token", token);
+      console.log(token);
+      setToken(token);
+      setIsLoggedIn(true);
+      history.push("/");
+    } catch (error) {
+      throw error;
+    }
+  }, []);
+
+  const logout = React.useCallback(async () => {
+    try {
+      localStorage.removeItem("token");
+      setToken(null);
+      setIsLoggedIn(false);
+
+      toast.success(t("AuthContext.logout"), {
+        position: toast.POSITION.BOTTOM_CENTER,
+      });
+
+      setTimeout(() => {
+        history.push("/login");
+      }, 2000);
+    } catch (error) {
+      throw error;
+    }
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{ isLoggedIn, token, login, loginWithToken, logout }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};