From 3c15efa51276ce9b0f16c07659da9203bd79a978 Mon Sep 17 00:00:00 2001
From: Yonas <yonasseyoum24@gmail.com>
Date: Sun, 12 Nov 2023 13:22:26 +0300
Subject: [PATCH 1/2] Change react-router-dom Link to mui Link

---
 .../webapp/src/Pages/User/components/detailHolder.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/applications/webapp/src/Pages/User/components/detailHolder.tsx b/applications/webapp/src/Pages/User/components/detailHolder.tsx
index 662ef89..5cf9f1a 100644
--- a/applications/webapp/src/Pages/User/components/detailHolder.tsx
+++ b/applications/webapp/src/Pages/User/components/detailHolder.tsx
@@ -20,12 +20,12 @@ import {
   TextField,
   Button,
   Box,
+  Link,
 } from "@mui/material";
 import { styles } from "../util/style";
 import { useMutation } from "@apollo/client";
 import { EditUserMutation } from "../../../hooks/mutation";
 import { useCardContext, useUserContext } from "../context";
-import { Link } from "react-router-dom";
 import { CHANGE_PASSWORD_URL } from "../util/constants";
 
 export default function DetailHolder() {
@@ -140,7 +140,7 @@ export default function DetailHolder() {
               <Button variant="contained" onClick={updateUser}>
                 Update
               </Button>
-              <Link to={CHANGE_PASSWORD_URL}>
+              <Link href={CHANGE_PASSWORD_URL}>
                 <Button variant="contained" color="warning">
                   Change Password
                 </Button>

From fe0af44872c74d943268a1f8e4f4bcb8c4316a52 Mon Sep 17 00:00:00 2001
From: Yonas <yonasseyoum24@gmail.com>
Date: Sun, 12 Nov 2023 14:16:27 +0300
Subject: [PATCH 2/2] remove code smell

---
 .../Pages/User/components/detailHolder.tsx    | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/applications/webapp/src/Pages/User/components/detailHolder.tsx b/applications/webapp/src/Pages/User/components/detailHolder.tsx
index 5cf9f1a..bf67ae9 100644
--- a/applications/webapp/src/Pages/User/components/detailHolder.tsx
+++ b/applications/webapp/src/Pages/User/components/detailHolder.tsx
@@ -44,7 +44,7 @@ export default function DetailHolder() {
 
   const [editUser] = useMutation(EditUserMutation);
 
-  async function updateUser() {
+  const updateUser = React.useCallback(async () => {
     try {
       const { data } = await editUser({
         variables: {
@@ -58,19 +58,21 @@ export default function DetailHolder() {
     }
     setEditable(!editable);
     setElevation(0);
-  }
-
-  function firstNameChanged(
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) {
-    return setFirstname(event.target.value);
-  }
-
-  function lastNameChanged(
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) {
-    return setLastname(event.target.value);
-  }
+  }, [firstname, lastname, editUser, setEditable, setElevation]);
+
+  const firstNameChanged = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      return setFirstname(event.target.value);
+    },
+    [setFirstname],
+  );
+
+  const lastNameChanged = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      return setLastname(event.target.value);
+    },
+    [setLastname],
+  );
 
   return (
     <Card elevation={card.elevation} sx={style.card}>