From 24673f6469e7fbdbf48a4d808e8c0b72d5343588 Mon Sep 17 00:00:00 2001
From: Shikou <shiko.dejima.uw@hitachi-solutions.com>
Date: Fri, 27 Sep 2024 16:39:11 +0900
Subject: [PATCH] de-duplicating getThumbnail

---
 web/src/components/PTeamServicesListModal.jsx | 35 ++++++++++---------
 web/src/slices/pteam.js                       | 15 +++++++-
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/web/src/components/PTeamServicesListModal.jsx b/web/src/components/PTeamServicesListModal.jsx
index a5cde324..ab21e392 100644
--- a/web/src/components/PTeamServicesListModal.jsx
+++ b/web/src/components/PTeamServicesListModal.jsx
@@ -23,7 +23,7 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useLocation } from "react-router-dom";
 
-import { storeServiceThumbnail } from "../slices/pteam";
+import { storeServiceThumbnailDict } from "../slices/pteam";
 import { getServiceThumbnail } from "../utils/api";
 import { blobToDataURL } from "../utils/func";
 
@@ -52,23 +52,24 @@ export function PTeamServicesListModal(props) {
   const pageServices = targetServices.slice(perPage * (page - 1), perPage * page);
 
   useEffect(() => {
-    pageServices.forEach((service) => {
-      if (thumbnails[service.service_id] === undefined) {
-        getServiceThumbnail(pteamId, service.service_id)
-          .then(async (response) => {
-            const dataUrl = await blobToDataURL(response.data);
-            dispatch(storeServiceThumbnail({ serviceId: service.service_id, data: dataUrl }));
-          })
-          .catch((error) => {
-            dispatch(
-              storeServiceThumbnail({
-                serviceId: service.service_id,
-                data: noImageAvailableUrl,
-              }),
-            );
-          });
+    if (pageServices.every((service) => thumbnails[service.service_id] !== undefined)) {
+      return;
+    }
+    (async () => {
+      let serviceThumbnailDict = {};
+      for (let service of pageServices) {
+        if (thumbnails[service.service_id] !== undefined) {
+          continue;
+        }
+        serviceThumbnailDict[service.service_id] = await getServiceThumbnail(
+          pteamId,
+          service.service_id,
+        )
+          .then(async (response) => blobToDataURL(response.data))
+          .catch(() => noImageAvailableUrl);
       }
-    });
+      dispatch(storeServiceThumbnailDict(serviceThumbnailDict));
+    })();
   }, [pteamId, pageServices, thumbnails, dispatch]);
 
   if (tagId === "") {
diff --git a/web/src/slices/pteam.js b/web/src/slices/pteam.js
index b7559c5e..8ba3fd19 100644
--- a/web/src/slices/pteam.js
+++ b/web/src/slices/pteam.js
@@ -167,6 +167,13 @@ const pteamSlice = createSlice({
         [action.payload.serviceId]: action.payload.data,
       },
     }),
+    storeServiceThumbnailDict: (state, action) => ({
+      ...state,
+      serviceThumbnails: {
+        ...state.serviceThumbnails,
+        ...action.payload,
+      },
+    }),
   },
   extraReducers: (builder) => {
     builder
@@ -242,6 +249,12 @@ const pteamSlice = createSlice({
 
 const { actions, reducer } = pteamSlice;
 
-export const { clearPTeam, setPTeamId, invalidateServiceId, storeServiceThumbnail } = actions;
+export const {
+  clearPTeam,
+  setPTeamId,
+  invalidateServiceId,
+  storeServiceThumbnail,
+  storeServiceThumbnailDict,
+} = actions;
 
 export default reducer;