feat(clerk-js,clerk-react): GetOrganization/s hook methods, fetching …

…mechanism alignment Fix state clearing of organizationInvitationToken
clerk · Mar 3, 2022 · fc11087 · fc11087
1 parent 55cf7c4
commit fc11087
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 11 deletions.
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -584,6 +584,18 @@ export default class Clerk implements ClerkInterface {
     return await Organization.create(name);
   };
 
+  public getOrganizations = async (): Promise<OrganizationResource[]> => {
+    return await Organization.retrieve();
+  };
+
+  public getOrganization = async (
+    organizationId: string,
+  ): Promise<OrganizationResource | undefined> => {
+    return (await Organization.retrieve()).find(
+      org => org.id === organizationId,
+    );
+  };
+
   updateClient = (newClient: ClientResource): void => {
     if (!this.client) {
       // This is the first time client is being

diff --git a/packages/clerk-js/src/core/resources/Organization.ts b/packages/clerk-js/src/core/resources/Organization.ts
@@ -40,21 +40,20 @@ export class Organization extends BaseResource implements OrganizationResource {
     return new Organization(json);
   }
 
-  static retrieve(
+  static async retrieve(
     getOrganizationParams?: GetOrganizationParams,
   ): Promise<Organization[]> {
-    return this.clerk
-      .getFapiClient()
-      .request<OrganizationJSON[]>({
-        method: 'GET',
-        path: '/me/organizations',
-        search: getOrganizationParams as any,
-      })
+    return await BaseResource._fetch({
+      path: '/me/organizations',
+      method: 'GET',
+      search: getOrganizationParams as any,
+    })
       .then(res => {
-        const organizationsJSON = res.payload
-          ?.response as unknown as OrganizationJSON[];
+        const organizationsJSON =
+          res?.response as unknown as OrganizationJSON[];
         return organizationsJSON.map(org => new Organization(org));
-      });
+      })
+      .catch(() => []);
   }
 
   getMembers = async (

diff --git a/packages/clerk-js/src/ui/signUp/SignUpStart.tsx b/packages/clerk-js/src/ui/signUp/SignUpStart.tsx
@@ -95,14 +95,17 @@ function _SignUpStart(): JSX.Element {
       ? { invitation_token: invitationToken }
       : { strategy: 'ticket', ticket: organizationInvitationToken };
     setIsLoading(true);
+
     signUp
       .create(invitationParams)
       .then(res => {
         formFields.emailAddress.setValue(res.emailAddress || '');
         void completeSignUpFlow(res);
       })
       .catch(err => {
+        /* Clear token values when an error occurs in the initial sign up attempt */
         formFields.invitationToken.setValue('');
+        formFields.organizationInvitationToken.setValue('');
         handleError(err, [], setError);
       })
       .finally(() => {

diff --git a/packages/react/src/hooks/useOrganizations.ts b/packages/react/src/hooks/useOrganizations.ts
@@ -9,6 +9,10 @@ type UseOrganizations = {
   createOrganization: (
     params: CreateOrganizationParams,
   ) => Promise<OrganizationResource>;
+  getOrganizations: () => Promise<OrganizationResource[]>;
+  getOrganization: (
+    organizationId: string,
+  ) => Promise<OrganizationResource | undefined>;
 };
 
 export function useOrganizations(): UseOrganizations {
@@ -18,5 +22,7 @@ export function useOrganizations(): UseOrganizations {
 
   return {
     createOrganization: clerk.createOrganization,
+    getOrganizations: clerk.getOrganizations,
+    getOrganization: clerk.getOrganization,
   };
 }
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
@@ -467,6 +467,26 @@ export default class IsomorphicClerk {
     }
   };
 
+  getOrganizations = async (): Promise<OrganizationResource[] | void> => {
+    const callback = () => this.clerkjs?.getOrganizations();
+    if (this.clerkjs && this._loaded) {
+      return callback() as Promise<OrganizationResource[]>;
+    } else {
+      this.premountMethodCalls.set('getOrganizations', callback);
+    }
+  };
+
+  getOrganization = async (
+    organizationId: string,
+  ): Promise<OrganizationResource | undefined | void> => {
+    const callback = () => this.clerkjs?.getOrganization(organizationId);
+    if (this.clerkjs && this._loaded) {
+      return callback() as Promise<OrganizationResource | undefined>;
+    } else {
+      this.premountMethodCalls.set('getOrganization', callback);
+    }
+  };
+
   signOut = async (signOutCallback?: SignOutCallback): Promise<void> => {
     const callback = () => this.clerkjs?.signOut(signOutCallback);
     if (this.clerkjs && this._loaded) {

diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
@@ -228,10 +228,25 @@ export interface Clerk {
     params?: AuthenticateWithMetamaskParams,
   ) => Promise<unknown>;
 
+  /**
+   * Creates an organization, adding the current user as admin.
+   */
   createOrganization: (
     params: CreateOrganizationParams,
   ) => Promise<OrganizationResource>;
 
+  /**
+   * Retrieves all the organizations the current user is a member of.
+   */
+  getOrganizations: () => Promise<OrganizationResource[]>;
+
+  /**
+   * Retrieves a single organization by id.
+   */
+  getOrganization: (
+    organizationId: string,
+  ) => Promise<OrganizationResource | undefined>;
+
   /**
    * Handles a 401 response from Frontend API by refreshing the client and session object accordingly
    */