Frontend has proper error handling & api fetching is in it's own file

1 files changed, 53 insertions, 43 deletions

diff --git a/packages/client/src/views/RepositoryCommit.vue b/packages/client/src/views/RepositoryCommit.vue
index 6bbbcaa..97c06b0 100644
--- a/packages/client/src/views/RepositoryCommit.vue
+++ b/packages/client/src/views/RepositoryCommit.vue
@@ -2,45 +2,49 @@
 	<div class="row mx-0">
 		<div class="col ms-2 ps-4 ps-sm-5 fs-5 vld-parent">
 			<BaseBreadcrumb :items="[{ name: 'Log', path: '/' + $router.currentRoute._rawValue.params.repo + '/log' }]" :active-item="$router.currentRoute._rawValue.params.commit" />
-			<table id="commit-info" class="table table-dark">
-				<tbody>
-					<tr>
-						<td class="commit-info-title">
-							Author
-						</td>
-						<td>{{ commit_data["author"] }}</td>
-					</tr>
-					<tr>
-						<td class="commit-info-title">
-							Date
-						</td>
-						<td>{{ commit_data["date"] }}</td>
-					</tr>
-					<tr>
-						<td class="commit-info-title">
-							Message
-						</td>
-						<td>{{ commit_data["message"] }}</td>
-					</tr>
-				</tbody>
-			</table>
+			<template v-if="commit">
+				<table
+					id="commit-info" class="table table-dark">
+					<tbody>
+						<tr>
+							<td class="commit-info-title">
+								Author
+							</td>
+							<td>{{ commit["author"] }}</td>
+						</tr>
+						<tr>
+							<td class="commit-info-title">
+								Date
+							</td>
+							<td>{{ commit["date"] }}</td>
+						</tr>
+						<tr>
+							<td class="commit-info-title">
+								Message
+							</td>
+							<td>{{ commit["message"] }}</td>
+						</tr>
+					</tbody>
+				</table>
+				<div
+					v-for="(patch, index) in commit['patches']" :key="index"
+					class="commit-patch">
+					<div class="commit-patch-header">
+						<span class="fw-bold">{{ (patch.to === "/dev/null") ? patch.from : patch.to }} </span>
+						<span v-if="patch.to === '/dev/null'">Deleted</span>
+						<div class="commit-patch-add-del">
+							<span>+{{ patch.additions }}</span>
+							<span>-{{ patch.deletions }}</span>
+						</div>
+					</div>
+					<CommitPatch :patch="patch" />
+				</div>
+			</template>
+			<BaseErrorMessage :fetch-failed="fetch_failed" />
 			<Loading
 				:active="is_loading" :height="24"
 				:width="24" color="#ffffff"
 				:opacity="0" :is-full-page="false" />
-			<div
-				v-for="(patch, index) in commit_data['patches']" :key="index"
-				class="commit-patch">
-				<div class="commit-patch-header">
-					<span class="fw-bold">{{ (patch.to === "/dev/null") ? patch.from : patch.to }} </span>
-					<span v-if="patch.to === '/dev/null'">Deleted</span>
-					<div class="commit-patch-add-del">
-						<span>+{{ patch.additions }}</span>
-						<span>-{{ patch.deletions }}</span>
-					</div>
-				</div>
-				<CommitPatch :patch="patch" />
-			</div>
 		</div>
 	</div>
 </template>
@@ -49,28 +53,34 @@
 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";
 import { format } from "date-fns";
+import fetchData from "@/util/fetch";
 
 export default {
 	name: "RepositoryCommit",
 	components: {
 		BaseBreadcrumb,
 		Loading,
-		CommitPatch
+		CommitPatch,
+		BaseErrorMessage
 	},
 	setup() {
-		const commit_data = ref({});
+		const commit = ref(null);
 		const is_loading = ref(true);
+		const fetch_failed = ref(null);
+
+		const fetchCommit = async(repository, commit_id) => {
+			const commit_data = await fetchData(`repos/${repository}/log/${commit_id}`, fetch_failed, is_loading, "commit");
 
-		const fetchCommit = async(repository, commit) => {
-			const data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos/${repository}/log/${commit}`)).json();
-			data.data.date = format(new Date(data.data.date), "yyyy-MM-dd hh:mm");
-			commit_data.value = data.data;
-			is_loading.value = false;
+			if(commit_data) {
+				commit_data.date = format(new Date(commit_data.date), "yyyy-MM-dd hh:mm");
+				commit.value = commit_data;
+			}
 		};
 
-		return { commit_data, is_loading, fetchCommit };
+		return { commit, is_loading, fetch_failed, fetchCommit };
 	},
 	created() {
 		this.fetchCommit(this.$router.currentRoute._rawValue.params.repo, this.$router.currentRoute._rawValue.params.commit);