From aa82e265c8a9f1dda4264de4770259d2a2d7dd42 Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Fri, 5 May 2023 00:38:37 +0200
Subject: [PATCH] fix: correctly update displayed repos after fetch

---
 .../components/LatestRepositories.vue         | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/content/.vuepress/components/LatestRepositories.vue b/content/.vuepress/components/LatestRepositories.vue
index 04eeca8..c9a8373 100644
--- a/content/.vuepress/components/LatestRepositories.vue
+++ b/content/.vuepress/components/LatestRepositories.vue
@@ -1,13 +1,14 @@
 <template>
-  <div v-if="error">
-    {{ error }}
-  </div>
-  <div v-else v-for="repo in githubRepos">
-    <p>{{ repo.name }} updated at {{ repo.updated_at }}</p>
+  <div v-if="githubRepos && githubRepos.length > 0">
+    <div v-for="repo in githubRepos">
+      <p>{{ repo.name }} updated at {{ repo.updated_at }}</p>
+    </div>
   </div>
+  <p v-else>Erreur: {{ error }}</p>
 </template>
 
 <script setup lang="ts">
+import { ref, Ref } from 'vue';
 import { readFromCache } from '../composables/cache';
 import {
   GithubError,
@@ -15,20 +16,21 @@ import {
   getLatestRepositories,
 } from '../composables/github';
 
-let githubRepos: GithubRepo[] | null = null;
-let error: GithubError | null;
+let githubRepos: Ref<GithubRepo[]> = ref(null);
+let error: Ref<GithubError> = ref(null);
 const getRepositories = () => {
   return getLatestRepositories('phundrak', 5);
 };
 
 readFromCache<GithubRepo[]>('latestRepos', getRepositories).subscribe({
   next: (repos: GithubRepo[]) => {
-    githubRepos = repos;
-    error = null;
+    console.log('Received repos:', repos);
+    githubRepos.value = repos;
+    error.value = null;
   },
   error: (errorResponse: GithubError) => {
-    githubRepos = null;
-    error = errorResponse;
+    githubRepos.value = null;
+    error.value = errorResponse;
   },
 });
 </script>