Renames SocialNetworks to Socials

src/views/Profile/Dialogs/PageInformations/Socials.vue

@@ -10,14 +10,14 @@ const props = defineProps({
 
 const emits = defineEmits(['closeRequested'])
 
-const facebookUrl = ref(props.creator.socialNetworks.facebookUrl)
-const instagramUrl = ref(props.creator.socialNetworks.instagramUrl)
-const linkedInUrl = ref(props.creator.socialNetworks.linkedInUrl)
-const redditUrl = ref(props.creator.socialNetworks.redditUrl)
-const tikTokUrl = ref(props.creator.socialNetworks.tikTokUrl)
-const websiteUrl = ref(props.creator.socialNetworks.websiteUrl)
-const xUrl = ref(props.creator.socialNetworks.xUrl)
-const youtubeUrl = ref(props.creator.socialNetworks.youtubeUrl)
+const facebookUrl = ref(props.creator.socials.facebookUrl)
+const instagramUrl = ref(props.creator.socials.instagramUrl)
+const linkedInUrl = ref(props.creator.socials.linkedInUrl)
+const redditUrl = ref(props.creator.socials.redditUrl)
+const tikTokUrl = ref(props.creator.socials.tikTokUrl)
+const websiteUrl = ref(props.creator.socials.websiteUrl)
+const xUrl = ref(props.creator.socials.xUrl)
+const youtubeUrl = ref(props.creator.socials.youtubeUrl)
 
 const client = useClient()
 const save = async () => {
@@ -35,14 +35,14 @@ const save = async () => {
           "youtubeUrl": youtubeUrl.value || null,
         })
 
-    props.creator.socialNetworks.facebookUrl = facebookUrl
-    props.creator.socialNetworks.instagramUrl = instagramUrl
-    props.creator.socialNetworks.linkedInUrl = linkedInUrl
-    props.creator.socialNetworks.redditUrl = redditUrl
-    props.creator.socialNetworks.tikTokUrl = tikTokUrl
-    props.creator.socialNetworks.websiteUrl = websiteUrl
-    props.creator.socialNetworks.xUrl = xUrl
-    props.creator.socialNetworks.youtubeUrl = youtubeUrl
+    props.creator.socials.facebookUrl = facebookUrl
+    props.creator.socials.instagramUrl = instagramUrl
+    props.creator.socials.linkedInUrl = linkedInUrl
+    props.creator.socials.redditUrl = redditUrl
+    props.creator.socials.tikTokUrl = tikTokUrl
+    props.creator.socials.websiteUrl = websiteUrl
+    props.creator.socials.xUrl = xUrl
+    props.creator.socials.youtubeUrl = youtubeUrl
     
     emits('closeRequested')
   } catch (error) {

src/views/Profile/PageInformations.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from 'vue';
-import SocialNetworks from '@/views/Profile/Dialogs/PageInformations/SocialNetworks.vue';
+import Socials from '@/views/Profile/Dialogs/PageInformations/Socials.vue';
 import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue';
 import ColorTopBanner from '@/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue';
 import ColorBottomBanner from "@/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue";
@@ -15,7 +15,7 @@ const dialog = ref(false);
 const currentComponent = ref('');
 
 const componentsMap = {
-  SocialNetworks,
+  Socials,
   BannerPicker,
   ColorTopBanner,
   ColorBottomBanner,
@@ -119,82 +119,82 @@ const closeDialog = () => {
 
       <div class="flex flex-col w-full">
         <button
-            @click="openDialog('SocialNetworks')"
+            @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.facebookUrl }}</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.facebookUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('SocialNetworks')"
+            @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.instagramUrl }}</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.instagramUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('SocialNetworks')"
+            @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
           <span class="flex-none pa-2 min-w-32 text-left"><v-icon>mdi-twitter</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.xUrl }}</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
           <span class="flex-none">          
                         <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('SocialNetworks')"
+            @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.linkedInUrl }}</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.linkedInUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('SocialNetworks')"
+            @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="flex-none pa-2 min-w-32 text-left"> 
             <img src="/images/socials/tiktok-black.png" class="w-5 h-5">
           </span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.tikTokUrl }}</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('SocialNetworks')"
+            @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.youtubeUrl }}</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.youtubeUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('SocialNetworks')"
+            @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.redditUrl }}</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.redditUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('SocialNetworks')"
+            @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
           <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socialNetworks.websiteUrl }}</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>

src/views/creators/CreatorBanner.vue

@@ -8,7 +8,7 @@
            :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
         <div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
           <a
-              v-for="socialNetwork in GetActiveSocialNetworkUrls()"
+              v-for="socialNetwork in GetSocialsUrls()"
               :href="socialNetwork.url"
               target="_blank"
               class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
@@ -85,61 +85,60 @@ const props = defineProps({
   creator: {type: Object, required: true},
 });
 
-function GetActiveSocialNetworkUrls() {
+function GetSocialsUrls() {
 
-  const socialNetworks = [];
-  const userSocialNetworks = props.creator.socialNetworks;
+  const socials = [];
   
-  if (userSocialNetworks.facebookUrl !== null) {
-    socialNetworks.push({
+  if (props.creator.socials.facebookUrl !== null) {
+    socials.push({
       icon: "mdi-facebook",
-      url: props.creator.socialNetworks.facebookUrl
+      url: props.creator.socials.facebookUrl
     })
   }
-  if (userSocialNetworks.instagramUrl !== null) {
-    socialNetworks.push({
+  if (props.creator.socials.instagramUrl !== null) {
+    socials.push({
       icon: "mdi-instagram",
-      url: props.creator.socialNetworks.instagramUrl
+      url: props.creator.socials.instagramUrl
     })
   }
-  if (userSocialNetworks.xUrl !== null) {
-    socialNetworks.push({
+  if (props.creator.socials.xUrl !== null) {
+    socials.push({
       icon: "mdi-twitter",
-      url: props.creator.socialNetworks.xUrl
+      url: props.creator.socials.xUrl
     })
   }
-  if (userSocialNetworks.linkedInUrl !== null) {
-    socialNetworks.push({
+  if (props.creator.socials.linkedInUrl !== null) {
+    socials.push({
       icon: 'mdi-linkedin',
-      url: props.creator.socialNetworks.linkedInUrl
+      url: props.creator.socials.linkedInUrl
     })
   }
-  if (userSocialNetworks.tikTokUrl !== null) {
-    socialNetworks.push({
+  if (props.creator.socials.tikTokUrl !== null) {
+    socials.push({
       icon: '/images/socials/tiktok-white.png',
-      url: props.creator.socialNetworks.tikTokUrl
+      url: props.creator.socials.tikTokUrl
     })
   }
-  if (userSocialNetworks.youtubeUrl !== null) {
-    socialNetworks.push({
+  if (props.creator.socials.youtubeUrl !== null) {
+    socials.push({
       icon: 'mdi-youtube',
-      url: props.creator.socialNetworks.youtubeUrl
+      url: props.creator.socials.youtubeUrl
     })
   }
-  if (userSocialNetworks.redditUrl !== null) {
-    socialNetworks.push({
+  if (props.creator.socials.redditUrl !== null) {
+    socials.push({
       icon: 'mdi-reddit',
-      url: props.creator.socialNetworks.redditUrl
+      url: props.creator.socials.redditUrl
     })
   }
-  if (userSocialNetworks.websiteUrl !== null) {
-    socialNetworks.push({
+  if (props.creator.socials.websiteUrl !== null) {
+    socials.push({
       icon: 'mdi-web',
-      url: props.creator.socialNetworks.websiteUrl
+      url: props.creator.socials.websiteUrl
     })
   }
 
-  return socialNetworks;
+  return socials;
 }
 
 </script>