From bef9d69028e6a264bd5a70aec8b55818a824a73f Mon Sep 17 00:00:00 2001
From: Marco Realacci <marco@marcorealacci.me>
Date: Thu, 12 Jan 2023 01:02:12 +0100
Subject: [PATCH] PostCard: improve code readability

---
 webui/src/components/PostCard.vue | 36 ++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/webui/src/components/PostCard.vue b/webui/src/components/PostCard.vue
index 49dfbf0..5bc134c 100644
--- a/webui/src/components/PostCard.vue
+++ b/webui/src/components/PostCard.vue
@@ -3,8 +3,10 @@ export default {
 	props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked"],
 	data: function () {
 		return {
-			imageSrc: "",
+			// Whether the image is loaded (disables the spinner)
 			imageReady: false,
+
+			// Likes and comments
 			post_liked: this.liked,
 			post_like_cnt: this.likes,
 			post_comments_cnt: this.comments,
@@ -12,26 +14,37 @@ export default {
 			comments_start_idx: 0,
 			comments_shown: false,
 			commentMsg: "",
+
+			// Whether the comments have ended (no more comments to load)
 			data_ended: false,
 		}
 	},
 	methods: {
+		// Visit the user's profile
 		visitUser() {
 			this.$router.push({ path: "/profile/" + this.user_id });
 		},
+
+		// Post a new comment
 		postComment() {
 			this.$axios.post("/users/" + this.user_id + "/photos/" + this.photo_id + "/comments", {
 				"comment": this.commentMsg,
 				"user_id": this.$currentSession(),
 			}).then(response => {
-				this.commentMsg = "";
+				if (response == null) return // the interceptors returns null if something goes bad
 
+				// Reset the comment input and update the counter
+				this.commentMsg = "";
 				this.post_comments_cnt++;
+
+				// Fetch comments from the server
 				this.comments_data = [];
 				this.comments_start_idx = 0;
 				this.getComments();
 			})
 		},
+
+		// Show or hide the comments section
 		showHideComments() {
 			// If comments are already shown, hide them and reset the data
 			if (this.comments_shown) {
@@ -42,28 +55,39 @@ export default {
 			}
 			this.getComments();
 		},
+
+		// Fetch comments from the server
 		getComments() {
 			this.data_ended = false
 
-			// Get comments from the server
 			this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id +
 				"/comments?limit=5&start_index=" + this.comments_start_idx).then(response => {
 
+					// If there are no more comments, set the flag
 					if (response.data.length == 0) this.data_ended = true;
+
+					// Otherwise increment the start index
 					else this.comments_start_idx += 5;
 
+					// Append the comments to the array (they will be rendered)
 					this.comments_data = this.comments_data.concat(response.data);
 					this.comments_shown = true;
 				})
 		},
+
+		// Like the photo
 		like() {
 			this.$axios.put("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.$currentSession()).then(response => {
+				if (response == null) return
 				this.post_liked = true;
 				this.post_like_cnt++;
 			})
 		},
+
+		// Unlike the photo
 		unlike() {
 			this.$axios.delete("/users/" + this.user_id + "/photos/" + this.photo_id + "/likes/" + this.$currentSession()).then(response => {
+				if (response == null) return
 				this.post_liked = false;
 				this.post_like_cnt--;
 			})
@@ -71,12 +95,18 @@ export default {
 	},
 
 	created() {
+		// Fetch the image from the server and display it
 		this.$axios.get("/users/" + this.user_id + "/photos/" + this.photo_id, {
 			responseType: 'arraybuffer'
 		}).then(response => {
+			// Create an image element and append it to the container
 			const img = document.createElement('img');
+
+			// Set image source and css class
 			img.src = URL.createObjectURL(new Blob([response.data]));
 			img.classList.add("card-img-top");
+
+			// Append the image to the container and disable the spinner
 			this.$refs.imageContainer.appendChild(img);
 			this.imageReady = true;
 		});