Redux proof of concept
This commit is contained in:
parent
0d3647c709
commit
3d5e1db5e3
8 changed files with 54 additions and 199 deletions
|
@ -43,6 +43,5 @@
|
|||
"electron": "^1.4.15",
|
||||
"electron-builder": "^11.7.0",
|
||||
"electron-debug": "^1.1.0"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -15,6 +15,7 @@ const app = {
|
|||
}
|
||||
global.app = app;
|
||||
module.exports = app;
|
||||
|
||||
//
|
||||
// import React from 'react';
|
||||
// import {Line} from 'rc-progress';
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import lbry from '../lbry.js';
|
||||
import lbryuri from '../lbryuri.js';
|
||||
import {Icon, FilePrice} from '../component/common.js';
|
||||
import {Modal} from './modal.js';
|
||||
import {FormField} from './form.js';
|
||||
import Link from 'component/link';
|
||||
import {Icon, FilePrice} from '../component/common.js';
|
||||
import Modal from './modal.js';
|
||||
import FormField from './form.js';
|
||||
import {ToolTip} from '../component/tooltip.js';
|
||||
import {DropDownMenu, DropDownMenuItem} from './menu.js';
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import lbryuri from '../lbryuri.js';
|
||||
import Link from 'component/link';
|
||||
import {Icon, CreditAmount} from './common.js';
|
||||
import Link from 'component/link';
|
||||
|
||||
var Header = React.createClass({
|
||||
_balanceSubscribeId: null,
|
||||
|
|
|
@ -1,133 +0,0 @@
|
|||
import React from 'react';
|
||||
import {Icon} from './common.js';
|
||||
import Modal from '../component/modal.js';
|
||||
import rewards from '../rewards.js';
|
||||
|
||||
export let Link = React.createClass({
|
||||
propTypes: {
|
||||
label: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
button: React.PropTypes.string,
|
||||
badge: React.PropTypes.string,
|
||||
hidden: React.PropTypes.bool,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
hidden: false,
|
||||
disabled: false,
|
||||
};
|
||||
},
|
||||
handleClick: function(e) {
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick(e);
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
if (this.props.hidden) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/* The way the class name is generated here is a mess -- refactor */
|
||||
|
||||
const className = (this.props.className || '') +
|
||||
(!this.props.className && !this.props.button ? 'button-text' : '') + // Non-button links get the same look as text buttons
|
||||
(this.props.button ? ' button-block button-' + this.props.button + ' button-set-item' : '') +
|
||||
(this.props.disabled ? ' disabled' : '');
|
||||
|
||||
let content;
|
||||
if (this.props.children) { // Custom content
|
||||
content = this.props.children;
|
||||
} else {
|
||||
content = (
|
||||
<span {... 'button' in this.props ? {className: 'button__content'} : {}}>
|
||||
{'icon' in this.props ? <Icon icon={this.props.icon} fixed={true} /> : null}
|
||||
{this.props.label ? <span className="link-label">{this.props.label}</span> : null}
|
||||
{'badge' in this.props ? <span className="badge">{this.props.badge}</span> : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a className={className} href={this.props.href || 'javascript:;'} title={this.props.title}
|
||||
onClick={this.handleClick} {... 'style' in this.props ? {style: this.props.style} : {}}>
|
||||
{content}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export let RewardLink = React.createClass({
|
||||
propTypes: {
|
||||
type: React.PropTypes.string.isRequired,
|
||||
claimed: React.PropTypes.bool,
|
||||
onRewardClaim: React.PropTypes.func,
|
||||
onRewardFailure: React.PropTypes.func
|
||||
},
|
||||
refreshClaimable: function() {
|
||||
switch(this.props.type) {
|
||||
case 'new_user':
|
||||
this.setState({ claimable: true });
|
||||
return;
|
||||
|
||||
case 'first_publish':
|
||||
lbry.claim_list_mine().then((list) => {
|
||||
this.setState({
|
||||
claimable: list.length > 0
|
||||
})
|
||||
});
|
||||
return;
|
||||
}
|
||||
},
|
||||
componentWillMount: function() {
|
||||
this.refreshClaimable();
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
claimable: true,
|
||||
pending: false,
|
||||
errorMessage: null
|
||||
}
|
||||
},
|
||||
claimReward: function() {
|
||||
this.setState({
|
||||
pending: true
|
||||
})
|
||||
rewards.claimReward(this.props.type).then((reward) => {
|
||||
this.setState({
|
||||
pending: false,
|
||||
errorMessage: null
|
||||
})
|
||||
if (this.props.onRewardClaim) {
|
||||
this.props.onRewardClaim(reward);
|
||||
}
|
||||
}).catch((error) => {
|
||||
this.setState({
|
||||
errorMessage: error.message,
|
||||
pending: false
|
||||
})
|
||||
})
|
||||
},
|
||||
clearError: function() {
|
||||
if (this.props.onRewardFailure) {
|
||||
this.props.onRewardFailure()
|
||||
}
|
||||
this.setState({
|
||||
errorMessage: null
|
||||
})
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div className="reward-link">
|
||||
{this.props.claimed
|
||||
? <span><Icon icon="icon-check" /> Reward claimed.</span>
|
||||
: <Link button={this.props.button ? this.props.button : 'alt'} disabled={this.state.pending || !this.state.claimable }
|
||||
label={ this.state.pending ? "Claiming..." : "Claim Reward"} onClick={this.claimReward} />}
|
||||
{this.state.errorMessage ?
|
||||
<Modal isOpen={true} contentLabel="Reward Claim Error" className="error-modal" onConfirmed={this.clearError}>
|
||||
{this.state.errorMessage}
|
||||
</Modal>
|
||||
: ''}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
|
@ -29,7 +29,6 @@ var SplashScreen = React.createClass({
|
|||
});
|
||||
|
||||
lbry.resolve({uri: 'lbry://one'}).then(() => {
|
||||
window.sessionStorage.setItem('loaded', 'y')
|
||||
this.props.onLoadDone();
|
||||
});
|
||||
return;
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
import React from 'react';
|
||||
import lbry from 'lbry.js';
|
||||
import Link from 'component/link';
|
||||
import {SettingsNav} from './settings.js';
|
||||
import {version as uiVersion} from 'json!../../../package.json';
|
||||
|
||||
var HelpPage = React.createClass({
|
||||
|
@ -24,6 +23,9 @@ var HelpPage = React.createClass({
|
|||
});
|
||||
});
|
||||
},
|
||||
componentDidMount: function() {
|
||||
document.title = "Help";
|
||||
},
|
||||
render: function() {
|
||||
let ver, osName, platform, newVerLink;
|
||||
if (this.state.versionInfo) {
|
||||
|
@ -46,71 +48,58 @@ var HelpPage = React.createClass({
|
|||
}
|
||||
|
||||
return (
|
||||
<main className="main--single-column">
|
||||
<SettingsNav viewingPage="help" />
|
||||
<main className="page">
|
||||
<section className="card">
|
||||
<div className="card__title-primary">
|
||||
<h3>Read the FAQ</h3>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<p>Our FAQ answers many common questions.</p>
|
||||
<p><Link href="https://lbry.io/faq" label="Read the FAQ" icon="icon-question" button="alt"/></p>
|
||||
</div>
|
||||
<h3>Read the FAQ</h3>
|
||||
<p>Our FAQ answers many common questions.</p>
|
||||
<p><Link href="https://lbry.io/faq" label="Read the FAQ" icon="icon-question" button="alt"/></p>
|
||||
</section>
|
||||
<section className="card">
|
||||
<div className="card__title-primary">
|
||||
<h3>Get Live Help</h3>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<p>
|
||||
Live help is available most hours in the <strong>#help</strong> channel of our Slack chat room.
|
||||
</p>
|
||||
<p>
|
||||
<Link button="alt" label="Join Our Slack" icon="icon-slack" href="https://slack.lbry.io" />
|
||||
</p>
|
||||
</div>
|
||||
<h3>Get Live Help</h3>
|
||||
<p>
|
||||
Live help is available most hours in the <strong>#help</strong> channel of our Slack chat room.
|
||||
</p>
|
||||
<p>
|
||||
<Link button="alt" label="Join Our Slack" icon="icon-slack" href="https://slack.lbry.io" />
|
||||
</p>
|
||||
</section>
|
||||
<section className="card">
|
||||
<div className="card__title-primary"><h3>Report a Bug</h3></div>
|
||||
<div className="card__content">
|
||||
<p>Did you find something wrong?</p>
|
||||
<p><Link href="?report" label="Submit a Bug Report" icon="icon-bug" button="alt" /></p>
|
||||
<div className="meta">Thanks! LBRY is made by its users.</div>
|
||||
</div>
|
||||
<h3>Report a Bug</h3>
|
||||
<p>Did you find something wrong?</p>
|
||||
<p><Link href="?report" label="Submit a Bug Report" icon="icon-bug" button="alt" /></p>
|
||||
<div className="meta">Thanks! LBRY is made by its users.</div>
|
||||
</section>
|
||||
{!ver ? null :
|
||||
<section className="card">
|
||||
<div className="card__title-primary"><h3>About</h3></div>
|
||||
<div className="card__content">
|
||||
{ver.lbrynet_update_available || ver.lbryum_update_available ?
|
||||
<p>A newer version of LBRY is available. <Link href={newVerLink} label={`Download LBRY ${ver.remote_lbrynet} now!`} /></p>
|
||||
: <p>Your copy of LBRY is up to date.</p>
|
||||
}
|
||||
<table className="table-standard">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>daemon (lbrynet)</th>
|
||||
<td>{ver.lbrynet_version}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>wallet (lbryum)</th>
|
||||
<td>{ver.lbryum_version}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>interface</th>
|
||||
<td>{uiVersion}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Platform</th>
|
||||
<td>{platform}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Installation ID</th>
|
||||
<td>{this.state.lbryId}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h3>About</h3>
|
||||
{ver.lbrynet_update_available || ver.lbryum_update_available ?
|
||||
<p>A newer version of LBRY is available. <Link href={newVerLink} label={`Download LBRY ${ver.remote_lbrynet} now!`} /></p>
|
||||
: <p>Your copy of LBRY is up to date.</p>
|
||||
}
|
||||
<table className="table-standard">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>daemon (lbrynet)</th>
|
||||
<td>{ver.lbrynet_version}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>wallet (lbryum)</th>
|
||||
<td>{ver.lbryum_version}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>interface</th>
|
||||
<td>{uiVersion}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Platform</th>
|
||||
<td>{platform}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Installation ID</th>
|
||||
<td>{this.state.lbryId}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
}
|
||||
</main>
|
||||
|
|
|
@ -5,8 +5,8 @@ import lbryuri from '../lbryuri.js';
|
|||
import {Video} from '../page/watch.js'
|
||||
import {TruncatedText, Thumbnail, FilePrice, BusyMessage} from '../component/common.js';
|
||||
import {FileActions} from '../component/file-actions.js';
|
||||
import Link from '../component/link';
|
||||
import UriIndicator from '../component/channel-indicator.js';
|
||||
import Link from 'component/link';
|
||||
|
||||
var FormatItem = React.createClass({
|
||||
propTypes: {
|
||||
|
|
Loading…
Reference in a new issue