Introduced groups composable

components/FilterAndSorting.vue

@@ -25,16 +25,14 @@ type SortingOption = {
   label: string;
 };
 
-const { $api } = useNuxtApp();
+const { myGroups } = useGroups();
 
-const { data: groups } = await $api.user.myGroups();
-
-const groupOptions = groups.value.items.map(
+const groupOptions = myGroups.value.map(
   (g: GroupResponse): GroupSelect => ({ id: g.id, name: g.name }),
 );
 const selectedGroupOption = ref(undefined) as Ref<GroupSelect | undefined>;
 
-const memberOptions = groups.value.items.flatMap(
+const memberOptions = myGroups.value.flatMap(
   (g: GroupResponse): GroupSelect[] =>
     g.members.map(
       (m: GroupMember): MemberSelect => ({

components/User/UserGroups.vue

@@ -1,23 +1,14 @@
 <script setup lang="ts">
-import type { User } from "~/types/ApiTypes";
 import GroupCard from "~/components/User/GroupCard.vue";
 
-defineProps<{
-  user: User;
-}>();
+const { myGroups, fetchGroups } = useGroups();
 
-const { $api } = useNuxtApp();
-
-const { data: groups, error, status } = await $api.user.myGroups();
-
-if (status.value === "error") {
-  console.log(error);
-}
+onMounted(() => fetchGroups());
 </script>
 
 <template>
   <div
-    v-for="group in groups?.items"
+    v-for="group in myGroups"
     :key="group.id"
     class="flex flex-col gap-4 mt-8"
   >

composables/useFood.ts

@@ -1,19 +1,19 @@
 import type { Food, GroupResponse } from "~/types/ApiTypes";
+import { useSessionStore } from "~/store/session.store";
 
 export type useFoodReturn = {
   createdBy: string;
   assignedToGroup: string;
 };
 
 export async function useFood(food: Food): Promise<useFoodReturn> {
-  const { $api } = useNuxtApp();
-  const { data: me } = await $api.user.getMe();
-  const { data: myGroups } = await $api.user.myGroups();
+  const { user: me } = storeToRefs(useSessionStore());
+  const { myGroups } = useGroups();
 
   let createdBy = "unknown";
   let assignedToGroup = "unknown";
 
-  myGroups.value?.items.forEach((group: GroupResponse) => {
+  myGroups.value?.forEach((group: GroupResponse) => {
     if (group.id === food.group) {
       assignedToGroup = group.name;
     }

composables/useGroups.ts

@@ -0,0 +1,57 @@
+import type {
+  ConfirmRegistrationRequest,
+  GroupCollectionResponse,
+  GroupResponse,
+  LoginRequest,
+  PutMeRequest,
+  RegisterRequest,
+  Token,
+  User,
+} from "~/types/ApiTypes";
+import { useSessionStore } from "~/store/session.store";
+import type { FetchOptions } from "ofetch";
+
+export type useGroupsReturn = {
+  fetchGroups(): Promise<void>;
+  myGroups: ComputedRef<GroupResponse[]>;
+};
+export function useGroups(): useGroupsReturn {
+  const { $apiFetcher } = useNuxtApp();
+  const toast = useToast();
+  const { token } = storeToRefs(useSessionStore());
+
+  const fetchOptions: ComputedRef<FetchOptions<"json">> = computed(() => ({
+    headers: {
+      Authorization: `Bearer ${token.value?.token}`,
+      "Accept-Language": "en-US",
+    },
+  }));
+
+  const _groups = ref<GroupResponse[]>([]);
+
+  async function fetchGroups(): Promise<void> {
+    try {
+      const response = await $apiFetcher<GroupCollectionResponse>(
+        "/user/my-groups",
+        {
+          method: "GET",
+          ...fetchOptions.value,
+        },
+      );
+
+      _groups.value = response.items;
+    } catch (error) {
+      toast.add({
+        id: "fetch-groups-failed",
+        title: "Could not get groups!",
+        icon: "i-heroicons-exclamation-triangle",
+        color: "red",
+      });
+    }
+  }
+
+  return {
+    fetchGroups,
+    myGroups: computed(() => _groups.value),
+  };
+}

composables/useUser.ts

@@ -8,6 +8,7 @@ import type {
 } from "~/types/ApiTypes";
 import { useSessionStore } from "~/store/session.store";
 import type { FetchOptions } from "ofetch";
+import { useGroups } from "~/composables/useGroups";
 
 export type useUserReturn = {
   login(request: LoginRequest): Promise<void>;
@@ -20,6 +21,7 @@ export function useUser(): useUserReturn {
   const { $apiFetcher } = useNuxtApp();
   const toast = useToast();
   const router = useRouter();
+  const { fetchGroups } = useGroups();
   const { user, token, bearerToken, refreshToken } =
     storeToRefs(useSessionStore());
   const { resetSession } = useSessionStore();
@@ -59,6 +61,7 @@ export function useUser(): useUserReturn {
       });
 
       await refreshMe();
+      await fetchGroups();
 
       navigateTo("/");
     } catch (error) {

pages/account.vue

@@ -29,7 +29,7 @@ const items = [
         <UserMe :user="user" />
       </div>
       <div v-if="item.key === 'groups' && user">
-        <UserGroups :user="user" />
+        <UserGroups />
       </div>
     </template>
   </UTabs>

pages/confirm-registration.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 const route = useRoute();
 
 const token = <string>route.query.token;