social-media/src/stores/userStore.js

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 useUserStore = defineStore(
    'user',
    () => {
        const authStore = useAuthStore()
        const authWatcher = watch(
            () => authStore.isAuthenticated,
            async (newValue) => {
                if (newValue) {
                    await fetchCurrentUserProfile()
                    await fetchCurrentCreatorProfile()
                } else {
                    user.value = undefined
                    creator.value = undefined
                }
            })

        const user = useSessionStorage(
            'user-user',
            {},
            {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 (firstname && lastname) {
                    return `${lastname}, ${firstname}`;
                } else if (firstname) {
                    return firstname;
                } else if (lastname) {
                    return lastname;
                }
            }
            return 'n/a';
        })

        const alias = computed(() => {
            if (user.value) {
                return user.value.alias || `${user.value.firstname || ''} ${user.value.lastname || ''}`.trim() || 'Anonyme'
            }
            return 'Anonyme';
        })
        const portraitUrl = computed(() => {
            return user.value && user.value.portraitUrl
                ? user.value.portraitUrl
                : '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'
        })

        const client = useClient()

        async function fetchCurrentUserProfile() {
            try {
                const userResponse = await client.get("/api/users/profile");
                user.value = userResponse.data
            } 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
            }
        }

        async function changeFullname(firstname, lastname) {
            try {
                await client.post(
                    `/api/users/fullname`,
                    {
                        firstname: firstname,
                        lastname: lastname
                    })
                user.value.firstname = firstname;
                user.value.lastname = lastname;
            } catch (error) {
                console.error(error)
            }
        }

        async function changeAlias(alias) {
            try {
                await client.post(
                    `/api/users/alias`,
                    {
                        alias: alias
                    })
                user.value.alias = alias;
            } catch (error) {
                console.error(error)
            }
        }

        async function changeBirthday(birthdate) {
            try {
                await client.post(
                    `/api/users/birthdate`,
                    {
                        birthdate: birthdate
                    })
                user.value.birthDate = birthdate;
            } catch (error) {
                console.error(error)
            }
        }

        async function changePhone(phoneNumber) {
            try {
                await client.post(
                    `/api/users/phone`,
                    {
                        phoneNumber: phoneNumber
                    })
                user.value.phoneNumber = phoneNumber;
            } catch (error) {
                console.error(error)
            }
        }

        async function changeEmail(email) {
            try {
                await client.post(
                    `/api/users/email`,
                    {
                        email: email
                    })
                user.value.email = email;
            } catch (error) {
                console.error(error)
            }
        }

        async function changeAddress(address) {
            try {
                await client.post(
                    `/api/users/address`,
                    {
                        address: address
                    })
                user.value.address = address;
            } catch (error) {
                console.error(error)
            }
        }
        
        async function changePortrait(selectedFile) {
            try {
                const formData = new FormData();
                formData.append('file', selectedFile)

                const response = await client.post(
                    `/api/users/portrait`,
                    formData)
                    
                user.value.portraitUrl = `${response.data.blobUrl}?${Date.now()}` // the Date.now() is for cache-busting
            } catch (error) {
                console.error(error)
            }
        }

        return {
            user,
            creator,
            alias,
            hasCreator,
            fullname,
            portraitUrl,
            changeFullname,
            changeAlias,
            changeBirthday,
            changePhone,
            changeEmail,
            changeAddress,
            changePortrait,
            fetchCurrentUserProfile,
            fetchCurrentCreatorProfile
        }
    })