cache home xhr responses

credits @jas14: lichess-org#2372

Author: RoepStoep

src/http.ts

@@ -155,6 +155,30 @@ function request<T>(url: string, type: 'json' | 'text', opts?: RequestOpts, feed
   })
 }
 
+type ExpiringCacheEntry = { expires: ReturnType<DateConstructor['now']>, data: any }
+const responseCache = new Map<string, ExpiringCacheEntry>()
+
+async function getFromCacheOr<T>(cacheKey: string, cacheSeconds: number, getData: () => Promise<T>): Promise<T> {
+  const cacheEntry = responseCache.get(cacheKey)
+  if (cacheEntry && cacheEntry.expires >= Date.now()) {
+    return cacheEntry.data as T
+  } else {
+    responseCache.delete(cacheKey)
+  }
+
+  const newExpirationTime = Date.now() + (cacheSeconds * 1000)
+  return getData().then((data: T) => {
+    responseCache.set(cacheKey, {expires: newExpirationTime, data: data})
+    return data
+  })
+}
+
+export function fetchCachedJSON<T>(cacheSeconds: number, url: string, opts?: RequestOpts, feedback = false): Promise<T> {
+  return getFromCacheOr(url, cacheSeconds, () => {
+    return request<T>(url, 'json', opts, feedback)
+  })
+}
+
 export function fetchJSON<T>(url: string, opts?: RequestOpts, feedback = false): Promise<T> {
   return request<T>(url, 'json', opts, feedback)
 }

src/ui/home/homeXhr.ts

@@ -1,4 +1,4 @@
-import { fetchJSON } from '../../http'
+import { fetchCachedJSON } from '../../http'
 import { Streamer } from '../../lidraughts/interfaces'
 import { PuzzleData } from '../../lidraughts/interfaces/training'
 import { TournamentListItem } from '../../lidraughts/interfaces/tournament'
@@ -8,13 +8,13 @@ interface FeaturedTournamentData {
 }
 
 export function featuredStreamers(): Promise<readonly Streamer[]> {
-  return fetchJSON('/api/streamer/featured', undefined)
+  return fetchCachedJSON(15, '/api/streamer/featured', undefined)
 }
 
 export function dailyPuzzle(): Promise<PuzzleData> {
-  return fetchJSON('/training/daily', undefined)
+  return fetchCachedJSON(60, '/training/daily', undefined)
 }
 
 export function featuredTournaments(): Promise<FeaturedTournamentData> {
-  return fetchJSON('/tournament/featured', undefined)
+  return fetchCachedJSON(30, '/tournament/featured', undefined)
 }