Supabase gallery image source (#21)

Switch image gallery storage to supabase

Author: bertuz

.github/workflows/test.yaml

@@ -9,7 +9,7 @@ on:
 jobs:
   test:
     # The type of runner that the job will run on
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
@@ -27,13 +27,13 @@ jobs:
       - run: yarn test
         name: 🔬 Testing the repo
       - name: Archive code coverage results
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: code-coverage-report
           path: testres.json
       - name: Uploading failing screenshots
         if: ${{ !success() }}
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: failing-screenshots
           path: __screenshot-tests__/__image_snapshots__/__diff_output__

__screenshot-tests__/__image_snapshots__/index-screentest-ts-the-home-page-clicking-the-pic-the-gallery-popup-is-opened-1-snap.png

@@ -2,6 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   webpack(config) {
+    config.module.rules.push({
+      test: /supabase\/.*/,
+      use: 'ignore-loader',
+    });
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,
@@ -12,6 +16,12 @@ const nextConfig = {
   },
   images: {
     remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'fpbswrebvsmjdwekyznx.supabase.co',
+        port: '',
+        pathname: '**',
+      },
       {
         protocol: 'https',
         hostname: 'content-eu.drive.amazonaws.com',

__screenshot-tests__/__image_snapshots__/index-screentest-ts-the-home-page-should-be-shown-according-to-the-mobile-design-1-snap.png

@@ -11,11 +11,13 @@
   },
   "dependencies": {
     "@emotion/react": "^11.8.2",
+    "@supabase/supabase-js": "^2.45.4",
     "@types/express-useragent": "^1.0.2",
     "@types/jwk-to-pem": "^2.0.1",
     "@types/node-jose": "^1.1.10",
     "@types/uuid": "^8.3.4",
     "axios": "^0.27.2",
+    "buffer-image-size": "^0.6.4",
     "express-useragent": "^1.0.15",
     "jest-environment-jsdom": "^28.1.1",
     "jwk-to-pem": "^2.0.5",
@@ -55,6 +57,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "ignore-loader": "^0.1.2",
     "jest": "^28.1.1",
     "jest-image-snapshot": "^5.1.0",
     "jest-puppeteer-docker": "https://github.com/bertuz/jest-puppeteer-docker.git#specify-docker-build",

next.config.js

@@ -0,0 +1,74 @@
+import sizeOf from 'buffer-image-size';
+
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+type SupabaseStorageQueryResponse = ReadonlyArray<{
+  name: string;
+}>;
+
+const SUPABASE_PUBLIC_KEY = process.env.SUPABASE_PUBLIC_KEY || ' ';
+const SUPABASE_HEADERS = new Headers({
+  'Content-Type': 'application/json',
+  Authorization: `Bearer ${SUPABASE_PUBLIC_KEY}`,
+  apikey: SUPABASE_PUBLIC_KEY,
+});
+
+type ResponseData = ReadonlyArray<{
+  contentProperties: { image: { height: number; width: number } };
+  url: string;
+  name: string;
+}>;
+
+export async function getImageData(): Promise<ResponseData> {
+  const requestOptions = {
+    method: 'POST',
+    headers: SUPABASE_HEADERS,
+    body: JSON.stringify({
+      prefix: '',
+      limit: 20,
+      offset: 0,
+      sortBy: {
+        column: 'created_at',
+        order: 'desc',
+      },
+      search: '',
+    }),
+  };
+
+  const SUPABASE_DOMAIN = process.env.SUPABASE_DOMAIN || '';
+  const IMAGES_OBJECTS_URL = `${SUPABASE_DOMAIN}/storage/v1/object/list/photos`;
+  const IMAGES_URL = `${SUPABASE_DOMAIN}/storage/v1/object/public/photos`;
+  const images = (await fetch(IMAGES_OBJECTS_URL, requestOptions).then(
+    (response) => response.json()
+  )) as SupabaseStorageQueryResponse;
+
+  const imagesToReturn = [];
+  for (const image of images) {
+    const { name: nameWithExtension } = image;
+    const name = nameWithExtension.replace(/\.[a-zA-Z0-9]{1,3}$/, '');
+    const url = `${IMAGES_URL}/${nameWithExtension}`;
+    const contentImage = await fetch(url, {
+      method: 'GET',
+    });
+    const imageBuffer = Buffer.from(await contentImage.arrayBuffer());
+    const imageSize = sizeOf(imageBuffer);
+
+    imagesToReturn.push({
+      url,
+      contentProperties: {
+        image: { height: imageSize.height, width: imageSize.width },
+      },
+      name,
+    });
+  }
+
+  return imagesToReturn;
+}
+
+export default async function handler(
+  _: NextApiRequest,
+  res: NextApiResponse<ResponseData>
+) {
+  const imagesToReturn = await getImageData();
+  res.status(200).json(imagesToReturn);
+}

package.json

@@ -33,6 +33,8 @@ import useScreenSize from '../utils/useScreenSize';
 import toBase64 from '../utils/toBase64';
 import { isRunningAcceptanceTest } from '../utils/testUtils';
 
+import { createClient } from '@supabase/supabase-js';
+
 import { Transition } from 'react-transition-group';
 
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -742,6 +744,17 @@ const Home: NextPage<HomeProperties> = ({ galleryPics }) => {
             With that in mind, this is what I currently have in my toolbox 🧑🏽‍💻:
           </p>
           <ul>
+            <li>
+              Mobile
+              <ul>
+                <li>
+                  <TextLink href="https://github.com/gmadridsports/app-natacion">
+                    Flutter
+                  </TextLink>
+                </li>
+                <li>Supabase</li>
+              </ul>
+            </li>
             <li>
               Frontend
               <ul>
@@ -764,8 +777,11 @@ const Home: NextPage<HomeProperties> = ({ galleryPics }) => {
               <ul>
                 <li>Agile: kanban and scrum</li>
                 <li>Kubernetes</li>
-                <li>Hexagonal architecture</li>
-                <li>DDD</li>
+                <li>Clean architectures: hexagonal, DDD, even on front</li>
+                <li>
+                  Foster <strong>async</strong> - yet effective - communication
+                  within a team
+                </li>
               </ul>
             </li>
           </ul>
@@ -994,51 +1010,55 @@ export async function getServerSideProps() {
       };
     }
 
-    const response = await fetch(
-      'https://www.amazon.it/drive/v1/nodes/mmVUOJzUS_KqKRykQrzFPA/children?asset=ALL&filters=kind%3A(FILE*+OR+FOLDER*)+AND+contentProperties.contentType%3A(image*)+AND+status%3A(AVAILABLE*)&limit=15&lowResThumbnail=true&searchOnFamily=true&sort=%5B%27contentProperties.contentDate+DESC%27%5D&tempLink=true&shareId=qFervNlenYwkjdQ1o26YOsWhld5fnsJ0t89xbcv2Vep&offset=0&resourceVersion=V2&ContentType=JSON&_=1660508015523'
-    );
+    const supabaseUrl = process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_URL || '';
+    const supabaseAnonKey =
+      process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY || '';
 
-    if (!response?.body) {
-      return [];
+    const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+      global: {
+        headers: {
+          Authorization: `Bearer ${process.env.SUPABASE_SUPABASE_SERVICE_ROLE_KEY}`,
+        },
+      },
+    });
+    const { data, error } = await supabase
+      .from('gallery-images')
+      .select('url, name, height, width')
+      .limit(30)
+      .order('created_at', { ascending: false });
+
+    if (data === null) {
+      throw new Error(error?.message);
     }
 
-    const data = await response.json();
-
-    const images = data.data.map(
-      (photo: {
-        contentProperties: { image: { height: number; width: number } };
-        tempLink: string;
-        name: string;
-      }) => {
-        const { height: originalHeight, width: originalWidth } =
-          photo.contentProperties.image;
-        const dimensionsRatio = originalHeight / originalWidth;
-        const thumbnailFitWidth =
-          originalHeight > 200
-            ? [200, 200 / dimensionsRatio]
-            : [originalHeight, originalWidth];
-        const thumbnailFit =
-          originalWidth > 150
-            ? [thumbnailFitWidth[0] * dimensionsRatio, 150]
-            : thumbnailFitWidth;
-
-        return {
-          src: photo.tempLink,
-          name: photo.name,
-          dimensions: {
-            ratio: dimensionsRatio,
-            thumbnail: {
-              height: thumbnailFit[0],
-              width: thumbnailFit[1],
-            },
-            original: {
-              height: originalHeight,
-              width: originalWidth,
-            },
+    const images = data.map((photo) => {
+      const { height: originalHeight, width: originalWidth } = photo;
+      const dimensionsRatio = originalHeight / originalWidth;
+      const thumbnailFitWidth =
+        originalHeight > 200
+          ? [200, 200 / dimensionsRatio]
+          : [originalHeight, originalWidth];
+      const thumbnailFit =
+        originalWidth > 150
+          ? [thumbnailFitWidth[0] * dimensionsRatio, 150]
+          : thumbnailFitWidth;
+
+      return {
+        src: photo.url,
+        name: photo.name,
+        dimensions: {
+          ratio: dimensionsRatio,
+          thumbnail: {
+            height: thumbnailFit[0],
+            width: thumbnailFit[1],
           },
-        };
-      }
-    );
+          original: {
+            height: originalHeight,
+            width: originalWidth,
+          },
+        },
+      };
+    });
 
     return {
       props: {

pages/api/galleryPhotos/index.ts

@@ -0,0 +1,4 @@
+# Supabase
+.branches
+.temp
+.env