$organizationStore

import { useStore } from '@nanostores/react'
import { $organizationStore } from '@clerk/astro/client'

export default function Home() {
  const organization = useStore($organizationStore)

  // Add logic to handle loading state
  if (organization === undefined) return <p>Loading...</p>

  // Add logic to handle no Active Organization state
  if (organization === null) return <p>Set an Active Organization to access this page.</p>

  return <p>This current Organization is {organization.name}</p>
}

<script setup>
import { useStore } from '@nanostores/vue'
import { $organizationStore } from '@clerk/astro/client'

const organization = useStore($organizationStore)
</script>

<template>
  <div v-if="organization === undefined">
    <!-- Add logic to handle loading state -->
  </div>
  <div v-else-if="organization === null">
    <!-- Add logic to handle no Active Organization state -->
  </div>
  <div v-else>
    <p>This current Organization is {{ organization.name }}</p>
  </div>
</template>

<script>
  // The $ prefix is reserved in Svelte for its own reactivity system.
  // Alias the imports to avoid conflicts.
  import { $organizationStore as organization } from '@clerk/astro/client'
</script>

{#if $organization === undefined}
  <!-- Add logic to handle loading state -->
{:else if $organization === null}
  <!-- Add logic to handle no Active Organization state -->
{:else}
  <p>This current Organization is {$organization.name}</p>
{/if}

import { useState, useEffect } from 'react'
import { $organizationStore } from '@clerk/astro/client'
import { useStore } from '@nanostores/react'

export default function OrganizationMembers() {
  const [memberships, setMemberships] = useState([])
  const [currentPage, setCurrentPage] = useState(1)
  const organization = useStore($organizationStore)

  const pageSize = 10

  useEffect(() => {
    fetchMemberships()
  }, [currentPage, organization])

  const fetchMemberships = async () => {
    if (!organization) return

    const { data } = await organization.getMemberships({
      initialPage: currentPage,
      pageSize: 5,
    })
    setMemberships(data)
  }

  const fetchPrevious = () => setCurrentPage(currentPage - 1)
  const fetchNext = () => setCurrentPage(currentPage + 1)

  // Add logic to handle loading state
  if (organization === undefined) return <p>Loading...</p>

  // Add logic to handle no Active Organization state
  if (organization === null) return <p>Set an Active Organization to access this page.</p>

  return (
    <div>
      <h2>Organization members</h2>
      <ul>
        {memberships.map((membership) => (
          <li key={membership.id}>
            {membership.publicUserData.firstName} {membership.publicUserData.lastName} &lt;
            {membership.publicUserData.identifier}&gt; :: {membership.role}
          </li>
        ))}
      </ul>
      <div>
        <button onClick={fetchPrevious} disabled={currentPage === 1}>
          Previous
        </button>
        <button onClick={fetchNext}>Next</button>
      </div>
    </div>
  )
}

<script setup>
import { useStore } from '@nanostores/vue'
import { $organization } from '@clerk/astro/client'
import { ref, watchEffect } from 'vue'

const memberships = ref([])
const currentPage = ref(1)
const organization = useStore($organizationStore)

const pageSize = 10

const fetchMemberships = async () => {
  if (!organization.value) return

  const { data } = await organization.value.getMemberships({
    initialPage: currentPage.value,
    pageSize: 5,
  })
  memberships.value = data
}

watchEffect(() => {
  if (!organization.value) return

  fetchMemberships()
})

const fetchPrevious = () => currentPage.value--
const fetchNext = () => currentPage.value++
</script>

<template>
  <div v-if="organization === undefined">
    <!-- Add logic to handle loading state -->
  </div>
  <div v-else-if="organization === null">
    <!-- Add logic to handle no Active Organization state -->
  </div>
  <div v-else>
    <h2>Organization members</h2>
    <ul>
      <li v-for="membership in memberships" :key="membership.id">
        {{ membership.publicUserData.firstName }} {{ membership.publicUserData.lastName }} &lt;{{
          membership.publicUserData.identifier
        }}&gt; :: {{ membership.role }}
      </li>
    </ul>
    <div>
      <button @click="fetchPrevious" :disabled="currentPage === 1">Previous</button>
      <button @click="fetchNext">Next</button>
    </div>
  </div>
</template>

<script>
  // The $ prefix is reserved in Svelte for its own reactivity system.
  // Alias the imports to avoid conflicts.
  import { $organizationStore as organization } from '@clerk/astro/client'

  let memberships = []
  let currentPage = 1

  async function fetchMemberships() {
    if (!$organization) return

    const { data } = await $organization.getMemberships({
      initialPage: currentPage,
      pageSize: 5,
    })
    memberships = data
  }

  $: fetchMemberships()

  const fetchPrevious = () => currentPage.value--
  const fetchNext = () => currentPage.value++
</script>

{#if organization === undefined}
  <!-- Add logic to handle loading state -->
{:else if organization === null}
  <!-- Add logic to handle no Active Organization state -->
{:else}
  <div>
    <h2>Organization members</h2>
    <ul>
      {#each memberships as membership (membership.id)}
        <li>
          {membership.publicUserData.firstName}
          {membership.publicUserData.lastName} &lt;
          {membership.publicUserData.identifier}&gt; :: {membership.role}
        </li>
      {/each}
    </ul>
    <div>
      <button on:click={fetchPrevious} disabled={currentPage === 1}>Previous</button>
      <button on:click={fetchNext}>Next</button>
    </div>
  </div>
{/if}