conflict in layout

This commit is contained in:
Jonathan Rainville 2018-10-19 09:43:41 -04:00 committed by Pascal Precht
parent e683887ea4
commit 203c4253d7
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
3 changed files with 86 additions and 90 deletions

View File

@ -10,7 +10,7 @@ const Accounts = ({accounts}) => (
<Col>
<h1>Accounts</h1>
{accounts.map(account => (
<Card>
<Card key={account.address}>
<CardHeader>
<Link to={`/embark/explorer/accounts/${account.address}`}>
<CardTitleIdenticon id={account.address}>Account {account.address}</CardTitleIdenticon>

View File

@ -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 (
<React.Fragment>
<SearchBar searchSubmit={searchValue => this.searchTheExplorer(searchValue)}/>
{this.state.loading && <p>Searching...</p>}
{searchResult.error && <Alert color="danger">{searchResult.error}</Alert>}
<Switch>
<Route exact path="/embark/explorer/accounts" component={AccountsContainer}/>
<Route exact path="/embark/explorer/accounts/:address" component={AccountContainer}/>
@ -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;

View File

@ -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 (
<div className="app animated fadeIn">
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 (<div className="app animated fadeIn">
<AppHeader fixed>
<AppNavbarBrand className="mx-3"
<AppSidebarToggler className="d-lg-none" display="md" mobile />
<AppNavbarBrand
full={{ src: logo, width: 50, height: 50, alt: 'Embark Logo' }}
minimized={{ src: logo, width: 30, height: 30, alt: 'Embark Logo' }}
/>
<AppSidebarToggler className="d-md-down-none" display="lg" />
<Nav className="d-md-down-none" navbar>
{HEADER_NAV_ITEMS.map((item) => {
{sidebarNavItems.items.map((item) => {
return (
<NavItem className="px-3" key={item.to}>
<NavLink exact tag={Link} to={item.to}>
<FontAwesome className="mr-2" name={item.icon} />
<NavItem className="px-3" key={item.url}>
<NavLink href={item.url}>
<i className={item.icon}>&nbsp;</i>
{item.name}
</NavLink>
</NavItem>
)
);
})}
</Nav>
<Nav className="ml-auto" navbar>
<SearchBar searchSubmit={searchValue => searchTheExplorer(searchValue)}/>
<SearchBar searchSubmit={searchValue => this.searchTheExplorer(searchValue)}/>
{this.state.loading && <p>Searching...</p>}
{searchResult.error && <Alert color="danger">{searchResult.error}</Alert>}
<AppHeaderDropdown direction="down">
<DropdownToggle nav>
<i className="icon-settings" />
@ -107,7 +152,7 @@ const Layout = ({children, logout, location, toggleTheme, currentTheme}) => {
<AppSidebar fixed display="lg">
<AppSidebarHeader />
<AppSidebarForm />
<AppSidebarNav navConfig={sidebar} location={location} />
<AppSidebarNav navConfig={sidebarNavItems} location={location} />
<AppSidebarFooter />
<AppSidebarMinimizer />
</AppSidebar>
@ -128,8 +173,8 @@ const Layout = ({children, logout, location, toggleTheme, currentTheme}) => {
<a href="https://github.com/embark-framework" title="Github" rel="noopener noreferrer" target="_blank">Github</a>
</span>
</AppFooter>
</div>
);
</div>);
}
}
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));