change page on search result

embark-ui/src/components/ExplorerLayout.js

@@ -1,8 +1,9 @@
 import PropTypes from "prop-types";
 import React from 'react';
 import connect from "react-redux/es/connect/connect";
-import {Route, Switch} from 'react-router-dom';
+import {Route, Switch, withRouter} from 'react-router-dom';
 import {explorerSearch} from "../actions";
+import {searchResult} from "../reducers/selectors";
 
 import AccountsContainer from '../containers/AccountsContainer';
 import AccountContainer from '../containers/AccountContainer';
@@ -12,31 +13,59 @@ import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
 import SearchBar from '../components/SearchBar';
 
-const ExplorerLayout = ({explorerSearch}) => (
-  <React.Fragment>
-    <SearchBar searchSubmit={searchValue => explorerSearch(searchValue)}/>
-    <Switch>
-      <Route exact path="/embark/explorer/accounts" component={AccountsContainer}/>
-      <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer}/>
-      <Route exact path="/embark/explorer/blocks" component={BlocksContainer}/>
-      <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer}/>
-      <Route exact path="/embark/explorer/transactions" component={TransactionsContainer}/>
-      <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer}/>
-    </Switch>
-  </React.Fragment>
-);
+class ExplorerLayout extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.searchResult && nextProps.searchResult !== this.props.searchResult) {
+      console.log('New result', nextProps.searchResult);
+      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;
+  }
+
+  render() {
+    const {explorerSearch} = this.props;
+    return (
+      <React.Fragment>
+        <SearchBar searchSubmit={searchValue => explorerSearch(searchValue)}/>
+        {searchResult && <span>{JSON.stringify(searchResult)}</span>}
+        <Switch>
+          <Route exact path="/embark/explorer/accounts" component={AccountsContainer}/>
+          <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer}/>
+          <Route exact path="/embark/explorer/blocks" component={BlocksContainer}/>
+          <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer}/>
+          <Route exact path="/embark/explorer/transactions" component={TransactionsContainer}/>
+          <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer}/>
+        </Switch>
+      </React.Fragment>
+    );
+  }
+}
 
 ExplorerLayout.propTypes = {
-  explorerSearch: PropTypes.func
+  explorerSearch: PropTypes.func,
+  searchResult: PropTypes.object,
+  history: PropTypes.object
 };
 
-// function mapStateToProps(state) {
-//   return {accounts: getAccounts(state), error: state.errorMessage, loading: state.loading};
-// }
+function mapStateToProps(state) {
+  return {searchResult: searchResult(state)};
+}
 
-export default connect(
-  null,
+export default withRouter(connect(
+  mapStateToProps,
   {
     explorerSearch: explorerSearch.request
   },
-)(ExplorerLayout);
+)(ExplorerLayout));

embark-ui/src/reducers/index.js

@@ -231,7 +231,7 @@ function theme(state=DARK_THEME, action) {
   return state;
 }
 
-function searchResult(state = '', action) {
+function searchResult(state = {}, action) {
   if (action.type === EXPLORER_SEARCH[SUCCESS]) {
     return action.searchResult;
   }

embark-ui/src/reducers/selectors.js

@@ -172,3 +172,7 @@ export function getCurrentFile(state) {
 export function getBaseEther(state) {
   return state.baseEther;
 }
+
+export function searchResult(state) {
+  return state.searchResult;
+}

embark-ui/src/sagas/index.js

@@ -32,8 +32,9 @@ function *searchExplorer(entity, payload) {
   // Blocks
   yield fetchBlocks({limit: 100});
   const blocks = yield select(getBlocks);
+  const intSearchValue = parseInt(payload.searchValue, 10);
   result = blocks.find(block => {
-    return block.hash === payload.searchValue;
+    return block.hash === payload.searchValue || block.number === intSearchValue;
   });
 
   if (result) {