add calling image provider by image name

Author: SzczepkowskiJan

Makefile

@@ -100,6 +100,21 @@ build:
 build-and-push:
 	$(DOCKER_COMPOSE_CMD) $(DOCKER_COMPOSE_ENV) build $(DOCKER_COMPOSE_BUILD_ARGS) --push
 
+# Use to build and push a single service component
+# Example: make build-and-push-service service=frontend
+.PHONY: build-and-push-service
+build-and-push-service:
+# work with `service` or `SERVICE` as input
+ifdef SERVICE
+	service := $(SERVICE)
+endif
+
+ifdef service
+	$(DOCKER_COMPOSE_CMD) $(DOCKER_COMPOSE_ENV) build $(DOCKER_COMPOSE_BUILD_ARGS) --push $(service)
+else
+	@echo "Please provide a service name using `service=[service name]` or `SERVICE=[service name]`"
+endif
+
 # Create multiplatform builder for buildx
 .PHONY: create-multiplatform-builder
 create-multiplatform-builder:

src/frontend/components/ProductCard/ProductCard.tsx

@@ -21,6 +21,7 @@ const ProductCard = ({
   product: {
     id,
     name,
+    picture,
     priceUsd = {
       currencyCode: 'USD',
       units: 0,
@@ -41,7 +42,8 @@ const ProductCard = ({
       method: 'GET',
       headers: headers,
     };
-    const image_url = `/api/images/${id}`;
+    console.log("aaaa" + picture)
+    const image_url = `/api/images/${picture}`;
     const requestInfo = new Request(image_url, requestInit);
     getImageWithHeaders(requestInfo).then(blob => {
       setImageSrc(URL.createObjectURL(blob));

src/frontend/pages/api/images/[id].ts src/frontend/pages/api/images/[image].tssrc/frontend/pages/api/images/[id].ts renamed to src/frontend/pages/api/images/[image].ts

@@ -1,37 +1,18 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-const idTranslation: Record<string, string> = {
-  'OLJCESPC7Z': 'NationalParkFoundationExplorascope.jpg',
-  '66VCHSJNUP': 'StarsenseExplorer.jpg',
-  '1YMWWN1N4O': 'EclipsmartTravelRefractorTelescope.jpg',
-  'L9ECAV7KIM': 'LensCleaningKit.jpg',
-  '2ZYFJ3GM2N': 'RoofBinoculars.jpg',
-  '0PUK6V6EV0': 'SolarSystemColorImager.jpg',
-  'LS4PSXUNUM': 'RedFlashlight.jpg',
-  '9SIQT8TOJO': 'OpticalTubeAssembly.jpg',
-  '6E92ZMYYFZ': 'SolarFilter.jpg',
-  'HQTGWGPNH4': 'TheCometBook.jpg',
-};
-
 const SCREEN = '860x600';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    const { id } = req.query;
+    const { image } = req.query;
 
-    if (typeof id !== 'string') {
+    if (typeof image !== 'string') {
       return res.status(400).send('Missing "productId"');
     }
 
     let url;
 
     if (process.env.LAMBDA_URL === undefined) {
-      const image = idTranslation[id];
-
-      if (image === undefined) {
-        return res.status(404).send(`Image for product [${id}] not found`);
-      }
-
       url = `http://image-provider:8081/products/${image}`;
 
       console.log(`Fetching image from [${url}]`);
@@ -48,7 +29,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     }
 
     const presignUrl = new URL(`${process.env.LAMBDA_URL}/images`);
-    presignUrl.searchParams.set('productId', id);
+    presignUrl.searchParams.set('productImage', image);
     presignUrl.searchParams.set('screen', SCREEN);
 
     const headers = new Headers();