refactor: use types everywhere

.commitlintrc.json

@@ -0,0 +1 @@
+{ "extends": ["@commitlint/config-conventional"] }

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm exec -- commitlint --edit ${1}

.prettierignore

@@ -1,2 +1 @@
-*.js
-!packages/client/tailwind.config.js
+*.js

package.json

@@ -8,5 +8,14 @@
 		"build": "pnpm --stream -r build",
 		"start:client": "pnpm --filter @ocwebutils/sanitychecker_client run start",
 		"start:server": "pnpm --filter @ocwebutils/sanitychecker_server run start"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^17.6.3",
+		"@commitlint/config-conventional": "^17.6.3",
+		"husky": "^8.0.3"
+	},
+	"engines": {
+		"node": ">=16",
+		"pnpm": ">=8"
 	}
 }

packages/client/nuxt.config.ts

@@ -101,6 +101,9 @@ export default defineNuxtConfig({
 	tailwindcss: {
 		viewer: false
 	},
+	typescript: {
+		strict: true
+	},
 	srcDir: "src/",
 	ssr: true,
 	vite: {

packages/client/package.json

@@ -13,26 +13,30 @@
 	},
 	"devDependencies": {
 		"@kevinmarrec/nuxt-pwa": "0.17.0",
-		"@nuxt/image-edge": "1.0.0-28020728.5df24eb",
+		"@nuxt/image-edge": "1.0.0-28059208.2abef1b",
 		"@nuxtjs/color-mode": "3.2.0",
-		"@nuxtjs/tailwindcss": "6.6.7",
-		"@types/json-schema": "^7.0.11",
-		"@types/marked": "4.0.8",
+		"@nuxtjs/tailwindcss": "6.6.8",
+		"@types/json-schema": "7.0.11",
+		"@types/marked": "4.3.0",
+		"@types/node": "18.8.0",
 		"@types/plist": "3.0.2",
-		"@types/uuid": "9.0.1",
-		"nuxt": "3.3.2"
+		"nuxt": "3.4.3"
 	},
 	"dependencies": {
-		"@fortawesome/fontawesome-svg-core": "6.3.0",
-		"@fortawesome/free-brands-svg-icons": "6.3.0",
-		"@fortawesome/free-solid-svg-icons": "6.3.0",
+		"@fortawesome/fontawesome-svg-core": "6.4.0",
+		"@fortawesome/free-brands-svg-icons": "6.4.0",
+		"@fortawesome/free-solid-svg-icons": "6.4.0",
 		"@fortawesome/vue-fontawesome": "3.0.3",
 		"autoprefixer": "10.4.14",
-		"axios": "1.3.4",
-		"daisyui": "2.51.5",
-		"fast-xml-parser": "4.1.3",
-		"marked": "4.3.0",
+		"axios": "1.4.0",
+		"daisyui": "2.51.6",
+		"fast-xml-parser": "4.2.2",
+		"marked": "5.0.1",
 		"vue-dompurify-html": "4.0.0",
 		"vue-toastification": "next"
+	},
+	"engines": {
+		"node": ">=16",
+		"pnpm": ">=8"
 	}
 }

packages/client/src/class/countdown.ts

@@ -1,8 +1,7 @@
 import { deleteResult } from "@/util/handleForm";
 
 export class Countdown {
-	elements: {
-		countdown: HTMLSpanElement;
+	countdown: {
 		days: HTMLSpanElement;
 		hours: HTMLSpanElement;
 		minutes: HTMLSpanElement;
@@ -12,48 +11,49 @@ export class Countdown {
 		hours: number;
 		minutes: number;
 	};
-	interval: NodeJS.Timer;
-	constructor(element) {
-		this.elements = {
-			countdown: element,
-			days: element.querySelector(".days"),
-			hours: element.querySelector(".hours"),
-			minutes: element.querySelector(".minutes")
+	interval: NodeJS.Timer | undefined = undefined;
+	constructor(element: HTMLSpanElement) {
+		this.countdown = {
+			days: element.querySelector(".days") as HTMLSpanElement,
+			hours: element.querySelector(".hours") as HTMLSpanElement,
+			minutes: element.querySelector(".minutes") as HTMLSpanElement
 		};
+
 		this.values = {
-			days: Number(this.elements.days.style.getPropertyValue("--value")),
-			hours: Number(this.elements.hours.style.getPropertyValue("--value")),
-			minutes: Number(this.elements.minutes.style.getPropertyValue("--value"))
+			days: Number(this.countdown.days.style.getPropertyValue("--value")),
+			hours: Number(this.countdown.hours.style.getPropertyValue("--value")),
+			minutes: Number(this.countdown.minutes.style.getPropertyValue("--value"))
 		};
-		this.interval = null;
 	}
 	start() {
+		if (!this.countdown.days || !this.countdown.hours || !this.countdown.minutes) return;
 		setTimeout(async () => await this.check(), 1000);
 		this.interval = setInterval(() => {
 			if (this.values.hours === 0 && this.values.minutes === 0) {
 				this.check();
 				this.values.days--;
-				this.elements.days.style.setProperty("--value", this.values.days.toString());
+				this.countdown.days.style.setProperty("--value", this.values.days.toString());
 				this.values.hours = 23;
 				this.values.minutes = 59;
 				return;
 			}
 			if (this.values.minutes === 0) {
 				this.check();
 				this.values.hours--;
-				this.elements.hours.style.setProperty("--value", this.values.hours.toString());
+				this.countdown.hours.style.setProperty("--value", this.values.hours.toString());
 				this.values.minutes = 59;
 				return;
 			}
 			this.values.minutes--;
-			this.elements.minutes.style.setProperty("--value", this.values.minutes.toString());
+			this.countdown.minutes.style.setProperty("--value", this.values.minutes.toString());
 			this.check();
 		}, 1000 * 60);
 	}
 	private async check() {
 		if (this.values.days <= 0 && this.values.hours <= 0 && this.values.minutes <= 0) {
 			this.stop();
-			await deleteResult(this.elements.countdown);
+			const getParentElement = this.countdown.days.parentElement as HTMLElement;
+			await deleteResult(getParentElement);
 		}
 	}
 	private stop() {

packages/client/src/components/form/formSelection.vue

@@ -34,56 +34,52 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { getVariable } from "@/util/utils";
 import { axiosInstance } from "@/util/axiosInstance";
 
-export default {
-	data() {
-		return {
-			supportedCPUGenerations: null,
-			supportedOCVersions: null,
-			selectedCPUModel: "default",
-			selectedOCVersion: ref<string | null>(null)
-		};
-	},
-	async mounted() {
-		const supportedCPUGenerations = await getSupportedCPUGenerations();
-		this.supportedCPUGenerations = supportedCPUGenerations;
-		this.restoreSelections();
-	},
-	methods: {
-		getSupportedOCVersions: async function (cpumodel: string) {
-			try {
-				const { data } = await axiosInstance.get(`/supportedOCVersions/${cpumodel}`);
-				if (!data.success) return null;
+const supportedCPUGenerations = ref(null),
+	supportedOCVersions = ref(null),
+	selectedCPUModel = ref("default"),
+	selectedOCVersion = ref<string | null>(null);
 
-				const supportedVersions = data.data.supportedVersions;
+onMounted(async () => {
+	const supportedCPUGenerationsObj = await getSupportedCPUGenerations();
+	console.log(supportedCPUGenerationsObj);
+	supportedCPUGenerations.value = supportedCPUGenerationsObj;
+	console.log(supportedCPUGenerations);
+	restoreSelections();
+});
 
-				this.supportedOCVersions = supportedVersions.sort((a: string, b: string) => b.localeCompare(a));
-				this.selectedOCVersion = supportedVersions[0];
-			} catch (err) {
-				return null;
-			}
-		},
-		restoreSelections: async function () {
-			try {
-				const lastSelections = getVariable("lastOptions") as { cpuModel: string; ocVersion: string };
+watch(selectedCPUModel, function (newval) {
+	getSupportedOCVersions(newval);
+});
 
-				if (!lastSelections) return;
+const restoreSelections = () => {
+	try {
+		const lastSelections = getVariable("lastOptions") as { cpuModel: string; ocVersion: string };
+
+		if (!lastSelections) return;
+
+		const { cpuModel, ocVersion } = lastSelections;
+		selectedCPUModel.value = cpuModel;
+		selectedOCVersion.value = ocVersion;
+	} catch (err) {
+		return;
+	}
+};
 
-				const { cpuModel, ocVersion } = lastSelections;
-				this.selectedCPUModel = cpuModel;
-				this.selectedOCVersion = ocVersion;
-			} catch (err) {
-				return;
-			}
-		}
-	},
-	watch: {
-		selectedCPUModel: function (newval) {
-			this.getSupportedOCVersions(newval);
-		}
+const getSupportedOCVersions = async (cpumodel: string) => {
+	try {
+		const { data } = await axiosInstance.get(`/supportedOCVersions/${cpumodel}`);
+		if (!data.success) return null;
+
+		const supportedVersions = data.data.supportedVersions;
+
+		supportedOCVersions.value = supportedVersions.sort((a: string, b: string) => b.localeCompare(a));
+		selectedOCVersion.value = supportedVersions[0];
+	} catch (err) {
+		return null;
 	}
 };
 

packages/client/src/components/form/uploadedFilesModal.vue

@@ -29,7 +29,7 @@
 									</span>
 								</th>
 								<th>
-									<button class="btn btn-error btn-sm" :id="'delete-result-' + index" @click.prevent="deleteResult">Delete</button>
+									<button class="btn btn-error btn-sm" :id="'delete-result-' + index" @click.prevent="executeResultDeletion">Delete</button>
 								</th>
 							</tr>
 						</tbody>
@@ -42,46 +42,41 @@
 		</label>
 	</label>
 </template>
-<script lang="ts">
-import { createIdentificator, getIdentificator } from "@/util/identificator";
+<script setup lang="ts">
+import { getIdentificator } from "@/util/identificator";
 import { Countdown } from "@/class/countdown";
 import { deleteResult } from "@/util/handleForm";
 import { axiosInstance } from "@/util/axiosInstance";
 import { useToast } from "vue-toastification";
 import { isAxiosError } from "axios";
 
-export default {
-	async setup() {
-		const uploads = await getUploadList(),
-			date = Date.now();
+const uploads = await getUploadList(),
+	date = Date.now();
 
-		return { uploads, date };
-	},
-	mounted() {
-		document.querySelectorAll(".countdown").forEach(e => {
-			const timer = new Countdown(e);
-			timer.start();
-		});
-	},
-	methods: {
-		getDiff: (start: number, end: number) => {
-			let diffms = Math.abs(end - start) / 1000;
-			const days = Math.floor(diffms / 86400);
-			diffms -= days * 86400;
-			const hours = Math.floor(diffms / 3600) % 24;
-			diffms -= hours * 3600;
-			const minutes = Math.floor(diffms / 60) % 60;
-			return [days, hours, minutes];
-		},
-		deleteResult: async (e: { target: HTMLButtonElement }) => {
-			await deleteResult(e);
-		}
-	}
-};
+onMounted(() => {
+	document.querySelectorAll(".countdown").forEach(e => {
+		const timer = new Countdown(e as HTMLSpanElement);
+		timer.start();
+	});
+});
 
 const toast = useToast();
 
-const getUploadList = async () => {
+const getDiff = (start: number, end: number) => {
+	let diffms = Math.abs(end - start) / 1000;
+	const days = Math.floor(diffms / 86400);
+	diffms -= days * 86400;
+	const hours = Math.floor(diffms / 3600) % 24;
+	diffms -= hours * 3600;
+	const minutes = Math.floor(diffms / 60) % 60;
+	return [days, hours, minutes];
+};
+
+const executeResultDeletion = async (e: MouseEvent) => {
+	await deleteResult(e);
+};
+
+async function getUploadList() {
 	const uuid = await getIdentificator();
 	try {
 		const { data } = await axiosInstance.get("/user/uploadedResults", {
@@ -108,7 +103,7 @@ const getUploadList = async () => {
 			return;
 		}
 	}
-};
+}
 </script>
 <style>
 .dark table,

packages/client/src/components/hero/formContent.vue

@@ -35,24 +35,29 @@ export default {
 		return { router, toast };
 	},
 	methods: {
-		dropFileHandler: async function (msg) {
-			const file = msg[0] ?? msg.target?.files[0];
+		dropFileHandler: async function (msg: File[] | Event) {
+			const message = msg instanceof Event ? (msg?.target as HTMLInputElement).files : msg;
+			if (!message || !message.length) return;
+			const file = message[0];
+
 			if (!file?.name.endsWith(".plist")) return this.showErrorNotif("This isn't valid plist file!");
 			if (file.size > 2 * 1024 * 1024) return this.showErrorNotif("File size is too big!");
 			const xmlval = await validateplist(file),
 				parsedplist = await parseplist(file);
+
 			if (!xmlval || !parsedplist) return this.showErrorNotif("This isn't valid plist file!");
 			this.processing = true;
-			const result = await handleForm(parsedplist);
+
+			const result = await handleForm(parsedplist as Record<string, unknown>);
 			if (!result.success) {
 				this.showErrorNotif(result.error);
 				this.processing = false;
 				return;
 			}
 			this.router.push(`/results/${result.data.resultId}`);
 		},
-		showErrorNotif: async function (message) {
-			this.toast.error(message, {
+		showErrorNotif: async function (msg: string) {
+			this.toast.error(msg, {
 				timeout: 3000
 			});
 		}

packages/client/src/layouts/default.vue

@@ -18,8 +18,9 @@ import { onMounted } from "vue";
 const colorMode = useColorMode();
 
 onMounted(() => {
-	colorMode.value === "light"
-		? document.querySelector("html").setAttribute("data-theme", "light")
-		: document.querySelector("html").setAttribute("data-theme", "dark");
+	const htmlSelector = document.querySelector("html");
+	if (!htmlSelector) return;
+	if (colorMode.value === "light") htmlSelector.setAttribute("data-theme", "light");
+	else htmlSelector.setAttribute("data-theme", "dark");
 });
 </script>