ImagesProvider로 전달된 image 처리 로직 추가

titicacadev · Aug 5, 2024 · e220e21 · e220e21
1 parent 7406c91
commit e220e21
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/packages/react-contexts/src/images-context/index.tsx b/packages/react-contexts/src/images-context/index.tsx
@@ -59,7 +59,7 @@ const TYPE_MAPPING = {
 }
 
 export function ImagesProvider({
-  images: initialImages,
+  images: defaultImages,
   total: initialTotal,
   categoryOrder = [
     'recommendation',
@@ -72,8 +72,8 @@ export function ImagesProvider({
   children,
 }: PropsWithChildren<ImagesProviderProps>) {
   const [{ loading, images, total, hasMore }, dispatch] = useReducer(reducer, {
-    loading: !initialImages,
-    images: initialImages || [],
+    loading: !defaultImages,
+    images: defaultImages || [],
     total: initialTotal || 0,
     hasMore: true,
   })
@@ -84,7 +84,7 @@ export function ImagesProvider({
     async (size = 15) => {
       const response = await fetchImages({
         target: { type: TYPE_MAPPING[type] || type, id },
-        currentImageLength: images.length - (initialImages?.length || 0),
+        currentImageLength: images.length - (defaultImages?.length || 0),
         size,
         categoryOrder,
       })
@@ -102,7 +102,11 @@ export function ImagesProvider({
     dispatch(loadImagesRequest())
 
     try {
-      const { data: fetchedImages, total } = await fetchImages({
+      const {
+        data: fetchedImages,
+        total,
+        next,
+      } = await fetchImages({
         target: { type: TYPE_MAPPING[type] || type, id },
         currentImageLength: 0,
         size: 15,
@@ -111,8 +115,9 @@ export function ImagesProvider({
 
       dispatch(
         reinitializeImages({
-          images: fetchedImages,
-          total,
+          images: [...(defaultImages || []), ...fetchedImages],
+          total: total + (defaultImages?.length || 0),
+          hasMore: !!next,
         }),
       )
     } catch (error) {
@@ -129,8 +134,14 @@ export function ImagesProvider({
       dispatch(loadImagesRequest())
 
       try {
-        const { data: fetchedImages, total } = await sendFetchRequest()
-        dispatch(loadImagesSuccess({ images: fetchedImages, total }))
+        const { data: fetchedImages, total, next } = await sendFetchRequest()
+        dispatch(
+          loadImagesSuccess({
+            images: fetchedImages,
+            total: total + (defaultImages?.length || 0),
+            hasMore: !!next,
+          }),
+        )
       } catch (error) {
         dispatch(loadImagesFail(error))
       }

diff --git a/packages/react-contexts/src/images-context/reducer.ts b/packages/react-contexts/src/images-context/reducer.ts
@@ -21,6 +21,7 @@ export function loadImagesRequest() {
 export function loadImagesSuccess(payload: {
   images: ImageMeta[]
   total: number
+  hasMore: boolean
 }) {
   return {
     type: LOAD_IMAGES_SUCCESS,
@@ -39,6 +40,7 @@ export function loadImagesFail(error: unknown) {
 export function reinitializeImages(payload: {
   images: ImageMeta[]
   total: number
+  hasMore: boolean
 }) {
   return {
     type: REINITIALIZE_IMAGES,
@@ -61,7 +63,7 @@ export default function reducer(
         loading: !action.payload.images,
         images: action.payload.images,
         total: action.payload.total,
-        hasMore: true,
+        hasMore: action.payload.hasMore,
       }
     case LOAD_IMAGES_REQUEST:
       return {
@@ -73,7 +75,7 @@ export default function reducer(
         loading: false,
         images: state.images.concat(action.payload.images),
         total: action.payload.total,
-        hasMore: action.payload.images.length > 0,
+        hasMore: action.payload.hasMore,
       }
     case LOAD_IMAGES_FAIL:
       return {

diff --git a/packages/react-contexts/src/images-context/use-fetch-images.tsx b/packages/react-contexts/src/images-context/use-fetch-images.tsx
@@ -56,6 +56,7 @@ export default function useFetchImages() {
             })
           : { data: [], total: totalPoiReviewImagesCount }
       return {
+        ...response,
         data: [...response.data, ...poiReviewsResponse.data],
         total: response.total + poiReviewsResponse.total,
       }