Fix user profile view not always showing the right user

This commit is contained in:
Marco Realacci 2023-01-15 15:28:49 +01:00
parent c0ba5011b5
commit 811a5190eb
3 changed files with 35 additions and 23 deletions

View file

@ -1,6 +1,7 @@
<script> <script>
export default { export default {
props: ["user_data"], props: ["user_data"],
data: function () { data: function () {
return { return {
modal_data: [], modal_data: [],
@ -19,7 +20,6 @@ export default {
// Visit the profile of the user with the given id // Visit the profile of the user with the given id
visit(user_id) { visit(user_id) {
this.$router.push({ path: "/profile/" + user_id }) this.$router.push({ path: "/profile/" + user_id })
location.reload()
}, },
// Reset the current data and fetch the first batch of users // 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"> <Modal ref="mymodal" id="userModal" :title="data_type">
<ul> <ul>
<li v-for="item in modal_data" :key="item.user_id" class="mb-2" style="cursor: pointer" <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> <h5>{{ item.name }}</h5>
</li> </li>
<IntersectionObserver sentinal-name="load-more-users" @on-intersection-element="loadMore" /> <IntersectionObserver sentinal-name="load-more-users" @on-intersection-element="loadMore" />

View file

@ -11,6 +11,9 @@ export default {
followed: function (new_val, old_val) { followed: function (new_val, old_val) {
this.user_followed = new_val this.user_followed = new_val
}, },
user_id: function (new_val, old_val) {
this.myself = this.$currentSession() == new_val
},
}, },
data: function () { data: function () {
return { return {

View file

@ -23,23 +23,41 @@ export default {
limit: 1, limit: 1,
}; };
}, },
watch: {
'$route.params.user_id': {
handler: function (user_id) {
this.refresh()
},
deep: true,
immediate: true
}
},
methods: { methods: {
async refresh() { 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 // Fetch profile info from the server
this.getMainData(); this.getMainData()
// Limits the number of posts to load based on the window height // Limits the number of posts to load based on the window height
// to avoid loading too many posts at once // to avoid loading too many posts at once
// 450px is (a bit more) of the height of a single post // 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 // Reset the parameters and the data
this.start_idx = 0; this.start_idx = 0
this.data_ended = false; this.data_ended = false
this.stream_data = []; this.stream_data = []
// Fetch the first batch of posts // Fetch the first batch of posts
this.loadContent(); this.loadContent()
}, },
// Fetch profile info from the server // Fetch profile info from the server
@ -47,17 +65,17 @@ export default {
let response = await this.$axios.get("/users/" + this.requestedProfile); let response = await this.$axios.get("/users/" + this.requestedProfile);
if (response == null) { if (response == null) {
// An error occurred, set the error flag // An error occurred, set the error flag
this.loading = false; this.loading = false
this.loadingError = true; this.loadingError = true
return; return
} }
this.user_data = response.data; this.user_data = response.data
}, },
// Fetch photos from the server // Fetch photos from the server
async loadContent() { async loadContent() {
this.loading = true; 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 (response == null) return // An error occurred. The interceptor will show a modal
// If the server returned less elements than requested, // If the server returned less elements than requested,
@ -83,17 +101,8 @@ export default {
}, },
}, },
created() { 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 // Fetch the profile info and the first batch of photos
this.refresh(); this.refresh()
}, },
components: { IntersectionObserver } components: { IntersectionObserver }
} }