feat: use cdn images for map pin calls

packages/components/src/CardListItem/CardDetailsMemberProfile.tsx

@@ -4,7 +4,7 @@ import { Category } from '../Category/Category'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
 import { Username } from '../Username/Username'
 
-import type { IProfileCreator } from './types'
+import type { IProfileCreator } from 'oa-shared'
 
 interface IProps {
   creator: IProfileCreator

packages/components/src/CardListItem/types.ts

@@ -1,23 +1,4 @@
-import type { ProfileTypeName } from 'oa-shared'
-
-type UserBadges = {
-  verified: boolean
-  supporter: boolean
-}
-
-export interface IProfileCreator {
-  _id: string
-  _lastActive: string
-  about?: string
-  badges?: UserBadges
-  countryCode: string
-  coverImage?: string
-  displayName: string
-  isContactableByPublic: boolean
-  profileType: ProfileTypeName
-  subType?: string
-  userImage?: string
-}
+import type { IProfileCreator, ProfileTypeName } from 'oa-shared'
 
 export interface ListItem {
   _id: string

shared/models/maps.ts

@@ -1,3 +1,10 @@
+import type { ProfileTypeName } from './user'
+
+type UserBadges = {
+  verified: boolean
+  supporter: boolean
+}
+
 export interface IBoundingBox {
   _northEast: ILatLng
   _southWest: ILatLng
@@ -23,3 +30,17 @@ export interface IMapPinDetail {
   shortDescription: string
   verifiedBadge?: boolean
 }
+
+export interface IProfileCreator {
+  _id: string
+  _lastActive: string
+  about?: string
+  badges?: UserBadges
+  countryCode: string
+  coverImage?: string
+  displayName: string
+  isContactableByPublic: boolean
+  profileType: ProfileTypeName
+  subType?: string
+  userImage?: string
+}

src/models/maps.models.tsx

@@ -3,6 +3,7 @@ import type {
   IMapPinDetail,
   IModerationStatus,
   IPinGrouping,
+  IProfileCreator,
   ProfileTypeName,
 } from 'oa-shared'
 import type { WorkspaceType } from './userPreciousPlastic.models'
@@ -31,6 +32,7 @@ export interface IMapPin {
   verified: boolean
   subType?: IMapPinSubtype
   comments?: string
+  creator?: IProfileCreator
 }
 
 /**

src/pages/Maps/map.service.ts

@@ -3,6 +3,7 @@ import { collection, getDocs, query, where } from 'firebase/firestore'
 import { API_URL } from 'src/config/config'
 import { logger } from 'src/logger'
 import { DB_ENDPOINTS } from 'src/models/dbEndpoints'
+import { cdnImageUrl } from 'src/utils/cdnImageUrl'
 import { firestore } from 'src/utils/firebase'
 
 import type { IMapPin } from '../../models'
@@ -18,7 +19,7 @@ const getMapPins = async () => {
     const response = await fetch(API_URL + '/map-pins')
     const mapPins = await response.json()
 
-    return mapPins
+    return _transformCreatorImagesToCND(mapPins)
   } catch (error) {
     logger.error('Failed to fetch map pins', { error })
     return []
@@ -57,6 +58,26 @@ const getMapPinSelf = async (userId: string) => {
   return userMapPin.data() as IMapPin
 }
 
+const _transformCreatorImagesToCND = (pins: IMapPin[]) => {
+  return pins.map((pin) => {
+    if (!pin.creator) {
+      return pin
+    }
+    return {
+      ...pin,
+      creator: {
+        ...pin.creator,
+        ...(pin.creator.coverImage
+          ? { coverImage: cdnImageUrl(pin.creator.coverImage, { width: 500 }) }
+          : {}),
+        ...(pin.creator.userImage
+          ? { userImage: cdnImageUrl(pin.creator.userImage, { width: 300 }) }
+          : {}),
+      },
+    }
+  })
+}
+
 export const MapPinServiceContext = createContext<IMapPinService | null>(null)
 
 export const mapPinService: IMapPinService = {