Skip to content

Decouple the swap modal from the swap list #494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sindresorhus merged 1 commit into from
Aug 31, 2018
Merged

Decouple the swap modal from the swap list #494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 26 additions & 15 deletions app/renderer/components/SwapDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import {remote, clipboard} from 'electron';
import title from 'title';
import React from 'react';
import {Subscribe} from 'unstated';
import PropTypes from 'prop-types';
import formatDate from 'date-fns/format';
import exchangeContainer from 'containers/Exchange';
import Modal from 'components/Modal';
import Progress from 'components/Progress';
import CurrencyIcon from 'components/CurrencyIcon';
Expand Down Expand Up @@ -43,11 +45,12 @@ const getOverview = swap => {

class SwapDetails extends React.Component {
static propTypes = {
swap: PropTypes.object,
swapId: PropTypes.string,
open: PropTypes.bool,
Copy link
Copy Markdown
Contributor

@kevva kevva Aug 31, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick, but I think boolean props should be prefixed with is or has for clarity.

Copy link
Copy Markdown
Contributor Author

@sindresorhus sindresorhus Aug 31, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, but it's coming from

hyperdex/app/renderer/components/Modal.js

Line 21 in 29ca860

open: PropTypes.bool,
So the change should be done separately and for all uses.

didClose: PropTypes.func,
}

state = {
isOpen: false,
showAdvanced: config.get('swapModalShowAdvanced'),
};

Expand All @@ -56,16 +59,19 @@ class SwapDetails extends React.Component {
config.set('swapModalShowAdvanced', showAdvanced);
};

open = () => {
this.setState({isOpen: true});
};

close = () => {
this.setState({isOpen: false});
};

render() {
const {swap} = this.props;
const {
exchangeContainer,
swapId,
open,
didClose,
} = this.props;

if (!swapId) {
return null;
}

const swap = exchangeContainer.state.swapHistory.find(swap => swap.uuid === swapId);
const {baseCurrency, quoteCurrency} = swap;

const transactions = swap.transactions.map(tx => (
Expand Down Expand Up @@ -132,8 +138,8 @@ class SwapDetails extends React.Component {
className="SwapDetails"
title={titleComponent}
icon="/assets/swap-icon.svg"
open={this.state.isOpen}
onClose={this.close}
open={open}
didClose={didClose}
width="660px"
>
<>
Expand Down Expand Up @@ -225,10 +231,15 @@ class SwapDetails extends React.Component {
)}
</>
</Modal>
<button type="button" className="view__button" onClick={this.open}>{t('details.view')}</button>
</div>
);
}
}

export default SwapDetails;
export default props => (
<Subscribe to={[exchangeContainer]}>
{container => (
<SwapDetails {...props} exchangeContainer={container}/>
)}
</Subscribe>
);
41 changes: 36 additions & 5 deletions app/renderer/components/SwapList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const SwapHeader = props => (
</div>
);

const SwapItem = ({style, swap, showCancel}) => (
const SwapItem = ({style, swap, showCancel, openSwap}) => (
<div className={`row ${swap.orderType}`} style={style}>
<div className="timestamp">{formatDate(swap.timeStarted, 'HH:mm DD/MM/YY')}</div>
<div className="pairs">{swap.baseCurrency}/{swap.quoteCurrency}</div>
Expand All @@ -99,7 +99,7 @@ const SwapItem = ({style, swap, showCancel}) => (
</div>
)}
<div className="view">
<SwapDetails swap={swap}/>
<button type="button" className="view__button" onClick={openSwap}>{t('details.view')}</button>
</div>
</div>
</div>
Expand All @@ -109,6 +109,15 @@ class SwapList extends React.Component {
state = {
sortBy: this.props.sortBy,
sortDirection: this.props.sortDirection,
openedSwapId: null,
};

openSwap = swapId => {
this.setState({openedSwapId: swapId});
};

closeSwap = () => {
this.setState({openedSwapId: null});
};

cache = new CellMeasurerCache({
Expand Down Expand Up @@ -146,20 +155,35 @@ class SwapList extends React.Component {
renderRow = swaps => ({index, key, parent, style}) => {
const {showCancel} = this.props;
const swap = swaps[index];
const openSwap = () => this.openSwap(swap.uuid);

return (
<CellMeasurer key={key} cache={this.cache} parent={parent} rowIndex={index}>
<SwapItem showCancel={showCancel} style={style} swap={swap}/>
<SwapItem showCancel={showCancel} style={style} swap={swap} openSwap={openSwap}/>
</CellMeasurer>
);
};

Details = () => (
<SwapDetails
swapId={this.state.openedSwapId}
open={Boolean(this.state.openedSwapId)}
didClose={this.closeSwap}
/>
);

render() {
const {Details} = this;
let {showHeader, swaps, limit} = this.props;
const {sortBy, sortDirection} = this.state;

if (swaps.length === 0) {
return <Empty show text={t('list.empty')}/>;
return (
<>
<Details/>
<Empty show text={t('list.empty')}/>
</>
);
}

const shouldLimit = limit && limit < swaps.length;
Expand All @@ -177,7 +201,14 @@ class SwapList extends React.Component {

return (
<div className="SwapList">
{showHeader && <SwapHeader onClick={this.handleSort} sortBy={sortBy} sortDirection={sortDirection}/>}
<Details/>
{showHeader && (
<SwapHeader
onClick={this.handleSort}
sortBy={sortBy}
sortDirection={sortDirection}
/>
)}
<div className="container">
<AutoSizer onResize={this.handleResize}>
{({width, height}) => (
Expand Down