diff --git a/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js b/src/v2/components/Dashboard/NetworkOverview/StatCards/styles.js index 7498a0fc..67b3dc16 100644 --- 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 index 7b4365a3..edd545f8 100644 --- a/src/v2/components/Search/index.jsx +++ b/src/v2/components/Search/index.jsx @@ -1,10 +1,11 @@ // @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'; @@ -12,7 +13,7 @@ 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) => { - 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} /> diff --git a/src/v2/components/Search/result.jsx b/src/v2/components/Search/result.jsx index ca2149bb..fc84ee1f 100644 --- 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}) => (
  • @@ -22,7 +27,7 @@ const SearchResult = ({isDirty, isFocus, items, onClear}: SearchResultProps) =>
  • ); - 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 index 3ccd03be..a4173de8 100644 --- 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 index 70bf6a51..c4edf3d8 100644 --- 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 ? ( - {identity.website} + + {identity.website} + ) : ( '' ); @@ -116,7 +118,11 @@ const ValidatorsDetail = ({match}: {match: Match}) => { hint: '', value() { return identity.keybaseUsername ? ( - + {identity.keybaseUsername} ) : ( @@ -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 diff --git a/src/v2/components/Validators/Detail/styles.js b/src/v2/components/Validators/Detail/styles.js index dfc4c9b1..5bece86e 100644 --- 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 new file mode 100644 index 00000000..e3d8f4f0 --- /dev/null +++ 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 index a06ee3ac..89b85a7a 100644 --- 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,