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/package.json                   |  1 +
 packages/client/src/components/CommitPatch.vue | 20 +-------------------
 packages/client/src/components/HomeHeader.vue  |  9 +++++----
 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 +---------------
 packages/shared_types/src/commit.d.ts          |  2 +-
 10 files changed, 40 insertions(+), 78 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index deaacdf..96529ba 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@types/marked": "^2.0.3",
+	"shared_types": "workspace:shared_types",
     "@typescript-eslint/eslint-plugin": "^4.28.1",
     "@typescript-eslint/parser": "^4.28.1",
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/packages/client/src/components/CommitPatch.vue b/packages/client/src/components/CommitPatch.vue
index a51a6cb..dca886f 100644
--- a/packages/client/src/components/CommitPatch.vue
+++ b/packages/client/src/components/CommitPatch.vue
@@ -2,25 +2,7 @@
 import { defineComponent, h, PropType, VNode } from "vue";
 import hljs from "highlight.js";
 import hljs_languages from "../util/hljs-languages";
-
-type Hunk = {
-	new_start: number,
-	new_lines_cnt: number,
-	new_lines: number[],
-	old_start: number,
-	old_lines_cnt: number,
-	deleted_lines: number[],
-	hunk: string
-}
-
-type Patch = {
-	additions: number,
-	deletions: number,
-	from: string,
-	to: string,
-	too_large: boolean,
-	hunks: Hunk[]
-}
+import { Patch } from "shared_types";
 
 export default defineComponent({
 	name: "CommitPatch",
diff --git a/packages/client/src/components/HomeHeader.vue b/packages/client/src/components/HomeHeader.vue
index 74e90f9..64e70e7 100644
--- a/packages/client/src/components/HomeHeader.vue
+++ b/packages/client/src/components/HomeHeader.vue
@@ -9,6 +9,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
+import { Info } from "shared_types";
 
 export default defineComponent({
 	name: "HomeHeader",
@@ -17,10 +18,10 @@ export default defineComponent({
 		const about = ref("");
 
 		const fetchInfo = async() => {
-			const data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/info`)).json();
-			console.log(data.data);
-			title.value = data.data.title;
-			about.value = data.data.about;
+			const info: Info = (await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/info`)).json()).data;
+
+			title.value = info.title;
+			about.value = info.about;
 		};
 
 		return { title, about, fetchInfo };
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: {
diff --git a/packages/shared_types/src/commit.d.ts b/packages/shared_types/src/commit.d.ts
index 2eff901..6eb598c 100644
--- a/packages/shared_types/src/commit.d.ts
+++ b/packages/shared_types/src/commit.d.ts
@@ -18,7 +18,7 @@ export type Patch = {
 	too_large: boolean,
 	hunks: Hunk[]
 }
-export type Commit = {
+export interface Commit {
 	message: string,
 	author: Author,
 	date: number,
-- 
cgit v1.2.3-18-g5258