fix: 🐛 Create getSelectedPois api to get the recommend Pois

rather using getPoi api with map function, create a new api to solve the not update bug

src/api/poi/index.ts

@@ -77,6 +77,35 @@ const poiApiSlice = apiSlice.injectEndpoints({
       },
       providesTags: ["Poi"],
     }),
+    getSelectedPois: builder.query<Poi[], string[]>({
+      queryFn: async (ids) => {
+        if (!ids || ids.length === 0) {
+          return { data: [] };
+        }
+
+        const poiPromises = ids.map((id) =>
+          getDoc(doc(firestore, firestoreConfig.collection.poi, id)).then(
+            (snapshot) => {
+              if (snapshot.exists()) {
+                const data = snapshot.data() as FirestorePoiData;
+                return {
+                  id: snapshot.id,
+                  data: toPoiDataByFirebasePoiData(data),
+                } as Poi;
+              }
+              return null;
+            },
+          ),
+        );
+
+        const pois = (await Promise.all(poiPromises)).filter(
+          (poi): poi is Poi => poi !== null,
+        ) as Poi[];
+
+        return { data: pois };
+      },
+      providesTags: ["Poi"],
+    }),
     addPoi: builder.mutation<string, { data: PoiData }>({
       queryFn: async (arg) => {
         const uploadPromises = arg.data.photoPaths.map((url) =>
@@ -137,6 +166,8 @@ export const {
   useLazyGetPoisQuery,
   useGetPoiQuery,
   useLazyGetPoiQuery,
+  useGetSelectedPoisQuery,
+  useLazyGetSelectedPoisQuery,
   useAddPoiMutation,
   useUpdatePoiMutation,
   useDeletePoiMutation,

src/components/Drawer/EditReportDrawer/index.tsx

@@ -13,9 +13,6 @@ import EditReportDrawerContent from "./EditReportDrawerContent";
 import EditReportDrawerConfirm from "./EditReportDrawerConfirm";
 import { closeModal, openModal } from "../../../store/modal";
 import { PoiData } from "../../../models/poi";
-import { isCurrentDrawerParams } from "../../../utils/routes/params";
-import { useSearchParams } from "react-router-dom";
-import { toggleRefetchFlag } from "../../../store/llm";
 
 const reportDataValidator = (reportData: PoiData) => {
   const { status } = reportData;
@@ -34,16 +31,12 @@ const EditReportDrawer: React.FC = () => {
 
   const dispatch = useDispatch();
 
-  const [searchParams] = useSearchParams();
-
   const [editPoi] = useUpdatePoiMutation();
 
   const selected = reportType === "edit";
 
   const { data: user } = useGetUserQuery();
 
-  const recommendState = isCurrentDrawerParams("recommend", searchParams);
-
   const [isStatusValueValid, setIsStatusValueValid] = React.useState(false);
   React.useEffect(() => {
     setIsStatusValueValid(reportDataValidator(reportData));
@@ -62,9 +55,6 @@ const EditReportDrawer: React.FC = () => {
     })
       .unwrap()
       .then(() => {
-        if (recommendState) {
-          dispatch(toggleRefetchFlag());
-        }
         dispatch(resetReport());
         dispatch(closeModal("confirmEditReport"));
       });

src/components/modal/LlmResult/index.tsx

@@ -19,8 +19,8 @@ import {
 import { useSearchParams } from "react-router-dom";
 import { useGetUserQuery } from "../../../api/user";
 import { addReport, editReport } from "../../../store/report";
-import { useCallback, useEffect, useState } from "react";
-import { useLazyGetPoiQuery } from "../../../api/poi";
+import { useEffect, useState } from "react";
+import { useGetSelectedPoisQuery } from "../../../api/poi";
 import Poi, { PoiData } from "../../../models/poi";
 import { useTranslation } from "react-i18next";
 import React from "react";
@@ -198,7 +198,6 @@ const LlmResult: React.FC = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const clusterId = getParamsFromDrawer("cluster", searchParams).clusterId;
   const { data: user } = useGetUserQuery();
-  const [getPoi] = useLazyGetPoiQuery();
 
   const { t } = useTranslation();
 
@@ -210,41 +209,25 @@ const LlmResult: React.FC = () => {
     (state: IRootState) => state.llm.recommendContributions,
   );
 
-  const refetchFlag = useSelector((state: IRootState) => state.llm.refetchFlag);
-
   const [recommendPois, setRecommendPois] = useState<Poi[]>([]);
 
-  const fetchData = useCallback(
-    async (recommendContributions: string[]) => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-
-      const tasks = recommendContributions.map(async (contribution) => {
-        return getPoi(contribution)
-          .unwrap()
-          .then((res) => {
-            if (res === null) throw new Error("No recommend poi found.");
-            else {
-              return res;
-            }
-          });
-      });
-      const res = await Promise.all(tasks);
-      return res;
-    },
-    [getPoi],
-  );
+  const { data: selectedPoiList, isLoading: isPoiListLoading } =
+    useGetSelectedPoisQuery(recommendContributions, {
+      skip: recommendContributions.length === 0,
+    });
 
   useEffect(() => {
-    fetchData(recommendContributions).then((res) => {
-      setRecommendPois(res);
-    });
-  }, [fetchData, recommendContributions, refetchFlag]);
+    if (!isPoiListLoading && selectedPoiList && selectedPoiList.length > 0) {
+      setRecommendPois(selectedPoiList);
+    }
+  }, [selectedPoiList, isPoiListLoading]);
 
   const dispatch = useDispatch();
 
   const handleCloseModal = () => {
     // will also clear recommendPois
     dispatch(setRecommendContributions([]));
+    setRecommendPois([]);
     setupDrawerParams<"cluster">({ clusterId }, searchParams, setSearchParams);
     dispatch(closeModal("llmResult"));
   };

src/store/llm/index.ts

@@ -2,13 +2,11 @@ import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 interface RecommendState {
   recommendContributions: string[];
-  refetchFlag: boolean;
   errorMessage: string;
 }
 
 const initialState: RecommendState = {
   recommendContributions: [],
-  refetchFlag: false,
   errorMessage: "",
 };
 
@@ -19,16 +17,13 @@ const recommendSlice = createSlice({
     setRecommendContributions: (state, action: PayloadAction<string[]>) => {
       state.recommendContributions = action.payload;
     },
-    toggleRefetchFlag: (state) => {
-      state.refetchFlag = !state.refetchFlag;
-    },
     setErrorMessage: (state, action: PayloadAction<string>) => {
       state.errorMessage = action.payload;
     },
   },
 });
 
-export const { setRecommendContributions, toggleRefetchFlag, setErrorMessage } =
+export const { setRecommendContributions, setErrorMessage } =
   recommendSlice.actions;
 
 export default recommendSlice.reducer;