diff options
author | Florian Dold <florian.dold@gmail.com> | 2016-11-13 10:17:39 +0100 |
---|---|---|
committer | Florian Dold <florian.dold@gmail.com> | 2016-11-13 10:17:39 +0100 |
commit | eb84d5747aac0de781d64fb9cdbf2da13006d85e (patch) | |
tree | 387d7711e177d151a185e2a9a870c39cc03926ce /pages | |
parent | b2128609ac8159a14224deba399144b3400c8c20 (diff) | |
download | wallet-core-eb84d5747aac0de781d64fb9cdbf2da13006d85e.tar.xz |
fix small react issues
Diffstat (limited to 'pages')
-rw-r--r-- | pages/confirm-contract.tsx | 62 | ||||
-rw-r--r-- | pages/tree.html | 3 | ||||
-rw-r--r-- | pages/tree.tsx | 13 |
3 files changed, 54 insertions, 24 deletions
diff --git a/pages/confirm-contract.tsx b/pages/confirm-contract.tsx index a356b25a5..b5ada6045 100644 --- a/pages/confirm-contract.tsx +++ b/pages/confirm-contract.tsx @@ -24,6 +24,7 @@ import {substituteFulfillmentUrl} from "../lib/wallet/helpers"; import {Contract, AmountJson, IExchangeInfo} from "../lib/wallet/types"; +import {Offer} from "../lib/wallet/wallet"; import {renderContract, prettyAmount} from "../lib/wallet/renderHtml"; "use strict"; import {getExchanges} from "../lib/wallet/wxApi"; @@ -43,20 +44,17 @@ interface DetailProps { class Details extends React.Component<DetailProps, DetailState> { constructor(props: DetailProps) { super(props); - this.setState({ + console.log("new Details component created"); + this.state = { collapsed: props.collapsed, exchanges: null - }); + }; console.log("initial state:", this.state); this.update(); } - componentWillReceiveProps(props: DetailProps) { - this.setState({collapsed: props.collapsed} as any); - } - async update() { let exchanges = await getExchanges(); this.setState({exchanges} as any); @@ -100,10 +98,11 @@ class Details extends React.Component<DetailProps, DetailState> { } interface ContractPromptProps { - offer: any; + offerId: number; } interface ContractPromptState { + offer: any; error: string|null; payDisabled: boolean; } @@ -112,12 +111,14 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt constructor() { super(); this.state = { + offer: undefined, error: null, payDisabled: true, } } componentWillMount() { + this.update(); this.checkPayment(); } @@ -125,11 +126,31 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt // FIXME: abort running ops } + async update() { + let offer = await this.getOffer(); + this.setState({offer} as any); + this.checkPayment(); + } + + getOffer(): Promise<Offer> { + return new Promise((resolve, reject) => { + let msg = { + type: 'get-offer', + detail: { + offerId: this.props.offerId + } + }; + chrome.runtime.sendMessage(msg, (resp) => { + resolve(resp); + }); + }) + } + checkPayment() { let msg = { type: 'check-pay', detail: { - offer: this.props.offer + offer: this.state.offer } }; chrome.runtime.sendMessage(msg, (resp) => { @@ -149,12 +170,12 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt this.state.error = null; } this.setState({} as any); - window.setTimeout(() => this.checkPayment(), 300); + window.setTimeout(() => this.checkPayment(), 500); }); } doPayment() { - let d = {offer: this.props.offer}; + let d = {offer: this.state.offer}; chrome.runtime.sendMessage({type: 'confirm-pay', detail: d}, (resp) => { if (resp.error) { console.log("confirm-pay error", JSON.stringify(resp)); @@ -173,22 +194,29 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt let c = d.offer.contract; console.log("contract", c); document.location.href = substituteFulfillmentUrl(c.fulfillment_url, - this.props.offer); + this.state.offer); }); } render() { - let c = this.props.offer.contract; + if (!this.state.offer) { + return <span>...</span>; + } + let c = this.state.offer.contract; return ( <div> - {renderContract(c)} + <div> + {renderContract(c)} + </div> <button onClick={() => this.doPayment()} disabled={this.state.payDisabled} className="accept"> Confirm payment </button> - {(this.state.error ? <p className="errorbox">{this.state.error}</p> : <p />)} + <div> + {(this.state.error ? <p className="errorbox">{this.state.error}</p> : <p />)} + </div> <Details contract={c} collapsed={!this.state.error}/> </div> ); @@ -199,10 +227,8 @@ class ContractPrompt extends React.Component<ContractPromptProps, ContractPrompt export function main() { let url = URI(document.location.href); let query: any = URI.parseQuery(url.query()); - let offer = JSON.parse(query.offer); - console.dir(offer); - let contract = offer.contract; + let offerId = JSON.parse(query.offerId); - ReactDOM.render(<ContractPrompt offer={offer}/>, document.getElementById( + ReactDOM.render(<ContractPrompt offerId={offerId}/>, document.getElementById( "contract")!); } diff --git a/pages/tree.html b/pages/tree.html index 1075655f6..05022e158 100644 --- a/pages/tree.html +++ b/pages/tree.html @@ -30,4 +30,7 @@ } </style> + <body> + <div id="container"></div> + </body> </html> diff --git a/pages/tree.tsx b/pages/tree.tsx index c8a67dac2..6ff15600f 100644 --- a/pages/tree.tsx +++ b/pages/tree.tsx @@ -358,7 +358,7 @@ class ExchangeView extends React.Component<ExchangeProps, void> { } interface ExchangesListState { - exchanges: IExchangeInfo[]; + exchanges?: IExchangeInfo[]; } class ExchangesList extends React.Component<any, ExchangesListState> { @@ -371,8 +371,8 @@ class ExchangesList extends React.Component<any, ExchangesListState> { this.update(); } }); - this.update(); + this.state = {} as any; } async update() { @@ -382,18 +382,19 @@ class ExchangesList extends React.Component<any, ExchangesListState> { } render(): JSX.Element { - if (!this.state.exchanges) { + let exchanges = this.state.exchanges; + if (!exchanges) { return <span>...</span>; } return ( <div className="tree-item"> - Exchanges ({this.state.exchanges.length.toString()}): - {this.state.exchanges.map(e => <ExchangeView exchange={e} />)} + Exchanges ({exchanges.length.toString()}): + {exchanges.map(e => <ExchangeView exchange={e} />)} </div> ); } } export function main() { - ReactDOM.render(<ExchangesList />, document.body); + ReactDOM.render(<ExchangesList />, document.getElementById("container")!); } |