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

@@ -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,
+  EmailDialog: markRaw(EmailDialog),
-  SocialsDialog,
+  SocialsDialog: markRaw(SocialsDialog),
-  ChangeSlugDialog,
+  ChangeSlugDialog: markRaw(ChangeSlugDialog),
-  ChangeNameDialog,
+  ChangeNameDialog: markRaw(ChangeNameDialog),
-  ChangeTitleDialog,
+  ChangeTitleDialog: markRaw(ChangeTitleDialog),
-  ChangeStripeIdDialog,
+  ChangeStripeIdDialog: markRaw(ChangeStripeIdDialog),
 };
 
 function requestCancel() {

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
+    props.creator.email = email.value;
-
+    emits('closeRequested');
-    emits('closeRequested')
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
-}
+};
 
 const cancel = () => {
-  emits('closeRequested')
+  emits('closeRequested');
-}
+};
-
 </script>
 
 

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('');