Fix loading of page when accessing pages directly

frontend/src/stores/brandingStore.js

@@ -1,8 +1,7 @@
 import {defineStore} from 'pinia'
 import {useClient} from "@/plugins/api.js";
 import {useSessionStorage} from "@vueuse/core";
-import {ref, watch} from "vue";
-import {useRoute} from "vue-router";
+import {ref} from "vue";
 
 export const useBrandingStore = defineStore(
     'branding',
@@ -16,29 +15,25 @@ export const useBrandingStore = defineStore(
             {},
             {writeDefaults: false})
 
-        const presentationInfos = ref([]) 
+        const presentationInfos = ref([])
 
-        const route = useRoute()
-        watch(
-            () => route.params.creator,
-            async (newCreator, oldCreator) => {
-                loading.value = true
+        async function updateBrand(newBrand) {
+            loading.value = true
 
-                if (newCreator !== oldCreator) {
-                    if (newCreator !== undefined) {
-                        value.value = await fetchCreatorData(newCreator)
-                        currentBrand.value = newCreator
-                        presentationInfos.value = value.value?.presentationInfos
-                    } else {
-                        value.value = {}
-                        currentBrand.value = undefined
-                        presentationInfos.value = [] 
-                    }
+            if (newBrand !== currentBrand.value) {
+                if (newBrand !== undefined) {
+                    value.value = await fetchCreatorData(newBrand)
+                    currentBrand.value = newBrand
+                    presentationInfos.value = value.value?.presentationInfos
+                } else {
+                    value.value = {}
+                    currentBrand.value = undefined
+                    presentationInfos.value = []
                 }
-
-                loading.value = false
             }
-        )
+
+            loading.value = false
+        }
 
         const fetchCreatorData = async (creatorAlias) => {
             try {
@@ -53,7 +48,6 @@ export const useBrandingStore = defineStore(
         return {
             currentBrand,
             value,
-            loading,
-            presentationInfos 
+            loading, updateBrand, presentationInfos
         }
     })

frontend/src/views/creators/BannerActions.vue

@@ -1,8 +1,7 @@
 <script setup>
-import {useClient} from '@/plugins/api.js';
+
 import {useBrandingStore} from '@/stores/brandingStore.js';
 import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
-import {onMounted, ref} from 'vue';
 import CreatorLogo from "@/views/creators/CreatorLogo.vue";
 import NameTitle from "@/views/creators/NameTitle.vue";
 import Linkedin from "@/views/svg/Linkedin.vue";
@@ -15,20 +14,7 @@ import Youtube from "@/views/svg/Youtube.vue";
 import Web from "@/views/svg/Web.vue";
 
 const brandingStore = useBrandingStore();
-const creator = ref(null);
 const baseURL = window.location.origin;
-const creatorName = window.location.pathname.split('/@').pop();
-
-onMounted(async () => {
-  const client = useClient();
-  try {
-    const creatorResponse = await client.get(`/api/creators/@${creatorName}`);
-    creator.value = creatorResponse.data;
-  } catch (error) {
-    creator.value = undefined;
-  }
-});
-
 </script>
 
 <template>
@@ -53,11 +39,11 @@ onMounted(async () => {
           </div>
 
           <donation-button-banner
-              v-if="brandingStore.value?.acceptDonation && creator"
-              :creator-id="creator.id"
-              :creator-name="creator.name"
-              :on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
-              :on-success-url="baseURL + '/paymentcompleted/' + creator.id"
+              v-if="brandingStore.value?.acceptDonation"
+              :creator-id="brandingStore.value?.id"
+              :creator-name="brandingStore.value?.name"
+              :on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
+              :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
           ></donation-button-banner>
 
         </div>

frontend/src/views/creators/CreatorLayout.vue

@@ -22,9 +22,16 @@
 </template>
 
 <script async setup>
+import {useBrandingStore} from "@/stores/brandingStore.js";
+import {onMounted} from "vue";
 import Banner from "@/views/creators/Banner.vue";
 import Footer from "@/views/main/Footer.vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const brandingStore = useBrandingStore()
+const brandingStore = useBrandingStore();
+const creatorName = window.location.pathname.split('/@').pop();
+
+onMounted(async () => {
+  await brandingStore.updateBrand(creatorName);
+});
+
 </script>