import { GetGroups as GET_GROUPS } from '@api/graphql/v1/groups.queries.gql'

export async function useGroups(organizationId) {
  const groups = useState('groups', () => shallowRef(null))

  if (!groups.value && !organizationId)
    throw new Error(`Missing organizationId required to initialize composable 'useGroup'.`)

  const get = async (organizationId) => {
    try {
      return await useAsyncQuery(GET_GROUPS, { organizationId }, { fetchPolicy: 'network-only' })
    } catch (error) {
      return null
    }
  }

  if (organizationId)  {
    const { data } = await get(organizationId)
    groups.value = data.value.groups
  }

  return {
    groups,
    refetch: get
  }
}

import { GetGroups as GET_GROUPS } from '@api/graphql/v1/groups.queries.gql'

export async function useGroups(organizationId) {
  const groups = useState('groups', () => shallowRef(null))

  if (!groups.value && !organizationId)
    throw new Error(`Missing organizationId required to initialize composable 'useGroup'.`)

  const get = async (organizationId) => {
    try {
      return await useAsyncQuery(GET_GROUPS, { organizationId }, { fetchPolicy: 'network-only' })
    } catch (error) {
      return null
    }
  }

  if (organizationId)  {
    const { data } = await get(organizationId)
    groups.value = data.value.groups
  }

  return {
    groups,
    refetch: get
  }
}

<template>
  <NuxtLayout
    name="page"
    title="Groups"
    subtitle="Manage your organization's groups here."
  >
    <GroupsList :groups />
  </NuxtLayout>
</template>

<script setup>
  const { user } = await useUser()
  const { groups } = await useGroups(user.value.organizationId)
</script>

<template>
  <NuxtLayout
    name="page"
    title="Groups"
    subtitle="Manage your organization's groups here."
  >
    <GroupsList :groups />
  </NuxtLayout>
</template>

<script setup>
  const { user } = await useUser()
  const { groups } = await useGroups(user.value.organizationId)
</script>