🚨2️⃣[ORG-59] List invitations in <OrganizationSwitcher />

[panteliselef]

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Packages affected

• @clerk/clerk-js
• @clerk/clerk-react
• @clerk/nextjs
• @clerk/remix
• @clerk/types
• @clerk/themes
• @clerk/localizations
• @clerk/clerk-expo
• @clerk/backend
• @clerk/clerk-sdk-node
• @clerk/shared
• @clerk/fastify
• @clerk/chrome-extension
• gatsby-plugin-clerk
• build/tooling/chore

Description

• npm test runs as expected.
• npm run build runs as expected.

In order to display this list we introduced the following:

• useInView a minor hook wrapper on top of IntersectionObserver

 // use the ref to track an element
  const { ref } = useInView({
    threshold: 0,
    onChange: inView => {
      if (inView) {
       // When the element is visible fetch the next page
        void userInvitations.fetchNext?.();
      }
    },
  });

Result (Photo)

[changeset-bot]

🦋 Changeset detected

Latest commit: 386ce2e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/types	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/backend	Patch
@clerk/fastify	Patch
gatsby-plugin-clerk	Patch
@clerk/nextjs	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jit-ci]

❌ The following Jit checks failed to run:

• secret-detection

#jit_bypass_commit in this PR to bypass, Jit Admin privileges required.

More info in the Jit platform.

[panteliselef]

!snapshot

[clerk-cookie]

Hey @panteliselef - the snapshot version command generated the following package versions:

Package	Version
@clerk/backend	0.28.0-snapshot.59e2549
@clerk/chrome-extension	0.3.27-snapshot.59e2549
@clerk/clerk-js	4.56.0-snapshot.59e2549
eslint-config-custom	0.3.0
@clerk/clerk-expo	0.18.18-snapshot.59e2549
@clerk/fastify	0.6.4-snapshot.59e2549
gatsby-plugin-clerk	4.4.5-snapshot.59e2549
@clerk/localizations	1.24.2-snapshot.59e2549
@clerk/nextjs	4.23.3-snapshot.59e2549
@clerk/clerk-react	4.24.0-snapshot.59e2549
@clerk/remix	2.9.2-snapshot.59e2549
@clerk/clerk-sdk-node	4.12.3-snapshot.59e2549
@clerk/shared	0.22.0-snapshot.59e2549
@clerk/themes	1.7.5
@clerk/types	3.50.0-snapshot.59e2549

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.28.0-snapshot.59e2549

# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.3.27-snapshot.59e2549

# @clerk/clerk-js
npm i @clerk/clerk-js@4.56.0-snapshot.59e2549

# eslint-config-custom
npm i eslint-config-custom@0.3.0

# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.18.18-snapshot.59e2549

# @clerk/fastify
npm i @clerk/fastify@0.6.4-snapshot.59e2549

# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.5-snapshot.59e2549

# @clerk/localizations
npm i @clerk/localizations@1.24.2-snapshot.59e2549

# @clerk/nextjs
npm i @clerk/nextjs@4.23.3-snapshot.59e2549

# @clerk/clerk-react
npm i @clerk/clerk-react@4.24.0-snapshot.59e2549

# @clerk/remix
npm i @clerk/remix@2.9.2-snapshot.59e2549

# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.3-snapshot.59e2549

# @clerk/shared
npm i @clerk/shared@0.22.0-snapshot.59e2549

# @clerk/themes
npm i @clerk/themes@1.7.5

# @clerk/types
npm i @clerk/types@3.50.0-snapshot.59e2549

[brkalow]

Looking good! I don't have a ton of context here, but left a high-level review.

⭐

[brkalow]

❓ Why did we have to change this type?

[panteliselef]

Some reason as bellow 👇

[brkalow]

❓ Why did we have to change this type?

[panteliselef]

I didn't properly type this one. Organizations have a slug of string | null so the slug of UserOrganizationInvitationResource needs to match that

[dimkl]

@panteliselef, @desiprisg since the response of the BAPI/FAPI is defined as slug: string i think we should update the type to have it the same.
If there are cases where the Organization type is used as part of a request param, I would suggest we update it to another type to avoid confusion.
Do you think the refactoring is feasible or am i missing something? If you agree with my suggestion could you open a ticket to refactor this?

[SokratisVidros]

@panteliselef I am accepting this for now but we should add a mental note to add list virtualization to every list in ClerkJS components.

[clerk-cookie]

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.