feat: relative creation times for reports

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/components/Admin/Reports.vue

@@ -6,8 +6,8 @@
 				<thead>
 					<tr>
 						<td>Song ID</td>
-						<td>Created By</td>
-						<td>Created At</td>
+						<td>Author</td>
+						<td>Time of report</td>
 						<td>Description</td>
 						<td>Options</td>
 					</tr>
@@ -28,7 +28,13 @@
 							/>
 						</td>
 						<td>
-							<span>{{ report.createdAt }}</span>
+							<span :title="report.createdAt">{{
+								formatDistance(
+									new Date(report.createdAt),
+									new Date(),
+									{ addSuffix: true }
+								)
+							}}</span>
 						</td>
 						<td>
 							<span>{{ report.description }}</span>
@@ -58,6 +64,7 @@
 
 <script>
 import { mapState, mapActions } from "vuex";
+import { formatDistance } from "date-fns";
 
 import Toast from "toasters";
 import io from "../../io";
@@ -76,17 +83,21 @@ export default {
 		io.getSocket(socket => {
 			this.socket = socket;
 			if (this.socket.connected) this.init();
+
 			this.socket.emit("reports.index", res => {
 				this.reports = res.data;
 			});
+
 			this.socket.on("event:admin.report.resolved", reportId => {
 				this.reports = this.reports.filter(report => {
 					return report._id !== reportId;
 				});
 			});
+
 			this.socket.on("event:admin.report.created", report => {
 				this.reports.push(report);
 			});
+
 			io.onConnect(() => {
 				this.init();
 			});
@@ -109,6 +120,7 @@ export default {
 		})
 	},
 	methods: {
+		formatDistance,
 		init() {
 			this.socket.emit("apis.joinAdminRoom", "reports", () => {});
 		},

frontend/components/Modals/IssuesModal.vue

@@ -17,11 +17,24 @@
 					<strong>Song ID:</strong>
 					{{ report.song.songId }} / {{ report.song._id }}
 					<br />
-					<strong>Created By:</strong>
-					{{ report.createdBy }}
+					<strong>Author:</strong>
+					<user-id-to-username
+						:userId="report.createdBy"
+						:alt="report.createdBy"
+					/>
 					<br />
-					<strong>Created At:</strong>
-					{{ report.createdAt }}
+					<strong>Time of report:</strong>
+					<span :title="report.createdAt">
+						{{
+							formatDistance(
+								new Date(report.createdAt),
+								new Date(),
+								{
+									addSuffix: true
+								}
+							)
+						}}
+					</span>
 					<br />
 					<span v-if="report.description">
 						<strong>Description:</strong>
@@ -81,7 +94,9 @@
 
 <script>
 import { mapActions, mapState } from "vuex";
+import { formatDistance } from "date-fns";
 
+import UserIdToUsername from "../UserIdToUsername.vue";
 import Modal from "./Modal.vue";
 
 export default {
@@ -96,9 +111,10 @@ export default {
 		}
 	},
 	methods: {
+		formatDistance,
 		...mapActions("modals", ["closeModal"])
 	},
-	components: { Modal }
+	components: { Modal, UserIdToUsername }
 };
 </script>