From acc4dd06f639275034e08049ad4c084e061c13a4 Mon Sep 17 00:00:00 2001
From: Carlos Andres Perez Ubeda <descarlos2013@gmail.com>
Date: Wed, 4 Dec 2024 17:13:38 -0600
Subject: [PATCH] fix: enhance key usage and improve username handling

- src/sections/user/profile-header.tsx:
  - Append unique identifiers to keys in social, share, and partner links.
  - Add specific keys for Snackbar components to prevent remounting issues.
- src/sections/user/view/user-profile-view.tsx:
  - Include a unique key for Tabs based on profile ID for better rendering.
- src/components/loginModal/profileFormView.tsx:
  - Convert username input to lowercase before setting the field value, ensuring consistent casing.
---
 src/components/loginModal/profileFormView.tsx |  5 ++++-
 src/sections/user/profile-header.tsx          | 10 ++++++----
 src/sections/user/view/user-profile-view.tsx  |  1 +
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/loginModal/profileFormView.tsx b/src/components/loginModal/profileFormView.tsx
index 5682b494a..f8c2924bc 100644
--- a/src/components/loginModal/profileFormView.tsx
+++ b/src/components/loginModal/profileFormView.tsx
@@ -437,7 +437,10 @@ export const ProfileFormView: React.FC<ProfileFormProps> = ({ onSuccess, onCance
               placeholder="Enter a username"
               disabled={mode === 'update' || loading}
               value={formik.values.username}
-              onChange={formik.handleChange}
+              onChange={(event) => {
+                const lowercaseValue = event.target.value.toLowerCase();
+                formik.setFieldValue('username', lowercaseValue);
+              }}
               onBlur={formik.handleBlur}
               error={formik.touched.username && Boolean(formik.errors.username)}
               helperText={formik.touched.username ? formik.errors.username : 'e.g., johndoe123'}
diff --git a/src/sections/user/profile-header.tsx b/src/sections/user/profile-header.tsx
index c592b3c29..141b1c763 100644
--- a/src/sections/user/profile-header.tsx
+++ b/src/sections/user/profile-header.tsx
@@ -336,7 +336,7 @@ const ProfileHeader = ({ profile, children }: PropsWithChildren<ProfileHeaderPro
                   ({ key, icon }) =>
                     socialMediaUrls[key as keyof SocialMediaUrls] && (
                       <Button
-                        key={key}
+                        key={`link-${key}`}
                         component="a"
                         href={socialMediaUrls[key as keyof SocialMediaUrls]}
                         target="_blank"
@@ -575,9 +575,9 @@ const ProfileHeader = ({ profile, children }: PropsWithChildren<ProfileHeaderPro
                     Share link to this page
                   </Typography>
                   <Stack direction="row" spacing={2} justifyContent="center">
-                    {shareLinks.map((item) => (
+                    {shareLinks.map((item, index) => (
                       <Stack
-                        key={item.label}
+                        key={`share-link-item-${index}`}
                         direction="column"
                         sx={{
                           display: 'flex',
@@ -727,7 +727,7 @@ const ProfileHeader = ({ profile, children }: PropsWithChildren<ProfileHeaderPro
               }}>
                 {
                   ['Watchit'].map((partner, index) => (
-                    <StyledBoxGradient color1={randomColors[randomColors.length - index]} color2={randomColors[index]} >
+                    <StyledBoxGradient key={`partner-${index}`} color1={randomColors[randomColors.length - index]} color2={randomColors[index]} >
                       <Typography style={{ marginRight: 5, fontWeight: 'bold' }} variant="caption">
                         {partner}
                       </Typography>
@@ -747,6 +747,7 @@ const ProfileHeader = ({ profile, children }: PropsWithChildren<ProfileHeaderPro
 
       {/* Snackbar for error messages */}
       <Snackbar
+        key={`error-${errorMessage}`}
         open={!!errorMessage}
         autoHideDuration={6000}
         onClose={() => setErrorMessage('')}
@@ -760,6 +761,7 @@ const ProfileHeader = ({ profile, children }: PropsWithChildren<ProfileHeaderPro
 
       {/* Snackbar for success messages */}
       <Snackbar
+        key={`success-${successMessage}`}
         open={!!successMessage}
         autoHideDuration={6000}
         onClose={() => setSuccessMessage('')}
diff --git a/src/sections/user/view/user-profile-view.tsx b/src/sections/user/view/user-profile-view.tsx
index 46ddbc8cf..71cbcfa1e 100644
--- a/src/sections/user/view/user-profile-view.tsx
+++ b/src/sections/user/view/user-profile-view.tsx
@@ -67,6 +67,7 @@ const UserProfileView = ({ id }: any) => {
     <Container maxWidth={settings.themeStretch ? false : 'lg'}>
       <ProfileHeader profile={profile as any}>
         <Tabs
+          key={`tabs-${profile?.id}`}
           value={currentTab}
           onChange={handleChangeTab}
           sx={{