Adds brandingStore.

Split userStore into userProfileStore and creatorProfileStore

src/stores/brandingStore.js

@@ -0,0 +1,53 @@
+import {defineStore} from 'pinia'
+import {useClient} from "@/plugins/api.js";
+import {useSessionStorage} from "@vueuse/core";
+import {onBeforeMount, ref, watch} from "vue";
+import {useRoute} from "vue-router";
+
+export const useBrandingStore = defineStore(
+    'branding',
+    () => {
+
+        const currentBrand = ref('')
+        
+        const value = useSessionStorage(
+            'branding',
+            {},
+            {writeDefaults: false})
+
+        const loading = ref(true)
+
+        const route = useRoute()
+
+        onBeforeMount(async () => await fetchCreatorData(route.params.creator))
+
+        watch(
+            () => route.params.creator,
+            async () => {
+                console.log(`creator: ${route.params.creator}`)
+                console.log(`currentBrand: ${currentBrand.value}`)
+                if (route.params.creator != currentBrand.value) {
+                    await fetchCreatorData(route.params.creator);
+                    currentBrand.value = route.params.creator
+                }
+            }
+        )
+
+        const fetchCreatorData = async (creatorAlias) => {
+            try {
+                loading.value = true
+                const client = useClient()
+                const response = await client.get(`/api/creators/@${creatorAlias}`)
+                value.value = response.data
+            } catch (error) {
+                console.error(`Error fetching content: ${error}`)
+            } finally {
+                loading.value = false
+            }
+        }
+
+        return {
+            value,
+            loading
+        }
+    })

src/stores/creatorProfileStore.js

@@ -0,0 +1,47 @@
+import {computed, watch} from 'vue'
+import {defineStore} from 'pinia'
+import {useAuthStore} from "@/stores/authStore.js";
+import {useClient} from "@/plugins/api.js";
+import {useSessionStorage} from "@vueuse/core";
+
+export const useCreatorProfileStore = defineStore(
+    'creator-profile',
+    () => {
+        const authStore = useAuthStore()
+
+        const authWatcher = watch(
+            () => authStore.isAuthenticated,
+            async (newValue) => {
+                if (newValue) {
+                    await fetchCurrentCreatorProfile()
+                } else {
+                    value.value = undefined
+                }
+            })
+
+        const value = useSessionStorage(
+            'creator-profile',
+            {},
+            {writeDefaults: false})
+
+        const hasCreator = computed(() =>
+            value.value
+            && Object.getOwnPropertyNames(value.value).length >= 1)
+
+        const client = useClient()
+
+        async function fetchCurrentCreatorProfile() {
+            try {
+                const creatorResponse = await client.get(`/api/creators/profile`)
+                value.value = creatorResponse.data
+                // TODO: no cache-busting ???
+            } catch (error) {
+                value.value = undefined
+            }
+        }
+
+        return {
+            creator: value,
+            hasCreator
+        }
+    })

src/stores/userProfileStore.js

@@ -4,38 +4,30 @@ import {useAuthStore} from "@/stores/authStore.js";
 import {useClient} from "@/plugins/api.js";
 import {useSessionStorage} from "@vueuse/core";
 
-export const useUserStore = defineStore(
-    'user',
+export const useUserProfileStore = defineStore(
+    'user-profile',
     () => {
+
         const authStore = useAuthStore()
+
         const authWatcher = watch(
             () => authStore.isAuthenticated,
             async (newValue) => {
                 if (newValue) {
                     await fetchCurrentUserProfile()
-                    await fetchCurrentCreatorProfile()
                 } else {
-                    user.value = undefined
-                    creator.value = undefined
+                    value.value = undefined
                 }
             })
 
-        const user = useSessionStorage(
-            'user-user',
+        const value = useSessionStorage(
+            'user-profile',
             {},
             {writeDefaults: false})
-        const creator = useSessionStorage(
-            'user-creator',
-            {},
-            {writeDefaults: false})
-
-        const hasCreator = computed(() =>
-            creator.value
-            && Object.getOwnPropertyNames(creator.value).length >= 1)
 
         const fullname = computed(() => {
-            if (user.value) {
-                const {firstname, lastname} = user.value;
+            if (value.value) {
+                const {firstname, lastname} = value.value;
 
                 if (firstname && lastname) {
                     return `${lastname}, ${firstname}`;
@@ -49,38 +41,29 @@ export const useUserStore = defineStore(
         })
 
         const alias = computed(() => {
-            if (user.value) {
-                return user.value.alias || `${user.value.firstname || ''} ${user.value.lastname || ''}`.trim() || 'Anonyme'
+            if (value.value) {
+                return value.value.alias || `${value.value.firstname || ''} ${value.value.lastname || ''}`.trim() || 'Anonyme'
             }
             return 'Anonyme';
         })
+
         const portraitUrl = computed(() => {
-            return user.value && user.value.portraitUrl
-                ? user.value.portraitUrl
+            return value.value && value.value.portraitUrl
+                ? value.value.portraitUrl
                 : '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'
         })
 
-        const client = useClient()
-
         async function fetchCurrentUserProfile() {
             try {
+                const client = useClient()
                 const userResponse = await client.get("/api/users/profile");
-                user.value = userResponse.data
+                value.value = userResponse.data
                 // Cache-busting only if portraitUrl exists
-                if (user.value.portraitUrl) {
-                    user.value.portraitUrl = `${user.value.portraitUrl}?${Date.now()}`;
+                if (value.value.portraitUrl) {
+                    value.value.portraitUrl = `${value.value.portraitUrl}?${Date.now()}`;
                 }
             } catch (error) {
-                user.value = undefined;
-            }
-        }
-
-        async function fetchCurrentCreatorProfile() {
-            try {
-                const creatorResponse = await client.get(`/api/creators/profile`)
-                creator.value = creatorResponse.data
-            } catch (error) {
-                creator.value = undefined
+                value.value = undefined;
             }
         }
 
@@ -92,8 +75,8 @@ export const useUserStore = defineStore(
                         firstname: firstname,
                         lastname: lastname
                     })
-                user.value.firstname = firstname;
-                user.value.lastname = lastname;
+                value.value.firstname = firstname;
+                value.value.lastname = lastname;
             } catch (error) {
                 console.error(error)
             }
@@ -106,7 +89,7 @@ export const useUserStore = defineStore(
                     {
                         alias: alias
                     })
-                user.value.alias = alias;
+                value.value.alias = alias;
             } catch (error) {
                 console.error(error)
             }
@@ -119,7 +102,7 @@ export const useUserStore = defineStore(
                     {
                         birthdate: birthdate
                     })
-                user.value.birthDate = birthdate;
+                value.value.birthDate = birthdate;
             } catch (error) {
                 console.error(error)
             }
@@ -132,7 +115,7 @@ export const useUserStore = defineStore(
                     {
                         phoneNumber: phoneNumber
                     })
-                user.value.phoneNumber = phoneNumber;
+                value.value.phoneNumber = phoneNumber;
             } catch (error) {
                 console.error(error)
             }
@@ -145,7 +128,7 @@ export const useUserStore = defineStore(
                     {
                         email: email
                     })
-                user.value.email = email;
+                value.value.email = email;
             } catch (error) {
                 console.error(error)
             }
@@ -158,12 +141,12 @@ export const useUserStore = defineStore(
                     {
                         address: address
                     })
-                user.value.address = address;
+                value.value.address = address;
             } catch (error) {
                 console.error(error)
             }
         }
-        
+
         async function changePortrait(selectedFile) {
             try {
                 const formData = new FormData();
@@ -172,18 +155,16 @@ export const useUserStore = defineStore(
                 const response = await client.post(
                     `/api/users/portrait`,
                     formData)
-                    
-                user.value.portraitUrl = `${response.data.blobUrl}?${Date.now()}` // the Date.now() is for cache-busting
+
+                value.value.portraitUrl = `${response.data.blobUrl}?${Date.now()}` // the Date.now() is for cache-busting
             } catch (error) {
                 console.error(error)
             }
         }
 
         return {
-            user,
-            creator,
+            user: value,
             alias,
-            hasCreator,
             fullname,
             portraitUrl,
             changeFullname,
@@ -192,7 +173,6 @@ export const useUserStore = defineStore(
             changePhone,
             changeEmail,
             changeAddress,
-            changePortrait,
-            fetchCurrentCreatorProfile
+            changePortrait
         }
     })