Skip to content

Commit 65332d7

Browse files
clerk-cookiepanteliselef
clerk-cookie
and
panteliselef
authored
fix(shared): Invitations depends on wrong options (useOrganization) (#2472) (#2481)
* fix(shared): Invitations depends on wrong options (useOrganization) (#2472) * fix(shared): Invitations depends on wrong options (useOrganization) * fix(shared): Invitations is depending on wrong options * test(clerk-js): Add unit test * chore(clerk-js): Update changeset (cherry picked from commit 38d8b3e) * fix(clerk-js): Use useCoreOrganization --------- Co-authored-by: panteliselef <panteliselef@outlook.com>
1 parent 58094ca commit 65332d7

File tree

3 files changed

+211
-2
lines changed

3 files changed

+211
-2
lines changed

‎.changeset/thirty-cooks-cheer.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/shared': patch
3+
---
4+
5+
Fixes a bug where Invitations from `useOrganization` incorrectly depended on options for memberships.

‎packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganization.test.tsx‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { describe } from '@jest/globals';
33
import { act, bindCreateFixtures, renderHook, waitFor } from '../../../testUtils';
44
import {
55
createFakeDomain,
6+
createFakeOrganizationInvitation,
67
createFakeOrganizationMembershipRequest,
78
} from '../../components/OrganizationProfile/__tests__/utils';
89
import { createFakeUserOrganizationMembership } from '../../components/OrganizationSwitcher/__tests__/utlis';
@@ -15,6 +16,9 @@ const defaultRenderer = () =>
1516
domains: {
1617
pageSize: 2,
1718
},
19+
invitations: {
20+
pageSize: 2,
21+
},
1822
membershipRequests: {
1923
pageSize: 2,
2024
},
@@ -427,4 +431,204 @@ describe('useOrganization', () => {
427431
});
428432
});
429433
});
434+
435+
describe('invitations', () => {
436+
it('fetch with pages', async () => {
437+
const { wrapper, fixtures } = await createFixtures(f => {
438+
f.withOrganizations();
439+
f.withUser({
440+
email_addresses: ['test@clerk.com'],
441+
organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
442+
});
443+
});
444+
445+
fixtures.clerk.organization?.getInvitations.mockReturnValue(
446+
Promise.resolve({
447+
data: [
448+
createFakeOrganizationInvitation({
449+
id: '1',
450+
emailAddress: 'admin1@clerk.com',
451+
organizationId: '1',
452+
createdAt: new Date('2022-01-01'),
453+
}),
454+
createFakeOrganizationInvitation({
455+
id: '2',
456+
emailAddress: 'member2@clerk.com',
457+
organizationId: '1',
458+
createdAt: new Date('2022-01-01'),
459+
}),
460+
],
461+
total_count: 4,
462+
}),
463+
);
464+
const { result } = renderHook(defaultRenderer, { wrapper });
465+
expect(result.current.invitations?.isLoading).toBe(true);
466+
expect(result.current.invitations?.isFetching).toBe(true);
467+
expect(result.current.invitations?.count).toBe(0);
468+
469+
await waitFor(() => expect(result.current.invitations?.isLoading).toBe(false));
470+
471+
expect(result.current.invitations?.isFetching).toBe(false);
472+
expect(result.current.invitations?.count).toBe(4);
473+
expect(result.current.invitations?.page).toBe(1);
474+
expect(result.current.invitations?.pageCount).toBe(2);
475+
expect(result.current.invitations?.hasNextPage).toBe(true);
476+
477+
fixtures.clerk.organization?.getInvitations.mockReturnValue(
478+
Promise.resolve({
479+
data: [
480+
createFakeOrganizationInvitation({
481+
id: '3',
482+
emailAddress: 'admin3@clerk.com',
483+
organizationId: '1',
484+
createdAt: new Date('2022-01-01'),
485+
}),
486+
createFakeOrganizationInvitation({
487+
id: '4',
488+
emailAddress: 'member4@clerk.com',
489+
organizationId: '1',
490+
createdAt: new Date('2022-01-01'),
491+
}),
492+
],
493+
total_count: 4,
494+
}),
495+
);
496+
497+
act(() => result.current.invitations?.fetchNext?.());
498+
499+
await waitFor(() => expect(result.current.invitations?.isLoading).toBe(true));
500+
await waitFor(() => expect(result.current.invitations?.isLoading).toBe(false));
501+
502+
expect(result.current.invitations?.page).toBe(2);
503+
expect(result.current.invitations?.hasNextPage).toBe(false);
504+
expect(result.current.invitations?.data).toEqual(
505+
expect.arrayContaining([
506+
expect.not.objectContaining({
507+
id: '1',
508+
}),
509+
expect.not.objectContaining({
510+
id: '2',
511+
}),
512+
expect.objectContaining({
513+
organizationId: '1',
514+
id: '3',
515+
emailAddress: 'admin3@clerk.com',
516+
}),
517+
expect.objectContaining({
518+
organizationId: '1',
519+
id: '4',
520+
emailAddress: 'member4@clerk.com',
521+
}),
522+
]),
523+
);
524+
});
525+
526+
it('infinite fetch', async () => {
527+
const { wrapper, fixtures } = await createFixtures(f => {
528+
f.withOrganizations();
529+
f.withUser({
530+
email_addresses: ['test@clerk.com'],
531+
organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
532+
});
533+
});
534+
535+
fixtures.clerk.organization?.getInvitations.mockReturnValueOnce(
536+
Promise.resolve({
537+
data: [
538+
createFakeOrganizationInvitation({
539+
id: '1',
540+
emailAddress: 'admin1@clerk.com',
541+
organizationId: '1',
542+
createdAt: new Date('2022-01-01'),
543+
}),
544+
createFakeOrganizationInvitation({
545+
id: '2',
546+
emailAddress: 'member2@clerk.com',
547+
organizationId: '1',
548+
createdAt: new Date('2022-01-01'),
549+
}),
550+
],
551+
total_count: 4,
552+
}),
553+
);
554+
const { result } = renderHook(
555+
() =>
556+
useCoreOrganization({
557+
invitations: {
558+
pageSize: 2,
559+
infinite: true,
560+
},
561+
}),
562+
{ wrapper },
563+
);
564+
expect(result.current.invitations?.isLoading).toBe(true);
565+
expect(result.current.invitations?.isFetching).toBe(true);
566+
567+
await waitFor(() => expect(result.current.invitations?.isLoading).toBe(false));
568+
expect(result.current.invitations?.isFetching).toBe(false);
569+
570+
fixtures.clerk.organization?.getInvitations.mockReturnValueOnce(
571+
Promise.resolve({
572+
data: [
573+
createFakeOrganizationInvitation({
574+
id: '1',
575+
emailAddress: 'admin1@clerk.com',
576+
organizationId: '1',
577+
createdAt: new Date('2022-01-01'),
578+
}),
579+
createFakeOrganizationInvitation({
580+
id: '2',
581+
emailAddress: 'member2@clerk.com',
582+
organizationId: '1',
583+
createdAt: new Date('2022-01-01'),
584+
}),
585+
],
586+
total_count: 4,
587+
}),
588+
);
589+
590+
fixtures.clerk.organization?.getInvitations.mockReturnValueOnce(
591+
Promise.resolve({
592+
data: [
593+
createFakeOrganizationInvitation({
594+
id: '3',
595+
emailAddress: 'admin3@clerk.com',
596+
organizationId: '1',
597+
createdAt: new Date('2022-01-01'),
598+
}),
599+
createFakeOrganizationInvitation({
600+
id: '4',
601+
emailAddress: 'member4@clerk.com',
602+
organizationId: '1',
603+
createdAt: new Date('2022-01-01'),
604+
}),
605+
],
606+
total_count: 4,
607+
}),
608+
);
609+
610+
act(() => result.current.invitations?.fetchNext?.());
611+
612+
await waitFor(() => expect(result.current.invitations?.isFetching).toBe(true));
613+
expect(result.current.invitations?.isLoading).toBe(false);
614+
615+
await waitFor(() => expect(result.current.invitations?.isFetching).toBe(false));
616+
expect(result.current.invitations?.data).toEqual(
617+
expect.arrayContaining([
618+
expect.objectContaining({
619+
id: '1',
620+
}),
621+
expect.objectContaining({
622+
id: '2',
623+
}),
624+
expect.objectContaining({
625+
id: '3',
626+
}),
627+
expect.objectContaining({
628+
id: '4',
629+
}),
630+
]),
631+
);
632+
});
633+
});
430634
});

‎packages/shared/src/react/hooks/useOrganization.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,8 +282,8 @@ export const useOrganization: UseOrganization = params => {
282282
},
283283
organization?.getInvitations,
284284
{
285-
keepPreviousData: membersSafeValues.keepPreviousData,
286-
infinite: membersSafeValues.infinite,
285+
keepPreviousData: invitationsSafeValues.keepPreviousData,
286+
infinite: invitationsSafeValues.infinite,
287287
enabled: !!invitationsParams,
288288
},
289289
{

0 commit comments

Comments
 (0)