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.
WatchItDev · Dec 4, 2024 · acc4dd0 · acc4dd0
1 parent b8961fd
commit acc4dd0
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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={{