fix: review comments and linter

solana-labs · Jul 26, 2019 · dcda50a · dcda50a
1 parent aab4795
commit dcda50a
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 27 deletions.
diff --git a/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js b/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js
@@ -23,7 +23,7 @@ export default makeStyles(theme => ({
       color: getColor('main')(theme),
       marginTop: 40,
       letterSpacing: 3.4,
-    }
+    },
   },
   changes: {
     fontSize: 18,

diff --git a/src/v2/components/Search/index.jsx b/src/v2/components/Search/index.jsx
@@ -1,18 +1,19 @@
 // @flow
 import React, {useState} from 'react';
 import {observer} from 'mobx-react-lite';
-import {compose, get, filter, lowerCase, contains} from 'lodash/fp';
+import {compose, get, filter, toLower, contains} from 'lodash/fp';
 import {InputBase, IconButton} from '@material-ui/core';
 import {Search as SearchIcon} from '@material-ui/icons';
 import NodesStore from 'v2/stores/nodes';
+import {MIN_TERM_LEN} from '../../constants';
 
 import SearchResult from './result';
 import useStyles from './styles';
 
 const Search = () => {
   const classes = useStyles();
   const {validators} = NodesStore;
-  const [value, setValue] = useState('');
+  const [query, setQuery] = useState('');
   const [isDirty, setDirty] = useState(false);
   const [isFocus, setFocus] = useState(false);
   const [searchResult, setSearchResult] = useState([]);
@@ -26,21 +27,35 @@ const Search = () => {
 
   const handleClear = () => {
     setDirty(false);
-    setValue('');
+    setQuery('');
     setSearchResult([]);
   };
 
   const handleSearch = ({currentTarget}: SyntheticEvent<HTMLInputElement>) => {
-    if (!currentTarget.value) {
+    const {value} = currentTarget;
+    if (!value) {
       handleClear();
       return;
     }
-    setValue(currentTarget.value);
+    setQuery(value);
+    if (value.length < MIN_TERM_LEN) {
+      setDirty(false);
+      setSearchResult([]);
+      return;
+    }
     const filteredValidators = filter(v => {
-      const lowerVal = lowerCase(value);
+      const lowerVal = toLower(value);
       return (
-        compose(contains(lowerVal), lowerCase, get('nodePubkey'))(v) ||
-        compose(contains(lowerVal), lowerCase, get('identity.keybaseUsername'))(v)
+        compose(
+          contains(lowerVal),
+          toLower,
+          get('nodePubkey'),
+        )(v) ||
+        compose(
+          contains(lowerVal),
+          toLower,
+          get('identity.keybaseUsername'),
+        )(v)
       );
     })(validators);
     setDirty(true);
@@ -59,7 +74,7 @@ const Search = () => {
             root: classes.inputRoot,
             input: classes.inputInput,
           }}
-          value={value}
+          value={query}
           onChange={handleSearch}
         />
         <IconButton size="small" className={classes.btn}>

diff --git a/src/v2/components/Search/result.jsx b/src/v2/components/Search/result.jsx
@@ -13,7 +13,12 @@ type SearchResultProps = {
   isFocus: boolean,
 };
 
-const SearchResult = ({isDirty, isFocus, items, onClear}: SearchResultProps) => {
+const SearchResult = ({
+  isDirty,
+  isFocus,
+  items,
+  onClear,
+}: SearchResultProps) => {
   const classes = useStyles();
   const renderItem = ({nodePubkey}: {nodePubkey: string}) => (
     <li className={classes.item} key={nodePubkey}>
@@ -22,7 +27,7 @@ const SearchResult = ({isDirty, isFocus, items, onClear}: SearchResultProps) =>
       </Link>
     </li>
   );
-  if ((!isDirty && !items.length ) || !isFocus) {
+  if ((!isDirty && !items.length) || !isFocus) {
     return null;
   }
 

diff --git a/src/v2/components/Search/styles.js b/src/v2/components/Search/styles.js
@@ -38,13 +38,13 @@ export default makeStyles(theme => {
           padding: '5px 0',
           display: 'block',
           '&:hover': {
-            color: getColor('dark')(theme)
-          }
-        }
+            color: getColor('dark')(theme),
+          },
+        },
       },
     },
     title: {
-      color: getColor('dark')(theme)
-    }
+      color: getColor('dark')(theme),
+    },
   };
 });
diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx
@@ -100,7 +100,9 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
       hint: '',
       value() {
         return identity.website ? (
-          <a href={identity.website}>{identity.website}</a>
+          <a target="_blank" rel="noopener noreferrer" href={identity.website}>
+            {identity.website}
+          </a>
         ) : (
           ''
         );
@@ -116,7 +118,11 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
       hint: '',
       value() {
         return identity.keybaseUsername ? (
-          <a href={`https://keybase.io/${identity.keybaseUsername}`}>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://keybase.io/${identity.keybaseUsername}`}
+          >
             {identity.keybaseUsername}
           </a>
         ) : (
@@ -182,6 +188,8 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
               fullWidth
               color="primary"
               href="https://github.com/solana-labs/tour-de-sol#validator-public-key-registration"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               Connect To Keybase
             </Button>

diff --git a/src/v2/components/Validators/Detail/styles.js b/src/v2/components/Validators/Detail/styles.js
@@ -91,13 +91,13 @@ export default makeStyles(theme => ({
       color: getColor('main')(theme),
       textDecoration: 'none',
       '&:hover': {
-        textDecoration: 'underline'
-      }
-    }
+        textDecoration: 'underline',
+      },
+    },
   },
   address: {
     display: 'flex',
     alignItem: 'center',
-    color: getColor('main')(theme)
-  }
+    color: getColor('main')(theme),
+  },
 }));
diff --git a/src/v2/constants.js b/src/v2/constants.js
@@ -0,0 +1 @@
+export const MIN_TERM_LEN = 3;
diff --git a/src/v2/stores/nodes.js b/src/v2/stores/nodes.js
@@ -58,9 +58,8 @@ class Store {
 
   get validators() {
     return map(vote => {
-      const cluster = find({pubkey: vote.nodePubkey})(
-        this.cluster.cluster,
-      ) || {};
+      const cluster =
+        find({pubkey: vote.nodePubkey})(this.cluster.cluster) || {};
       const {lng = 0, lat = 0, gossip} = cluster;
       return {
         ...vote,