From 811a5190ebef0ab90aab2299986f0281f1351b01 Mon Sep 17 00:00:00 2001
From: Marco Realacci <marco@marcorealacci.me>
Date: Sun, 15 Jan 2023 15:28:49 +0100
Subject: [PATCH] Fix user profile view not always showing the right user

---
 webui/src/components/ProfileCounters.vue |  4 +-
 webui/src/components/UserCard.vue        |  3 ++
 webui/src/views/ProfileView.vue          | 51 ++++++++++++++----------
 3 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/webui/src/components/ProfileCounters.vue b/webui/src/components/ProfileCounters.vue
index bfeddf7..eaa9663 100644
--- a/webui/src/components/ProfileCounters.vue
+++ b/webui/src/components/ProfileCounters.vue
@@ -1,6 +1,7 @@
 <script>
 export default {
     props: ["user_data"],
+
     data: function () {
         return {
             modal_data: [],
@@ -19,7 +20,6 @@ export default {
         // Visit the profile of the user with the given id
         visit(user_id) {
             this.$router.push({ path: "/profile/" + user_id })
-            location.reload()
         },
 
         // Reset the current data and fetch the first batch of users
@@ -75,7 +75,7 @@ export default {
     <Modal ref="mymodal" id="userModal" :title="data_type">
         <ul>
             <li v-for="item in modal_data" :key="item.user_id" class="mb-2" style="cursor: pointer"
-                @click="visit(item.user_id)">
+                @click="visit(item.user_id)" data-bs-dismiss="modal">
                 <h5>{{ item.name }}</h5>
             </li>
             <IntersectionObserver sentinal-name="load-more-users" @on-intersection-element="loadMore" />
diff --git a/webui/src/components/UserCard.vue b/webui/src/components/UserCard.vue
index 611070a..1d6b5a0 100644
--- a/webui/src/components/UserCard.vue
+++ b/webui/src/components/UserCard.vue
@@ -11,6 +11,9 @@ export default {
         followed: function (new_val, old_val) {
             this.user_followed = new_val
         },
+        user_id: function (new_val, old_val) {
+            this.myself = this.$currentSession() == new_val
+        },
     },
     data: function () {
         return {
diff --git a/webui/src/views/ProfileView.vue b/webui/src/views/ProfileView.vue
index e326a3c..f0e6667 100644
--- a/webui/src/views/ProfileView.vue
+++ b/webui/src/views/ProfileView.vue
@@ -23,23 +23,41 @@ export default {
 			limit: 1,
 		};
 	},
+	watch: {
+		'$route.params.user_id': {
+			handler: function (user_id) {
+				this.refresh()
+			},
+			deep: true,
+			immediate: true
+		}
+	},
 	methods: {
 		async refresh() {
+			if (this.$route.params.user_id == "me") {
+				// If the id is "me", show the current user's profile
+				this.requestedProfile = this.$currentSession()
+			}
+			else {
+				// Otherwise, show "id"'s profile
+				this.requestedProfile = this.$route.params.user_id
+			}
+
 			// Fetch profile info from the server
-			this.getMainData();
+			this.getMainData()
 
 			// Limits the number of posts to load based on the window height
 			// to avoid loading too many posts at once
 			// 450px is (a bit more) of the height of a single post
-			this.limit = Math.max(Math.round(window.innerHeight / 450), 1);
+			this.limit = Math.max(Math.round(window.innerHeight / 450), 1)
 
 			// Reset the parameters and the data
-			this.start_idx = 0;
-			this.data_ended = false;
-			this.stream_data = [];
+			this.start_idx = 0
+			this.data_ended = false
+			this.stream_data = []
 
 			// Fetch the first batch of posts
-			this.loadContent();
+			this.loadContent()
 		},
 
 		// Fetch profile info from the server
@@ -47,17 +65,17 @@ export default {
 			let response = await this.$axios.get("/users/" + this.requestedProfile);
 			if (response == null) {
 				// An error occurred, set the error flag
-				this.loading = false;
-				this.loadingError = true;
-				return;
+				this.loading = false
+				this.loadingError = true
+				return
 			}
-			this.user_data = response.data;
+			this.user_data = response.data
 		},
 
 		// Fetch photos from the server
 		async loadContent() {
 			this.loading = true;
-			let response = await this.$axios.get("/users/" + this.requestedProfile + "/photos" + "?start_index=" + this.start_idx + "&limit=" + this.limit);
+			let response = await this.$axios.get("/users/" + this.requestedProfile + "/photos" + "?start_index=" + this.start_idx + "&limit=" + this.limit)
 			if (response == null) return // An error occurred. The interceptor will show a modal
 
 			// If the server returned less elements than requested,
@@ -83,17 +101,8 @@ export default {
 		},
 	},
 	created() {
-		if (this.$route.params.user_id == "me") {
-			// If the id is "me", show the current user's profile
-			this.requestedProfile = this.$currentSession();
-		}
-		else {
-			// Otherwise, show "id"'s profile
-			this.requestedProfile = this.$route.params.user_id;
-		}
-
 		// Fetch the profile info and the first batch of photos
-		this.refresh();
+		this.refresh()
 	},
 	components: { IntersectionObserver }
 }