From c2dc7906e47a05cecc6350fd6a3d6f6f955a3423 Mon Sep 17 00:00:00 2001
From: HampusM <hampus@hampusmat.com>
Date: Tue, 6 Jul 2021 14:55:58 +0200
Subject: Frontend uses shared types

---
 packages/client/src/views/Home.vue             | 20 ++++++++------------
 packages/client/src/views/Repository.vue       |  5 +++--
 packages/client/src/views/RepositoryAbout.vue  |  7 ++++---
 packages/client/src/views/RepositoryCommit.vue | 20 +++++++++++++-------
 packages/client/src/views/RepositoryLog.vue    | 18 +++---------------
 packages/client/src/views/RepositoryTree.vue   | 16 +---------------
 6 files changed, 32 insertions(+), 54 deletions(-)

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

diff --git a/packages/client/src/views/Home.vue b/packages/client/src/views/Home.vue
index 88a5429..1edafff 100644
--- a/packages/client/src/views/Home.vue
+++ b/packages/client/src/views/Home.vue
@@ -29,18 +29,14 @@
 
 <script lang="ts">
 import { defineComponent, Ref, ref } from "vue";
+import fetchData from "../util/fetch";
+import { formatDistance } from "date-fns";
+import { RepositorySummary } from "shared_types";
+
 import HomeHeader from "../components/HomeHeader.vue";
 import HomeProjectsHeader from "../components/HomeProjectsHeader.vue";
 import Loading from "vue-loading-overlay";
 import BaseErrorMessage from "../components/BaseErrorMessage.vue";
-import fetchData from "../util/fetch";
-import { formatDistance } from "date-fns";
-
-type Repository = {
-	name: string,
-	description: string,
-	last_updated: number | string
-}
 
 export default defineComponent({
 	name: "Home",
@@ -51,15 +47,15 @@ export default defineComponent({
 		BaseErrorMessage
 	},
 	setup() {
-		const projects = ref({});
+		const projects: Ref<RepositorySummary[] | null> = 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 fetch_failed: Ref<string> = ref("");
 
 		const fetchProjects = async() => {
-			const projects_data: Repository[] = await fetchData("repos", fetch_failed, is_loading, "projects");
+			const projects_data: RepositorySummary[] = await fetchData("repos", fetch_failed, is_loading, "projects");
 
-			projects_data.reduce((result: Repository[], project) => {
+			projects_data.reduce((result: RepositorySummary[], project) => {
 				if(typeof project.last_updated === "number") {
 					project.last_updated = formatDistance(new Date(project.last_updated * 1000), new Date(), { addSuffix: true });
 					result.push(project);
diff --git a/packages/client/src/views/Repository.vue b/packages/client/src/views/Repository.vue
index c91491c..8586b2a 100644
--- a/packages/client/src/views/Repository.vue
+++ b/packages/client/src/views/Repository.vue
@@ -11,10 +11,11 @@
 <script lang="ts">
 import { defineComponent, Ref, ref } from "vue";
 import { Router } from "vue-router";
+import { Repository } from "shared_types";
+import { getParam } from "../util/util";
 
 import RepositoryHeader from "../components/RepositoryHeader.vue";
 import RepositoryNavbar from "../components/RepositoryNavbar.vue";
-import { getParam } from "../util/util";
 
 export default defineComponent({
 	name: "Repository",
@@ -37,7 +38,7 @@ export default defineComponent({
 				});
 
 			if(repository_data) {
-				const data = (await repository_data.json()).data;
+				const data: Repository = (await repository_data.json()).data;
 				name.value = data.name;
 				description.value = data.description;
 				has_readme.value = data.has_readme;
diff --git a/packages/client/src/views/RepositoryAbout.vue b/packages/client/src/views/RepositoryAbout.vue
index ff96f53..dc759d1 100644
--- a/packages/client/src/views/RepositoryAbout.vue
+++ b/packages/client/src/views/RepositoryAbout.vue
@@ -16,11 +16,12 @@
 <script lang="ts">
 import { defineComponent, Ref, ref } from "vue";
 import fetchData from "../util/fetch";
+import { Tree } from "shared_types";
+import { getParam } from "../util/util";
 
 import RepositoryTreeBlob from "../components/RepositoryTreeBlob.vue";
 import Loading from "vue-loading-overlay";
 import BaseErrorMessage from "../components/BaseErrorMessage.vue";
-import { getParam } from "../util/util";
 
 export default defineComponent({
 	name: "RepositoryAbout",
@@ -35,9 +36,9 @@ export default defineComponent({
 		const fetch_failed: Ref<string> = ref("");
 
 		const fetchReadme = async(repository: string) => {
-			const readme_data = await fetchData(`repos/${repository}/tree?path=README.md`, fetch_failed, is_loading, "tree");
+			const readme_data: Tree = await fetchData(`repos/${repository}/tree?path=README.md`, fetch_failed, is_loading, "tree");
 
-			if(readme_data) {
+			if(readme_data && typeof readme_data.content === "string") {
 				readme.value = readme_data.content;
 			}
 		};
diff --git a/packages/client/src/views/RepositoryCommit.vue b/packages/client/src/views/RepositoryCommit.vue
index 50ec9ad..f0dec4a 100644
--- a/packages/client/src/views/RepositoryCommit.vue
+++ b/packages/client/src/views/RepositoryCommit.vue
@@ -16,18 +16,18 @@
 							<td class="commit-info-title">
 								Date
 							</td>
-							<td>{{ commit["date"] }}</td>
+							<td>{{ commit.pretty_date }}</td>
 						</tr>
 						<tr>
 							<td class="commit-info-title">
 								Message
 							</td>
-							<td>{{ commit["message"] }}</td>
+							<td>{{ commit.message }}</td>
 						</tr>
 					</tbody>
 				</table>
 				<div
-					v-for="(patch, index) in commit['diff']" :key="index"
+					v-for="(patch, index) in commit.diff" :key="index"
 					class="commit-patch">
 					<div class="commit-patch-header">
 						<span>{{ (patch.to === "/dev/null") ? patch.from : patch.to }} </span>
@@ -53,6 +53,7 @@
 import { defineComponent, Ref, ref } from "vue";
 import { format } from "date-fns";
 import fetchData from "../util/fetch";
+import { Commit } from "shared_types";
 
 import BaseBreadcrumb from "../components/BaseBreadcrumb.vue";
 import CommitPatch from "../components/CommitPatch.vue";
@@ -60,6 +61,10 @@ import Loading from "vue-loading-overlay";
 import BaseErrorMessage from "../components/BaseErrorMessage.vue";
 import { getParam } from "../util/util";
 
+interface PrettyDateCommit extends Commit {
+	pretty_date: string
+}
+
 export default defineComponent({
 	name: "RepositoryCommit",
 	components: {
@@ -69,16 +74,17 @@ export default defineComponent({
 		BaseErrorMessage
 	},
 	setup() {
-		const commit = ref(null);
+		const commit: Ref<PrettyDateCommit | null> = ref(null);
 		const is_loading: Ref<boolean> = ref(true);
 		const fetch_failed: Ref<string> = ref("");
 
 		const fetchCommit = async(repository: string, commit_id: string) => {
-			const commit_data = await fetchData(`repos/${repository}/log/${commit_id}`, fetch_failed, is_loading, "commit");
+			const commit_data: Commit = await fetchData(`repos/${repository}/log/${commit_id}`, fetch_failed, is_loading, "commit");
 
 			if(commit_data) {
-				commit_data.date = format(new Date(commit_data.date * 1000), "yyyy-MM-dd hh:mm");
-				commit.value = commit_data;
+				const pretty_commit = commit_data as PrettyDateCommit;
+				pretty_commit.pretty_date = format(new Date(commit_data.date * 1000), "yyyy-MM-dd hh:mm");
+				commit.value = pretty_commit;
 			}
 		};
 
diff --git a/packages/client/src/views/RepositoryLog.vue b/packages/client/src/views/RepositoryLog.vue
index e210dd2..c5ce241 100644
--- a/packages/client/src/views/RepositoryLog.vue
+++ b/packages/client/src/views/RepositoryLog.vue
@@ -53,23 +53,11 @@ import { defineComponent, Ref, ref } from "vue";
 import { format } from "date-fns";
 import fetchData from "../util/fetch";
 import { getParam } from "../util/util";
+import { LogCommit } from "shared_types";
 
 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 defineComponent({
 	name: "RepositoryLog",
 	components: {
@@ -82,12 +70,12 @@ export default defineComponent({
 		};
 	},
 	setup() {
-		const commits: Ref<Commit[] | null> = ref(null);
+		const commits: Ref<LogCommit[] | null> = ref(null);
 		const is_loading: Ref<boolean> = ref(true);
 		const fetch_failed: Ref<string> = ref("");
 
 		const fetchLog = async(repository: string) => {
-			const log_data: Commit[] = await fetchData(`repos/${repository}/log`, fetch_failed, is_loading, "log");
+			const log_data: LogCommit[] = await fetchData(`repos/${repository}/log`, fetch_failed, is_loading, "log");
 			if(log_data) {
 				commits.value = log_data;
 			}
diff --git a/packages/client/src/views/RepositoryTree.vue b/packages/client/src/views/RepositoryTree.vue
index ae4fd6b..8ffb480 100644
--- a/packages/client/src/views/RepositoryTree.vue
+++ b/packages/client/src/views/RepositoryTree.vue
@@ -28,6 +28,7 @@
 import { defineComponent, Ref, ref } from "vue";
 import fetchData from "../util/fetch";
 import { getParam } from "../util/util";
+import { Tree, TreeEntry } from "shared_types";
 
 import BaseBreadcrumb from "../components/BaseBreadcrumb.vue";
 import RepositoryTreeBlob from "../components/RepositoryTreeBlob.vue";
@@ -35,21 +36,6 @@ import RepositoryTreeTree from "../components/RepositoryTreeTree.vue";
 import BaseErrorMessage from "../components/BaseErrorMessage.vue";
 import Loading from "vue-loading-overlay";
 
-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: {
-- 
cgit v1.2.3-18-g5258