feat: cache Go used versions (#441)

README.md

@@ -40,7 +40,7 @@ Please refer to [CONTRIBUTING.md](CONTRIBUTING.md) and [HACKING.md](HACKING.md)
 
 ### Sponsoring
 
-<a href="https://gno.land/?from=goplay-tools" target="_blank">
+<a href="https://gno.land/?utm_source=sponsor&utm_medium=goplay&utm_campaign=DevAcquisition+&utm_content=Devtool" target="_blank">
     <picture>
         <source media="(prefers-color-scheme: dark)" srcset="./docs/img/sponsors/gnoland-dark.svg" width="480">
         <img alt="Gno.land logo" width="480" src="./docs/img/sponsors/gnoland-light.svg">

web/src/components/layout/Header/Header.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { addDays } from 'date-fns'
 import { CommandBar, type ICommandBarItemProps, Stack } from '@fluentui/react'
 
 import type { Snippet } from '~/services/examples'
@@ -11,6 +12,7 @@ import { ExamplesModal } from '~/components/features/examples/ExamplesModal'
 import { RunTargetSelector } from '~/components/elements/inputs/RunTargetSelector'
 import { SharePopup } from '~/components/utils/SharePopup'
 
+import { keyValue } from '~/services/storage'
 import { dispatchTerminalSettingsChange } from '~/store/terminal'
 import {
   dispatchFormatFile,
@@ -35,6 +37,12 @@ import './Header.css'
  */
 const BTN_SHARE_CLASSNAME = 'Header__btn--share'
 
+const goVersionsCacheEntry = {
+  key: 'api.go.versions',
+  ttl: () => addDays(new Date(), 7),
+  getInitialValue: async () => await apiClient.getBackendVersions(),
+}
+
 interface HeaderState {
   showSettings?: boolean
   showAbout?: boolean
@@ -67,8 +75,8 @@ class HeaderContainer extends ThemeableComponent<Props, HeaderState> {
   }
 
   componentDidMount(): void {
-    apiClient
-      .getBackendVersions()
+    keyValue
+      .getOrInsert(goVersionsCacheEntry)
       .then((rsp) => {
         this.setState({
           goVersions: rsp,

web/src/services/storage/kv.ts

@@ -4,6 +4,13 @@ import type { CacheEntry, CacheStorage } from './types'
 
 type RecordValidator<T> = (entry: CacheEntry<T>) => boolean
 
+export interface CachedValueDescriptor<T> {
+  key: string
+  ttl: () => Date
+  validate?: (entry: CacheEntry<T>) => boolean
+  getInitialValue: () => Promise<T>
+}
+
 export class KeyValueStore implements CacheStorage {
   constructor(private readonly db: DatabaseStorage) {}
 
@@ -22,6 +29,28 @@ export class KeyValueStore implements CacheStorage {
     return entry?.value as T | undefined
   }
 
+  async getOrInsert<T>({ ttl, key, validate, getInitialValue }: CachedValueDescriptor<any>) {
+    let cachedVal: T | undefined
+    try {
+      cachedVal = await this.getItem<T>(key, validate)
+    } catch (err) {
+      console.error(`Failed to get cached record "${key}": ${err}, falling back to default value.`)
+    }
+
+    if (typeof cachedVal !== 'undefined') {
+      return cachedVal
+    }
+
+    const initVal = await getInitialValue()
+    try {
+      await this.setItem(key, initVal, ttl())
+    } catch (err) {
+      console.error(`Failed to save cached record "${key}": ${err}`)
+    }
+
+    return initVal
+  }
+
   async deleteItem(key: string) {
     const n = await this.db.keyValue.where({ key }).delete()
     return n > 0