From 659443316c0ac00cfb235954775b902732c3ac5b Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Fri, 18 Apr 2025 04:58:18 -0400
Subject: [PATCH] Refactor dialog components in ProfilePage to use markRaw for
 improved performance. Update EmailDialog to correctly handle email state and
 emit close events. ChangeSlugDialog now initializes newSlug with the
 creator's slug.

---
 frontend/src/views/profile/ProfilePage.vue    | 14 +++++-----
 .../src/views/profile/account/EmailDialog.vue | 26 +++++++++----------
 .../profile/creators/ChangeSlugDialog.vue     |  2 +-
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index e9fba3c..fddae1a 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/frontend/src/views/profile/ProfilePage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref} from 'vue';
+import {ref, markRaw} from 'vue';
 import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
 import {useUserProfileStore} from "@/stores/userProfileStore.js";
 import SocialsDialog from './creators/SocialsDialog.vue';
@@ -77,12 +77,12 @@ const dialogShown = ref(false);
 const currentComponent = ref('');
 
 const componentsMap = {
-  EmailDialog,
-  SocialsDialog,
-  ChangeSlugDialog,
-  ChangeNameDialog,
-  ChangeTitleDialog,
-  ChangeStripeIdDialog,
+  EmailDialog: markRaw(EmailDialog),
+  SocialsDialog: markRaw(SocialsDialog),
+  ChangeSlugDialog: markRaw(ChangeSlugDialog),
+  ChangeNameDialog: markRaw(ChangeNameDialog),
+  ChangeTitleDialog: markRaw(ChangeTitleDialog),
+  ChangeStripeIdDialog: markRaw(ChangeStripeIdDialog),
 };
 
 function requestCancel() {
diff --git a/frontend/src/views/profile/account/EmailDialog.vue b/frontend/src/views/profile/account/EmailDialog.vue
index 2a6c322..9370c89 100644
--- a/frontend/src/views/profile/account/EmailDialog.vue
+++ b/frontend/src/views/profile/account/EmailDialog.vue
@@ -35,33 +35,31 @@ const props = defineProps({
   creator: {
     required: true
   }
-})
+});
 
-const emits = defineEmits(['closeRequested'])
+const emits = defineEmits(['closeRequested']);
 
-const email = ref(props.creator.email)
+const email = ref(props.creator.email);
 
-const client = useClient()
+const client = useClient();
 const save = async () => {
   try {
     await client.post(
         `/api/creators/${props.creator.id}/email`,
         {
-          "facebookUrl": facebookUrl.value
-        })
+          email: email.value
+        });
 
-    props.creator.socials.facebookUrl = facebookUrl
-
-    emits('closeRequested')
+    props.creator.email = email.value;
+    emits('closeRequested');
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
-}
+};
 
 const cancel = () => {
-  emits('closeRequested')
-}
-
+  emits('closeRequested');
+};
 </script>
 
 
diff --git a/frontend/src/views/profile/creators/ChangeSlugDialog.vue b/frontend/src/views/profile/creators/ChangeSlugDialog.vue
index 32fd293..f9a1093 100644
--- a/frontend/src/views/profile/creators/ChangeSlugDialog.vue
+++ b/frontend/src/views/profile/creators/ChangeSlugDialog.vue
@@ -17,7 +17,7 @@ const creatorProfileStore = useCreatorProfileStore();
 const client = useClient();
 const t = useTranslations();
 
-const newSlug = ref('');
+const newSlug = ref(props.creator.slug);
 const slugReservationId = ref(undefined);
 const isOperationPending = ref(false);
 const errorMessage = ref('');