Basic views for reward and reward list pages

ui/js/app.js

@@ -9,6 +9,8 @@ import ReportPage from './page/report.js';
 import StartPage from './page/start.js';
 import ClaimCodePage from './page/claim_code.js';
 import ReferralPage from './page/referral.js';
+import RewardsPage from './page/rewards.js';
+import RewardPage from './page/reward.js';
 import WalletPage from './page/wallet.js';
 import ShowPage from './page/show.js';
 import PublishPage from './page/publish.js';
@@ -233,12 +235,14 @@ var App = React.createClass({
       case 'receive':
       case 'claim':
       case 'referral':
+      case 'rewards':
         return {
-          '?wallet' : 'Overview',
+          '?wallet': 'Overview',
-          '?send' : 'Send',
+          '?send': 'Send',
-          '?receive' : 'Receive',
+          '?receive': 'Receive',
-          '?claim' : 'Claim Beta Code',
+          '?claim': 'Claim Beta Code',
-          '?referral' : 'Check Referral Credit',
+          '?referral': 'Check Referral Credit',
+          '?rewards': 'Rewards',
         };
       case 'downloaded':
       case 'published':
@@ -272,6 +276,10 @@ var App = React.createClass({
         return <ClaimCodePage />;
       case 'referral':
         return <ReferralPage />;
+      case 'rewards':
+        return <RewardsPage />;
+      case 'reward':
+        return <RewardPage name={this.state.pageArgs} />;
       case 'wallet':
       case 'send':
       case 'receive':

ui/js/page/reward.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+// Placeholder for something like api.lbry.io/reward_type/get/[name] */
+function apiRewardTypeGet(name) {
+  return {
+    name: 'reward1',
+    title: 'Reward 1',
+    description: 'Reward 1 description',
+    value: 50,
+    claimed: true,
+  };
+}
+
+const RewardPage = React.createClass({
+  propTypes: {
+    name: React.PropTypes.string,
+  },
+  getInitialState: function() {
+    return {
+      rewardType: null,
+    };
+  },
+  componentWillMount: function() {
+    this.setState({
+      rewardType: apiRewardTypeGet(this.props.name),
+    });
+  },
+  render: function() {
+    if (!this.state.rewardType) {
+      return null;
+    }
+
+    let {title, description, value} = this.state.rewardType;
+    return (
+      <main>
+        <section className="card">
+          <h2>{title}</h2>
+          <p>{description}</p>
+          {/* Most likely have a component included here for each reward (e.g. WatchVideoReward) */}
+        </section>
+      </main>
+    );
+  }
+});
+
+export default RewardPage;

ui/js/page/rewards.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import lbry from '../lbry.js';
+import Modal from '../component/modal.js';
+import {Link} from '../component/link.js';
+
+// Placeholder for something like api.lbry.io/reward_type/list */
+function apiRewardTypeList() {
+  return [
+    {
+      name: 'link_github',
+      title: 'Link your GitHub account',
+      description: 'Link LBRY to your GitHub account',
+      value: 50,
+      claimed: false,
+    },
+  ];
+}
+
+var RewardTile = React.createClass({
+  propTypes: {
+    name: React.PropTypes.string,
+    title: React.PropTypes.string,
+  },
+  render: function() {
+    return (
+      <section className="card">
+        <div className={"row-fluid card-content"}>
+          <h3><Link label={this.props.title} href={'?reward=' + this.props.name} /></h3>
+          <section>{this.props.description}</section>
+          {this.props.claimed
+              ? <span className="empty">This reward has been claimed.</span>
+              : <Link button="primary" label="Start reward" href={'?reward=' + this.props.name} />}
+        </div>
+      </section>
+    );
+  }
+});
+
+var RewardsPage = React.createClass({
+  componentWillMount: function() {
+    this.setState({
+      rewardTypes: apiRewardTypeList(),
+    });
+  },
+  getInitialState: function() {
+    return {
+      rewardTypes: null,
+    };
+  },
+  render: function() {
+    return (
+      <main>
+        <form onSubmit={this.handleSubmit}>
+          <div className="card">
+            <h2>Rewards</h2>
+            {!this.state.rewardTypes
+              ? null
+              : this.state.rewardTypes.map(({name, title, description, claimed, value}) => {
+                return <RewardTile name={name} title={title} description={description} claimed={claimed} value={value} />;
+              })}
+          </div>
+        </form>
+      </main>
+    );
+  }
+});
+
+export default RewardsPage;