Merge 4b9ac61 into 432baac

src/components/ThirdPartyCollectionDetailPage/CollectionItem/CollectionItem.container.ts

@@ -1,12 +1,14 @@
 import { connect } from 'react-redux'
 import { push } from 'connected-react-router'
 import { openModal } from 'modules/modal/actions'
+import { deleteItemRequest } from 'modules/item/actions'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './CollectionItem.types'
 import CollectionItem from './CollectionItem'
 
 const mapState = (): MapStateProps => ({})
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onDelete: item => dispatch(deleteItemRequest(item)),
   onNavigate: path => dispatch(push(path)),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata))
 })

src/components/ThirdPartyCollectionDetailPage/CollectionItem/CollectionItem.tsx

@@ -8,11 +8,17 @@ import { decodeURN, URNType } from 'lib/urn'
 import ItemStatus from 'components/ItemStatus'
 import { WearableData } from 'modules/item/types'
 import { getBodyShapeType } from 'modules/item/utils'
+import ConfirmDelete from 'components/ConfirmDelete'
 import ItemImage from 'components/ItemImage'
 import { Props } from './CollectionItem.types'
 import * as styles from './CollectionItem.module.css'
 
 export default class CollectionItem extends React.PureComponent<Props> {
+  handleCheckboxChange = (_event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => {
+    const { item, onSelect } = this.props
+    onSelect(item, data.checked!)
+  }
+
   handleEditURN = () => {
     const { item, onOpenModal } = this.props
     onOpenModal('EditItemURNModal', { item })
@@ -23,9 +29,9 @@ export default class CollectionItem extends React.PureComponent<Props> {
     onNavigate(locations.itemEditor({ itemId: item.id, collectionId: item.collectionId }))
   }
 
-  handleCheckboxChange = (_event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => {
-    const { item, onSelect } = this.props
-    onSelect(item, data.checked!)
+  handleDelete = () => {
+    const { item, onDelete } = this.props
+    onDelete(item)
   }
 
   getTokenId() {
@@ -82,6 +88,9 @@ export default class CollectionItem extends React.PureComponent<Props> {
                   <Dropdown.Item text={t('collection_item.see_details')} as={Link} to={locations.itemDetail(item.id)} />
                   <Dropdown.Item text={t('global.open_in_editor')} onClick={this.handleNavigateToEditor} />
                   <Dropdown.Item text={t('collection_item.edit_urn')} onClick={this.handleEditURN} />
+                  {!item.isPublished && (
+                    <ConfirmDelete name={item.name} onDelete={this.handleDelete} trigger={<Dropdown.Item text={t('global.delete')} />} />
+                  )}
                 </Dropdown.Menu>
               </Dropdown>
             </div>

src/components/ThirdPartyCollectionDetailPage/CollectionItem/CollectionItem.types.ts

@@ -2,17 +2,19 @@ import { Dispatch } from 'redux'
 import { CallHistoryMethodAction } from 'connected-react-router'
 import { Collection } from 'modules/collection/types'
 import { Item } from 'modules/item/types'
+import { deleteItemRequest, DeleteItemRequestAction } from 'modules/item/actions'
 import { openModal, OpenModalAction } from 'modules/modal/actions'
 
 export type Props = {
   collection: Collection
   item: Item
   selected: boolean
   onSelect: (item: Item, isSelected: boolean) => void
+  onDelete: typeof deleteItemRequest
   onNavigate: (path: string) => void
   onOpenModal: typeof openModal
 }
 
 export type MapStateProps = {}
-export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onOpenModal'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenModalAction>
+export type MapDispatchProps = Pick<Props, 'onDelete' | 'onNavigate' | 'onOpenModal'>
+export type MapDispatch = Dispatch<CallHistoryMethodAction | DeleteItemRequestAction | OpenModalAction>

src/lib/api/builder.ts

@@ -621,8 +621,8 @@ export class BuilderAPI extends BaseAPI {
     }
   }
 
-  async deleteItem(item: Item) {
-    await this.request('delete', `/items/${item.id}`, {})
+  async deleteItem(id: string) {
+    await this.request('delete', `/items/${id}`, {})
   }
 
   async fetchCollections(address?: string) {
@@ -665,8 +665,8 @@ export class BuilderAPI extends BaseAPI {
     return this.request('post', `/collections/${collection.id}/lock`, { collection_address: collection.id })
   }
 
-  async deleteCollection(collection: Collection) {
-    await this.request('delete', `/collections/${collection.id}`, {})
+  async deleteCollection(id: string) {
+    await this.request('delete', `/collections/${id}`, {})
   }
 
   async fetchCurations(): Promise<Curation[]> {

src/modules/collection/sagas.ts

@@ -217,7 +217,7 @@ export function* collectionSaga(builder: BuilderAPI, catalyst: CatalystClient) {
   function* handleDeleteCollectionRequest(action: DeleteCollectionRequestAction) {
     const { collection } = action.payload
     try {
-      yield call(() => builder.deleteCollection(collection))
+      yield call(() => builder.deleteCollection(collection.id))
       yield put(deleteCollectionSuccess(collection))
       const collectionIdInUriParam: string = yield select(getCollectionId)
       if (collectionIdInUriParam === collection.id) {

src/modules/item/sagas.ts

@@ -206,7 +206,7 @@ export function* itemSaga(builder: BuilderAPI) {
   function* handleDeleteItemRequest(action: DeleteItemRequestAction) {
     const { item } = action.payload
     try {
-      yield call(() => builder.deleteItem(item))
+      yield call(() => builder.deleteItem(item.id))
       yield put(deleteItemSuccess(item))
       const itemIdInUriParam: string = yield select(getItemId)
       if (itemIdInUriParam === item.id) {