Merge 28957c0 into 462f533

decentraland · May 3, 2024 · 137165e · 137165e
2 parents 462f533 + 28957c0
commit 137165e
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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<Props> {
   state = {
     currentTab: TABS.COLLECTIONS,
     sort: CurationSortOptions.CREATED_AT_DESC,
-    page: 1
+    page: 1,
+    search: ''
   }
 
+  timeout: ReturnType<typeof setTimeout> | 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<Props> {
     this.props.onOpenModal('CreateThirdPartyCollectionModal')
   }
 
+  handleSearchChange = (_evt: React.ChangeEvent<HTMLInputElement>, 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<Props> {
 
   renderMainActions = () => {
     const { isThirdPartyManager } = this.props
+    const { search } = this.state
     return (
-      <Column align="right">
-        <Row className="actions">
+      <div className="collections-main-actions">
+        <Field
+          placeholder={t('itemdrawer.search_items')}
+          className="collections-search-field"
+          input={{ icon: 'search', iconPosition: 'left', inverted: true }}
+          onChange={this.handleSearchChange}
+          icon={<UIIcon name="search" className="searchIcon" />}
+          iconPosition="left"
+          value={search}
+          isClearable
+        />
+        <Row className="actions" grow={false}>
           {isThirdPartyManager && (
             <Button className="action-button" size="small" basic onClick={this.handleNewThirdPartyCollection}>
               {t('collections_page.new_third_party_collection')}
@@ -203,7 +231,7 @@ export default class CollectionsPage extends React.PureComponent<Props> {
             {t('collections_page.new_collection')}
           </Button>
         </Row>
-      </Column>
+      </div>
     )
   }
 
@@ -271,20 +299,18 @@ export default class CollectionsPage extends React.PureComponent<Props> {
         <EventBanner />
         <div className="filters">
           <Container>
-            <Tabs isFullscreen>
-              {hasUserOrphanItems && (
-                // TODO: Remove tabs when there are no users with orphan items
-                <>
-                  <Tabs.Tab active={this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.COLLECTIONS)}>
-                    {t('collections_page.collections')}
-                  </Tabs.Tab>
-                  <Tabs.Tab active={!this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.ITEMS)}>
-                    {t('collections_page.single_items')}
-                  </Tabs.Tab>
-                </>
-              )}
-              {this.renderMainActions()}
-            </Tabs>
+            {hasUserOrphanItems && (
+              // TODO: Remove tabs when there are no users with orphan items
+              <Tabs isFullscreen>
+                <Tabs.Tab active={this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.COLLECTIONS)}>
+                  {t('collections_page.collections')}
+                </Tabs.Tab>
+                <Tabs.Tab active={!this.isCollectionTabActive()} onClick={() => this.handleTabChange(TABS.ITEMS)}>
+                  {t('collections_page.single_items')}
+                </Tabs.Tab>
+              </Tabs>
+            )}
+            {this.renderMainActions()}
             <Row height={30}>
               <Column>
                 <Row>{!isLoadingItems && !!count && count > 0 && <Header sub>{t('collections_page.results', { count })}</Header>}</Row>