domain-manager: add search

kyokan · Jun 30, 2022 · cab7331 · cab7331
1 parent 205a7eb
commit cab7331
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 22 deletions.
diff --git a/app/pages/App/app.scss b/app/pages/App/app.scss
@@ -59,6 +59,7 @@
   }
 
   &__content {
+    flex-grow: 1;
     padding: 2rem 3rem;
     margin: 0;
     box-sizing: border-box;

diff --git a/app/pages/DomainManager/domain-manager.scss b/app/pages/DomainManager/domain-manager.scss
@@ -14,6 +14,11 @@
     }
   }
 
+  &__search {
+    margin: 1rem 0;
+    width: 10rem;
+  }
+
   &__domain {
     @extend %row-nowrap;
 
@@ -48,10 +53,6 @@
     }
   }
 
-  &__export-btn {
-    margin-bottom: 2rem;
-  }
-
   &__table {
     .table {
       &__header {
@@ -98,6 +99,13 @@
           flex: 0 0 6rem;
         }
       }
+
+      &__empty-row {
+        height: 1.8rem;
+        font-size: 0.8rem;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 

diff --git a/app/pages/DomainManager/index.js b/app/pages/DomainManager/index.js
@@ -10,6 +10,7 @@ import fs from 'fs';
 import ClaimNameForPayment from './ClaimNameForPayment';
 import {HeaderItem, HeaderRow, Table, TableItem, TableRow} from "../../components/Table";
 import Blocktime from "../../components/Blocktime";
+import BidSearchInput from "../../components/BidSearchInput";
 import {displayBalance} from "../../utils/balances";
 import {getPageIndices} from "../../utils/pageable";
 import c from "classnames";
@@ -46,6 +47,7 @@ class DomainManager extends Component {
   static contextType = I18nContext;
 
   state = {
+    query: '',
     isShowingNameClaimForPayment: false,
     isShowingBulkTransfer: false,
     isConfirmingBulkFinalize: false,
@@ -56,6 +58,7 @@ class DomainManager extends Component {
   shouldComponentUpdate(nextProps, nextState) {
     return this.props.namesList.join('') !== nextProps.namesList.join('')
       || this.props.isFetching !== nextProps.isFetching
+      || this.state.query !== nextState.query
       || this.state.isShowingNameClaimForPayment !== nextState.isShowingNameClaimForPayment
       || this.state.isShowingBulkTransfer !== nextState.isShowingBulkTransfer
       || this.state.isConfirmingBulkFinalize !== nextState.isConfirmingBulkFinalize
@@ -76,6 +79,25 @@ class DomainManager extends Component {
     });
   }
 
+  onChange = (name) => (e) => {
+    this.setState({
+      [name]: e.target.value,
+    });
+  };
+
+  getNamesList() {
+    let namesList = Array.from(this.props.namesList);
+    let { query } = this.state;
+
+    if (query) {
+      query = query.toLowerCase();
+      namesList = namesList.filter(name => name.includes(query));
+    }
+
+    namesList.sort();
+    return namesList;
+  }
+
   handleExportClick() {
     let names = this.props.namesList;
     let data = names.join('\n');
@@ -165,14 +187,11 @@ class DomainManager extends Component {
     );
   }
 
-  renderControls() {
+  renderControls(namesList) {
     const {
       currentPageIndex,
       itemsPerPage,
     } = this.state;
-    const {
-      namesList,
-    } = this.props;
 
     const totalPages = Math.ceil(namesList.length / itemsPerPage);
     const pageIndices = getPageIndices(namesList, itemsPerPage, currentPageIndex);
@@ -240,10 +259,11 @@ class DomainManager extends Component {
     )
   }
 
-  renderList() {
-    const {namesList, history} = this.props;
+  renderList(namesList) {
+    const {history} = this.props;
     const {t} = this.context;
     const {
+      query,
       currentPageIndex: i,
       itemsPerPage: n,
     } = this.state;
@@ -278,21 +298,30 @@ class DomainManager extends Component {
           </button>
           {this.renderBulkFinalize()}
         </div>
+        <BidSearchInput
+          className="domain-manager__search"
+          placeholder={t('domainSearchPlaceholder')}
+          onChange={this.onChange('query')}
+          value={query}
+        />
         <Table className="domain-manager__table">
           <HeaderRow>
             <HeaderItem>{t('domain')}</HeaderItem>
             <HeaderItem>{t('expiresOn')}</HeaderItem>
             <HeaderItem>{t('hnsPaid')}</HeaderItem>
           </HeaderRow>
-          {namesList.slice(start, end).map((name) => {
+          {namesList.length ? namesList.slice(start, end).map((name) => {
             return (
               <DomainRow
                 key={`${name}`}
                 name={name}
                 onClick={() => history.push(`/domain_manager/${name}`)}
               />
             );
-          })}
+          }) :
+          <TableRow className="table__empty-row">
+            {this.context.t('domainManagerEmpty')}
+          </TableRow>}
         </Table>
       </div>
     );
@@ -319,8 +348,8 @@ class DomainManager extends Component {
     );
   }
 
-  renderBody() {
-    const {namesList, isFetching} = this.props;
+  renderBody(namesList) {
+    const {isFetching} = this.props;
     const { t } = this.context;
 
     if (isFetching) {
@@ -333,11 +362,7 @@ class DomainManager extends Component {
       );
     }
 
-    if (namesList.length) {
-      return this.renderList();
-    }
-
-    return this.renderEmpty();
+    return this.renderList(namesList);
   }
 
   renderConfirmFinalizeModal() {
@@ -352,10 +377,12 @@ class DomainManager extends Component {
   }
 
   render() {
+    const namesList = this.getNamesList();
+
     return (
       <>
-        {this.renderBody()}
-        {this.renderControls()}
+        {this.renderBody(namesList)}
+        {this.renderControls(namesList)}
         {this.renderConfirmFinalizeModal()}
         {this.state.isShowingBulkTransfer && (
           <BulkTransfer

diff --git a/locales/en.json b/locales/en.json
@@ -98,8 +98,9 @@
   "disable": "Disable",
   "domain": "Domain",
   "domainDetails": "Domain Details",
-  "domainManagerEmpty": "You do not own any domains.",
+  "domainManagerEmpty": "No domains found",
   "domains": "domain(s)",
+  "domainSearchPlaceholder": "Search your domains",
   "domainsPlural": "domains",
   "done": "Done",
   "download": "Download",