More progress on Rewards

* Add wrapper for lbry.io API
 * View and basic logic for GitHub reward (not working yet)

ui/js/lbryio.js

@@ -0,0 +1,91 @@
+const querystring = require('querystring');
+
+const lbryio = {};
+
+const CONNECTION_STRING = 'https://api.lbry.io/';
+
+const mocks = {
+  'reward_type.get': (name) => {
+    return {
+      name: 'link_github',
+      title: 'Link your GitHub account',
+      description: 'Link LBRY to your GitHub account',
+      value: 50,
+      claimed: false,
+    };
+  },
+  'reward_type.list': () => {
+    return [
+      {
+        name: 'link_github',
+        title: 'Link your GitHub account',
+        description: 'Link LBRY to your GitHub account',
+        value: 50,
+        claimed: false,
+      },
+    ];
+  }
+};
+
+lbryio.call = function(resource, action, params, method='get') {
+  console.log('top of lbryio.call')
+  return new Promise((resolve, reject) => {
+    console.log('top of promise handler')
+    /* temp code for mocks */
+    if (`${resource}.${action}` in mocks) {
+      console.log(`found ${resource}.${action} in mocks`)
+      resolve(mocks[`${resource}.${action}`](params));
+      console.log('...resolved.');
+      return;
+    } else {
+      console.log(`did not find ${resource}.${action} in mocks`);
+    }
+    /* end temp */
+
+    console.log('about to create xhr object');
+    const xhr = new XMLHttpRequest;
+    xhr.addEventListener('error', function (error) {
+      console.log('received XHR error:', error);
+      reject(error);
+    });
+
+
+    console.log('about to add timeout listener');
+    xhr.addEventListener('timeout', function() {
+      console.log('XHR timed out');
+
+      reject(new Error('XMLHttpRequest connection timed out'));
+    });
+
+    console.log('about to create load listener');
+    xhr.addEventListener('load', function() {
+      console.log('loaded');
+      const response = JSON.parse(xhr.responseText);
+
+      if (response.error) {
+        if (reject) {
+          reject(new Error(response.error));
+        } else {
+          document.dispatchEvent(new CustomEvent('unhandledError', {
+            detail: {
+              connectionString: connectionString,
+              method: method,
+              params: params,
+              code: response.error.code,
+              message: response.error.message,
+              data: response.error.data,
+            }
+          }));
+        }
+      } else {
+        resolve(response.result);
+      }
+    });
+
+    console.log('about to call xhr.open');
+    xhr.open(method, CONNECTION_STRING + resource + '/' + action, true);
+    xhr.send(querystring.stringify(params));
+  });
+};
+
+export default lbryio;

ui/js/page/reward.js

@@ -1,19 +1,80 @@
 import React from 'react';
+import lbryio from '../lbryio.js';
+import {Link} from '../component/link.js';
+import {CreditAmount} from '../component/common.js';
 
-// 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 {shell} = require('electron');
+const querystring = require('querystring');
+
+const GITHUB_CLIENT_ID = '6baf581d32bad60519';
+
+const LinkGithubReward = React.createClass({
+  propTypes: {
+    onClaimed: React.PropTypes.func,
+  },
+  _launchLinkPage: function() {
+    const githubAuthParams = {
+      client_id: GITHUB_CLIENT_ID,
+      redirect_uri: 'https://lbry.io/',
+      scope: 'user:email,public_repo',
+      allow_signup: false,
     }
+    shell.openExternal('https://github.com/login/oauth/authorize?' + querystring.stringify(githubAuthParams));
+  },
+  handleConfirmClicked: function() {
+    this.setState({
+      confirming: true,
+    });
+
+    lbryio.call('reward', 'new', {
+      reward_type: 'new_developer',
+      access_token: 'token will go here',
+    }, 'post').then((response) => {
+      console.log('response:', response);
+
+      this.props.onClaimed(); // This will trigger another API call to show that we succeeded
+
+      this.setState({
+        confirming: false,
+      });
+    }, (error) => {
+      console.log('failed with error:', error);
+      this.setState({
+        confirming: false,
+      });
+    });
+  },
+  getInitialState: function() {
+    return {
+      confirming: false,
+    };
+  },
+  render: function() {
+    return (
+      <section>
+        <section className="reward-page__details">
+          <p><Link button="alt" label="Link with GitHub" onClick={this._launchLinkPage} /></p>
+          <p>This will open browser window where you can authorize GitHub to link your account to LBRY. This will record your email (no spam) and star the LBRY repo.</p>
+          <p>Once you're finished, you may confirm you've linked the account to receive your reward.</p>
+        </section>
+
+        <Link button="primary" label={this.state.confirming ? 'Confirming...' : 'Confirm'}
+              onClick={this.handleConfirmClicked} />
+      </section>
+    );
+  }
+});
 
 const RewardPage = React.createClass({
   propTypes: {
-    name: React.PropTypes.string,
+    name: React.PropTypes.string.isRequired,
+  },
+  _getRewardType: function() {
+    lbryio.call('reward_type', 'get', this.props.name).then((rewardType) => {
+      this.setState({
+        rewardType: rewardType,
+      });
+    });
   },
   getInitialState: function() {
     return {
@@ -21,22 +82,28 @@ const RewardPage = React.createClass({
     };
   },
   componentWillMount: function() {
-    this.setState({
-      rewardType: apiRewardTypeGet(this.props.name),
-    });
+    this._getRewardType();
   },
   render: function() {
     if (!this.state.rewardType) {
       return null;
     }
 
-    let {title, description, value} = this.state.rewardType;
+    let Reward;
+    if (this.props.name == 'link_github') {
+      Reward = LinkGithubReward;
+    }
+
+    const {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) */}
+          <CreditAmount amount={value} />
+          <p>{this.state.rewardType.claimed
+            ? <span class="empty">This reward has been claimed.</span>
+            : description}</p>
+          <Reward onClaimed={this._getRewardType} />
         </section>
       </main>
     );

ui/js/page/rewards.js

@@ -1,31 +1,24 @@
 import React from 'react';
 import lbry from '../lbry.js';
+import {CreditAmount} from '../component/common.js';
 import Modal from '../component/modal.js';
 import {Link} from '../component/link.js';
+import lbryio from '../lbryio.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({
+const RewardTile = React.createClass({
   propTypes: {
-    name: React.PropTypes.string,
-    title: React.PropTypes.string,
+    name: React.PropTypes.string.isRequired,
+    title: React.PropTypes.string.isRequired,
+    description: React.PropTypes.string.isRequired,
+    claimed: React.PropTypes.bool.isRequired,
+    value: React.PropTypes.number.isRequired,
   },
   render: function() {
     return (
       <section className="card">
         <div className={"row-fluid card-content"}>
           <h3><Link label={this.props.title} href={'?reward=' + this.props.name} /></h3>
+          <CreditAmount amount={this.props.value} />
           <section>{this.props.description}</section>
           {this.props.claimed
               ? <span className="empty">This reward has been claimed.</span>
@@ -38,8 +31,10 @@ var RewardTile = React.createClass({
 
 var RewardsPage = React.createClass({
   componentWillMount: function() {
+    lbryio.call('reward_type', 'list', {}).then((rewardTypes) => {
       this.setState({
-      rewardTypes: apiRewardTypeList(),
+        rewardTypes: rewardTypes,
+      });
     });
   },
   getInitialState: function() {
@@ -56,7 +51,7 @@ var RewardsPage = React.createClass({
             {!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} />;
+                return <RewardTile key={name} name={name} title={title} description={description} claimed={claimed} value={value} />;
               })}
           </div>
         </form>

ui/scss/all.scss

@@ -13,3 +13,4 @@
 @import "component/_channel-indicator.scss";
 @import "page/_developer.scss";
 @import "page/_watch.scss";
+@import "page/_reward.scss";

ui/scss/page/_reward.scss

@@ -0,0 +1,3 @@
+.reward-page__details {
+  background-color: rgba(0, 0, 0, 0.01);
+}