Skip to content
This repository has been archived by the owner on Jul 1, 2022. It is now read-only.

Commit

Permalink
feat: use component version of renderIf
Browse files Browse the repository at this point in the history
  • Loading branch information
@epiqueras
epiqueras committed Feb 22, 2018
1 parent 455e3c9 commit 3681f27
Show file tree
Hide file tree
Showing 7 changed files with 293 additions and 230 deletions.
22 changes: 10 additions & 12 deletions src/bootstrap/initializer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { connect } from 'react-redux'

import * as walletSelectors from '../reducers/wallet'
import * as walletActions from '../actions/wallet'
import { renderIf } from '../utils/redux'
import { RenderIf } from '../utils/redux'
import RequiresMetaMask from '../components/requires-meta-mask'
import Icosahedron from '../components/icosahedron'

Expand Down Expand Up @@ -36,17 +36,15 @@ class Initializer extends PureComponent {
const { isWeb3Loaded } = this.state
const { accounts, children } = this.props

return renderIf(
accounts,
{
loading: <Icosahedron />,
done: children,
failedLoading: <RequiresMetaMask needsUnlock={isWeb3Loaded} />
},
{
extraValues: [accounts.data && accounts.data[0]],
extraFailedValues: [!isWeb3Loaded]
}
return (
<RenderIf
resource={accounts}
loading={<Icosahedron />}
done={children}
failedLoading={<RequiresMetaMask needsUnlock={isWeb3Loaded} />}
extraValues={[accounts.data && accounts.data[0]]}
extraFailedValues={[!isWeb3Loaded]}
/>
)
}
}
Expand Down
13 changes: 7 additions & 6 deletions src/components/nav-bar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import { NavLink } from 'react-router-dom'

import * as walletSelectors from '../../reducers/wallet'
import { renderIf } from '../../utils/redux'
import { RenderIf } from '../../utils/redux'
import Identicon from '../../components/identicon'
import logo from '../../assets/images/logo.png'

Expand All @@ -29,11 +29,12 @@ const NavBar = ({ accounts, routes }) => (
</div>
<div className="NavBar-buttons">
<div className="NavBar-buttons-button">
{renderIf(accounts, {
loading: '...',
done: accounts.data && <Identicon seed={accounts.data[0]} size={9} />,
failedLoading: '...'
})}
<RenderIf
resource={accounts}
loading="..."
done={accounts.data && <Identicon seed={accounts.data[0]} size={9} />}
failedLoading="..."
/>
</div>
</div>
</div>
Expand Down
177 changes: 93 additions & 84 deletions src/containers/dispute/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { connect } from 'react-redux'

import * as disputeSelectors from '../../reducers/dispute'
import * as disputeActions from '../../actions/dispute'
import { renderIf } from '../../utils/redux'
import { RenderIf } from '../../utils/redux'
import { dateToString } from '../../utils/date'
import Icosahedron from '../../components/icosahedron'
import AnchoredList from '../../components/anchored-list'
Expand Down Expand Up @@ -52,90 +52,99 @@ class Dispute extends PureComponent {

return (
<div className="Dispute">
{renderIf(dispute, {
loading: <Icosahedron />,
done: dispute.data && (
<AnchoredList
items={[
{
element: (
<div key={0} className="Dispute-header">
<small>
{dateToString(new Date(), {
withTime: false
})}
</small>
<div className="Dispute-header-title">
<Identicon
seed={dispute.data.arbitrableContractAddress}
size={12}
className="Dispute-header-title-identicon"
/>
<h3>
Decision Summary for "{dispute.data.description}"
</h3>
<RenderIf
resource={dispute}
loading={<Icosahedron />}
done={
dispute.data && (
<AnchoredList
items={[
{
element: (
<div key={0} className="Dispute-header">
<small>
{dateToString(new Date(), {
withTime: false
})}
</small>
<div className="Dispute-header-title">
<Identicon
seed={dispute.data.arbitrableContractAddress}
size={12}
className="Dispute-header-title-identicon"
/>
<h3>
Decision Summary for "{dispute.data.description}"
</h3>
</div>
<hr />
</div>
<hr />
</div>
)
},
{
anchor: 'Details',
element: (
<Details
key={1}
date={new Date()}
partyAAddress={dispute.data.partyA}
partyBAddress={dispute.data.partyB}
arbitrationFee={dispute.data.fee}
/>
)
},
...dispute.data.evidence.map(e => ({
anchor: 'Evidence',
element: (
<Evidence
key={e.url}
date={new Date()}
partyAddress={e.submitter}
URI={e.url}
/>
)
})),
{
anchor: 'Ruling',
element: (
<Ruling
key={2}
date={new Date()}
votesForPartyA={dispute.data.ruling}
votesForPartyB={dispute.data.ruling}
netPNK={0}
/>
)
},
...(dispute.data.hasRuled
? []
: [
{
anchor: 'Vote',
element: (
<div key={3} className="Dispute-vote">
<Button id={0} onClick={this.handleVoteButtonClick}>
Vote for Party A
</Button>
<Button id={1} onClick={this.handleVoteButtonClick}>
Vote for Party B
</Button>
</div>
)
}
])
]}
/>
),
failed: 'Failed to fetch dispute.'
})}
)
},
{
anchor: 'Details',
element: (
<Details
key={1}
date={new Date()}
partyAAddress={dispute.data.partyA}
partyBAddress={dispute.data.partyB}
arbitrationFee={dispute.data.fee}
/>
)
},
...dispute.data.evidence.map(e => ({
anchor: 'Evidence',
element: (
<Evidence
key={e.url}
date={new Date()}
partyAddress={e.submitter}
URI={e.url}
/>
)
})),
{
anchor: 'Ruling',
element: (
<Ruling
key={2}
date={new Date()}
votesForPartyA={dispute.data.ruling}
votesForPartyB={dispute.data.ruling}
netPNK={0}
/>
)
},
...(dispute.data.hasRuled
? []
: [
{
anchor: 'Vote',
element: (
<div key={3} className="Dispute-vote">
<Button
id={0}
onClick={this.handleVoteButtonClick}
>
Vote for Party A
</Button>
<Button
id={1}
onClick={this.handleVoteButtonClick}
>
Vote for Party B
</Button>
</div>
)
}
])
]}
/>
)
}
failedLoading="Failed to fetch dispute."
/>
</div>
)
}
Expand Down
13 changes: 7 additions & 6 deletions src/containers/disputes/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { connect } from 'react-redux'

import * as disputeSelectors from '../../reducers/dispute'
import * as disputeActions from '../../actions/dispute'
import { renderIf } from '../../utils/redux'
import { RenderIf } from '../../utils/redux'

import DisputesTable from './components/disputes-table'

Expand All @@ -30,11 +30,12 @@ class Disputes extends PureComponent {
const table = <DisputesTable disputes={disputes} />
return (
<div className="Disputes">
{renderIf(disputes, {
loading: table,
done: table,
failedLoading: <span>There was an error fetching your disputes.</span>
})}
<RenderIf
resource={disputes}
loading={table}
done={table}
failedLoading="There was an error fetching your disputes."
/>
</div>
)
}
Expand Down
Loading

0 comments on commit 3681f27

Please sign in to comment.