handle mander not found

frontend/src/components/FileTree.vue

@@ -7,7 +7,6 @@ export interface FileTreeNode {
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import FileTreeItem from "./FileTreeItem.vue";
 
 const props = defineProps<{ nodes: FileTreeNode[] }>();
@@ -18,7 +17,7 @@ defineEmits<{
 
 <template>
   <FileTreeItem
-    v-for="(node, index) in nodes"
+    v-for="(node, index) in props.nodes"
     :key="index"
     :path="node.path"
     :children="node.children"

frontend/src/components/ManderDetail.vue

@@ -44,6 +44,7 @@ aside {
   h2 {
     background-color: #f2f1f1;
     color: #7e7e7e;
+    font-weight: 300;
   }
 
   & > div {

frontend/src/services/api.ts

@@ -25,10 +25,12 @@ export async function fetchAllManderPaths(): Promise<string[]> {
 export async function fetchMander(path: string): Promise<Mander | null> {
   try {
     const r = await fetch(`${BASE_URL}/mandrs/${path}`);
-    const m = await r.json();
-    return m as Mander;
+    if (r.status == 200) {
+      const m = await r.json();
+      return m as Mander;
+    }
   } catch (error) {
     reportError(getErrorMessage(error));
-    return null;
   }
+  return null;
 }

frontend/src/views/DashboardView.vue

@@ -3,13 +3,13 @@ import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import FileTree, { type FileTreeNode } from "../components/FileTree.vue";
-import ManderView from "../components/ManderDetail.vue";
+import ManderDetail from "../components/ManderDetail.vue";
 import { type Mander } from "../models";
 import { fetchAllManderPaths, fetchMander } from "../services/api";
 
 const route = useRoute();
 const manderPaths = ref<string[]>([]);
-const mander = ref<Mander>();
+const mander = ref<Mander | null>();
 
 const pathsAsFileTreeNodes = computed(() => {
   const tree: FileTreeNode[] = [];
@@ -37,12 +37,11 @@ const pathsAsFileTreeNodes = computed(() => {
 });
 
 async function fetchManderDetail(path: string | string[]) {
+  console.log(path);
   const p = Array.isArray(path) ? path.join("/") : path;
   const m = await fetchMander(p);
-  if (m) {
-    mander.value = m;
-  }
-  // TODO handle error
+  mander.value = m;
+  console.log(m);
 }
 watch(
   () => route.params.slug,
@@ -60,8 +59,9 @@ await fetchManderDetail(route.params.slug);
     <nav>
       <FileTree :nodes="pathsAsFileTreeNodes" />
     </nav>
-    <article>
-      <ManderView v-if="mander" :mander="mander" />
+    <article :class="{ 'not-found': mander == null }">
+      <ManderDetail v-if="mander" :mander="mander" />
+      <div v-else>mandr not found...</div>
     </article>
   </main>
 </template>
@@ -87,6 +87,15 @@ main {
 
   article {
     flex-grow: 1;
+
+    &.not-found {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #c8c7c7;
+      font-size: x-large;
+      font-weight: 200;
+    }
   }
 }
 </style>