From 167810019830efbb5a08673fc5a02e4ec717bc0d Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Mon, 8 May 2023 11:19:41 +0200
Subject: [PATCH] feat: improve caching of individual repositories

This commit adds the possibility to provide to the caching component data already known and to be
cached immediately without the need of a callback function. This allows caching individual
repositories without having to rely on additional API calls. However, repos can also be retrieved
individually from the GitHub API based on their full name.
---
 content/.vuepress/components/ApiLoader.vue    | 12 ++++-
 content/.vuepress/components/Cache.vue        | 20 ++++++---
 .../components/GitRepos/GithubRepository.vue  | 45 +++++++++++++------
 .../components/GitRepos/ListRepositories.vue  |  4 +-
 4 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/content/.vuepress/components/ApiLoader.vue b/content/.vuepress/components/ApiLoader.vue
index 3d38ef5..5cb31c0 100644
--- a/content/.vuepress/components/ApiLoader.vue
+++ b/content/.vuepress/components/ApiLoader.vue
@@ -1,5 +1,10 @@
 <template>
-  <Cache name="repos" :callback="fetchData" @cached="processCachedData" />
+  <Cache
+    :name="props.cacheName"
+    :callback="fetchData"
+    :data="alreadyKnownData"
+    @cached="processCachedData"
+  />
   <slot v-if="loading" name="loader">
     <Loader />
   </slot>
@@ -23,6 +28,11 @@ const props = defineProps({
     required: true,
     type: String,
   },
+  cacheName: {
+    required: true,
+    type: String,
+  },
+  alreadyKnownData: Object,
 });
 const emits = defineEmits(['dataLoaded', 'dataError', 'loading']);
 
diff --git a/content/.vuepress/components/Cache.vue b/content/.vuepress/components/Cache.vue
index 1f5d761..285f60c 100644
--- a/content/.vuepress/components/Cache.vue
+++ b/content/.vuepress/components/Cache.vue
@@ -19,6 +19,10 @@ const props = defineProps({
     required: false,
     type: Number,
   },
+  data: {
+    default: null,
+    type: Object,
+  },
 });
 
 const emits = defineEmits(['cached']);
@@ -29,25 +33,31 @@ const isDataOutdated = (name: string): boolean => {
   return elapsedTime > props.lifetime;
 };
 
-const storeInCache = (data: Observable<any>, name: string): Observable<any> => {
-  data.subscribe({
+const storeInCache = (
+  callback: Function,
+  data: any,
+  name: string
+): Observable<any> => {
+  let response: Observable<any> = data ? of(data) : callback();
+
+  response.subscribe({
     next: (response) => {
       localStorage.setItem(name, JSON.stringify(response));
       localStorage.setItem(name + '-timestamp', `${Date.now()}`);
     },
   });
-  return data;
+  return response;
 };
 
 if (isDataOutdated(props.name)) {
-  emits('cached', storeInCache(props.callback(), props.name));
+  emits('cached', storeInCache(props.callback, props.data, props.name));
 } else {
   let data = localStorage.getItem(props.name);
   try {
     emits('cached', of(JSON.parse(data)));
   } catch (err) {
     console.error(`Could not parse data found in cache: ${err}`);
-    emits('cached', storeInCache(props.callback(), props.name));
+    emits('cached', storeInCache(props.callback, props.data, props.name));
   }
 }
 </script>
diff --git a/content/.vuepress/components/GitRepos/GithubRepository.vue b/content/.vuepress/components/GitRepos/GithubRepository.vue
index b0f57de..af0a0f6 100644
--- a/content/.vuepress/components/GitRepos/GithubRepository.vue
+++ b/content/.vuepress/components/GitRepos/GithubRepository.vue
@@ -1,26 +1,45 @@
 <template>
   <div class="githubRepo flex-row flex-space-between gap-1rem rounded-corners">
-    <div class="flex-col info">
-      <h3>{{ props.repo.name }}</h3>
-      <div>
-        <p>
-          {{ props.repo.description }}
-        </p>
+    <ApiLoader
+      :cache-name="repoName()"
+      :url="fetchUrl"
+      :already-known-data="props.data"
+      @data-loaded="(repo: GithubRepo) => (repository = repo)"
+    >
+      <div class="flex-col info">
+        <h3>{{ props.data.name }}</h3>
+        <div>
+          <p>
+            {{ props.data.description }}
+          </p>
+        </div>
       </div>
-    </div>
-    <div class="flex-col flex-start gap-1rem stats">
-      <p>Stars: {{ repo.stargazers_count }}</p>
-      <p>Forks: {{ repo.forks_count }}</p>
-    </div>
+      <div class="flex-col flex-start gap-1rem stats">
+        <p>Stars: {{ data.stargazers_count }}</p>
+        <p>Forks: {{ data.forks_count }}</p>
+      </div>
+    </ApiLoader>
   </div>
 </template>
 
 <script setup lang="ts">
+import ApiLoader from '../ApiLoader.vue';
+
 import { GithubRepo } from '../../composables/github';
-import { PropType } from 'vue';
+import { PropType, Ref, ref } from 'vue';
+
 const props = defineProps({
-  repo: Object as PropType<GithubRepo>,
+  data: Object as PropType<GithubRepo>,
+  repoName: String,
+  fetcher: String as PropType<'gitea' | 'github'>,
 });
+
+const repoName = (): string => {
+  return props.data ? props.data.full_name : props.repoName;
+};
+
+const fetchUrl = `https://api.github.com/repos/${repoName()}`;
+const repository: Ref<GithubRepo> = ref(null);
 </script>
 
 <style lang="less">
diff --git a/content/.vuepress/components/GitRepos/ListRepositories.vue b/content/.vuepress/components/GitRepos/ListRepositories.vue
index 2546ff0..bcc2ecb 100644
--- a/content/.vuepress/components/GitRepos/ListRepositories.vue
+++ b/content/.vuepress/components/GitRepos/ListRepositories.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex-col gap-1rem list-repos">
-    <ApiLoader :url="fetchUrl" @dataLoaded="filterRepos">
+    <ApiLoader :url="fetchUrl" @dataLoaded="filterRepos" cache-name="repos">
       <GithubRepository
-        :repo="repo"
+        :data="repo"
         type="repositories"
         v-for="repo in repos"
         class="center"