diff --git a/embark-ui/src/components/Accounts.js b/embark-ui/src/components/Accounts.js index 3db8925a9..35472d41b 100644 --- a/embark-ui/src/components/Accounts.js +++ b/embark-ui/src/components/Accounts.js @@ -10,7 +10,7 @@ const Accounts = ({accounts}) => (

Accounts

{accounts.map(account => ( - + Account {account.address} diff --git a/embark-ui/src/components/ExplorerLayout.js b/embark-ui/src/components/ExplorerLayout.js index 60528abb8..d322b3fa0 100644 --- a/embark-ui/src/components/ExplorerLayout.js +++ b/embark-ui/src/components/ExplorerLayout.js @@ -1,10 +1,5 @@ -import PropTypes from "prop-types"; import React from 'react'; -import {connect} from 'react-redux'; -import {Route, Switch, withRouter} from 'react-router-dom'; -import {explorerSearch} from "../actions"; -import {searchResult} from "../reducers/selectors"; -import {Alert} from 'reactstrap'; +import {Route, Switch} from 'react-router-dom'; import AccountsContainer from '../containers/AccountsContainer'; import AccountContainer from '../containers/AccountContainer'; @@ -12,53 +7,11 @@ import BlocksContainer from '../containers/BlocksContainer'; import BlockContainer from '../containers/BlockContainer'; import TransactionsContainer from '../containers/TransactionsContainer'; import TransactionContainer from '../containers/TransactionContainer'; -import SearchBar from '../components/SearchBar'; class ExplorerLayout extends React.Component { - constructor(props) { - super(props); - - this.state = {loading: false}; - } - - shouldComponentUpdate(nextProps) { - if (nextProps.searchResult && Object.keys(nextProps.searchResult).length && - nextProps.searchResult !== this.props.searchResult) { - this.setState({loading: false}); - - if (nextProps.searchResult.error) { - return true; - } - - if (nextProps.searchResult.address) { - this.props.history.push(`/embark/explorer/accounts/${nextProps.searchResult.address}`); - return false; - } - if (nextProps.searchResult.hasOwnProperty('transactionIndex')) { - this.props.history.push(`/embark/explorer/transactions/${nextProps.searchResult.hash}`); - return false; - } - if (nextProps.searchResult.hasOwnProperty('number')) { - this.props.history.push(`/embark/explorer/blocks/${nextProps.searchResult.number}`); - return false; - } - // Returned something we didn't know existed - } - return true; - } - - searchTheExplorer(value) { - this.props.explorerSearch(value); - this.setState({loading: true}); - } - render() { - const {searchResult} = this.props; return ( - this.searchTheExplorer(searchValue)}/> - {this.state.loading &&

Searching...

} - {searchResult.error && {searchResult.error}} @@ -72,19 +25,4 @@ class ExplorerLayout extends React.Component { } } -ExplorerLayout.propTypes = { - explorerSearch: PropTypes.func, - searchResult: PropTypes.object, - history: PropTypes.object -}; - -function mapStateToProps(state) { - return {searchResult: searchResult(state)}; -} - -export default withRouter(connect( - mapStateToProps, - { - explorerSearch: explorerSearch.request - }, -)(ExplorerLayout)); +export default ExplorerLayout; diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js index d5fb8ffad..773270390 100644 --- a/embark-ui/src/components/Layout.js +++ b/embark-ui/src/components/Layout.js @@ -2,6 +2,10 @@ import React from 'react'; import {Link} from 'react-router-dom'; import PropTypes from 'prop-types'; import {DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container} from 'reactstrap'; +import {connect} from 'react-redux'; +import {withRouter} from "react-router-dom"; +import {DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container, Alert} from 'reactstrap'; +import {explorerSearch} from "../actions"; import {LIGHT_THEME, DARK_THEME} from '../constants'; import FontAwesome from 'react-fontawesome'; @@ -18,6 +22,7 @@ import { AppNavbarBrand, AppHeaderDropdown } from '@coreui/react'; +import {searchResult} from "../reducers/selectors"; import SearchBar from './SearchBar'; @@ -58,36 +63,76 @@ const getSidebar = (location) => { return currentItem && SIDEBAR_NAV_ITEMS[currentItem]; } -function searchTheExplorer(value) { +function searchTheExplorer(_value) { // TODO: search } -const Layout = ({children, logout, location, toggleTheme, currentTheme}) => { - const sidebar = getSidebar(location); - if (!sidebar) { - removeCssClasses(); +class Layout extends React.Component { + constructor(props) { + super(props); + + this.state = {loading: false}; } - return ( -
+ + shouldComponentUpdate(nextProps) { + if (nextProps.searchResult && Object.keys(nextProps.searchResult).length && + nextProps.searchResult !== this.props.searchResult) { + this.setState({loading: false}); + + if (nextProps.searchResult.error) { + return true; + } + + if (nextProps.searchResult.address) { + this.props.history.push(`/embark/explorer/accounts/${nextProps.searchResult.address}`); + return false; + } + if (nextProps.searchResult.hasOwnProperty('transactionIndex')) { + this.props.history.push(`/embark/explorer/transactions/${nextProps.searchResult.hash}`); + return false; + } + if (nextProps.searchResult.hasOwnProperty('number')) { + this.props.history.push(`/embark/explorer/blocks/${nextProps.searchResult.number}`); + return false; + } + // Returned something we didn't know existed + } + return true; + } + + searchTheExplorer(value) { + this.props.explorerSearch(value); + this.setState({loading: true}); + } + + render() { + const {children, logout, location, toggleTheme, currentTheme, searchResult} = this.props; + + return (
- + +
); + } } Layout.propTypes = { @@ -138,7 +183,20 @@ Layout.propTypes = { location: PropTypes.object, logout: PropTypes.func, toggleTheme: PropTypes.func, - currentTheme: PropTypes.string + currentTheme: PropTypes.string, + explorerSearch: PropTypes.func, + searchResult: PropTypes.object, + history: PropTypes.object }; -export default Layout; + +function mapStateToProps(state) { + return {searchResult: searchResult(state)}; +} + +export default withRouter(connect( + mapStateToProps, + { + explorerSearch: explorerSearch.request + }, +)(Layout));