Skip to content

chore(clerk-js): Use userMemberships instead of organizationList inside OrganizationSwitcher #2118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
panteliselef merged 1 commit into from
Nov 13, 2023
Merged

chore(clerk-js): Use userMemberships instead of organizationList inside OrganizationSwitcher #2118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/friendly-tables-chew.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Use `userMemberships` instead of `organizationList` inside `<OrganizationSwitcher/>`.
35 changes: 33 additions & 2 deletions packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { OrganizationResource } from '@clerk/types';
import React from 'react';

import { InfiniteListSpinner } from '../../common';
import {
useCoreOrganization,
useCoreOrganizationList,
Expand All @@ -9,25 +10,54 @@ import {
} from '../../contexts';
import { Box, descriptors, localizationKeys } from '../../customizables';
import { OrganizationPreview, PersonalWorkspacePreview, PreviewButton } from '../../elements';
import { useInView } from '../../hooks';
import { SwitchArrows } from '../../icons';
import { common } from '../../styledSystem';
import { organizationListParams } from './utils';

export type UserMembershipListProps = {
onPersonalWorkspaceClick: React.MouseEventHandler;
onOrganizationClick: (org: OrganizationResource) => unknown;
};

const useFetchMemberships = () => {
const { userMemberships } = useCoreOrganizationList({
userMemberships: organizationListParams.userMemberships,
});

const { ref } = useInView({
threshold: 0,
onChange: inView => {
if (!inView) {
return;
}
if (userMemberships.hasNextPage) {
userMemberships.fetchNext?.();
}
},
});

return {
userMemberships,
ref,
};
};
export const UserMembershipList = (props: UserMembershipListProps) => {
const { onPersonalWorkspaceClick, onOrganizationClick } = props;

const { hidePersonal } = useOrganizationSwitcherContext();
const { organization: currentOrg } = useCoreOrganization();
const { organizationList } = useCoreOrganizationList();
const { ref, userMemberships } = useFetchMemberships();
const user = useCoreUser();

const otherOrgs = (organizationList || []).map(e => e.organization).filter(o => o.id !== currentOrg?.id);
const otherOrgs = ((userMemberships.count || 0) > 0 ? userMemberships.data || [] : [])
.map(e => e.organization)
.filter(o => o.id !== currentOrg?.id);

const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;

const { isLoading, hasNextPage } = userMemberships;

return (
<Box
sx={t => ({
Expand Down Expand Up @@ -71,6 +101,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
/>
</PreviewButton>
))}
{(hasNextPage || isLoading) && <InfiniteListSpinner ref={ref} />}
</Box>
);
};
73 changes: 71 additions & 2 deletions ...js/src/ui.retheme/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { describe } from '@jest/globals';
import { act, render, runFakeTimers, waitFor } from '../../../../testUtils';
import { bindCreateFixtures } from '../../../utils/test/createFixtures';
import { OrganizationSwitcher } from '../OrganizationSwitcher';
import { createFakeUserOrganizationInvitation, createFakeUserOrganizationSuggestion } from './utlis';
import {
createFakeUserOrganizationInvitation,
createFakeUserOrganizationMembership,
createFakeUserOrganizationSuggestion,
} from './utlis';

const { createFixtures } = bindCreateFixtures('OrganizationSwitcher');

Expand Down Expand Up @@ -130,11 +134,43 @@ describe('OrganizationSwitcher', () => {
});

it('lists all organizations the user belongs to', async () => {
const { wrapper, props } = await createFixtures(f => {
const { wrapper, props, fixtures } = await createFixtures(f => {
f.withOrganizations();
f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: ['Org1', 'Org2'] });
});

fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
Promise.resolve({
data: [
createFakeUserOrganizationMembership({
id: '1',
organization: {
id: '1',
name: 'Org1',
slug: 'org1',
membersCount: 1,
adminDeleteEnabled: false,
maxAllowedMemberships: 1,
pendingInvitationsCount: 1,
},
}),
createFakeUserOrganizationMembership({
id: '2',
organization: {
id: '2',
name: 'Org2',
slug: 'org2',
membersCount: 1,
adminDeleteEnabled: false,
maxAllowedMemberships: 1,
pendingInvitationsCount: 1,
},
}),
],
total_count: 2,
}),
);

props.setProps({ hidePersonal: false });
const { getAllByText, getByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
await userEvent.click(getByRole('button'));
Expand Down Expand Up @@ -313,6 +349,39 @@ describe('OrganizationSwitcher', () => {
create_organization_enabled: false,
});
});

fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
Promise.resolve({
data: [
createFakeUserOrganizationMembership({
id: '1',
organization: {
id: '1',
name: 'Org1',
slug: 'org1',
membersCount: 1,
adminDeleteEnabled: false,
maxAllowedMemberships: 1,
pendingInvitationsCount: 1,
},
}),
createFakeUserOrganizationMembership({
id: '2',
organization: {
id: '2',
name: 'Org2',
slug: 'org2',
membersCount: 1,
adminDeleteEnabled: false,
maxAllowedMemberships: 1,
pendingInvitationsCount: 1,
},
}),
],
total_count: 2,
}),
);

fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve());

props.setProps({ hidePersonal: true });
Expand Down
36 changes: 33 additions & 3 deletions packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { OrganizationResource } from '@clerk/types';
import React from 'react';

import { InfiniteListSpinner } from '../../common';
import {
useCoreOrganization,
useCoreOrganizationList,
Expand All @@ -9,26 +10,54 @@ import {
} from '../../contexts';
import { Box, descriptors, localizationKeys } from '../../customizables';
import { OrganizationPreview, PersonalWorkspacePreview, PreviewButton } from '../../elements';
import { useInView } from '../../hooks';
import { SwitchArrows } from '../../icons';
import { common } from '../../styledSystem';
import { organizationListParams } from './utils';

export type UserMembershipListProps = {
onPersonalWorkspaceClick: React.MouseEventHandler;
onOrganizationClick: (org: OrganizationResource) => unknown;
};

const useFetchMemberships = () => {
const { userMemberships } = useCoreOrganizationList({
userMemberships: organizationListParams.userMemberships,
});

const { ref } = useInView({
threshold: 0,
onChange: inView => {
if (!inView) {
return;
}
if (userMemberships.hasNextPage) {
userMemberships.fetchNext?.();
}
},
});

return {
userMemberships,
ref,
};
};
export const UserMembershipList = (props: UserMembershipListProps) => {
const { onPersonalWorkspaceClick, onOrganizationClick } = props;

const { hidePersonal } = useOrganizationSwitcherContext();
const { organization: currentOrg } = useCoreOrganization();
const { organizationList } = useCoreOrganizationList();
const { ref, userMemberships } = useFetchMemberships();
const user = useCoreUser();

const otherOrgs = (organizationList || []).map(e => e.organization).filter(o => o.id !== currentOrg?.id);
const otherOrgs = ((userMemberships.count || 0) > 0 ? userMemberships.data || [] : [])
.map(e => e.organization)
.filter(o => o.id !== currentOrg?.id);

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;

const { isLoading, hasNextPage } = userMemberships;

return (
<Box
sx={t => ({
Expand Down Expand Up @@ -72,6 +101,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
/>
</PreviewButton>
))}
{(hasNextPage || isLoading) && <InfiniteListSpinner ref={ref} />}

@dimkl dimkl Nov 13, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ are we sure about showing the InfiniteListSpinner when hasNextPage is true?

@panteliselef panteliselef Nov 13, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we've been following this pattern for a while, i believe this just improves the UI in general by minimizing layout shifts when the loading get triggered.

F.e.: You scroll, u are about to reach the bottom and u see a spinner, the spinner triggers the request (to fetch the next page) and u continue to see the spinner until loading is completed, now the spinner is pushed further now and no requests will fire until it is in the users viewport again.

</Box>
);
};
73 changes: 71 additions & 2 deletions ...s/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { describe } from '@jest/globals';
import { act, render, runFakeTimers, waitFor } from '../../../../testUtils';
import { bindCreateFixtures } from '../../../utils/test/createFixtures';
import { OrganizationSwitcher } from '../OrganizationSwitcher';
import { createFakeUserOrganizationInvitation, createFakeUserOrganizationSuggestion } from './utlis';
import {
createFakeUserOrganizationInvitation,
createFakeUserOrganizationMembership,
createFakeUserOrganizationSuggestion,
} from './utlis';

const { createFixtures } = bindCreateFixtures('OrganizationSwitcher');

Expand Down Expand Up @@ -130,11 +134,43 @@ describe('OrganizationSwitcher', () => {
});

it('lists all organizations the user belongs to', async () => {
const { wrapper, props } = await createFixtures(f => {
const { wrapper, props, fixtures } = await createFixtures(f => {
f.withOrganizations();
f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: ['Org1', 'Org2'] });
});

fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
Promise.resolve({
data: [
createFakeUserOrganizationMembership({
id: '1',
organization: {
id: '1',
name: 'Org1',
slug: 'org1',
membersCount: 1,
adminDeleteEnabled: false,
maxAllowedMemberships: 1,
pendingInvitationsCount: 1,
},
}),
createFakeUserOrganizationMembership({
id: '2',
organization: {
id: '2',
name: 'Org2',
slug: 'org2',
membersCount: 1,
adminDeleteEnabled: false,
maxAllowedMemberships: 1,
pendingInvitationsCount: 1,
},
}),
],
total_count: 2,
}),
);

props.setProps({ hidePersonal: false });
const { getAllByText, getByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
await userEvent.click(getByRole('button'));
Expand Down Expand Up @@ -313,6 +349,39 @@ describe('OrganizationSwitcher', () => {
create_organization_enabled: false,
});
});

fixtures.clerk.user?.getOrganizationMemberships.mockReturnValueOnce(
Promise.resolve({
data: [
createFakeUserOrganizationMembership({
id: '1',
organization: {
id: '1',
name: 'Org1',
slug: 'org1',
membersCount: 1,
adminDeleteEnabled: false,
maxAllowedMemberships: 1,
pendingInvitationsCount: 1,
},
}),
createFakeUserOrganizationMembership({
id: '2',
organization: {
id: '2',
name: 'Org2',
slug: 'org2',
membersCount: 1,
adminDeleteEnabled: false,
maxAllowedMemberships: 1,
pendingInvitationsCount: 1,
},
}),
],
total_count: 2,
}),
);

fixtures.clerk.setActive.mockReturnValueOnce(Promise.resolve());

props.setProps({ hidePersonal: true });
Expand Down