chore(refactor): simplify hooks using new abstraction

profilecity · Sep 5, 2024 · 9514ede · 9514ede
1 parent 836ff06
commit 9514ede
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 87 deletions.
diff --git a/app/components/admin/integration/hooks/Card.vue b/app/components/admin/integration/hooks/Card.vue
@@ -5,10 +5,10 @@ const props = defineProps<{
   hook: Hook;
 }>();
 
-const { deleteHook } = await useHooks();
+const { deleteData: deleteHook } = await useHooksRepository();
 
 const onDelete = () => {
-  deleteHook(props.hook.id);
+  deleteHook({ id: props.hook.id });
 };
 </script>
 

diff --git a/app/components/admin/integration/hooks/Form.vue b/app/components/admin/integration/hooks/Form.vue
@@ -3,7 +3,7 @@ import type { Hook } from '~~/server/db/schema';
 
 import { createHookSchema, updateHookSchema } from '~~/shared/schemas/hook';
 
-const { saveHook, updateHook, isSubmitting } = await useHooks();
+const { postData, updateData, changing } = await useHooksRepository();
 
 const props = defineProps<{
   hook?: Hook;
@@ -40,9 +40,9 @@ const onSubmit = handleSubmit(async (values) => {
   let success;
 
   if (isUpdating) {
-    success = await updateHook(values);
+    success = await updateData(values);
   } else {
-    success = await saveHook(values);
+    success = await postData(values);
   }
 
   if (!success) return;
@@ -85,7 +85,7 @@ defineExpose({
       type-override="url"
       v-model="url"
     />
-    <InputButton :disabled="isSubmitting" type="submit">
+    <InputButton :loading="changing" type="submit">
       {{ isUpdating ? 'Save' : 'Create' }}
     </InputButton>
   </form>

diff --git a/app/components/admin/integration/hooks/Frame.vue b/app/components/admin/integration/hooks/Frame.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { hooks } = await useHooks();
+const { data: hooks } = await useHooksRepository();
 const showEmptyState = computed(() => hooks.value.length == 0);
 </script>
 

diff --git a/app/composables/hooks.ts b/app/composables/hooks.ts
@@ -5,85 +5,25 @@ import type {
 } from '~~/shared/schemas/hook';
 import type { Hook } from '~~/server/db/schema';
 
-type SaveOrUpdateInput =
-  | z.infer<typeof updateHookSchema>
-  | z.infer<typeof createHookSchema>;
-
-const useHooksState = () => useState<Hook[]>('integration-hooks', () => []);
-const useHooksFetchedState = () =>
-  useState<boolean>('integration-hooks-first-fetch', () => false);
-
-export async function useHooks() {
-  const hooks = useHooksState();
-  const hooksFetched = useHooksFetchedState();
-
-  const hooksApiCall = useFetch<Hook[]>('/api/hooks', {
-    immediate: false,
-    default: () => [],
+type UpdateHook = z.infer<typeof updateHookSchema>;
+type CreateHook = z.infer<typeof createHookSchema>;
+type DeleteHook = { id: string };
+
+export function useHooksRepository() {
+  return useObjectRepository<
+    Hook[],
+    never,
+    any,
+    UpdateHook,
+    any,
+    CreateHook,
+    DeleteHook
+  >({
+    key: 'integration-hooks',
+    fetchURL: '/api/hooks',
+    postURL: '/api/hook',
+    updateURL: '/api/hook',
+    deleteURL: '/api/hook',
+    initFn: () => [],
   });
-
-  const setHooks = (h: Hook[]) => {
-    hooks.value = [...h];
-  };
-  watch(hooksApiCall.data, setHooks);
-
-  if (!hooksFetched.value) {
-    await hooksApiCall.execute().then(() => setHooks(hooksApiCall.data.value));
-    hooksFetched.value = true;
-  }
-
-  const refreshHooks = hooksApiCall.refresh;
-
-  const isSubmitting = ref(false);
-
-  const makeSaveOrUpdateHook =
-    (method: 'POST' | 'PUT') => async (body: SaveOrUpdateInput) => {
-      try {
-        isSubmitting.value = true;
-        await $fetch<Hook>('/api/hook', {
-          method,
-          body,
-        });
-        refreshHooks();
-        return true;
-      } catch (e) {
-        console.error(e);
-        return false;
-      } finally {
-        isSubmitting.value = false;
-      }
-    };
-  const saveHook = makeSaveOrUpdateHook('POST');
-  const updateHook = makeSaveOrUpdateHook('PUT');
-
-  const deleteHook = async (id: string) => {
-    if (!isSubmitting) {
-      throw new Error('cannot delete when updating');
-    }
-    try {
-      isSubmitting.value = true;
-      await $fetch<Hook>('/api/hook', {
-        method: 'DELETE',
-        query: {
-          id,
-        },
-      });
-      refreshHooks();
-      return true;
-    } catch (e) {
-      console.error(e);
-      return false;
-    } finally {
-      isSubmitting.value = false;
-    }
-  };
-
-  return {
-    hooks,
-    isSubmitting,
-
-    saveHook,
-    updateHook,
-    deleteHook,
-  };
 }