Redux proof of concept

This commit is contained in:
6ea86b96 2017-04-07 12:15:22 +07:00 committed by Jeremy Kauffman
parent 0d3647c709
commit 3d5e1db5e3
8 changed files with 54 additions and 199 deletions

View file

@ -43,6 +43,5 @@
"electron": "^1.4.15",
"electron-builder": "^11.7.0",
"electron-debug": "^1.1.0"
},
"dependencies": {}
}
}

View file

@ -15,6 +15,7 @@ const app = {
}
global.app = app;
module.exports = app;
//
// import React from 'react';
// import {Line} from 'rc-progress';

View file

@ -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';

View file

@ -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,

View file

@ -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>
);
}
});

View file

@ -29,7 +29,6 @@ var SplashScreen = React.createClass({
});
lbry.resolve({uri: 'lbry://one'}).then(() => {
window.sessionStorage.setItem('loaded', 'y')
this.props.onLoadDone();
});
return;

View file

@ -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>

View file

@ -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: {