feat: add search for collections

decentraland · May 3, 2024 · 725c5eb · 725c5eb
1 parent 84454a2
commit 725c5eb
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 5 deletions.
diff --git a/src/components/CollectionsPage/CollectionsPage.css b/src/components/CollectionsPage/CollectionsPage.css
@@ -177,3 +177,23 @@
 .CollectionsPage .dcl.tabs .ui.container {
   margin-bottom: 20px;
 }
+
+.CollectionsPage .collections-main-actions {
+  display: grid;
+  grid-template-columns: 1fr 310px;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.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;
+}
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'
@@ -31,13 +34,15 @@ import CollectionRow from './CollectionRow'
 import { Props, TABS } from './CollectionsPage.types'
 import './CollectionsPage.css'
 
+let timeout: NodeJS.Timeout
 const PAGE_SIZE = 20
 export const LOCALSTORAGE_EMOTES_V2_ANNOUCEMENT = 'builder-emotes-2.0-announcement'
 export default class CollectionsPage extends React.PureComponent<Props> {
   state = {
     currentTab: TABS.COLLECTIONS,
     sort: CurationSortOptions.CREATED_AT_DESC,
-    page: 1
+    page: 1,
+    search: ''
   }
 
   componentDidMount() {
@@ -77,6 +82,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 (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(() => {
+      onFetchCollections(address, { page: 1, limit: PAGE_SIZE, q: data.value })
+    }, 500)
+  }
+
   handleOpenEditor = () => {
     const { onNavigate } = this.props
     onNavigate(locations.itemEditor())
@@ -187,8 +203,19 @@ export default class CollectionsPage extends React.PureComponent<Props> {
 
   renderMainActions = () => {
     const { isThirdPartyManager } = this.props
+    const { search } = this.state
     return (
-      <Column align="right">
+      <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">
           {isThirdPartyManager && (
             <Button className="action-button" size="small" basic onClick={this.handleNewThirdPartyCollection}>
@@ -203,7 +230,7 @@ export default class CollectionsPage extends React.PureComponent<Props> {
             {t('collections_page.new_collection')}
           </Button>
         </Row>
-      </Column>
+      </div>
     )
   }
 
@@ -283,8 +310,8 @@ export default class CollectionsPage extends React.PureComponent<Props> {
                   </Tabs.Tab>
                 </>
               )}
-              {this.renderMainActions()}
             </Tabs>
+            {this.renderMainActions()}
             <Row height={30}>
               <Column>
                 <Row>{!isLoadingItems && !!count && count > 0 && <Header sub>{t('collections_page.results', { count })}</Header>}</Row>