fix: add proxy server to user photos

to speed up load and to prevent high CPU usage on user-photos server for resizing photos

Author: FreekBes

public/js/interactive_maps.js

@@ -6259,9 +6259,9 @@ var $webbhuset$elm_json_decode$Json$Decode$Field$attempt = F3(
 			$elm$json$Json$Decode$maybe(
 				A2($elm$json$Json$Decode$field, fieldName, valueDecoder)));
 	});
-var $author$project$Clustermap$user_photos_domain = 'https://user-photos.codam.nl/';
+var $author$project$Clustermap$user_photos_domain = '/api/images/';
 var $author$project$Clustermap$getInitialImage = function (username) {
-	return _Utils_ap($author$project$Clustermap$user_photos_domain, username);
+	return $author$project$Clustermap$user_photos_domain + ('?login=' + username);
 };
 var $webbhuset$elm_json_decode$Json$Decode$Field$require = F3(
 	function (fieldName, valueDecoder, continuation) {

src/elm/clustermap/Clustermap.elm

@@ -22,7 +22,7 @@ import Asset exposing (image)
 import Html.Attributes exposing (classList)
 
 user_photos_domain : String
-user_photos_domain = "https://user-photos.codam.nl/"
+user_photos_domain = "/api/images/"
 
 -- MODEL
 
@@ -555,7 +555,7 @@ compareSessionUsername username session =
 
 getInitialImage : String -> String
 getInitialImage username =
-    user_photos_domain ++ username ++ "/100"
+    user_photos_domain ++ "?login=" ++ username
 
 
 sessionListDecoder : (List Session) -> Decoder (List Session)

src/pages/api/images.ts

@@ -3,6 +3,7 @@ import Cors from "cors";
 import NodeCache from "node-cache";
 
 const imageCache = new NodeCache();
+const userPhotosServer = "https://user-photos.codam.nl";
 
 const cors = Cors({
   methods: ['POST', 'GET', 'HEAD'],
@@ -29,9 +30,24 @@ function runMiddleware(
 const images = async (req: NextApiRequest, res: NextApiResponse) => {
   await runMiddleware(req, res, cors);
 
-  //TODO: add proxy for user-photos.codam.nl to make internal clustermap available externally (once it's behind a login wall)
-
-  res.status(501).json({ error: "Not Implemented" });
+  // Get the image from the cache if it exists
+  const image = imageCache.get(req.query.login as string);
+  if (image) {
+    res.send(image as Buffer);
+  } else {
+    // Fetch the image from the user-photos server if it's not in the cache
+    const response = await fetch(`${userPhotosServer}/${req.query.login}/100`);
+    const data = await response.arrayBuffer();
+    const buffer = Buffer.from(data); // Convert to Node.JS buffer to make Next.js send the raw data back correctly
+    if (response.ok) {
+      console.log(`Cache miss for ${req.query.login}, fetching image from user-photos.codam.nl...`);
+      imageCache.set(req.query.login as string, buffer, 3600); // Cache the image for 1 hour
+      res.status(response.status).send(buffer);
+    } else {
+      console.log(`Failed to fetch image for ${req.query.login} from user-photos.codam.nl`);
+      res.status(response.status).send(buffer);
+    }
+  }
 };
 
 export default images;