From 0edd30be4bc8aca88b1fd28f357faa8526d80e86 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 10 Jan 2020 11:18:35 +0100
Subject: [PATCH] Lowercase filter (#2103)

* Lowercase filter

* Keep AccountId/AccountIndex mixed-case check

* Remove (unused) translation
---
 .../react-components/src/AddressToggle.tsx    | 91 ++++++++++---------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/packages/react-components/src/AddressToggle.tsx b/packages/react-components/src/AddressToggle.tsx
index 02ffb61aff..f8c7de072e 100644
--- a/packages/react-components/src/AddressToggle.tsx
+++ b/packages/react-components/src/AddressToggle.tsx
@@ -3,18 +3,16 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveAccountInfo } from '@polkadot/api-derive/types';
-import { I18nProps } from './types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 import { getAddressName } from './util';
-import translate from './translate';
 import AddressMini from './AddressMini';
 import Toggle from './Toggle';
 
-interface Props extends I18nProps {
+interface Props {
   address: string;
   className?: string;
   filter?: string;
@@ -28,17 +26,22 @@ function AddressToggle ({ address, className, filter, onChange, value }: Props):
   const [isFiltered, setIsFiltered] = useState(false);
 
   useEffect((): void => {
-    const [,, extracted] = getAddressName(address);
     let isFiltered = true;
 
-    if (!filter || address.includes(filter) || extracted.toLowerCase().includes(filter)) {
+    if (!filter || address.includes(filter)) {
       isFiltered = false;
     } else if (info) {
-      const { accountId, accountIndex, identity, nickname } = info;
+      const [,, extracted] = getAddressName(address);
       const filterLower = filter.toLowerCase();
 
-      if (identity.display?.toLowerCase().includes(filterLower) || accountId?.toString().includes(filter) || accountIndex?.toString().includes(filter) || nickname?.toLowerCase().includes(filterLower)) {
+      if (extracted.toLowerCase().includes(filterLower)) {
         isFiltered = false;
+      } else if (info) {
+        const { accountId, accountIndex, identity, nickname } = info;
+
+        if (identity.display?.toLowerCase().includes(filterLower) || accountId?.toString().includes(filter) || accountIndex?.toString().includes(filter) || nickname?.toLowerCase().includes(filterLower)) {
+          isFiltered = false;
+        }
       }
     }
 
@@ -71,46 +74,44 @@ function AddressToggle ({ address, className, filter, onChange, value }: Props):
   );
 }
 
-export default translate(
-  styled(AddressToggle)`
-    align-items: flex-start;
-    border: 1px solid transparent; /* #eee */
-    border-radius: 0.25rem;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    margin: 0.125rem;
-    padding: 0.125rem 0.25rem;
-    text-align: left;
-    vertical-align: middle;
-    white-space: nowrap;
+export default styled(AddressToggle)`
+  align-items: flex-start;
+  border: 1px solid transparent; /* #eee */
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.125rem;
+  padding: 0.125rem 0.25rem;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
 
+  .ui--AddressToggle-address {
+    filter: grayscale(100%);
+    opacity: 0.5;
+  }
+
+  &:hover {
+    border-color: #ccc;
+  }
+
+  &.isAye {
     .ui--AddressToggle-address {
-      filter: grayscale(100%);
-      opacity: 0.5;
+      filter: none;
+      opacity: 1;
     }
+    /* border-color: #ccc; */
+  }
 
-    &:hover {
-      border-color: #ccc;
-    }
+  .ui--AddressToggle-address,
+  .ui--AddressToggle-toggle {
+    flex: 1;
+    padding: 0;
+  }
 
-    &.isAye {
-      .ui--AddressToggle-address {
-        filter: none;
-        opacity: 1;
-      }
-      /* border-color: #ccc; */
-    }
-
-    .ui--AddressToggle-address,
-    .ui--AddressToggle-toggle {
-      flex: 1;
-      padding: 0;
-    }
-
-    .ui--AddressToggle-toggle {
-      margin-top: 0.1rem;
-      text-align: right;
-    }
-  `
-);
+  .ui--AddressToggle-toggle {
+    margin-top: 0.1rem;
+    text-align: right;
+  }
+`;