Merge pull request #15 from OpenUpSA/fix/broken-images

Fix/broken images

.github/workflows/cypress.yml

@@ -0,0 +1,20 @@
+name: Cypress Tests
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Install npm dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        env:
+          AIRTABLE_API_KEY: ${{ secrets.AIRTABLE_API_KEY }}
+          IMGKIT_PRIVATE_KEY: ${{ secrets.IMGKIT_PRIVATE_KEY }}
+        with:
+          build: yarn build
+          start: yarn start

README.md

@@ -1,12 +1,14 @@
 # Open Secrets PowerMapper
 
+[![Tests](https://github.com/OpenUpSA/open-secrets-powermapper/actions/workflows/cypress.yml/badge.svg)](https://github.com/OpenUpSA/open-secrets-powermapper/actions/workflows/cypress.yml)
+
 by [OpenUp](https://OpenUp.org.za).
 
 ## Development
 
 ```
 cp env.example .env
-``` 
+```
 
 Modify `.env` with real values.
 
@@ -17,8 +19,7 @@ yarn dev
 ## Deployment
 
 Deployed on Netlify:
-
-https://roaring-cactus-a582ea.netlify.app/
 
+https://roaring-cactus-a582ea.netlify.app/
 
-Automatic deployment of `main` and preview deployments of pull-requests.
+Automatic deployment of `main` and preview deployments of pull-requests.

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/filterPanel.tsx

@@ -347,8 +347,7 @@ function Component(props: Props) {
     async function getData() {
       initialized.current = true;
       const res = await fetch(
-        `${process.env.NEXT_PUBLIC_URL}/api/power-stations`,
-        { next: { revalidate: 3600 } }
+        `${process.env.NEXT_PUBLIC_URL}/api/power-stations`
       );
       const powerStationsData = await res.json();
       setPowerStations(powerStationsData.powerStations);

components/map.tsx

@@ -88,8 +88,7 @@ function Component({ powerStations, panelOpen, setPanelOpen }: Props) {
     async function getData() {
       if (sidePanelEntity) {
         const res = await fetch(
-          `${process.env.NEXT_PUBLIC_URL}/api/entity-info?id=${sidePanelEntity}`,
-          { next: { revalidate: 3600 } }
+          `${process.env.NEXT_PUBLIC_URL}/api/entity-info?id=${sidePanelEntity}`
         );
         const entityInfoData = await res.json();
         setSidePanelEntityInfo(entityInfoData);

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.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    supportFile: false,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

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

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

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

@@ -0,0 +1,8 @@
+describe("Test Power Stations API endpoint", () => {
+  it("passes", () => {
+    cy.request("http://localhost:3000/api/power-stations").as("powerStations");
+    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",
+      },
     ],
   },
 };

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "cypress run"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
@@ -30,6 +31,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "cypress": "^13.13.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "typescript": "^5"

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);
+  }
+};