Fix loading of page when accessing pages directly

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>