From 11dfbe66588db2f63b5e4676f7a5ae2bf3da2fc4 Mon Sep 17 00:00:00 2001
From: Marco Realacci <marco@marcorealacci.me>
Date: Wed, 11 Jan 2023 23:25:24 +0100
Subject: [PATCH] Add more comment and pointer on usernames

---
 webui/src/App.vue                 | 13 +++++++++++
 webui/src/components/PostCard.vue |  2 +-
 webui/src/components/UserCard.vue |  2 +-
 webui/src/views/HomeView.vue      | 38 +++++++++++++++++++++++++++----
 4 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/webui/src/App.vue b/webui/src/App.vue
index e21e075..f0692f2 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -3,12 +3,19 @@ export default {
 	props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked"],
 	data: function () {
 		return {
+			// Data for the modal
 			modalTitle: "Modal Title",
 			modalMsg: "Modal Message",
+
+			// Whether the user is logged in
 			logged_in: true,
 		}
 	},
 	methods: {
+		// Function to show a modal
+		// can be called by any view or component
+		// title: title of the modal
+		// message: message to show in the modal
 		showModal(title, message) {
 			this.modalTitle = title
 			this.modalMsg = message
@@ -16,9 +23,14 @@ export default {
 			// Simulate a click on the hidden modal button to open it
 			this.$refs.openModal.click()
 		},
+
+		// Sets the login status to true
+		// to show the navigation buttons
 		setLoggedIn() {
 			this.logged_in = true
 		},
+
+		// Disconnects the current logged in user
 		logout() {
 			localStorage.removeItem("token")
             sessionStorage.removeItem("token")
@@ -27,6 +39,7 @@ export default {
 		}
 	},
 
+	// Called when the root view is mounted
 	mounted() {
 		// Check if the user is already logged in
 		this.$axiosUpdate()
diff --git a/webui/src/components/PostCard.vue b/webui/src/components/PostCard.vue
index f0ef614..61645ef 100644
--- a/webui/src/components/PostCard.vue
+++ b/webui/src/components/PostCard.vue
@@ -96,7 +96,7 @@ export default {
 			<div class="row">
 				<div class="col-10">
 					<div class="card-body">
-						<h5 @click="visitUser" class="card-title">{{ name }}</h5>
+						<h5 @click="visitUser" class="card-title" style="cursor: pointer">{{ name }}</h5>
 						<p class="card-text">{{ new Date(Date.parse(date)) }}</p>
 					</div>
 				</div>
diff --git a/webui/src/components/UserCard.vue b/webui/src/components/UserCard.vue
index e2e89f7..e90a259 100644
--- a/webui/src/components/UserCard.vue
+++ b/webui/src/components/UserCard.vue
@@ -93,7 +93,7 @@ export default {
                 <div class="col-5">
                     <div class="card-body h-100 d-flex align-items-center">
                         <a @click="visit">
-                            <h5 class="card-title mb-0">{{ username }}</h5>
+                            <h5 class="card-title mb-0" style="cursor: pointer">{{ username }}</h5>
                         </a>
                     </div>
                 </div>
diff --git a/webui/src/views/HomeView.vue b/webui/src/views/HomeView.vue
index d7da022..697ebea 100644
--- a/webui/src/views/HomeView.vue
+++ b/webui/src/views/HomeView.vue
@@ -2,25 +2,42 @@
 export default {
 	data: function () {
 		return {
+			// Whether the content is loading
+			// to show the loading spinner
 			loading: false,
+
+			// Stream data from the server
 			stream_data: [],
+
+			// Whether the data has ended
+			// to stop loading more data with the infinite scroll
 			data_ended: false,
+
+			// Parameters to load data dynamically when scrolling
 			start_idx: 0,
 			limit: 1,
+
+			// Shows the retry button
 			loadingError: false,
 		}
 	},
 	methods: {
+		// Reload the whole page content
+		// fetching it again from the server
 		async refresh() {
-			// this way we are sure that we fill the first page
-			// 450 is a bit more of the max height of a post
-			// todo: may not work in 4k screens :/
+			// 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.round(window.innerHeight / 450);
+
+			// Reset the parameters and the data
 			this.start_idx = 0;
 			this.data_ended = false;
 			this.stream_data = [];
 			this.loadContent();
 		},
+
+		// Requests data from the server asynchronously
 		async loadContent() {
 			this.loading = true;
 
@@ -33,17 +50,30 @@ export default {
 				return
 			}
 
+			// If the response is empty or shorter than the limit
+			// then there is no more data to load
 			if (response.data.length == 0 || response.data.length < this.limit) this.data_ended = true;
 			this.stream_data = this.stream_data.concat(response.data);
+
+			// Finished loading, hide the spinner
 			this.loading = false;
 		},
+
+		// Loads more data when the user scrolls down
+		// (this is called by the IntersectionObserver component)
 		loadMore() {
+			// Avoid loading more content if the data has ended
 			if (this.loading || this.data_ended) return
+
+			// Increase the start index and load more content
 			this.start_idx += this.limit
 			this.loadContent()
 		},
 	},
+
+	// Called when the view is mounted
 	mounted() {
+		// Start loading the content
 		this.refresh();
 	}
 }
@@ -66,7 +96,7 @@ export default {
 							:comments="item.comments" :likes="item.likes" :liked="item.liked" />
 					</div>
 
-					<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
+					<div v-if="(data_ended && !(stream_data.length == 0))" class="alert alert-secondary text-center" role="alert">
 						This is the end of your stream. Hooray! 👻
 					</div>