fix: issues with adding date-fns

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

frontend/components/Modals/Playlists/Edit.vue

@@ -137,7 +137,6 @@
 <script>
 import { mapState, mapActions } from "vuex";
 
-import { format } from "date-fns";
 import { Toast } from "vue-roaster";
 import Modal from "../Modal.vue";
 import io from "../../../io";
@@ -202,10 +201,10 @@ export default {
 		});
 	},
 	methods: {
-		formatTime(length) {
-			if (length <= 0) return "0 seconds";
+		formatTime(duration) {
+			if (duration <= 0) return "0 seconds";
 
-			const hours = Math.floor(format(length, "HH"));
+			const hours = Math.floor(duration / (60 * 60));
 			const formatHours = () => {
 				if (hours > 0) {
 					if (hours > 1) {
@@ -217,7 +216,7 @@ export default {
 				return "";
 			};
 
-			const minutes = format(length, "mm");
+			const minutes = Math.floor((duration - hours) / 60);
 			const formatMinutes = () => {
 				if (minutes > 0) {
 					if (minutes > 1) {
@@ -229,7 +228,9 @@ export default {
 				return "";
 			};
 
-			const seconds = format(length, "ss");
+			const seconds = Math.floor(
+				duration - hours * 60 * 60 - minutes * 60
+			);
 			const formatSeconds = () => {
 				if (seconds > 0) {
 					if (seconds > 1) {

frontend/components/Modals/ViewPunishment.vue

@@ -19,21 +19,31 @@
 						<strong>Expires at:</strong>
 						{{
 							format(
-								punishment.expiresAt,
-								"MMMM Do YYYY, h:mm:ss a"
+								parseISO(punishment.expiresAt),
+								"MMMM do yyyy, h:mm:ss a"
 							)
 						}}
-						({{ formatDistance(punishment.expiresAt, new Date()) }})
+						({{
+							formatDistance(
+								parseISO(punishment.expiresAt),
+								new Date(),
+								{ addSuffix: true }
+							)
+						}})
 						<br />
 						<strong>Punished at:</strong>
 						{{
 							format(
-								punishment.punishedAt,
-								"MMMM Do YYYY, h:mm:ss a"
+								parseISO(punishment.punishedAt),
+								"MMMM do yyyy, h:mm:ss a"
 							)
 						}}
 						({{
-							formatDistance(punishment.punishedAt, new Date())
+							formatDistance(
+								parseISO(punishment.punishedAt),
+								new Date(),
+								{ addSuffix: true }
+							)
 						}})
 						<br />
 						<strong>Punished by:</strong>
@@ -61,7 +71,7 @@
 
 <script>
 import { mapState, mapActions } from "vuex";
-import { format, formatDistance } from "date-fns"; // eslint-disable-line no-unused-vars
+import { format, formatDistance, parseISO } from "date-fns"; // eslint-disable-line no-unused-vars
 
 import io from "../../io";
 import Modal from "./Modal.vue";
@@ -85,7 +95,10 @@ export default {
 		});
 	},
 	methods: {
-		...mapActions("modals", ["closeModal"])
+		...mapActions("modals", ["closeModal"]),
+		format,
+		formatDistance,
+		parseISO
 	}
 };
 </script>

frontend/components/Modals/WhatIsNew.vue

@@ -119,7 +119,7 @@ export default {
 			this.isModalActive = !this.isModalActive;
 		},
 		formatDate: unix => {
-			return format(unix, "DD-MM-YYYY");
+			return format(unix, "dd-MM-yyyy");
 		}
 	},
 	events: {

frontend/components/User/Show.vue

@@ -65,7 +65,7 @@
 <script>
 import { mapState } from "vuex";
 import { Toast } from "vue-roaster";
-import { format } from "date-fns";
+import { format, parseISO } from "date-fns";
 
 import MainHeader from "../MainHeader.vue";
 import MainFooter from "../MainFooter.vue";
@@ -94,8 +94,8 @@ export default {
 					else {
 						this.user = res.data;
 						this.user.createdAt = format(
-							this.user.createdAt,
-							"MMMM D YYYY"
+							parseISO(this.user.createdAt),
+							"MMMM do yyyy"
 						);
 						this.isUser = true;
 					}

frontend/components/pages/Banned.vue

@@ -4,9 +4,7 @@
 		<i class="material-icons">not_interested</i>
 		<h4>
 			You are banned for
-			<strong>{{
-				formatDistance(ban.expiresAt, Date.now(), { addSuffix: true })
-			}}</strong>
+			<strong>{{ formatDistance(ban.expiresAt, Date.now()) }}</strong>
 		</h4>
 		<h5 class="reason">
 			<strong>Reason: </strong>
@@ -21,7 +19,8 @@ import { formatDistance } from "date-fns"; // eslint-disable-line no-unused-vars
 export default {
 	computed: mapState({
 		ban: state => state.user.auth.ban
-	})
+	}),
+	methods: { formatDistance }
 };
 </script>
 

frontend/components/pages/News.vue

@@ -118,7 +118,7 @@ export default {
 	},
 	methods: {
 		formatDate: unix => {
-			return format(unix, "DD-MM-YYYY");
+			return format(unix, "dd-MM-yyyy");
 		}
 	}
 };