feat(IEX-910): Add original image URL property to drop (#89)

poap-xyz · Mar 6, 2024 · f3640f8 · f3640f8
1 parent 2fd8076
commit f3640f8
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 43 deletions.
diff --git a/examples/drops/backend/.env.template b/examples/drops/backend/.env.template
@@ -1,5 +1,6 @@
-CLIENT_ID=
-CLIENT_SECRET=
-API_KEY=
-OAUTH_SERVER_DOMAIN=
-POAP_DROPS_BASE_URL=
+CLIENT_ID=client_id
+CLIENT_SECRET=client_secret
+API_KEY=api_key
+OAUTH_SERVER_DOMAIN=oauth_server_domain
+POAP_DROPS_BASE_URL=poap_drops_base_url
+COMPASS_URL=https://dev-compass.poap.tech/v1/graphql
diff --git a/examples/drops/backend/src/index.ts b/examples/drops/backend/src/index.ts
@@ -12,7 +12,10 @@ dotenv.config();
 async function main(): Promise<void> {
   // Use your library here
   const client = new DropsClient(
-    new PoapCompass({ apiKey: getRequiredEnvVar('API_KEY') }),
+    new PoapCompass({
+      baseUrl: getRequiredEnvVar('COMPASS_URL'),
+      apiKey: getRequiredEnvVar('API_KEY'),
+    }),
     new PoapDropApi({
       apiKey: getRequiredEnvVar('API_KEY'),
       baseUrl: getRequiredEnvVar('POAP_DROPS_BASE_URL'),

diff --git a/packages/drops/package.json b/packages/drops/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@poap-xyz/drops",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Drops module for the poap.js library",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",

diff --git a/packages/drops/src/DropsClient.ts b/packages/drops/src/DropsClient.ts
@@ -1,10 +1,15 @@
 import {
   CompassProvider,
   DropApiProvider,
-  DropResponse,
+  DropResponse as ProviderDropResponse,
 } from '@poap-xyz/providers';
 import { Drop } from './domain/Drop';
-import { PaginatedDropsResponse, PAGINATED_DROPS_QUERY } from './queries';
+import {
+  PaginatedDropsResponse,
+  PAGINATED_DROPS_QUERY,
+  DropImageResponse,
+  DropResponse,
+} from './queries';
 import { CreateDropsInput, FetchDropsInput, UpdateDropsInput } from './types';
 import {
   PaginatedResult,
@@ -15,6 +20,7 @@ import {
   createFilter,
   createInFilter,
 } from '@poap-xyz/utils';
+import { DropImage } from './types/dropImage';
 
 /**
  * Represents a client for working with POAP drops.
@@ -72,39 +78,41 @@ export class DropsClient {
       variables,
     );
 
-    const drops = data.drops.map(
-      (drop) =>
-        new Drop({
-          id: Number(drop.id),
-          fancyId: drop.fancy_id,
-          name: drop.name,
-          description: drop.description,
-          city: drop.city,
-          country: drop.country,
-          channel: drop.channel,
-          platform: drop.platform,
-          locationType: drop.location_type,
-          dropUrl: drop.drop_url,
-          imageUrl: drop.image_url,
-          animationUrl: drop.animation_url,
-          year: Number(drop.year),
-          startDate: new Date(drop.start_date),
-          timezone: drop.timezone,
-          private: drop.private,
-          createdDate: new Date(drop.created_date),
-          poapCount: drop.stats_by_chain_aggregate.aggregate.sum
-            ? Number(drop.stats_by_chain_aggregate.aggregate.sum.poap_count)
-            : 0,
-          transferCount: drop.stats_by_chain_aggregate.aggregate.sum
-            ? Number(drop.stats_by_chain_aggregate.aggregate.sum.transfer_count)
-            : 0,
-          emailReservationCount: drop.email_claims_stats
-            ? Number(drop.email_claims_stats.total)
-            : 0,
-          expiryDate: new Date(drop.expiry_date),
-          endDate: new Date(drop.end_date),
-        }),
-    );
+    const drops = data.drops.map((drop) => {
+      const { imageUrl, originalImageUrl } = this.computeDropImages(drop);
+
+      return new Drop({
+        id: Number(drop.id),
+        fancyId: drop.fancy_id,
+        name: drop.name,
+        description: drop.description,
+        city: drop.city,
+        country: drop.country,
+        channel: drop.channel,
+        platform: drop.platform,
+        locationType: drop.location_type,
+        dropUrl: drop.drop_url,
+        imageUrl,
+        originalImageUrl,
+        animationUrl: drop.animation_url,
+        year: Number(drop.year),
+        startDate: new Date(drop.start_date),
+        timezone: drop.timezone,
+        private: drop.private,
+        createdDate: new Date(drop.created_date),
+        poapCount: drop.stats_by_chain_aggregate.aggregate.sum
+          ? Number(drop.stats_by_chain_aggregate.aggregate.sum.poap_count)
+          : 0,
+        transferCount: drop.stats_by_chain_aggregate.aggregate.sum
+          ? Number(drop.stats_by_chain_aggregate.aggregate.sum.transfer_count)
+          : 0,
+        emailReservationCount: drop.email_claims_stats
+          ? Number(drop.email_claims_stats.total)
+          : 0,
+        expiryDate: new Date(drop.expiry_date),
+        endDate: new Date(drop.end_date),
+      });
+    });
 
     return new PaginatedResult<Drop>(
       drops,
@@ -169,7 +177,7 @@ export class DropsClient {
     return this.formatDrop(repsonse);
   }
 
-  private formatDrop(drop: DropResponse): Drop {
+  private formatDrop(drop: ProviderDropResponse): Drop {
     return new Drop({
       id: drop.id,
       fancyId: drop.fancy_id,
@@ -182,6 +190,7 @@ export class DropsClient {
       locationType: drop.location_type,
       dropUrl: drop.event_url,
       imageUrl: drop.image_url,
+      originalImageUrl: drop.image_url,
       animationUrl: drop.animation_url,
       year: drop.year,
       startDate: new Date(drop.start_date),
@@ -195,4 +204,26 @@ export class DropsClient {
       emailReservationCount: 0,
     });
   }
+
+  private computeDropImages(drop: DropResponse): {
+    imageUrl: string;
+    originalImageUrl: string;
+  } {
+    const dropImage = this.mapDropImage(drop.drop_image);
+    return {
+      imageUrl: dropImage?.crop || drop.image_url,
+      originalImageUrl: dropImage?.original || drop.image_url,
+    };
+  }
+
+  private mapDropImage(response?: DropImageResponse): DropImage | undefined {
+    if (!response) return response;
+
+    const images = response.gateways.reduce(
+      (acc, gateway) => ({ ...acc, [gateway.type.toLowerCase()]: gateway.url }),
+      {},
+    );
+
+    return { ...images };
+  }
 }
diff --git a/packages/drops/src/domain/Drop.ts b/packages/drops/src/domain/Drop.ts
@@ -11,6 +11,7 @@ export class Drop {
   locationType: string;
   dropUrl: string;
   imageUrl: string;
+  originalImageUrl: string;
   animationUrl: string;
   year: number;
   timezone: string;
@@ -35,6 +36,7 @@ export class Drop {
     this.locationType = properties.locationType;
     this.dropUrl = properties.dropUrl;
     this.imageUrl = properties.imageUrl;
+    this.originalImageUrl = properties.originalImageUrl;
     this.animationUrl = properties.animationUrl;
     this.year = properties.year;
     this.startDate = properties.startDate;
@@ -65,6 +67,7 @@ export class Drop {
       locationType: this.locationType,
       dropUrl: this.dropUrl,
       imageUrl: this.imageUrl,
+      originalImageUrl: this.originalImageUrl,
       animationUrl: this.animationUrl,
       year: this.year,
       timezone: this.timezone,
@@ -92,6 +95,7 @@ export interface SerializableDrop {
   locationType: string;
   dropUrl: string;
   imageUrl: string;
+  originalImageUrl: string;
   animationUrl: string;
   year: number;
   timezone: string;
@@ -117,6 +121,7 @@ export interface DropProperties {
   locationType: string;
   dropUrl: string;
   imageUrl: string;
+  originalImageUrl: string;
   animationUrl: string;
   year: number;
   timezone: string;

diff --git a/packages/drops/src/queries/PaginatedDrop.ts b/packages/drops/src/queries/PaginatedDrop.ts
@@ -1,3 +1,5 @@
+import { DropImageGatewayType } from '../types/dropImage';
+
 export const PAGINATED_DROPS_QUERY = `
   query PaginatedDrops(
     $limit: Int!
@@ -36,10 +38,25 @@ export const PAGINATED_DROPS_QUERY = `
       email_claims_stats {
         total
       }
+      drop_image {
+        gateways {
+          type
+          url
+        }
+      }
     }
   }
 `;
 
+export interface DropImageGatewayResponse {
+  type: DropImageGatewayType;
+  url: string;
+}
+
+export interface DropImageResponse {
+  gateways: Array<DropImageGatewayResponse>;
+}
+
 export interface DropResponse {
   id: number;
   fancy_id: string;
@@ -71,6 +88,7 @@ export interface DropResponse {
   email_claims_stats: {
     total: number;
   };
+  drop_image?: DropImageResponse;
 }
 
 export interface PaginatedDropsResponse {

diff --git a/packages/drops/src/types/dropImage.ts b/packages/drops/src/types/dropImage.ts
@@ -0,0 +1,9 @@
+export enum DropImageGatewayType {
+  CROP = 'CROP',
+  ORIGINAL = 'ORIGINAL',
+}
+
+export interface DropImage {
+  original?: string;
+  crop?: string;
+}