From 39c38c737114dc7f946b1895b2a4ba27a5546c60 Mon Sep 17 00:00:00 2001
From: HampusM <hampus@hampusmat.com>
Date: Tue, 6 Jul 2021 13:07:07 +0200
Subject: Migrated frontend to typescript

---
 packages/client/src/views/Home.vue               | 38 +++++++++------
 packages/client/src/views/PageNotFound.vue       |  6 ++-
 packages/client/src/views/Repository.vue         | 27 ++++++-----
 packages/client/src/views/RepositoryAbout.vue    | 26 +++++-----
 packages/client/src/views/RepositoryCommit.vue   | 28 ++++++-----
 packages/client/src/views/RepositoryLog.vue      | 41 +++++++++++-----
 packages/client/src/views/RepositoryRedirect.vue |  0
 packages/client/src/views/RepositoryTree.vue     | 60 +++++++++++++++---------
 8 files changed, 137 insertions(+), 89 deletions(-)
 delete mode 100644 packages/client/src/views/RepositoryRedirect.vue

(limited to 'packages/client/src/views')

diff --git a/packages/client/src/views/Home.vue b/packages/client/src/views/Home.vue
index 309fa8b..88a5429 100644
--- a/packages/client/src/views/Home.vue
+++ b/packages/client/src/views/Home.vue
@@ -27,16 +27,22 @@
 	</div>
 </template>
 
-<script>
-import HomeHeader from "@/components/HomeHeader";
-import HomeProjectsHeader from "@/components/HomeProjectsHeader";
+<script lang="ts">
+import { defineComponent, Ref, ref } from "vue";
+import HomeHeader from "../components/HomeHeader.vue";
+import HomeProjectsHeader from "../components/HomeProjectsHeader.vue";
 import Loading from "vue-loading-overlay";
-import BaseErrorMessage from "@/components/BaseErrorMessage";
-import fetchData from "@/util/fetch";
-import { ref } from "vue";
+import BaseErrorMessage from "../components/BaseErrorMessage.vue";
+import fetchData from "../util/fetch";
 import { formatDistance } from "date-fns";
 
-export default {
+type Repository = {
+	name: string,
+	description: string,
+	last_updated: number | string
+}
+
+export default defineComponent({
 	name: "Home",
 	components: {
 		HomeHeader,
@@ -46,16 +52,18 @@ export default {
 	},
 	setup() {
 		const projects = ref({});
-		const search = ref(null);
-		const is_loading = ref(true);
-		const fetch_failed = ref(null);
+		const search: Ref<string | null> = ref(null);
+		const is_loading: Ref<boolean> = ref(true);
+		const fetch_failed: Ref<string | null> = ref(null);
 
 		const fetchProjects = async() => {
-			const projects_data = await fetchData("repos", fetch_failed, is_loading, "projects");
+			const projects_data: Repository[] = await fetchData("repos", fetch_failed, is_loading, "projects");
 
-			projects_data.reduce((result, project) => {
-				project.last_updated = formatDistance(new Date(project.last_updated * 1000), new Date(), { addSuffix: true });
-				result.push(projects);
+			projects_data.reduce((result: Repository[], project) => {
+				if(typeof project.last_updated === "number") {
+					project.last_updated = formatDistance(new Date(project.last_updated * 1000), new Date(), { addSuffix: true });
+					result.push(project);
+				}
 				return result;
 			}, []);
 
@@ -72,7 +80,7 @@ export default {
 	created() {
 		this.fetchProjects();
 	}
-};
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/views/PageNotFound.vue b/packages/client/src/views/PageNotFound.vue
index d2b6fbb..f373f42 100644
--- a/packages/client/src/views/PageNotFound.vue
+++ b/packages/client/src/views/PageNotFound.vue
@@ -3,7 +3,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "PageNotFound"
-};
+});
 </script>
diff --git a/packages/client/src/views/Repository.vue b/packages/client/src/views/Repository.vue
index 7b31545..c91491c 100644
--- a/packages/client/src/views/Repository.vue
+++ b/packages/client/src/views/Repository.vue
@@ -8,25 +8,26 @@
 	</div>
 </template>
 
-<script>
-import RepositoryHeader from "@/components/RepositoryHeader";
-import RepositoryNavbar from "@/components/RepositoryNavbar";
-import { ref } from "vue";
+<script lang="ts">
+import { defineComponent, Ref, ref } from "vue";
+import { Router } from "vue-router";
 
-export default {
+import RepositoryHeader from "../components/RepositoryHeader.vue";
+import RepositoryNavbar from "../components/RepositoryNavbar.vue";
+import { getParam } from "../util/util";
+
+export default defineComponent({
 	name: "Repository",
 	components: {
 		RepositoryHeader,
 		RepositoryNavbar
 	},
 	setup(props) {
-		const name = ref("");
-		const description = ref("");
-		const has_readme = ref(null);
-
-		const fetchProjects = async(router, path) => {
-			const repository = router.currentRoute._rawValue.params.repo;
+		const name: Ref<string> = ref("");
+		const description: Ref<string> = ref("");
+		const has_readme: Ref<boolean> = ref(false);
 
+		const fetchProjects = async(repository: string, router: Router, path: string) => {
 			const repository_data = await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos/${repository}`)
 				.catch(() => {
 					if(path.split("/").length === 2) {
@@ -46,7 +47,7 @@ export default {
 		return { name, description, has_readme, fetchProjects };
 	},
 	created() {
-		this.fetchProjects(this.$router, this.$route.path);
+		this.fetchProjects(getParam(this.$route.params, "repo"), this.$router, this.$route.path);
 	}
-};
+});
 </script>
diff --git a/packages/client/src/views/RepositoryAbout.vue b/packages/client/src/views/RepositoryAbout.vue
index 18855fe..ff96f53 100644
--- a/packages/client/src/views/RepositoryAbout.vue
+++ b/packages/client/src/views/RepositoryAbout.vue
@@ -13,14 +13,16 @@
 	</div>
 </template>
 
-<script>
-import RepositoryTreeBlob from "@/components/RepositoryTreeBlob";
+<script lang="ts">
+import { defineComponent, Ref, ref } from "vue";
+import fetchData from "../util/fetch";
+
+import RepositoryTreeBlob from "../components/RepositoryTreeBlob.vue";
 import Loading from "vue-loading-overlay";
-import BaseErrorMessage from "@/components/BaseErrorMessage";
-import { ref } from "vue";
-import fetchData from "@/util/fetch";
+import BaseErrorMessage from "../components/BaseErrorMessage.vue";
+import { getParam } from "../util/util";
 
-export default {
+export default defineComponent({
 	name: "RepositoryAbout",
 	components: {
 		RepositoryTreeBlob,
@@ -28,11 +30,11 @@ export default {
 		BaseErrorMessage
 	},
 	setup(props) {
-		const readme = ref(null);
-		const is_loading = ref(true);
-		const fetch_failed = ref(null);
+		const readme: Ref<string | null> = ref(null);
+		const is_loading: Ref<boolean> = ref(true);
+		const fetch_failed: Ref<string> = ref("");
 
-		const fetchReadme = async(repository) => {
+		const fetchReadme = async(repository: string) => {
 			const readme_data = await fetchData(`repos/${repository}/tree?path=README.md`, fetch_failed, is_loading, "tree");
 
 			if(readme_data) {
@@ -48,9 +50,9 @@ export default {
 		};
 	},
 	created() {
-		this.fetchReadme(this.$router.currentRoute._rawValue.params.repo);
+		this.fetchReadme(getParam(this.$route.params, "repo"));
 	}
-};
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/views/RepositoryCommit.vue b/packages/client/src/views/RepositoryCommit.vue
index a2caa74..50ec9ad 100644
--- a/packages/client/src/views/RepositoryCommit.vue
+++ b/packages/client/src/views/RepositoryCommit.vue
@@ -49,16 +49,18 @@
 	</div>
 </template>
 
-<script>
-import BaseBreadcrumb from "@/components/BaseBreadcrumb";
-import CommitPatch from "@/components/CommitPatch";
-import Loading from "vue-loading-overlay";
-import BaseErrorMessage from "@/components/BaseErrorMessage";
-import { ref } from "vue";
+<script lang="ts">
+import { defineComponent, Ref, ref } from "vue";
 import { format } from "date-fns";
-import fetchData from "@/util/fetch";
+import fetchData from "../util/fetch";
+
+import BaseBreadcrumb from "../components/BaseBreadcrumb.vue";
+import CommitPatch from "../components/CommitPatch.vue";
+import Loading from "vue-loading-overlay";
+import BaseErrorMessage from "../components/BaseErrorMessage.vue";
+import { getParam } from "../util/util";
 
-export default {
+export default defineComponent({
 	name: "RepositoryCommit",
 	components: {
 		BaseBreadcrumb,
@@ -68,10 +70,10 @@ export default {
 	},
 	setup() {
 		const commit = ref(null);
-		const is_loading = ref(true);
-		const fetch_failed = ref(null);
+		const is_loading: Ref<boolean> = ref(true);
+		const fetch_failed: Ref<string> = ref("");
 
-		const fetchCommit = async(repository, commit_id) => {
+		const fetchCommit = async(repository: string, commit_id: string) => {
 			const commit_data = await fetchData(`repos/${repository}/log/${commit_id}`, fetch_failed, is_loading, "commit");
 
 			if(commit_data) {
@@ -83,9 +85,9 @@ export default {
 		return { commit, is_loading, fetch_failed, fetchCommit };
 	},
 	created() {
-		this.fetchCommit(this.$router.currentRoute._rawValue.params.repo, this.$router.currentRoute._rawValue.params.commit);
+		this.fetchCommit(getParam(this.$route.params, "repo"), getParam(this.$route.params, "commit"));
 	}
-};
+});
 </script>
 
 <style lang="scss">
diff --git a/packages/client/src/views/RepositoryLog.vue b/packages/client/src/views/RepositoryLog.vue
index cda2889..e210dd2 100644
--- a/packages/client/src/views/RepositoryLog.vue
+++ b/packages/client/src/views/RepositoryLog.vue
@@ -48,14 +48,29 @@
 	</div>
 </template>
 
-<script>
-import Loading from "vue-loading-overlay";
-import BaseErrorMessage from "@/components/BaseErrorMessage";
-import { ref } from "vue";
+<script lang="ts">
+import { defineComponent, Ref, ref } from "vue";
 import { format } from "date-fns";
-import fetchData from "@/util/fetch";
+import fetchData from "../util/fetch";
+import { getParam } from "../util/util";
+
+import Loading from "vue-loading-overlay";
+import BaseErrorMessage from "../components/BaseErrorMessage.vue";
+
+type Commit = {
+	id: string,
+	author: {
+		name: string,
+		email: string
+	},
+	message: string,
+	date: number,
+	insertions: number,
+	deletions: number,
+	files_changed: number
+}
 
-export default {
+export default defineComponent({
 	name: "RepositoryLog",
 	components: {
 		Loading,
@@ -67,12 +82,12 @@ export default {
 		};
 	},
 	setup() {
-		const commits = ref(null);
-		const is_loading = ref(true);
-		const fetch_failed = ref(null);
+		const commits: Ref<Commit[] | null> = ref(null);
+		const is_loading: Ref<boolean> = ref(true);
+		const fetch_failed: Ref<string> = ref("");
 
-		const fetchLog = async(repository) => {
-			const log_data = await fetchData(`repos/${repository}/log`, fetch_failed, is_loading, "log");
+		const fetchLog = async(repository: string) => {
+			const log_data: Commit[] = await fetchData(`repos/${repository}/log`, fetch_failed, is_loading, "log");
 			if(log_data) {
 				commits.value = log_data;
 			}
@@ -81,9 +96,9 @@ export default {
 		return { commits, is_loading, fetch_failed, fetchLog };
 	},
 	created() {
-		this.fetchLog(this.$router.currentRoute._rawValue.params.repo);
+		this.fetchLog(getParam(this.$route.params, "repo"));
 	}
-};
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/views/RepositoryRedirect.vue b/packages/client/src/views/RepositoryRedirect.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/packages/client/src/views/RepositoryTree.vue b/packages/client/src/views/RepositoryTree.vue
index 6a788d3..ae4fd6b 100644
--- a/packages/client/src/views/RepositoryTree.vue
+++ b/packages/client/src/views/RepositoryTree.vue
@@ -24,16 +24,33 @@
 	</div>
 </template>
 
-<script>
-import BaseBreadcrumb from "@/components/BaseBreadcrumb";
-import RepositoryTreeBlob from "@/components/RepositoryTreeBlob";
-import RepositoryTreeTree from "@/components/RepositoryTreeTree";
-import BaseErrorMessage from "@/components/BaseErrorMessage";
+<script lang="ts">
+import { defineComponent, Ref, ref } from "vue";
+import fetchData from "../util/fetch";
+import { getParam } from "../util/util";
+
+import BaseBreadcrumb from "../components/BaseBreadcrumb.vue";
+import RepositoryTreeBlob from "../components/RepositoryTreeBlob.vue";
+import RepositoryTreeTree from "../components/RepositoryTreeTree.vue";
+import BaseErrorMessage from "../components/BaseErrorMessage.vue";
 import Loading from "vue-loading-overlay";
-import { ref } from "vue";
-import fetchData from "@/util/fetch";
 
-export default {
+type TreeEntry = {
+	name: string,
+	type: "tree" | "blob",
+	latest_commit: {
+		id: string,
+		message: string,
+		date: number
+	}
+};
+
+type Tree = {
+	type: "tree" | "blob",
+	content: string | TreeEntry[]
+};
+
+export default defineComponent({
 	name: "RepositoryTree",
 	components: {
 		BaseBreadcrumb,
@@ -51,25 +68,26 @@ export default {
 	watch: {
 		pathArr() {
 			this.is_loading = true;
-			this.fetchTree(this.$router.currentRoute._rawValue.params.repo);
+
+			this.fetchTree(getParam(this.$route.params, "repo"));
 		}
 	},
 	setup(props) {
-		const tree = ref(null);
-		const blob_content = ref(null);
-		const is_loading = ref(true);
-		const fetch_failed = ref("");
-		const path = ref("");
+		const tree: Ref<TreeEntry[] | null> = ref(null);
+		const blob_content: Ref<string | null> = ref(null);
+		const is_loading: Ref<boolean> = ref(true);
+		const fetch_failed: Ref<string> = ref("");
+		const path: Ref<string | null> = ref(null);
 
-		const fetchTree = async(repository) => {
+		const fetchTree = async(repository: string) => {
 			blob_content.value = null;
 			tree.value = null;
-			path.value = props.pathArr ? props.pathArr.join("/") : undefined;
+			path.value = props.pathArr ? props.pathArr.join("/") : null;
 
-			const tree_data = await fetchData(`repos/${repository}/tree${path.value ? "?path=" + path.value : ""}`, fetch_failed, is_loading, "tree");
+			const tree_data: Tree = await fetchData(`repos/${repository}/tree${path.value ? "?path=" + path.value : ""}`, fetch_failed, is_loading, "tree");
 
 			if(tree_data) {
-				if(tree_data.type === "tree") {
+				if(tree_data.type === "tree" && tree_data.content instanceof Array) {
 					let tree_trees = tree_data.content.filter((entry) => entry.type === "tree");
 					tree_trees = tree_trees.sort((a, b) => a.name.localeCompare(b.name));
 
@@ -77,7 +95,7 @@ export default {
 					tree_blobs = tree_blobs.sort((a, b) => a.name.localeCompare(b.name));
 
 					tree.value = tree_trees.concat(tree_blobs);
-				} else {
+				} else if(typeof tree_data.content === "string") {
 					blob_content.value = tree_data.content;
 				}
 			}
@@ -93,9 +111,9 @@ export default {
 		};
 	},
 	created() {
-		this.fetchTree(this.$router.currentRoute._rawValue.params.repo);
+		this.fetchTree(getParam(this.$route.params, "repo"));
 	}
-};
+});
 </script>
 
 <style lang="scss" scoped>
-- 
cgit v1.2.3-18-g5258