feat: add pinia API store for images

closes #138

src/stores/auth.ts

@@ -145,3 +145,14 @@ axios.interceptors.request.use((config) => {
 
   return config
 })
+
+export const steeringAuthInit: { getRequestDefaults: () => RequestInit } = {
+  getRequestDefaults() {
+    const authStore = useAuthStore()
+    return {
+      headers: {
+        Authorization: `Bearer ${authStore.currentUser?.oidcAccessToken}`,
+      },
+    }
+  },
+}

src/stores/images.ts

+import { defineStore } from 'pinia'
+import { computed, ComputedRef, watchEffect } from 'vue'
+import type { Ref } from 'vue'
+import { steeringAuthInit } from '@/stores/auth'
+
+import {
+  APICreate,
+  APIListPaginated,
+  APIRemove,
+  APIRetrieve,
+  APIUpdate,
+  createExtendableAPI,
+  createSteeringURL,
+} from '@/api'
+
+export type Image = {
+  id: number
+  alt_text: string
+  credits: string
+  image: string
+  file?: File
+  ppoi: string
+  width: number | null
+  height: number | null
+  thumbnails: readonly string[]
+}
+export type NewImage = Omit<Image, 'id'> & { file: File }
+type ReadonlyAttrs = 'id' | 'width' | 'height' | 'thumbnails' | 'file' | 'image'
+type ImageCreateData = Omit<Image, ReadonlyAttrs> & { image: File }
+type ImageUpdateData = Partial<Omit<Image, ReadonlyAttrs>>
+
+export const useImageStore = defineStore('images', () => {
+  const endpoint = createSteeringURL.prefix('images')
+  const { base, ...api } = createExtendableAPI<Image>(endpoint, steeringAuthInit)
+  return {
+    ...base,
+    ...APIListPaginated(api),
+    ...APIRetrieve(api),
+    ...APICreate<Image, ImageCreateData>(api),
+    ...APIUpdate<Image, ImageUpdateData>(api),
+    ...APIRemove(api),
+  }
+})
+
+export function useImage(id: Ref<number | null>): ComputedRef<Image | null> {
+  const imageStore = useImageStore()
+  const image = computed(() => {
+    return id.value !== null ? imageStore.itemMap.get(id.value) ?? null : null
+  })
+  watchEffect(async () => {
+    if (id.value) {
+      // Force an API request in case the image is not yet in the store.
+      await imageStore.retrieve(id.value, undefined, { useCached: true })
+    }
+  })
+  return image
+}