import { Ref, useAsync } from "@nuxtjs/composition-api"; import { useAsyncKey } from "../use-utils"; import { BaseCRUDAPI } from "~/api/_base"; type BoundT = { id?: string | number; }; interface StoreActions { getAll(): Ref; refresh(): Promise; createOne(createData: T): Promise; updateOne(updateData: T): Promise; deleteOne(id: string | number): Promise; } /** * useStoreActions is a factory function that returns a set of methods * that can be reused to manage the state of a data store without using * Vuex. This is primarily used for basic CRUD operations that required * a lot of refreshing hooks to be called on operations */ export function useStoreActions( api: BaseCRUDAPI, allRef: Ref | null, loading: Ref ): StoreActions { function getAll() { loading.value = true; const allItems = useAsync(async () => { const { data } = await api.getAll(); if (data && allRef) { allRef.value = data.items; } if (data) { return data.items ?? []; } else { return []; } }, useAsyncKey()); loading.value = false; return allItems; } async function refresh() { loading.value = true; const { data } = await api.getAll(); if (data && data.items && allRef) { allRef.value = data.items; } loading.value = false; } async function createOne(createData: T) { loading.value = true; const { data } = await api.createOne(createData); if (data && allRef?.value) { allRef.value.push(data); } else { refresh(); } loading.value = false; } async function updateOne(updateData: T) { if (!updateData.id) { return; } loading.value = true; const { data } = await api.updateOne(updateData.id, updateData); if (data && allRef?.value) { refresh(); } loading.value = false; } async function deleteOne(id: string | number) { loading.value = true; const { response } = await api.deleteOne(id); if (response && allRef?.value) { refresh(); } loading.value = false; } return { getAll, refresh, createOne, updateOne, deleteOne, }; }