Reload header profile picture on change. Show PostContentMenu only if it is the creator own page

src/stores/user.js

@@ -4,6 +4,7 @@ import MyUserModel from "@/models/myUserModel.js";
 
 export const useUserStore = defineStore('user', () => {
     const user = ref({});
+    const hasChanged = ref(false);
 
     function getCurrentUser() {
         return this.user.value;
@@ -12,6 +13,7 @@ export const useUserStore = defineStore('user', () => {
         try {
             const myUser = await client.get("/api/GetMyUser");
             this.user.value = MyUserModel.createFromApiResult(myUser.data);
+            this.hasChanged = false;
         } catch (e){
             this.user.value = MyUserModel.getDefaultUser();
             console.log("User not logged.")
@@ -19,33 +21,52 @@ export const useUserStore = defineStore('user', () => {
     }
 
     async function updateCurrentUser(client, myUserModel, profilePicture, bannerPicture, websiteIcon) {
-        this.user.value = myUserModel;
         await client.patch("/api/UpdateMyUser/profile", myUserModel)
-        
+
         if (typeof myUserModel.storedDataUrls.profilePictureUrl !== "object") {
-            const updateProfilePictureEndpoint = profilePicture !== null && profilePicture.size !== 0 ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${myUserModel.storedDataUrls.profilePictureUrl}`;
-            this.user.value.storedDataUrls.profilePictureUrl = await client.post(updateProfilePictureEndpoint, profilePicture, {
+            const haveNewProfilePicture = profilePicture !== null && profilePicture.size !== 0;
+            const updateProfilePictureEndpoint = haveNewProfilePicture ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${myUserModel.storedDataUrls.profilePictureUrl}`;
+            const response = await client.post(updateProfilePictureEndpoint, profilePicture, {
                 headers: {
                     'Content-Type': 'application/octet-stream',
                 }
             });
+            
+            if (haveNewProfilePicture) {
+                this.user.value.storedDataUrls.profilePictureUrl = response.data;
+            }
         }
         if (typeof myUserModel.storedDataUrls.bannerPictureUrl !== "object") {
-            const updateBannerPictureEndpoint = bannerPicture !== null && bannerPicture.size !== 0 ? `/api/UpdateMyUser/banner-picture` : `/api/UpdateMyUser/banner-picture?url=${myUserModel.storedDataUrls.bannerPictureUrl}`;
-            this.user.value.storedDataUrls.bannerPictureUrl = await client.post(updateBannerPictureEndpoint, bannerPicture, {
+            const haveNewBannerPicture = bannerPicture !== null && bannerPicture.size !== 0;
+
+            const updateBannerPictureEndpoint = haveNewBannerPicture ? `/api/UpdateMyUser/banner-picture` : `/api/UpdateMyUser/banner-picture?url=${myUserModel.storedDataUrls.bannerPictureUrl}`;
+            const response = await client.post(updateBannerPictureEndpoint, bannerPicture, {
                 headers: {
                     'Content-Type': 'application/octet-stream',
                 }
             });
+            
+            if (haveNewBannerPicture) {
+                this.user.value.storedDataUrls.bannerPictureUrl = response.data;
+            }
         }
         if (typeof myUserModel.storedDataUrls.websiteIconUrl !== "object") {
-            const updateWebsiteIconEndpoint = websiteIcon !== null && websiteIcon.size !== 0 ? `/api/UpdateMyUser/website-icon` : `/api/UpdateMyUser/website-icon?url=${myUserModel.storedDataUrls.websiteIconUrl}`;
-            this.user.value.storedDataUrls.websiteIconUrl = await client.post(updateWebsiteIconEndpoint, websiteIcon, {
+            const haveNewWebsiteIcon = websiteIcon !== null && websiteIcon.size !== 0;
+
+            const updateWebsiteIconEndpoint = haveNewWebsiteIcon ? `/api/UpdateMyUser/website-icon` : `/api/UpdateMyUser/website-icon?url=${myUserModel.storedDataUrls.websiteIconUrl}`;
+            const response = await client.post(updateWebsiteIconEndpoint, websiteIcon, {
                 headers: {
                     'Content-Type': 'application/octet-stream',
                 }
             });
+            
+            if (haveNewWebsiteIcon) {
+                this.user.value.storedDataUrls.websiteIconUrl = response.data;
+            }
         }
+
+        this.user.value = myUserModel;
+        this.hasChanged = true;
     }
 
     return { user, getCurrentUser, setCurrentUser, updateCurrentUser }

src/views/main/Creator.vue

@@ -13,7 +13,7 @@
   <!--      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
   <!--    </div>-->
   
-      <PostContentMenu></PostContentMenu>
+      <PostContentMenu v-if="user.id === userStore.getCurrentUser().id"></PostContentMenu>
 
       <StripePayment :creator-id="user.id"></StripePayment>
 
@@ -57,9 +57,11 @@ import {useClient} from "@/plugins/api.js";
 import {useRoute} from "vue-router";
 import CreatorBanner from "@/views/main/CreatorBanner.vue";
 import StripePayment from "@/views/StripePayment.vue";
+import {useUserStore} from "@/stores/user.js";
 
 const client = useClient();
 const route = useRoute();
+const userStore = useUserStore();
 
 const user = ref(null);
 const loading = ref(true);

src/views/main/Header.vue

@@ -104,16 +104,17 @@
 </template>
 
 <script setup>
-import {ref, onMounted, onBeforeUnmount, onBeforeMount} from "vue";
+import {ref, onBeforeUnmount, onBeforeMount, watch, reactive} from "vue";
 import {eventBus} from '@/eventBus.js';
 import {useRouter} from 'vue-router';
 import {useUserStore} from "@/stores/user.js";
+import MyUserModel from "@/models/myUserModel.js";
 
 const router = useRouter();
 const currentUserName = ref("Anonyme");
 const searchQuery = ref("");
 const showSearch = ref(false);
-const currentUser = ref(null);
+let currentUser = reactive(MyUserModel.getDefaultUser());
 const userStore = useUserStore();
 const backupProfilePictureUrl = "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
 
@@ -159,12 +160,22 @@ const logout = () => {
 };
 
 onBeforeMount( () => {
-  currentUser.value = userStore.getCurrentUser();
-  currentUserName.value = currentUser.value.userName;
+  currentUser = userStore.getCurrentUser();
+  currentUserName.value = currentUser.userName;
 
   document.addEventListener('click', handleClickOutside);
 });
 
+// Watch the user state to get it again if needed.
+watch(
+    () => userStore.hasChanged,
+    () => {
+      currentUser = userStore.getCurrentUser();
+      const timestamp = new Date().getTime();
+      currentUser.storedDataUrls.profilePictureUrl = `${currentUser.storedDataUrls.profilePictureUrl}?t=${timestamp}`;
+    }
+);
+
 onBeforeUnmount(() => {
   document.removeEventListener('click', handleClickOutside);
 });