Feat: Load item when upserting (#3156)

* feat: Load upserted item when upserting

* feat: Load item when upserting

Author: LautaroPetaccio

src/components/CollectionsPage/CollectionCard/CollectionCard.container.ts

@@ -2,7 +2,6 @@ import { connect } from 'react-redux'
 
 import { RootState } from 'modules/common/types'
 import { getCollectionItemCount } from 'modules/collection/selectors'
-import { setCollection } from 'modules/item/actions'
 import { deleteCollectionRequest } from 'modules/collection/actions'
 import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './CollectionCard.types'
 import CollectionCard from './CollectionCard'
@@ -12,7 +11,6 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch, ownProps: OwnProps): MapDispatchProps => ({
-  onSetCollection: (item, collectionId) => dispatch(setCollection(item, collectionId)),
   onDeleteCollection: () => dispatch(deleteCollectionRequest(ownProps.collection))
 })
 

src/components/CollectionsPage/CollectionCard/CollectionCard.types.ts

@@ -1,16 +1,15 @@
 import { Dispatch } from 'redux'
 import { Collection } from 'modules/collection/types'
-import { setCollection, SetCollectionAction } from 'modules/item/actions'
+import { SetCollectionAction } from 'modules/item/actions'
 import { DeleteCollectionRequestAction } from 'modules/collection/actions'
 
 export type Props = {
   collection: Collection
   itemCount: number
-  onSetCollection: typeof setCollection
   onDeleteCollection: () => ReturnType<Dispatch<DeleteCollectionRequestAction>>
 }
 
 export type MapStateProps = Pick<Props, 'itemCount'>
-export type MapDispatchProps = Pick<Props, 'onSetCollection' | 'onDeleteCollection'>
+export type MapDispatchProps = Pick<Props, 'onDeleteCollection'>
 export type MapDispatch = Dispatch<SetCollectionAction | DeleteCollectionRequestAction>
 export type OwnProps = Pick<Props, 'collection'>

src/components/ItemEditorPage/LeftPanel/Collections/Collections.tsx

@@ -17,7 +17,7 @@ export default class Collections extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { collections, isLoading, items, onSetCollection, selectedCollectionId, totalCollections } = this.props
+    const { collections, isLoading, items, selectedCollectionId, totalCollections } = this.props
     const { currentPage } = this.state
     if (collections.length === 0) return null
 
@@ -34,7 +34,6 @@ export default class Collections extends React.PureComponent<Props, State> {
               collection={collection}
               items={items}
               isSelected={collection.id === selectedCollectionId}
-              onSetCollection={onSetCollection}
             />
           ))}
           {totalPages > 1 ? (

src/components/ItemEditorPage/LeftPanel/Collections/Collections.types.ts

@@ -1,5 +1,4 @@
 import { Collection } from 'modules/collection/types'
-import { setCollection } from 'modules/item/actions'
 import { Item } from 'modules/item/types'
 
 export type State = {
@@ -13,6 +12,5 @@ export type Props = {
   totalCollections: number
   items: Item[]
   hasHeader: boolean
-  onSetCollection: typeof setCollection
   onLoadPage: (page: number) => void
 }

src/components/ItemEditorPage/LeftPanel/Collections/SidebarCollection/SidebarCollection.types.ts

@@ -1,10 +1,8 @@
 import { Collection } from 'modules/collection/types'
-import { setCollection } from 'modules/item/actions'
 import { Item } from 'modules/item/types'
 
 export type Props = {
   collection: Collection
   items: Item[]
   isSelected: boolean
-  onSetCollection: typeof setCollection
 }

src/components/ItemEditorPage/LeftPanel/LeftPanel.container.ts

@@ -16,13 +16,7 @@ import {
 import { fetchCollectionsRequest } from 'modules/collection/actions'
 import { getAuthorizedCollections, getPaginationData as getCollectionsPaginationData } from 'modules/collection/selectors'
 import { setItems } from 'modules/editor/actions'
-import {
-  fetchItemsRequest,
-  fetchOrphanItemRequest,
-  FETCH_ITEMS_REQUEST,
-  FETCH_ORPHAN_ITEM_REQUEST,
-  setCollection
-} from 'modules/item/actions'
+import { fetchItemsRequest, fetchOrphanItemRequest, FETCH_ITEMS_REQUEST, FETCH_ORPHAN_ITEM_REQUEST } from 'modules/item/actions'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './LeftPanel.types'
 import LeftPanel from './LeftPanel'
 
@@ -64,7 +58,6 @@ const mapState = (state: RootState): MapStateProps => {
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onSetItems: items => dispatch(setItems(items)),
-  onSetCollection: (item, collectionId) => dispatch(setCollection(item, collectionId)),
   onFetchCollections: (address, params) => dispatch(fetchCollectionsRequest(address, params)),
   onFetchOrphanItems: (address, params) => dispatch(fetchItemsRequest(address, params)),
   onFetchOrphanItem: address => dispatch(fetchOrphanItemRequest(address))

src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx

@@ -181,7 +181,6 @@ export default class LeftPanel extends React.PureComponent<Props, State> {
       isLoading: isLoadingOrphanItems,
       hasUserOrphanItems,
       onSetItems,
-      onSetCollection,
       onSetReviewedItems
     } = this.props
     const { pages } = this.state
@@ -250,7 +249,6 @@ export default class LeftPanel extends React.PureComponent<Props, State> {
                       items={allItems}
                       hasHeader={items.length > 0}
                       selectedCollectionId={selectedCollectionId}
-                      onSetCollection={onSetCollection}
                       onLoadPage={this.loadPage}
                       isLoading={isLoading}
                     />

src/components/ItemEditorPage/LeftPanel/LeftPanel.types.ts

@@ -9,9 +9,7 @@ import {
   fetchItemsRequest,
   FetchItemsRequestAction,
   fetchOrphanItemRequest,
-  FetchOrphanItemRequestAction,
-  setCollection,
-  SetCollectionAction
+  FetchOrphanItemRequestAction
 } from 'modules/item/actions'
 
 export enum ItemEditorTabs {
@@ -38,7 +36,6 @@ export type Props = {
   wearableController: IPreviewController | null
   hasUserOrphanItems: boolean | undefined
   onSetItems: typeof setItems
-  onSetCollection: typeof setCollection
   onFetchOrphanItems: typeof fetchItemsRequest
   onFetchCollections: typeof fetchCollectionsRequest
   onSetReviewedItems: (itemIds: Item[]) => void
@@ -71,13 +68,9 @@ export type MapStateProps = Pick<
   | 'isPlayingEmote'
   | 'hasUserOrphanItems'
 >
-export type MapDispatchProps = Pick<
-  Props,
-  'onSetItems' | 'onSetCollection' | 'onFetchOrphanItems' | 'onFetchCollections' | 'onFetchOrphanItem'
->
+export type MapDispatchProps = Pick<Props, 'onSetItems' | 'onFetchOrphanItems' | 'onFetchCollections' | 'onFetchOrphanItem'>
 export type MapDispatch = Dispatch<
   | SetItemsAction
-  | SetCollectionAction
   | FetchCollectionItemsRequestAction
   | FetchItemsRequestAction
   | FetchCollectionsRequestAction

src/components/ItemEditorPage/RightPanel/RightPanel.container.ts

@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import { getAddress, isConnected } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { RootState } from 'modules/common/types'
 import { getItem, getError as getItemError, getStatusByItemId, isDownloading } from 'modules/item/selectors'
-import { deleteItemRequest, downloadItemRequest, saveItemRequest, setCollection } from 'modules/item/actions'
+import { deleteItemRequest, downloadItemRequest, saveItemRequest } from 'modules/item/actions'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { isOwner } from 'modules/item/utils'
 import { getSelectedItemId } from 'modules/location/selectors'
@@ -44,7 +44,6 @@ const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onSaveItem: (item, contents) => dispatch(saveItemRequest(item, contents)),
   onDeleteItem: item => dispatch(deleteItemRequest(item)),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata)),
-  onSetCollection: (item, collectionId) => dispatch(setCollection(item, collectionId)),
   onDownload: itemId => dispatch(downloadItemRequest(itemId))
 })
 

src/components/ItemEditorPage/RightPanel/RightPanel.types.ts

@@ -5,8 +5,6 @@ import {
   DeleteItemRequestAction,
   saveItemRequest,
   SaveItemRequestAction,
-  setCollection,
-  SetCollectionAction,
   downloadItemRequest,
   DownloadItemRequestAction
 } from 'modules/item/actions'
@@ -31,7 +29,6 @@ export type Props = {
   onSaveItem: typeof saveItemRequest
   onDeleteItem: typeof deleteItemRequest
   onOpenModal: typeof openModal
-  onSetCollection: typeof setCollection
   onDownload: typeof downloadItemRequest
 }
 
@@ -64,7 +61,5 @@ export type MapStateProps = Pick<
   | 'isVrmOptOutEnabled'
   | 'isWearableUtilityEnabled'
 >
-export type MapDispatchProps = Pick<Props, 'onSaveItem' | 'onDeleteItem' | 'onOpenModal' | 'onSetCollection' | 'onDownload'>
-export type MapDispatch = Dispatch<
-  SaveItemRequestAction | DeleteItemRequestAction | OpenModalAction | SetCollectionAction | DownloadItemRequestAction
->
+export type MapDispatchProps = Pick<Props, 'onSaveItem' | 'onDeleteItem' | 'onOpenModal' | 'onDownload'>
+export type MapDispatch = Dispatch<SaveItemRequestAction | DeleteItemRequestAction | OpenModalAction | DownloadItemRequestAction>

src/lib/api/builder.ts

@@ -792,10 +792,12 @@ export class BuilderAPI extends BaseAPI {
     return remoteResponse.map(fromRemoteItem) as Item[]
   }
 
-  saveItem = async (item: Item, contents: Record<string, Blob>) => {
-    await this.request('put', `/items/${item.id}`, { params: { item: toRemoteItem(item) } })
+  saveItem = async (item: Item, contents: Record<string, Blob>): Promise<Item> => {
+    const savedItemResponse = await this.request('put', `/items/${item.id}`, { params: { item: toRemoteItem(item) } })
+    const remoteSavedItem = fromRemoteItem(savedItemResponse)
     // This has to be done after the PUT above, otherwise it will fail when creating an item, since it wont find it in the DB and return a 404
     await this.saveItemContents(item, contents)
+    return remoteSavedItem
   }
 
   saveItemContents = async (item: Item, contents: Record<string, Blob>) => {