refactor(ViewPunishment): Converted to composition API

frontend/src/components/modals/ViewPunishment.vue

@@ -1,3 +1,62 @@
+<script setup lang="ts">
+import { useStore } from "vuex";
+import { defineAsyncComponent, onMounted, onBeforeUnmount } from "vue";
+import Toast from "toasters";
+import { useModalState, useModalActions } from "@/vuex_helpers";
+import ws from "@/ws";
+
+const PunishmentItem = defineAsyncComponent(
+	() => import("@/components/PunishmentItem.vue")
+);
+
+const props = defineProps({
+	modalUuid: { type: String, default: "" }
+});
+
+const store = useStore();
+
+const { socket } = store.state.websockets;
+
+const { punishmentId, punishment } = useModalState(
+	"modals/viewPunishment/MODAL_UUID",
+	{
+		modalUuid: props.modalUuid
+	}
+);
+
+const { viewPunishment } = useModalActions(
+	"modals/viewPunishment/MODAL_UUID",
+	["viewPunishment"],
+	{
+		modalUuid: props.modalUuid
+	}
+);
+
+const closeCurrentModal = () =>
+	store.dispatch("modalVisibility/closeCurrentModal");
+
+const init = () => {
+	socket.dispatch(`punishments.findOne`, punishmentId, res => {
+		if (res.status === "success") {
+			const { punishment } = res.data;
+			viewPunishment(punishment);
+		} else {
+			new Toast("Punishment with that ID not found");
+			closeCurrentModal();
+		}
+	});
+};
+
+onMounted(() => {
+	ws.onConnect(init);
+});
+
+onBeforeUnmount(() => {
+	// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+	store.unregisterModule(["modals", "viewPunishment", props.modalUuid]);
+});
+</script>
+
 <template>
 	<div>
 		<modal title="View Punishment">
@@ -7,70 +66,3 @@
 		</modal>
 	</div>
 </template>
-
-<script>
-import { mapGetters, mapActions } from "vuex";
-import { format, formatDistance, parseISO } from "date-fns";
-
-import Toast from "toasters";
-import ws from "@/ws";
-import { mapModalState, mapModalActions } from "@/vuex_helpers";
-
-import PunishmentItem from "../PunishmentItem.vue";
-
-export default {
-	components: { PunishmentItem },
-	props: {
-		modalUuid: { type: String, default: "" }
-	},
-	data() {
-		return {
-			ban: {}
-		};
-	},
-	computed: {
-		...mapModalState("modals/viewPunishment/MODAL_UUID", {
-			punishmentId: state => state.punishmentId,
-			punishment: state => state.punishment
-		}),
-		...mapGetters({
-			socket: "websockets/getSocket"
-		})
-	},
-	mounted() {
-		ws.onConnect(this.init);
-	},
-	beforeUnmount() {
-		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-		this.$store.unregisterModule([
-			"modals",
-			"viewPunishment",
-			this.modalUuid
-		]);
-	},
-	methods: {
-		init() {
-			this.socket.dispatch(
-				`punishments.findOne`,
-				this.punishmentId,
-				res => {
-					if (res.status === "success") {
-						const { punishment } = res.data;
-						this.viewPunishment(punishment);
-					} else {
-						new Toast("Punishment with that ID not found");
-						this.closeModal("viewPunishment");
-					}
-				}
-			);
-		},
-		...mapActions("modalVisibility", ["closeModal"]),
-		...mapModalActions("modals/viewPunishment/MODAL_UUID", [
-			"viewPunishment"
-		]),
-		format,
-		formatDistance,
-		parseISO
-	}
-};
-</script>