cache requests to github api in store and remove token

Author: grmbyrn

src/lib/stores/contributorsStore.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const contributorsStore = writable([]);

src/lib/utils/cache.ts

@@ -0,0 +1,51 @@
+import { writable, get } from 'svelte/store';
+import type { CacheEntry } from '$lib/utils/types';
+
+export const contributorsStore = writable<Map<string, CacheEntry<unknown>>>(new Map());
+
+const CACHE_TTL = 60 * 60 * 1000;
+
+export async function fetchWithCache<T>(url: string): Promise<T> {
+	const now = Date.now();
+
+	const cache = get(contributorsStore);
+
+	const cached = cache.get(url);
+	if (cached && cached.expiresAt > now) {
+		console.log('Fetching data from store');
+		return cached.data as T;
+	}
+
+	console.log('Fetching data from API');
+
+	const response = await fetch(url);
+
+	const rateLimit = response.headers.get('X-RateLimit-Limit');
+	const rateRemaining = response.headers.get('X-RateLimit-Remaining');
+	const resetTime = response.headers.get('X-RateLimit-Reset');
+
+	if (rateLimit && rateRemaining) {
+		console.log(
+			`Rate limit: ${rateLimit}, Remaining: ${rateRemaining} ${new Date(Date.now()).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
+		);
+	}
+
+	if (resetTime) {
+		const resetDate = new Date(parseInt(resetTime) * 1000);
+		console.log(`Rate limit resets at: ${resetDate}`);
+	}
+
+	if (!response.ok) {
+		console.error(`Failed to fetch from ${url}:`, response.statusText);
+		throw new Error(`Failed to fetch from ${url}`);
+	}
+
+	const data = await response.json();
+
+	contributorsStore.update((currentCache) => {
+		currentCache.set(url, { data, expiresAt: now + CACHE_TTL });
+		return new Map(currentCache);
+	});
+
+	return data;
+}

src/lib/utils/types.ts

@@ -33,6 +33,11 @@ export type Contributor = {
 	html_url: string;
 };
 
+export type CacheEntry<T> = {
+	data: T;
+	expiresAt: number;
+};
+
 export type BlogPost = {
 	tags: string[];
 	keywords: string[];

src/routes/(home)/+page.server.ts

@@ -1,37 +1,21 @@
-import features from '$lib/data/features';
 import { fetchMarkdownPosts } from '$lib/utils/index_posts';
 import type { Contributor } from '$lib/utils/types';
+import { fetchWithCache } from '$lib/utils/cache';
 
-const GITHUB_TOKEN = import.meta.env.VITE_GITHUB_TOKEN;
 const BASE_URL = 'https://api.github.com';
 
-async function fetchWithAuth(url: string) {
-	const response = await fetch(url, {
-		headers: {
-			Authorization: `Bearer ${GITHUB_TOKEN}`
-		}
-	});
-
-	if (!response.ok) {
-		console.error(`Failed to fetch from ${url}:`, response.statusText);
-		throw new Error(`Failed to fetch from ${url}`);
-	}
-
-	return response.json();
-}
-
 export async function load() {
 	const allPosts = await fetchMarkdownPosts();
 	const posts = allPosts
 		.sort((a, b) => new Date(b.meta.date).getTime() - new Date(a.meta.date).getTime())
 		.slice(0, 6);
 
-	const repos = await fetchWithAuth(`${BASE_URL}/orgs/torrust/repos`);
+	const repos = await fetchWithCache<{ name: string }[]>(`${BASE_URL}/orgs/torrust/repos`);
 	const gitHubRepos = repos.map((repo: { name: string }) => repo.name);
 
 	const contributorResponses = await Promise.all(
 		gitHubRepos.map((repo: string) =>
-			fetchWithAuth(`${BASE_URL}/repos/torrust/${repo}/contributors`)
+			fetchWithCache<Contributor[]>(`${BASE_URL}/repos/torrust/${repo}/contributors`)
 		)
 	);
 
@@ -41,7 +25,6 @@ export async function load() {
 	);
 
 	return {
-		features,
 		posts,
 		allContributors: uniqueContributors
 	};

src/routes/(home)/+page.svelte

@@ -8,15 +8,21 @@
 	export let data: {
 		posts: BlogPost[];
 		allContributors: Contributor[];
-		gitHubRepos: string[];
 	};
 
 	let filteredPosts = data.posts;
+	let showContributors = true; // A state to control visibility of Contributors component
+	let errorMessage = '';
 </script>
 
 <Hero />
 <WhyContribute />
-<Contributors contributors={data.allContributors} />
+
+{#if showContributors}
+	<Contributors contributors={data.allContributors} />
+{:else}
+	<p>{errorMessage}</p>
+{/if}
 
 {#if filteredPosts && filteredPosts.length > 0}
 	<div class="container">