Backend API to load sponsor profile photos.

backend/src/api/donations.ts

@@ -13,7 +13,18 @@ class Donations {
     },
   };
 
+  sponsorsCache: any[] = [];
+
   constructor() {
+    this.$updateCache();
+  }
+
+  async $updateCache() {
+    try {
+      this.sponsorsCache = await this.$getDonationsFromDatabase('handle, image');
+    } catch (e) {
+      logger.warn('Setting sponsorsCache failed ' + e.message || e);
+    }
   }
 
   setNotfyDonationStatusCallback(fn: any): void {
@@ -73,17 +84,25 @@ class Donations {
         const imageBlob = await this.$downloadProfileImageBlob(imageUrl);
 
         logger.debug('Creating database entry for donation with invoice id: ' + response.id);
-        this.$addDonationToDatabase(response.btcPaid, userData.screen_name, userData.id, response.id, imageUrl, imageBlob);
+        await this.$addDonationToDatabase(response.btcPaid, userData.screen_name, userData.id, response.id, imageUrl, imageBlob);
+        this.$updateCache();
       } catch (e) {
         logger.err(`Error fetching twitter data for handle ${response.orderId}: ${e.message}`);
       }
     }
   }
 
-  async $getDonationsFromDatabase(): Promise<any[]> {
+  getSponsorImage(id: string): any | undefined {
+    const sponsor = this.sponsorsCache.find((s) => s.handle === id);
+    if (sponsor) {
+      return sponsor.image;
+    }
+  }
+
+  async $getDonationsFromDatabase(fields: string): Promise<any[]> {
     try {
       const connection = await DB.pool.getConnection();
-      const query = `SELECT handle, imageUrl, TO_BASE64(image) AS image_64 FROM donations WHERE handle != '' ORDER BY id DESC`;
+      const query = `SELECT ${fields} FROM donations ORDER BY id DESC`;
       const [rows] = await connection.query<any>(query);
       connection.release();
       return rows;

backend/src/index.ts

@@ -174,6 +174,7 @@ class Server {
     if (config.BTCPAY_URL) {
       this.app
         .get(config.API_ENDPOINT + 'donations', routes.getDonations.bind(routes))
+        .get(config.API_ENDPOINT + 'donations/images/:id', routes.getSponsorImage.bind(routes))
         .post(config.API_ENDPOINT + 'donations', routes.createDonationRequest.bind(routes))
         .post(config.API_ENDPOINT + 'donations-webhook', routes.donationWebhook.bind(routes))
       ;

backend/src/routes.ts

@@ -143,13 +143,27 @@ class Routes {
 
   public async getDonations(req: Request, res: Response) {
     try {
-      const result = await donations.$getDonationsFromDatabase();
+      const result = await donations.$getDonationsFromDatabase('handle, imageUrl');
       res.json(result);
     } catch (e) {
       res.status(500).send(e.message);
     }
   }
 
+  public async getSponsorImage(req: Request, res: Response) {
+    try {
+      const result = await donations.getSponsorImage(req.params.id);
+      if (result) {
+        res.set('Content-Type', 'image/jpeg');
+        res.send(result);
+      } else {
+        res.status(404).end();
+      }
+    } catch (e) {
+      res.status(500).send(e.message);
+    }
+  }
+
   public async donationWebhook(req: Request, res: Response) {
     try {
       donations.$handleWebhookRequest(req.body);

frontend/src/app/components/about/about.component.html

@@ -54,7 +54,7 @@
     <ng-template ngFor let-sponsor [ngForOf]="sponsors">
       <a [href]="'https://twitter.com/' + sponsor.handle" target="_blank" rel="sponsored">
         <div class="profile_photo d-inline-block" [title]="sponsor.handle">
-          <img class="profile_img" [src]="bypassSecurityTrustUrl('data:image/jpeg;base64,' + sponsor.image_64)" />
+          <img class="profile_img" [src]="'/api/v1/donations/images/' + sponsor.handle" />
         </div>
       </a>
     </ng-template>