diff --git a/src/components/CollectionProvider/CollectionProvider.tsx b/src/components/CollectionProvider/CollectionProvider.tsx index 2079d7d16..4ef17ce8a 100644 --- a/src/components/CollectionProvider/CollectionProvider.tsx +++ b/src/components/CollectionProvider/CollectionProvider.tsx @@ -8,9 +8,9 @@ export default class CollectionProvider extends React.PureComponent { } fetchCollectionItems(itemsPage: number | number[] = DEFAULT_ITEMS_PAGE) { - const { id, onFetchCollectionItems, itemsPageSize, fetchOptions } = this.props + const { id, onFetchCollectionItems, itemsPageSize, fetchCollectionItemsOptions } = this.props if (id) { - onFetchCollectionItems(id, { page: itemsPage, limit: itemsPageSize || DEFAULT_ITEMS_PAGE_SIZE, ...fetchOptions }) + onFetchCollectionItems(id, { page: itemsPage, limit: itemsPageSize || DEFAULT_ITEMS_PAGE_SIZE, ...fetchCollectionItemsOptions }) } } @@ -31,7 +31,7 @@ export default class CollectionProvider extends React.PureComponent { itemsPage, itemsPageSize, itemSelected, - fetchOptions, + fetchCollectionItemsOptions, paginatedItems, onFetchCollection, onChangePage @@ -70,7 +70,7 @@ export default class CollectionProvider extends React.PureComponent { // logic to fetch the new pages requested const hasChangedPage = !equal(itemsPage, prevProps.itemsPage) - const hasChangeFilter = !equal(fetchOptions, prevProps.fetchOptions) + const hasChangeFilter = !equal(fetchCollectionItemsOptions, prevProps.fetchCollectionItemsOptions) if (id && ((itemsPage && hasChangedPage) || hasChangeFilter)) { const prevPages = prevProps.itemsPage this.fetchCollectionItems( diff --git a/src/components/CollectionProvider/CollectionProvider.types.ts b/src/components/CollectionProvider/CollectionProvider.types.ts index 986b0f7ae..a4534e7b3 100644 --- a/src/components/CollectionProvider/CollectionProvider.types.ts +++ b/src/components/CollectionProvider/CollectionProvider.types.ts @@ -1,5 +1,5 @@ import { Dispatch } from 'redux' -import { FetchCollectionsParams } from 'lib/api/builder' +import { FetchCollectionItemsParams } from 'lib/api/builder' import { Collection } from 'modules/collection/types' import { fetchCollectionRequest, FetchCollectionRequestAction } from 'modules/collection/actions' import { Item } from 'modules/item/types' @@ -19,7 +19,7 @@ export type Props = { itemSelected?: string | null itemsPage?: number | number[] itemsPageSize?: number - fetchOptions?: Pick + fetchCollectionItemsOptions?: FetchCollectionItemsParams curation: CollectionCuration | null itemCurations: ItemCuration[] | null isLoading: boolean diff --git a/src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx b/src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx index beb763577..024fe4045 100644 --- a/src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx +++ b/src/components/ItemEditorPage/LeftPanel/LeftPanel.tsx @@ -195,7 +195,7 @@ export default class LeftPanel extends React.PureComponent { itemSelected={selectedItemId} itemsPage={pages} itemsPageSize={LEFT_PANEL_PAGE_SIZE} - fetchOptions={{ status: isReviewing ? CurationStatus.PENDING : undefined }} + fetchCollectionItemsOptions={{ status: isReviewing ? CurationStatus.PENDING : undefined }} onChangePage={page => this.setState({ pages: [page] })} > {({ paginatedCollections, collection, paginatedItems: collectionItems, initialPage: collectionInitialPage, isLoading }) => { diff --git a/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.module.css b/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.module.css index fcd3292e9..76df26ce2 100644 --- a/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.module.css +++ b/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.module.css @@ -213,6 +213,7 @@ } .migrationBanner { + min-width: 1116px; color: black; display: flex; align-items: center; diff --git a/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.tsx b/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.tsx index 4f00051db..e001a5176 100644 --- a/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.tsx +++ b/src/components/ThirdPartyCollectionDetailPage/ThirdPartyCollectionDetailPage.tsx @@ -35,6 +35,7 @@ import { Props, PAGE_SIZE } from './ThirdPartyCollectionDetailPage.types' import { CollectionItemHeader } from './CollectionItemHeader' import { CollectionItemHeaderV2 } from './CollectionItemHeaderV2' import styles from './ThirdPartyCollectionDetailPage.module.css' +import { ItemMappingStatus } from 'lib/api/builder' const Info = ({ children, title, info }: { children: React.ReactNode; title: string; info?: string }) => (
@@ -45,6 +46,14 @@ const Info = ({ children, title, info }: { children: React.ReactNode; title: str
) +enum ItemStatus { + ALL = 'ALL', + SYNCED = 'SYNCED', + UNSYNCED = 'UNSYNCED', + MIGRATION_REQUIRED = 'MIGRATION_REQUIRED', + MAPPING_PENDING = 'MAPPING_PENDING' +} + export default function ThirdPartyCollectionDetailPage({ currentPage, wallet, @@ -62,7 +71,7 @@ export default function ThirdPartyCollectionDetailPage({ const [page, setPage] = useState(currentPage) const [showSelectAllPages, setShowSelectAllPages] = useState(false) const [shouldFetchAllPages, setShouldFetchAllPages] = useState(false) - const [filters, setFilters] = useState>({}) + const [itemStatus, setItemStatus] = useState(ItemStatus.ALL) const history = useHistory() useEffect(() => { @@ -72,9 +81,6 @@ export default function ThirdPartyCollectionDetailPage({ }, []) useEffect(() => { - if (thirdParty && thirdParty.availableSlots === undefined && !isLoadingAvailableSlots) { - onFetchAvailableSlots(thirdParty.id) - } // update the state if the page query param changes if (currentPage !== page) { setPage(currentPage) @@ -89,7 +95,7 @@ export default function ThirdPartyCollectionDetailPage({ setSelectedItems(selectedItems) setShowSelectAllPages(false) } - }, [page, shouldFetchAllPages, items, thirdParty, isLoadingAvailableSlots, onFetchAvailableSlots, currentPage]) + }, [page, shouldFetchAllPages, items, thirdParty, currentPage]) const handleNewItems = useCallback(() => { onOpenModal('CreateItemsModal', { collectionId: collection!.id }) @@ -173,11 +179,38 @@ export default function ThirdPartyCollectionDetailPage({ const handleChangeStatus = useCallback( (_event: React.SyntheticEvent, { value }: DropdownProps) => { - setFilters({ synced: value as boolean }) + setItemStatus(value as ItemStatus) }, - [setFilters] + [setItemStatus] ) + const itemStatusOptions = [ + { value: ItemStatus.ALL, text: t('third_party_collection_detail_page.synced_filter.all') }, + { value: ItemStatus.SYNCED, text: t('item_status.synced') }, + { value: ItemStatus.UNSYNCED, text: t('item_status.unsynced') }, + ...(!collection?.isMappingComplete + ? [ + { value: ItemStatus.MIGRATION_REQUIRED, text: t('item_status.pending_migration') }, + { value: ItemStatus.MAPPING_PENDING, text: t('item_status.pending_mapping') } + ] + : []) + ] + + const itemFilters = useMemo(() => { + switch (itemStatus) { + case ItemStatus.SYNCED: + return { synced: true } + case ItemStatus.UNSYNCED: + return { synced: false } + case ItemStatus.MIGRATION_REQUIRED: + return { mappingStatus: ItemMappingStatus.UNPUBLISHED_MAPPING } + case ItemStatus.MAPPING_PENDING: + return { mappingStatus: ItemMappingStatus.MISSING_MAPPING } + default: + return {} + } + }, [itemStatus]) + const renderPage = useCallback( (thirdParty: ThirdParty, allItems: Item[], paginatedItems: Item[], onFetchCollectionItemsPages: typeof fetchCollectionItemsRequest) => { const allSelectedItems = allItems.filter(item => selectedItems[item.id]) @@ -257,13 +290,8 @@ export default function ThirdPartyCollectionDetailPage({ @@ -365,13 +393,13 @@ export default function ThirdPartyCollectionDetailPage({ areAllSelected, handleChangeStatus, handleClearSelection, - filters + itemStatus ] ) const shouldRender = hasAccess && collection return ( - + {({ isLoading: isLoadingCollectionData, items, paginatedItems, onFetchCollectionItemsPages }) => ( & { + }: Omit & { page?: number | number[] overridePaginationData?: boolean } = {} -) => action(FETCH_COLLECTION_ITEMS_REQUEST, { collectionId, overridePaginationData, options: { limit, status, synced, page } }) +) => + action(FETCH_COLLECTION_ITEMS_REQUEST, { collectionId, overridePaginationData, options: { limit, status, synced, mappingStatus, page } }) export const fetchCollectionItemsSuccess = (collectionId: string, items: Item[], paginationStats?: PaginationStats) => action(FETCH_COLLECTION_ITEMS_SUCCESS, { items, paginationIndex: collectionId, paginationStats }) export const fetchCollectionItemsFailure = (collectionId: string, error: string) =>