From f6a61e3dd2e58a7f5ddafd61f2f59df0f5e093dd Mon Sep 17 00:00:00 2001
From: Marco Realacci <marco@marcorealacci.me>
Date: Thu, 15 Dec 2022 13:38:16 +0100
Subject: [PATCH] Add spinner when loading images, increase timeout to 20s

---
 webui/node_modules/.vite/deps/_metadata.json | 10 +--
 webui/src/components/PostCard.vue            | 85 +++++++++++++-------
 webui/src/services/axios.js                  |  2 +-
 webui/src/views/ProfileView.vue              | 77 ++++++++----------
 4 files changed, 98 insertions(+), 76 deletions(-)

diff --git a/webui/node_modules/.vite/deps/_metadata.json b/webui/node_modules/.vite/deps/_metadata.json
index 6f206d3..1aabce9 100644
--- a/webui/node_modules/.vite/deps/_metadata.json
+++ b/webui/node_modules/.vite/deps/_metadata.json
@@ -1,23 +1,23 @@
 {
-  "hash": "0c3e4771",
-  "browserHash": "01248067",
+  "hash": "80447977",
+  "browserHash": "b98131b5",
   "optimized": {
     "axios": {
       "src": "../../axios/index.js",
       "file": "axios.js",
-      "fileHash": "d8d02cf0",
+      "fileHash": "6b5eae63",
       "needsInterop": true
     },
     "vue": {
       "src": "../../vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "f8034b26",
+      "fileHash": "de50261f",
       "needsInterop": false
     },
     "vue-router": {
       "src": "../../vue-router/dist/vue-router.mjs",
       "file": "vue-router.js",
-      "fileHash": "b4ca170f",
+      "fileHash": "4cad12d6",
       "needsInterop": false
     }
   },
diff --git a/webui/src/components/PostCard.vue b/webui/src/components/PostCard.vue
index 9673fa1..bf2bd85 100644
--- a/webui/src/components/PostCard.vue
+++ b/webui/src/components/PostCard.vue
@@ -1,11 +1,13 @@
 <script>
 export default {
 	props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked"],
-	data: function() {
+	data: function () {
 		return {
 			imageSrc: "",
+			imageReady: false,
 			post_liked: this.liked,
 			post_like_cnt: this.likes,
+			post_comments_cnt: this.comments,
 			comments_data: [],
 			comments_start_idx: 0,
 			comments_shown: false,
@@ -13,6 +15,9 @@ export default {
 		}
 	},
 	methods: {
+		visitUser() {
+			this.$router.push({ path: "/profile/" + this.user_id });
+		},
 		postComment() {
 			this.$axios.post("/users/" + this.user_id + "/photos/" + this.photo_id + "/comments", {
 				"comment": this.commentMsg,
@@ -20,21 +25,33 @@ export default {
 			}).then(response => {
 				this.commentMsg = "";
 
+				this.post_comments_cnt++;
 				this.comments_data = [];
 				this.comments_start_idx = 0;
 				this.getComments();
 			})
 		},
+		showHideComments() {
+			// If comments are already shown, hide them and reset the data
+			if (this.comments_shown) {
+				this.comments_shown = false;
+				this.comments_data = [];
+				this.comments_start_idx = 0;
+				return;
+			}
+			this.getComments();
+		},
 		getComments() {
+			// Get comments from the server
 			this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id +
-					"/comments?limit=2&start_index=" + this.comments_start_idx).then(response => {
-				
-				if (response.data.length == 0) this.data_ended = true;
-				else this.comments_start_idx += 2;
+				"/comments?limit=2&start_index=" + this.comments_start_idx).then(response => {
 
-				this.comments_data = this.comments_data.concat(response.data);
-				this.comments_shown = true;
-			})
+					if (response.data.length == 0) this.data_ended = true;
+					else this.comments_start_idx += 2;
+
+					this.comments_data = this.comments_data.concat(response.data);
+					this.comments_shown = true;
+				})
 		},
 		like() {
 			this.$axios.put("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.$currentSession()).then(response => {
@@ -51,37 +68,49 @@ export default {
 	},
 
 	created() {
-			this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id, {
-				responseType: 'arraybuffer'
-			}).then(response => {
-				const img = document.createElement('img');
-				img.src = URL.createObjectURL(new Blob([response.data]));
-				img.classList.add("card-img-top");
-				this.$refs.imageContainer.appendChild(img);
-			});
-		},
-	}
+		this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id, {
+			responseType: 'arraybuffer'
+		}).then(response => {
+			const img = document.createElement('img');
+			img.src = URL.createObjectURL(new Blob([response.data]));
+			img.classList.add("card-img-top");
+			this.$refs.imageContainer.appendChild(img);
+			this.imageReady = true;
+		});
+	},
+}
 </script>
 
 <template>
-    <div class="card mb-5">
-		<div ref="imageContainer"></div>
+	<div class="card mb-5">
+		<div ref="imageContainer">
+			<div v-if="!imageReady" class="mt-3 mb-3">
+				<LoadingSpinner :loading="!imageReady" />
+			</div>
+		</div>
 
 		<div class="container">
 			<div class="row">
 				<div class="col-10">
 					<div class="card-body">
-						<h5 class="card-title">{{ name }}</h5>
+						<h5 @click="visitUser" class="card-title">{{ name }}</h5>
 						<p class="card-text">{{ new Date(Date.parse(date)) }}</p>
 					</div>
 				</div>
 
 				<div class="col-2">
-					<div class="card-body d-flex justify-content-end" style="display: inline-flex"> <!-- not quite sure flex is the right property, but it works -->
-						<a @click="getComments"><h5><i class="card-title bi bi-chat-right pe-1"></i></h5></a>
-						<h6 class="card-text d-flex align-items-end text-muted">{{ comments }}</h6>
-						<a v-if="!post_liked" @click="like"><h5><i class="card-title bi bi-suit-heart ps-2 pe-1 like-icon"></i></h5></a>
-						<a v-if="post_liked" @click="unlike"><h5><i class="card-title bi bi-heart-fill ps-2 pe-1 like-icon like-red"></i></h5></a>
+					<div class="card-body d-flex justify-content-end" style="display: inline-flex">
+						<!-- not quite sure flex is the right property, but it works -->
+						<a @click="showHideComments">
+							<h5><i class="card-title bi bi-chat-right pe-1"></i></h5>
+						</a>
+						<h6 class="card-text d-flex align-items-end text-muted">{{ post_comments_cnt }}</h6>
+						<a v-if="!post_liked" @click="like">
+							<h5><i class="card-title bi bi-suit-heart ps-2 pe-1 like-icon"></i></h5>
+						</a>
+						<a v-if="post_liked" @click="unlike">
+							<h5><i class="card-title bi bi-heart-fill ps-2 pe-1 like-icon like-red"></i></h5>
+						</a>
 						<h6 class="card-text d-flex align-items-end text-muted">{{ post_like_cnt }}</h6>
 						<h5></h5>
 					</div>
@@ -104,7 +133,8 @@ export default {
 						<input v-model="commentMsg" type="text" class="form-control" placeholder="Commenta...">
 					</div>
 					<div class="col-1 card-body border-top text-end ps-0 d-flex">
-						<button style="width: 100%" type="button" class="btn btn-primary" @click="postComment">Go</button>
+						<button style="width: 100%" type="button" class="btn btn-primary"
+							@click="postComment">Go</button>
 					</div>
 				</div>
 			</div>
@@ -116,6 +146,7 @@ export default {
 .like-icon:hover {
 	color: #ff0000;
 }
+
 .like-red {
 	color: #ff0000;
 }
diff --git a/webui/src/services/axios.js b/webui/src/services/axios.js
index c51d6af..6835c5a 100644
--- a/webui/src/services/axios.js
+++ b/webui/src/services/axios.js
@@ -3,7 +3,7 @@ import getCurrentSession from "./authentication";
 
 const instance = axios.create({
 	baseURL: __API_URL__,
-	timeout: 1000 * 5
+	timeout: 1000 * 20
 });
 
 //axios.interceptors.request.use(function (config) {
diff --git a/webui/src/views/ProfileView.vue b/webui/src/views/ProfileView.vue
index 51f7640..aac0905 100644
--- a/webui/src/views/ProfileView.vue
+++ b/webui/src/views/ProfileView.vue
@@ -1,6 +1,6 @@
 <script>
 export default {
-	data: function() {
+	data: function () {
 		return {
 			requestedProfile: this.$route.params.user_id,
 			errormsg: null,
@@ -9,12 +9,12 @@ export default {
 			data_ended: false,
 			start_idx: 0,
 			limit: 1,
-            user_data: [],
+			user_data: [],
 		}
 	},
 	methods: {
 		async refresh() {
-            this.getMainData();
+			this.getMainData();
 
 			// this way we are sure that we fill the first page todo: check
 			// 450 is a bit more of the max height of a post
@@ -26,14 +26,14 @@ export default {
 			this.loadContent();
 		},
 
-        async getMainData() {
-            try {
-                let response = await this.$axios.get("/users/" + this.requestedProfile);
-                this.user_data = response.data;
-            } catch(e) {
-                this.errormsg = e.toString();
-            }
-        },
+		async getMainData() {
+			try {
+				let response = await this.$axios.get("/users/" + this.requestedProfile);
+				this.user_data = response.data;
+			} catch (e) {
+				this.errormsg = e.toString();
+			}
+		},
 
 		async loadContent() {
 			this.loading = true;
@@ -48,7 +48,7 @@ export default {
 				this.errormsg = e.toString();
 			}
 		},
-		scroll () {
+		scroll() {
 			window.onscroll = () => {
 				let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
 				if (bottomOfWindow && !this.data_ended) {
@@ -81,42 +81,32 @@ export default {
 
 					<ErrorMsg v-if="errormsg" :msg="errormsg"></ErrorMsg>
 
-                    <UserCard :user_id = "requestedProfile"
-                                :name = "user_data['name']"
-                                :followed = "user_data['followed']"
-                                :banned = "user_data['banned']"
-                                :my_id = "this.$currentSession"
-                                :show_new_post = "true"
-                                @updateInfo = "getMainData"
-                                @updatePosts = "refresh" />
-                    
-                    <div class="row text-center mt-2 mb-3">
-                        <div class="col-4" style="border-right: 1px">
-                            <h3>{{ user_data["photos"] }}</h3>
-                            <h6>Photos</h6>
-                        </div>
-                        <div class="col-4">
-                            <h3>{{ user_data["followers"] }}</h3>
-                            <h6>Followers</h6>
-                        </div>
-                        <div class="col-4">
-                            <h3>{{ user_data["following"] }}</h3>
-                            <h6>Following</h6>
-                        </div>
-                    </div>
+					<UserCard :user_id="requestedProfile" :name="user_data['name']" :followed="user_data['followed']"
+						:banned="user_data['banned']" :my_id="this.$currentSession" :show_new_post="true"
+						@updateInfo="getMainData" @updatePosts="refresh" />
+
+					<div class="row text-center mt-2 mb-3">
+						<div class="col-4" style="border-right: 1px">
+							<h3>{{ user_data["photos"] }}</h3>
+							<h6>Photos</h6>
+						</div>
+						<div class="col-4">
+							<h3>{{ user_data["followers"] }}</h3>
+							<h6>Followers</h6>
+						</div>
+						<div class="col-4">
+							<h3>{{ user_data["following"] }}</h3>
+							<h6>Following</h6>
+						</div>
+					</div>
 
 					<div id="main-content" v-for="item of stream_data">
-						<PostCard :user_id = "requestedProfile"
-									:photo_id = "item.photo_id"
-									:name = "user_data['name']"
-									:date = "item.date"
-									:comments = "item.comments"
-									:likes = "item.likes"
-									:liked = "item.liked" />
+						<PostCard :user_id="requestedProfile" :photo_id="item.photo_id" :name="user_data['name']"
+							:date="item.date" :comments="item.comments" :likes="item.likes" :liked="item.liked" />
 					</div>
 
 					<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
-						Hai visualizzato tutti i post. Hooray! 👻
+						You reached the end. Hooray! 👻
 					</div>
 
 					<LoadingSpinner :loading="loading" /><br />
@@ -126,4 +116,5 @@ export default {
 	</div>
 </template>
 <style>
+
 </style>