From 89d2e1b9b32914c80e7a25ef406c6fbe24e20edd Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Mon, 8 May 2023 18:04:30 +0200
Subject: [PATCH] feat: display API errors

---
 content/.vuepress/client.ts                   |  2 ++
 content/.vuepress/components/ApiLoader.vue    | 15 +++++------
 content/.vuepress/components/Error.vue        | 26 +++++++++++++++++++
 .../components/GitHub/GithubRepository.vue    |  5 ++--
 content/.vuepress/styles/classes.less         |  4 +++
 5 files changed, 42 insertions(+), 10 deletions(-)
 create mode 100644 content/.vuepress/components/Error.vue

diff --git a/content/.vuepress/client.ts b/content/.vuepress/client.ts
index 30a1905..1f5afc8 100644
--- a/content/.vuepress/client.ts
+++ b/content/.vuepress/client.ts
@@ -6,6 +6,7 @@ import GithubRepository from './components/GitHub/GithubRepository.vue';
 import ApiLoader from './components/ApiLoader.vue';
 import Loader from './components/Loader.vue';
 import Cache from './components/Cache.vue';
+import Error from './components/Error.vue';
 import Icon from './components/Icon.vue';
 
 export default defineClientConfig({
@@ -17,6 +18,7 @@ export default defineClientConfig({
     app.component('ApiLoader', ApiLoader);
     app.component('Loader', Loader);
     app.component('Cache', Cache);
+    app.component('Error', Error);
     app.component('Icon', Icon);
   },
   setup() {},
diff --git a/content/.vuepress/components/ApiLoader.vue b/content/.vuepress/components/ApiLoader.vue
index 4e12527..38dddf5 100644
--- a/content/.vuepress/components/ApiLoader.vue
+++ b/content/.vuepress/components/ApiLoader.vue
@@ -8,15 +8,16 @@
   <slot v-if="loading" name="loader">
     <Loader />
   </slot>
-  <slot v-else-if="error" name="error"></slot>
-  <slot v-else>
-    {{ error }}
+  <slot v-else-if="error" name="error">
+    <Error :url="props.url" />
   </slot>
+  <slot v-else> </slot>
 </template>
 
 <script setup lang="ts">
 import Cache from './Cache.vue';
 import Loader from './Loader.vue';
+import Error from './Error.vue';
 
 import { Ref, ref } from 'vue';
 import { Observable, catchError, switchMap, throwError } from 'rxjs';
@@ -42,9 +43,9 @@ const loading: Ref<boolean> = ref(true);
 const fetchData = (): Observable<any> => {
   return fromFetch(props.url).pipe(
     switchMap((response: Response) => response.json()),
-    catchError((error: Error) => {
-      console.error(error);
-      return throwError(() => new Error(error.message));
+    catchError((errorResponse: Error) => {
+      error.value = errorResponse;
+      return Error;
     })
   );
 };
@@ -62,5 +63,3 @@ const processCachedData = (data: Observable<any>) => {
   });
 };
 </script>
-
-<style lang="less"></style>
diff --git a/content/.vuepress/components/Error.vue b/content/.vuepress/components/Error.vue
new file mode 100644
index 0000000..37e5e42
--- /dev/null
+++ b/content/.vuepress/components/Error.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="error rounded-corners card-width">
+    <p>API call to {{ props.url }} failed</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  url: {
+    required: true,
+    type: String,
+  },
+});
+</script>
+
+<style lang="less">
+@import 'node_modules/nord/src/lesscss/nord.less';
+@import '../styles/classes.less';
+
+.error {
+  display: inline-block;
+  padding: 2rem;
+  text-align: center;
+  background: @nord11;
+}
+</style>
diff --git a/content/.vuepress/components/GitHub/GithubRepository.vue b/content/.vuepress/components/GitHub/GithubRepository.vue
index 05f4be3..eb0c460 100644
--- a/content/.vuepress/components/GitHub/GithubRepository.vue
+++ b/content/.vuepress/components/GitHub/GithubRepository.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="githubRepo flex-col flex-space-between gap-1rem rounded-corners">
+  <div
+    class="githubRepo flex-col flex-space-between gap-1rem rounded-corners card-width"
+  >
     <ApiLoader
       :cache-name="repoName()"
       :url="fetchUrl"
@@ -51,7 +53,6 @@ const repository: Ref<GithubRepo> = ref(null);
 @import '../../styles/classes.less';
 
 .githubRepo {
-  max-width: 35rem;
   padding: 2rem;
   background-color: @nord4;
   align-self: auto;
diff --git a/content/.vuepress/styles/classes.less b/content/.vuepress/styles/classes.less
index 7fb12c5..089b814 100644
--- a/content/.vuepress/styles/classes.less
+++ b/content/.vuepress/styles/classes.less
@@ -50,3 +50,7 @@ each(@flex-justifications, {
 .center {
   margin: 0 auto;
 }
+
+.card-width {
+  max-width: 35rem;
+}