From 3d5e1db5e3b9fe921acb90e39d84f9cd3fd82b7f Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Fri, 7 Apr 2017 12:15:22 +0700
Subject: [PATCH] Redux proof of concept

---
 package.json                    |   3 +-
 ui/js/app.js                    |   1 +
 ui/js/component/file-actions.js |   6 +-
 ui/js/component/header.js       |   2 +-
 ui/js/component/link.js         | 133 --------------------------------
 ui/js/component/splash.js       |   1 -
 ui/js/page/help/view.jsx        | 105 +++++++++++--------------
 ui/js/page/show.js              |   2 +-
 8 files changed, 54 insertions(+), 199 deletions(-)
 delete mode 100644 ui/js/component/link.js

diff --git a/package.json b/package.json
index b5a3c3678..b1fed994b 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,5 @@
     "electron": "^1.4.15",
     "electron-builder": "^11.7.0",
     "electron-debug": "^1.1.0"
-  },
-  "dependencies": {}
+  }
 }
diff --git a/ui/js/app.js b/ui/js/app.js
index 834af6521..a7c7dd188 100644
--- a/ui/js/app.js
+++ b/ui/js/app.js
@@ -15,6 +15,7 @@ const app = {
 }
 global.app = app;
 module.exports = app;
+
 //
 // import React from 'react';
 // import {Line} from 'rc-progress';
diff --git a/ui/js/component/file-actions.js b/ui/js/component/file-actions.js
index aef2f5380..2829615cc 100644
--- a/ui/js/component/file-actions.js
+++ b/ui/js/component/file-actions.js
@@ -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';
 
diff --git a/ui/js/component/header.js b/ui/js/component/header.js
index 4ab99c061..f0d66caee 100644
--- a/ui/js/component/header.js
+++ b/ui/js/component/header.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,
diff --git a/ui/js/component/link.js b/ui/js/component/link.js
deleted file mode 100644
index d46fcda25..000000000
--- a/ui/js/component/link.js
+++ /dev/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>
-    );
-  }
-});
\ No newline at end of file
diff --git a/ui/js/component/splash.js b/ui/js/component/splash.js
index a156718b4..b0831b6a2 100644
--- a/ui/js/component/splash.js
+++ b/ui/js/component/splash.js
@@ -29,7 +29,6 @@ var SplashScreen = React.createClass({
       });
 
       lbry.resolve({uri: 'lbry://one'}).then(() => {
-        window.sessionStorage.setItem('loaded', 'y')
         this.props.onLoadDone();
       });
       return;
diff --git a/ui/js/page/help/view.jsx b/ui/js/page/help/view.jsx
index 5db7f6472..eba7a6273 100644
--- a/ui/js/page/help/view.jsx
+++ b/ui/js/page/help/view.jsx
@@ -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>
diff --git a/ui/js/page/show.js b/ui/js/page/show.js
index e9013716b..f37994b7a 100644
--- a/ui/js/page/show.js
+++ b/ui/js/page/show.js
@@ -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: {