Uploads power station images to ImgKit.io

app/api/power-stations/route.tsx

@@ -10,9 +10,12 @@ import {
   EntityFieldNameToIdMapping,
 } from "@/airtableFieldMappings";
 
+import { uploadToImgKit } from "@/utils/imgkit";
+
 import Airtable from "airtable";
 import { NextResponse } from "next/server";
 
+
 export async function GET(req: Request) {
   const base = Airtable.base("appZdj1pFZQOBMn4E");
 
@@ -178,6 +181,19 @@ export async function GET(req: Request) {
               type: image.type,
             },
           };
+          // We cache the Airtable image URLs on Imgkit because Airtable image URLs expire after
+          // 2 hours
+          uploadToImgKit(
+            powerStation.images.large.url,
+            `large_${powerStation.images.large.filename}`,
+            "powerstations"
+          );
+
+          uploadToImgKit(
+            powerStation.images.full.url,
+            `full_${powerStation.images.full.filename}`,
+            "powerstations"
+          );
         }
 
         if (fields[PowerStationFieldNameToIdMapping["Operator"]]) {

components/powerStationMarker/index.tsx

@@ -128,7 +128,7 @@ export function PowerStationMarker({
             <Stack alignItems="center" direction="row" gap={1}>
               {powerStation.images && powerStation.images.large && (
                 <Image
-                  src={powerStation.images.large.url}
+                  src={`https://ik.imagekit.io/powermapper/powerstations/large_${powerStation.images.large.filename}`}
                   alt={powerStation.name}
                   width="48"
                   height="48"
@@ -170,7 +170,7 @@ export function PowerStationMarker({
           {powerStation.images && powerStation.images.full && (
             <Image
               className="photograph"
-              src={powerStation.images.full.url}
+              src={`https://ik.imagekit.io/powermapper/powerstations/full_${powerStation.images.full.filename}`}
               alt={powerStation.name}
               width={powerStation.images.full.width}
               height={powerStation.images.full.height}

cypress/e2e/api-entity-info.cy.ts

@@ -3,7 +3,7 @@ describe("Test Entity Info API endpoint", () => {
     cy.request("http://localhost:3000/api/entity-info?id=rec2SisdBnuMAZZJb").as(
       "entityInfo"
     );
-    cy.get("@entityInfo").should((response) => {
+    cy.get("@entityInfo").should((response: any) => {
       expect(response.body).to.have.property("name");
     });
   });

cypress/e2e/api-power-stations.cy.ts

@@ -1,7 +1,7 @@
 describe("Test Power Stations API endpoint", () => {
   it("passes", () => {
     cy.request("http://localhost:3000/api/power-stations").as("powerStations");
-    cy.get("@powerStations").should((response) => {
+    cy.get("@powerStations").should((response: any) => {
       expect(response.body).to.have.property("powerStations");
     });
   });

env.example

@@ -1,4 +1,4 @@
-
 AIRTABLE_API_KEY=https://airtable.com/create/tokens
 GOOGLE_MAPS_API_KEY=https://console.developers.google.com/apis/credentials
-URL=http://localhost:3000
+URL=http://localhost:3000
+IMGKIT_PRIVATE_KEY=Base64 encoded private key

next.config.mjs

@@ -7,6 +7,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "v5.airtableusercontent.com",
       },
+      {
+        protocol: "https",
+        hostname: "ik.imagekit.io",
+      },
     ],
   },
 };

utils/imgkit.ts

@@ -0,0 +1,27 @@
+export const uploadToImgKit = (
+  file: string,
+  fileName: string,
+  folder: string
+) => {
+  const url = "https://upload.imagekit.io/api/v2/files/upload";
+  const form = new FormData();
+  form.append("file", file);
+  form.append("fileName", fileName);
+  form.append("folder", folder);
+  form.append("useUniqueFileName", "false");
+
+  const options = {
+    method: "POST",
+    headers: {
+      Authorization: `Basic ${process.env.IMGKIT_PRIVATE_KEY}` as string,
+      Accept: "application/json",
+    },
+    body: form,
+  };
+
+  try {
+    fetch(url, options).catch((error) => console.error("error", error));
+  } catch (error) {
+    console.error(error);
+  }
+};