fix: Fetch pending curation items (#2420)

* fix: Fetch only standard collections to show in the play emote dropdown

* fix: Refactor get thumbnail images to avoid showing wrong reviewed wearables on the curation page

src/components/CollectionImage/CollectionImage.container.ts

@@ -3,7 +3,7 @@ import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors
 import { RootState } from 'modules/common/types'
 import { getCollectionItems, getLoading as getLoadingItem } from 'modules/item/selectors'
 import { getCollection } from 'modules/collection/selectors'
-import { fetchCollectionItemsRequest, FETCH_COLLECTION_ITEMS_REQUEST, FETCH_ITEMS_REQUEST } from 'modules/item/actions'
+import { fetchCollectionThumbnailsRequest, FETCH_COLLECTION_THUMBNAILS_REQUEST, FETCH_ITEMS_REQUEST } from 'modules/item/actions'
 import { OwnProps, MapStateProps, MapDispatch, MapDispatchProps } from './CollectionImage.types'
 import CollectionImage from './CollectionImage'
 
@@ -13,7 +13,7 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
   const items = getCollectionItems(state, collectionId)
   const collection = getCollection(state, collectionId)
   const isLoading = !!getLoadingItem(state).find(
-    action => action.type === FETCH_COLLECTION_ITEMS_REQUEST && action.payload.collectionId === collectionId
+    action => action.type === FETCH_COLLECTION_THUMBNAILS_REQUEST && action.payload.collectionId === collectionId
   )
   return {
     collection,
@@ -24,7 +24,7 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onFetchCollectionItems: (id, options) => dispatch(fetchCollectionItemsRequest(id, { page: options?.page, limit: options?.limit }))
+  onFetchCollectionThumbnailsRequest: id => dispatch(fetchCollectionThumbnailsRequest(id))
 })
 
 export default connect(mapState, mapDispatch)(CollectionImage)

src/components/CollectionImage/CollectionImage.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames'
 import * as React from 'react'
 import { Loader } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { isTPCollection } from 'modules/collection/utils'
 import { Item } from 'modules/item/types'
 import ItemImage from 'components/ItemImage'
 import { Props } from './CollectionImage.types'
@@ -29,12 +28,11 @@ export default class CollectionImage extends React.PureComponent<Props> {
   }
 
   fetchItemsIfNeeded(itemCount: number) {
-    const { collectionId, items, onFetchCollectionItems, collection } = this.props
+    const { collectionId, items, onFetchCollectionThumbnailsRequest, collection } = this.props
     const needsToFetchMoreImages =
       (itemCount >= MAX_IMAGES_TO_SHOW && items.length < MAX_IMAGES_TO_SHOW) || (itemCount < MAX_IMAGES_TO_SHOW && items.length < itemCount)
     if (collection && needsToFetchMoreImages) {
-      // Fetch all the collection items to show the images and get the entity data for standard collections. For TP is not necessary, just fetch the 4 images needed for the component
-      onFetchCollectionItems(collectionId, { page: 1, limit: isTPCollection(collection) ? MAX_IMAGES_TO_SHOW : itemCount })
+      onFetchCollectionThumbnailsRequest(collectionId)
     }
   }
 

src/components/CollectionImage/CollectionImage.types.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from 'redux'
-import { fetchCollectionItemsRequest, FetchCollectionItemsRequestAction } from 'modules/item/actions'
+import { fetchCollectionThumbnailsRequest, FetchCollectionThumbnailsRequestAction } from 'modules/item/actions'
 import { Collection } from 'modules/collection/types'
 import { Item } from 'modules/item/types'
 
@@ -10,10 +10,10 @@ export type Props = {
   items: Item[]
   itemCount: number | undefined
   isLoading: boolean
-  onFetchCollectionItems: typeof fetchCollectionItemsRequest
+  onFetchCollectionThumbnailsRequest: typeof fetchCollectionThumbnailsRequest
 }
 
 export type MapStateProps = Pick<Props, 'collection' | 'items' | 'itemCount' | 'isLoading'>
-export type MapDispatchProps = Pick<Props, 'onFetchCollectionItems'>
-export type MapDispatch = Dispatch<FetchCollectionItemsRequestAction>
+export type MapDispatchProps = Pick<Props, 'onFetchCollectionThumbnailsRequest'>
+export type MapDispatch = Dispatch<FetchCollectionThumbnailsRequestAction>
 export type OwnProps = Pick<Props, 'collectionId'>

src/components/ItemEditorPage/CenterPanel/CenterPanel.tsx

@@ -4,6 +4,7 @@ import { BodyShape, PreviewEmote, WearableCategory } from '@dcl/schemas'
 import { Dropdown, DropdownProps, Popup, Icon, Loader, Center, EmoteControls, DropdownItemProps, Button } from 'decentraland-ui'
 import { WearablePreview } from 'decentraland-ui/dist/components/WearablePreview/WearablePreview'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { isTPCollection } from 'modules/collection/utils'
 import { ItemType } from 'modules/item/types'
 import { toBase64, toHex } from 'modules/editor/utils'
 import { getSkinColors, getEyeColors, getHairColors } from 'modules/editor/avatar'
@@ -39,7 +40,8 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
 
     // Fetch emotes created by the user to show them in the Play Emote dropdown
     if (!hasEmotesLoaded) {
-      if (collection) {
+      // The TP collections wouldn't have emotes soon, for this reason, we are fetching only standard collections to show in the Play Emote dropdown
+      if (collection && !isTPCollection(collection)) {
         onFetchCollectionItems(collection.id)
       } else {
         onFetchOrphanItems(address!)
@@ -285,7 +287,11 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
         <div className="footer">
           {isRenderingAnEmote && !isLoading && wearableController ? (
             <div className="emote-controls-container">
-              <EmoteControls className="emote-controls" wearablePreviewId="wearable-editor" wearablePreviewController={wearableController} />
+              <EmoteControls
+                className="emote-controls"
+                wearablePreviewId="wearable-editor"
+                wearablePreviewController={wearableController}
+              />
             </div>
           ) : null}
           <div className="options">

src/modules/item/actions.ts

@@ -64,6 +64,20 @@ export type FetchCollectionItemsRequestAction = ReturnType<typeof fetchCollectio
 export type FetchCollectionItemsSuccessAction = ReturnType<typeof fetchCollectionItemsSuccess>
 export type FetchCollectionItemsFailureAction = ReturnType<typeof fetchCollectionItemsFailure>
 
+export const FETCH_COLLECTION_THUMBNAILS_REQUEST = '[Request] Fetch Collection Thumbnails'
+export const FETCH_COLLECTION_THUMBNAILS_SUCCESS = '[Success] Fetch Collection Thumbnails'
+export const FETCH_COLLECTION_THUMBNAILS_FAILURE = '[Failure] Fetch Collection Thumbnails'
+
+export const fetchCollectionThumbnailsRequest = (collectionId: string) => action(FETCH_COLLECTION_THUMBNAILS_REQUEST, { collectionId })
+export const fetchCollectionThumbnailsSuccess = (collectionId: string, items: Item[]) =>
+  action(FETCH_COLLECTION_THUMBNAILS_SUCCESS, { collectionId, items })
+export const fetchCollectionThumbnailsFailure = (collectionId: string, error: string) =>
+  action(FETCH_COLLECTION_THUMBNAILS_FAILURE, { collectionId, error })
+
+export type FetchCollectionThumbnailsRequestAction = ReturnType<typeof fetchCollectionThumbnailsRequest>
+export type FetchCollectionThumbnailsSuccessAction = ReturnType<typeof fetchCollectionThumbnailsSuccess>
+export type FetchCollectionThumbnailsFailureAction = ReturnType<typeof fetchCollectionThumbnailsFailure>
+
 // Save items
 
 export const SAVE_ITEM_REQUEST = '[Request] Save Item'

src/modules/item/reducer.ts

@@ -86,7 +86,13 @@ import {
   SAVE_MULTIPLE_ITEMS_SUCCESS,
   CLEAR_SAVE_MULTIPLE_ITEMS,
   SAVE_MULTIPLE_ITEMS_CANCELLED,
-  RescueItemsChunkSuccessAction
+  RescueItemsChunkSuccessAction,
+  FetchCollectionThumbnailsRequestAction,
+  FetchCollectionThumbnailsSuccessAction,
+  FetchCollectionThumbnailsFailureAction,
+  FETCH_COLLECTION_THUMBNAILS_REQUEST,
+  FETCH_COLLECTION_THUMBNAILS_SUCCESS,
+  FETCH_COLLECTION_THUMBNAILS_FAILURE
 } from './actions'
 import {
   PublishThirdPartyItemsSuccessAction,
@@ -130,6 +136,9 @@ type ItemReducerAction =
   | FetchItemRequestAction
   | FetchItemSuccessAction
   | FetchItemFailureAction
+  | FetchCollectionThumbnailsRequestAction
+  | FetchCollectionThumbnailsSuccessAction
+  | FetchCollectionThumbnailsFailureAction
   | SaveItemRequestAction
   | SaveItemSuccessAction
   | SaveItemFailureAction
@@ -179,6 +188,7 @@ export function itemReducer(state: ItemState = INITIAL_STATE, action: ItemReduce
     case FETCH_RARITIES_REQUEST:
     case FETCH_ITEM_REQUEST:
     case FETCH_COLLECTION_ITEMS_REQUEST:
+    case FETCH_COLLECTION_THUMBNAILS_REQUEST:
     case SET_ITEMS_TOKEN_ID_REQUEST:
     case SET_PRICE_AND_BENEFICIARY_REQUEST:
     case SAVE_ITEM_REQUEST:
@@ -219,6 +229,18 @@ export function itemReducer(state: ItemState = INITIAL_STATE, action: ItemReduce
         error: null
       }
     }
+    case FETCH_COLLECTION_THUMBNAILS_SUCCESS: {
+      const { items } = action.payload
+      return {
+        ...state,
+        data: {
+          ...state.data,
+          ...toItemObject(items)
+        },
+        loading: loadingReducer(state.loading, action),
+        error: null
+      }
+    }
     case SET_ITEMS_TOKEN_ID_SUCCESS: {
       const { items } = action.payload
       return {
@@ -259,6 +281,7 @@ export function itemReducer(state: ItemState = INITIAL_STATE, action: ItemReduce
     }
     case FETCH_ITEMS_FAILURE:
     case FETCH_ITEM_FAILURE:
+    case FETCH_COLLECTION_THUMBNAILS_FAILURE:
     case FETCH_COLLECTION_ITEMS_FAILURE:
     case SET_ITEMS_TOKEN_ID_FAILURE:
     case SET_PRICE_AND_BENEFICIARY_FAILURE:

src/modules/item/sagas.ts

@@ -84,7 +84,11 @@ import {
   SaveMultipleItemsSuccessAction,
   SaveMultipleItemsCancelledAction,
   SAVE_MULTIPLE_ITEMS_CANCELLED,
-  fetchItemsRequest
+  fetchItemsRequest,
+  FETCH_COLLECTION_THUMBNAILS_REQUEST,
+  fetchCollectionThumbnailsSuccess,
+  fetchCollectionThumbnailsFailure,
+  FetchCollectionThumbnailsRequestAction
 } from './actions'
 import { fromRemoteItem } from 'lib/api/transformations'
 import { isThirdParty } from 'lib/urn'
@@ -129,6 +133,7 @@ export function* itemSaga(legacyBuilder: LegacyBuilderAPI, builder: BuilderClien
   yield takeEvery(FETCH_ITEMS_REQUEST, handleFetchItemsRequest)
   yield takeEvery(FETCH_ITEM_REQUEST, handleFetchItemRequest)
   yield takeEvery(FETCH_COLLECTION_ITEMS_REQUEST, handleFetchCollectionItemsRequest)
+  yield takeEvery(FETCH_COLLECTION_THUMBNAILS_REQUEST, handleFetchCollectionThumbnailsRequest)
   yield takeEvery(SAVE_ITEM_REQUEST, handleSaveItemRequest)
   yield takeEvery([SAVE_MULTIPLE_ITEMS_SUCCESS, SAVE_MULTIPLE_ITEMS_CANCELLED], handleSaveMultipleItemsSuccess)
   yield takeEvery(SAVE_ITEM_SUCCESS, handleSaveItemSuccess)
@@ -217,6 +222,20 @@ export function* itemSaga(legacyBuilder: LegacyBuilderAPI, builder: BuilderClien
     }
   }
 
+  function* handleFetchCollectionThumbnailsRequest(action: FetchCollectionThumbnailsRequestAction) {
+    const { collectionId } = action.payload
+
+    try {
+      const { results }: { results: Item[] } = yield call([legacyBuilder, 'fetchCollectionItems'], collectionId, {
+        page: 1,
+        limit: 4
+      })
+      yield put(fetchCollectionThumbnailsSuccess(collectionId, results))
+    } catch (error) {
+      yield put(fetchCollectionThumbnailsFailure(collectionId, error.message))
+    }
+  }
+
   function* handleCreateOrEditProgress(action: { progress: number }) {
     yield put(updateProgressSaveMultipleItems(action.progress))
   }