diff --git a/src/components/CollectionsPage/CollectionCard/CollectionCard.css b/src/components/CollectionsPage/CollectionCard/CollectionCard.css index 23ed53bab..28bba5868 100644 --- a/src/components/CollectionsPage/CollectionCard/CollectionCard.css +++ b/src/components/CollectionsPage/CollectionCard/CollectionCard.css @@ -1,6 +1,10 @@ .CollectionCard .content { margin-top: 16px; text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .CollectionCard .content .text { diff --git a/src/components/CollectionsPage/CollectionsPage.css b/src/components/CollectionsPage/CollectionsPage.css index 4fa66873a..e67a0cf46 100644 --- a/src/components/CollectionsPage/CollectionsPage.css +++ b/src/components/CollectionsPage/CollectionsPage.css @@ -177,3 +177,27 @@ .CollectionsPage .dcl.tabs .ui.container { margin-bottom: 20px; } + +.CollectionsPage .collections-main-actions { + display: flex; + gap: 20px; + margin-top: 20px; +} + +.CollectionsPage .collections-main-actions > :first-child { + flex: 1; +} + +.CollectionsPage .dcl.field .collections-search-field.ui.input input { + padding: 8px; + background: var(--shadows); + border-radius: 10px; + border: none; + font-size: 16px; +} + +.CollectionsPage .collections-main-actions > .actions { + align-self: baseline; + justify-self: end; + flex: none; +} diff --git a/src/components/CollectionsPage/CollectionsPage.tsx b/src/components/CollectionsPage/CollectionsPage.tsx index 9b9b4d163..72a145958 100644 --- a/src/components/CollectionsPage/CollectionsPage.tsx +++ b/src/components/CollectionsPage/CollectionsPage.tsx @@ -13,7 +13,10 @@ import { Loader, Pagination, PaginationProps, - DropdownProps + DropdownProps, + Field, + InputOnChangeData, + Icon as UIIcon } from 'decentraland-ui' import { t } from 'decentraland-dapps/dist/modules/translation/utils' import { NavigationTab } from 'components/Navigation/Navigation.types' @@ -37,9 +40,12 @@ export default class CollectionsPage extends React.PureComponent { state = { currentTab: TABS.COLLECTIONS, sort: CurationSortOptions.CREATED_AT_DESC, - page: 1 + page: 1, + search: '' } + timeout: ReturnType | undefined = undefined + componentDidMount() { const { address, hasUserOrphanItems, onFetchCollections, onFetchOrphanItem, onOpenModal } = this.props // fetch if already connected @@ -77,6 +83,17 @@ export default class CollectionsPage extends React.PureComponent { this.props.onOpenModal('CreateThirdPartyCollectionModal') } + handleSearchChange = (_evt: React.ChangeEvent, data: InputOnChangeData) => { + const { onFetchCollections, address } = this.props + this.setState({ search: data.value }) + if (this.timeout) { + clearTimeout(this.timeout) + } + this.timeout = setTimeout(() => { + onFetchCollections(address, { page: 1, limit: PAGE_SIZE, q: data.value }) + }, 500) + } + handleOpenEditor = () => { const { onNavigate } = this.props onNavigate(locations.itemEditor()) @@ -187,9 +204,20 @@ export default class CollectionsPage extends React.PureComponent { renderMainActions = () => { const { isThirdPartyManager } = this.props + const { search } = this.state return ( - - +
+ } + iconPosition="left" + value={search} + isClearable + /> + {isThirdPartyManager && ( - +
) } @@ -271,20 +299,18 @@ export default class CollectionsPage extends React.PureComponent {
- - {hasUserOrphanItems && ( - // TODO: Remove tabs when there are no users with orphan items - <> - this.handleTabChange(TABS.COLLECTIONS)}> - {t('collections_page.collections')} - - this.handleTabChange(TABS.ITEMS)}> - {t('collections_page.single_items')} - - - )} - {this.renderMainActions()} - + {hasUserOrphanItems && ( + // TODO: Remove tabs when there are no users with orphan items + + this.handleTabChange(TABS.COLLECTIONS)}> + {t('collections_page.collections')} + + this.handleTabChange(TABS.ITEMS)}> + {t('collections_page.single_items')} + + + )} + {this.renderMainActions()} {!isLoadingItems && !!count && count > 0 &&
{t('collections_page.results', { count })}
}