chore(refactor): members use repository

Author: amandesai01

app/components/admin/settings/members/AddAction.vue

@@ -2,14 +2,14 @@
 import type { User } from '~~/server/db/schema';
 import { watchDebounced } from '@vueuse/core';
 
-const { addMember, isSubmitting } = await useMembers();
+const { postData, changing } = await useMembersRepository();
 
 const suggestedUsers = ref<User[]>();
 
 const submit = async (id: string, closeFn: () => void) => {
   let success = false;
   if (id) {
-    success = await addMember({ id });
+    success = await postData({ id });
   }
   if (success) {
     closeFn();
@@ -53,7 +53,7 @@ watchDebounced(
           class="input-custom"
           placeholder="Start searching to add members"
           v-model="userSearchQuery"
-          :disabled="isSubmitting"
+          :disabled="changing"
         />
         <div
           class="flex flex-col space-y-3 overflow-y-scroll no-scrollbar h-64 mt-3"
@@ -81,7 +81,7 @@ watchDebounced(
               size="sm"
               variant="outline"
               @click="submit(user.id, close)"
-              :disabled="isSubmitting"
+              :loading="changing"
               >Add</InputButton
             >
           </div>

app/components/admin/settings/members/Card.vue

@@ -5,11 +5,11 @@ const props = defineProps<{
   member: User;
 }>();
 
-const { removeMember } = await useMembers();
+const { deleteData } = await useMembersRepository();
 const { profile } = useAuth();
 
 const onRemove = () => {
-  removeMember({ id: props.member.id });
+  deleteData({ id: props.member.id });
 };
 </script>
 

app/components/admin/settings/members/Frame.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { members } = await useMembers();
+const { data } = await useMembersRepository();
 </script>
 
 <template>
@@ -10,7 +10,7 @@ const { members } = await useMembers();
     <template #content>
       <section class="grid grid-cols-12 gap-6 mt-4 px-4">
         <AdminSettingsMembersCard
-          v-for="member in members"
+          v-for="member in data"
           :key="member.id"
           :member="member"
         />

app/composables/members.ts

@@ -5,64 +5,27 @@ import type {
 } from '~~/shared/schemas/setting';
 import type { User } from '~~/server/db/schema';
 
-type AddOrRemoveMember =
-  | z.infer<typeof addMemberSchema>
-  | z.infer<typeof removeMemberSchema>;
+type CreateMember = z.infer<typeof addMemberSchema>;
+type RemoveMember = z.infer<typeof removeMemberSchema>;
 
-const useMembersState = () => useState<User[]>('settings-members', () => []);
-const useMembersFetchedState = () =>
-  useState<boolean>('settings-members-first-fetch', () => false);
-
-export async function useMembers() {
-  const members = useMembersState();
-  const membersFetched = useMembersFetchedState();
+export function useMembersState() {
+  return useObjectState('settings-members');
+}
 
-  const membersApiCall = useFetch<User[]>('/api/settings/members', {
-    immediate: false,
-    default: () => [],
+export async function useMembersRepository() {
+  return useObjectRepository<
+    User[],
+    never,
+    never,
+    never,
+    CreateMember,
+    never,
+    RemoveMember
+  >({
+    key: 'settings-members',
+    fetchURL: '/api/settings/members',
+    postURL: '/api/settings/members',
+    deleteURL: '/api/settings/members',
+    initFn: () => [],
   });
-
-  const setMembers = (m: User[]) => {
-    members.value = [...m];
-  };
-  watch(membersApiCall.data, setMembers);
-
-  if (!membersFetched.value) {
-    await membersApiCall
-      .execute()
-      .then(() => setMembers(membersApiCall.data.value));
-    membersFetched.value = true;
-  }
-
-  const refereshMembers = membersApiCall.refresh;
-
-  const isSubmitting = ref(false);
-
-  const makeAddOrRemoveMember =
-    (method: 'POST' | 'DELETE') => async (body: AddOrRemoveMember) => {
-      try {
-        isSubmitting.value = true;
-        await $fetch<User>('/api/settings/members', {
-          method,
-          body,
-        });
-        refereshMembers();
-        return true;
-      } catch (e) {
-        console.error(e);
-        return false;
-      } finally {
-        isSubmitting.value = false;
-      }
-    };
-  const addMember = makeAddOrRemoveMember('POST');
-  const removeMember = makeAddOrRemoveMember('DELETE');
-
-  return {
-    members,
-    isSubmitting,
-
-    addMember,
-    removeMember,
-  };
 }