fix(clerk-js,types): Warn about publicUserData.profileImageUrl deprec…

…ation warning (#1812)

To support the nested property deprecation we introduced a
class to handle loading the PublicUserData and added a
deprecation warning on that class profileImageUrl property.
This changed was introduced based on the example of how the
OrganizationMembership loads the Organization data.

.changeset/stale-parrots-drop.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Warn about `publicUserData.profileImageUrl` nested property deprecation in `OrganizationMembership` & `OrganizationMembershipRequest` resources.

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -11,7 +11,7 @@ import type {
 
 import { unixEpochToDate } from '../../utils/date';
 import { convertPageToOffset } from '../../utils/pagesToOffset';
-import { BaseResource, Organization } from './internal';
+import { BaseResource, Organization, OrganizationPublicUserData } from './internal';
 
 export class OrganizationMembership extends BaseResource implements OrganizationMembershipResource {
   id!: string;
@@ -105,15 +105,7 @@ export class OrganizationMembership extends BaseResource implements Organization
     this.organization = new Organization(data.organization);
     this.publicMetadata = data.public_metadata;
     if (data.public_user_data) {
-      this.publicUserData = {
-        firstName: data.public_user_data.first_name,
-        lastName: data.public_user_data.last_name,
-        profileImageUrl: data.public_user_data.profile_image_url,
-        imageUrl: data.public_user_data.image_url,
-        hasImage: data.public_user_data.has_image,
-        identifier: data.public_user_data.identifier,
-        userId: data.public_user_data.user_id,
-      };
+      this.publicUserData = new OrganizationPublicUserData(data.public_user_data);
     }
     this.role = data.role;
     this.createdAt = unixEpochToDate(data.created_at);
@@ -138,9 +130,6 @@ export class OrganizationMembership extends BaseResource implements Organization
   }
 }
 
-// TODO(@dimkl): deprecate nested property
-// deprecatedProperty(OrganizationMembership, 'publicUserData.profileImageUrl', 'Use `imageUrl` instead.');
-
 export type UpdateOrganizationMembershipParams = {
   role: MembershipRole;
 };

packages/clerk-js/src/core/resources/OrganizationMembershipRequest.ts

@@ -2,7 +2,7 @@ import type { OrganizationInvitationStatus, OrganizationMembershipRequestResourc
 import type { OrganizationMembershipRequestJSON } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
-import { BaseResource } from './Base';
+import { BaseResource, OrganizationPublicUserData } from './internal';
 
 export class OrganizationMembershipRequest extends BaseResource implements OrganizationMembershipRequestResource {
   id!: string;
@@ -37,20 +37,9 @@ export class OrganizationMembershipRequest extends BaseResource implements Organ
       this.createdAt = unixEpochToDate(data.created_at);
       this.updatedAt = unixEpochToDate(data.updated_at);
       if (data.public_user_data) {
-        this.publicUserData = {
-          firstName: data.public_user_data.first_name,
-          lastName: data.public_user_data.last_name,
-          profileImageUrl: data.public_user_data.profile_image_url,
-          imageUrl: data.public_user_data.image_url,
-          hasImage: data.public_user_data.has_image,
-          identifier: data.public_user_data.identifier,
-          userId: data.public_user_data.user_id,
-        };
+        this.publicUserData = new OrganizationPublicUserData(data.public_user_data);
       }
     }
     return this;
   }
 }
-
-// TODO(@dimkl): deprecate nested property
-// deprecatedProperty(OrganizationMembershipRequest, 'publicUserData.profileImageUrl', 'Use `imageUrl` instead.');

packages/clerk-js/src/core/resources/OrganizationPublicUserData.ts

@@ -0,0 +1,36 @@
+import { deprecatedProperty } from '@clerk/shared';
+import type { PublicUserData } from '@clerk/types';
+import type { PublicUserDataJSON } from '@clerk/types';
+
+export class OrganizationPublicUserData implements PublicUserData {
+  firstName!: string | null;
+  lastName!: string | null;
+  /**
+   * @deprecated  Use `imageUrl` instead.
+   */
+  profileImageUrl!: string;
+  imageUrl!: string;
+  hasImage!: boolean;
+  identifier!: string;
+  userId?: string;
+
+  constructor(data: PublicUserDataJSON) {
+    this.fromJSON(data);
+  }
+
+  protected fromJSON(data: PublicUserDataJSON | null): this {
+    if (data) {
+      this.firstName = data.first_name;
+      this.lastName = data.last_name;
+      this.profileImageUrl = data.profile_image_url;
+      this.imageUrl = data.image_url;
+      this.hasImage = data.has_image;
+      this.identifier = data.identifier;
+      this.userId = data.user_id;
+    }
+
+    return this;
+  }
+}
+
+deprecatedProperty(OrganizationPublicUserData, 'profileImageUrl', 'Use `imageUrl` instead.');

packages/clerk-js/src/core/resources/__snapshots__/OrganizationMembership.test.ts.snap

@@ -41,13 +41,12 @@ OrganizationMembership {
   "publicMetadata": {
     "foo": "bar",
   },
-  "publicUserData": {
+  "publicUserData": OrganizationPublicUserData {
     "firstName": "test_first_name",
     "hasImage": true,
     "identifier": "test@identifier.gr",
     "imageUrl": "https://clerk.com",
     "lastName": "test_last_name",
-    "profileImageUrl": "test_url",
     "userId": undefined,
   },
   "role": "admin",

packages/clerk-js/src/core/resources/__snapshots__/OrganizationMembershipRequest.test.ts.snap

@@ -7,13 +7,12 @@ OrganizationMembershipRequest {
   "id": "test_id",
   "organizationId": "test_org_id",
   "pathRoot": "",
-  "publicUserData": {
+  "publicUserData": OrganizationPublicUserData {
     "firstName": "test_first_name",
     "hasImage": true,
     "identifier": "test@identifier.gr",
     "imageUrl": "https://clerk.com",
     "lastName": "test_last_name",
-    "profileImageUrl": "test_url",
     "userId": undefined,
   },
   "reject": [Function],

packages/clerk-js/src/core/resources/internal.ts

@@ -17,6 +17,7 @@ export * from './OrganizationDomain';
 export * from './OrganizationInvitation';
 export * from './OrganizationMembership';
 export * from './OrganizationMembershipRequest';
+export * from './OrganizationPublicUserData';
 export * from './OrganizationSuggestion';
 export * from './SamlAccount';
 export * from './Session';