show sets on dashboard

frontend/website/src/stores/sets.ts

@@ -0,0 +1,65 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { z } from 'zod'
+
+import { API_BASE } from '@/utils/apiBase'
+
+export const setSummarySchema = z.object({
+  id: z.number().int().positive(),
+  name: z.string().min(1),
+})
+
+const setsResponseSchema = z.object({
+  sets: z.array(setSummarySchema),
+})
+
+export type SetSummary = z.infer<typeof setSummarySchema>
+
+const LOAD_ERROR = "We couldn't load the available sets."
+
+export const useSetsStore = defineStore('sets', () => {
+  const sets = ref<SetSummary[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchSets(): Promise<boolean> {
+    loading.value = true
+    error.value = null
+
+    try {
+      const response = await fetch(`${API_BASE}/api/sets`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+
+      if (response.status !== 200) {
+        sets.value = []
+        error.value = LOAD_ERROR
+
+        return false
+      }
+
+      const responseBody: unknown = await response.json()
+      sets.value = setsResponseSchema.parse(responseBody).sets
+
+      return true
+    } catch {
+      sets.value = []
+      error.value = LOAD_ERROR
+
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    sets,
+    loading,
+    error,
+    fetchSets,
+  }
+})