From b97703dc3c12c61c9a4916860474723caa18439f Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Tue, 2 May 2017 12:25:31 +0700
Subject: [PATCH] Refactor UriIndicator

---
 ui/js/component/channel-indicator.js    | 43 ------------------------
 ui/js/component/fileCardStream/view.jsx |  5 ++-
 ui/js/component/fileTileStream/view.jsx |  4 ++-
 ui/js/component/uriIndicator/index.js   | 20 +++++++++++
 ui/js/component/uriIndicator/view.jsx   | 44 +++++++++++++++++++++++++
 ui/js/page/showPage/view.jsx            |  7 ++--
 6 files changed, 72 insertions(+), 51 deletions(-)
 delete mode 100644 ui/js/component/channel-indicator.js
 create mode 100644 ui/js/component/uriIndicator/index.js
 create mode 100644 ui/js/component/uriIndicator/view.jsx

diff --git a/ui/js/component/channel-indicator.js b/ui/js/component/channel-indicator.js
deleted file mode 100644
index e19850c28..000000000
--- a/ui/js/component/channel-indicator.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import lbry from '../lbry.js';
-import lbryuri from '../lbryuri.js';
-import {Icon} from './common.js';
-
-const UriIndicator = React.createClass({
-  propTypes: {
-    uri: React.PropTypes.string.isRequired,
-    hasSignature: React.PropTypes.bool.isRequired,
-    signatureIsValid: React.PropTypes.bool,
-  },
-  render: function() {
-
-    const uriObj = lbryuri.parse(this.props.uri);
-
-    if (!this.props.hasSignature || !uriObj.isChannel) {
-      return <span className="empty">Anonymous</span>;
-    }
-
-    const channelUriObj = Object.assign({}, uriObj);
-    delete channelUriObj.path;
-    delete channelUriObj.contentName;
-    const channelUri = lbryuri.build(channelUriObj, false);
-
-    let icon, modifier;
-    if (this.props.signatureIsValid) {
-      modifier = 'valid';
-    } else {
-      icon = 'icon-times-circle';
-      modifier = 'invalid';
-    }
-    return (
-      <span>
-        {channelUri} {' '}
-        { !this.props.signatureIsValid ?
-          <Icon icon={icon} className={`channel-indicator__icon channel-indicator__icon--${modifier}`} /> :
-          '' }
-      </span>
-    );
-  }
-});
-
-export default UriIndicator;
\ No newline at end of file
diff --git a/ui/js/component/fileCardStream/view.jsx b/ui/js/component/fileCardStream/view.jsx
index 61f580739..257c9268c 100644
--- a/ui/js/component/fileCardStream/view.jsx
+++ b/ui/js/component/fileCardStream/view.jsx
@@ -4,7 +4,7 @@ import lbryuri from 'lbryuri.js';
 import Link from 'component/link';
 import {Thumbnail, TruncatedText,} from 'component/common';
 import FilePrice from 'component/filePrice'
-import UriIndicator from 'component/channel-indicator';
+import UriIndicator from 'component/uriIndicator';
 
 class FileCardStream extends React.Component {
   constructor(props) {
@@ -86,8 +86,7 @@ class FileCardStream extends React.Component {
               <h5 title={title}><TruncatedText lines={1}>{title}</TruncatedText></h5>
               <div className="card__subtitle">
                 { !hidePrice ? <span style={{float: "right"}}><FilePrice uri={uri} /></span>  : null}
-                <UriIndicator uri={uri} metadata={metadata} contentType={this.props.contentType}
-                              hasSignature={this.props.hasSignature} signatureIsValid={this.props.signatureIsValid} />
+                <UriIndicator uri={uri} />
               </div>
             </div>
             {metadata &&
diff --git a/ui/js/component/fileTileStream/view.jsx b/ui/js/component/fileTileStream/view.jsx
index 2130df284..7d2b0b360 100644
--- a/ui/js/component/fileTileStream/view.jsx
+++ b/ui/js/component/fileTileStream/view.jsx
@@ -5,7 +5,7 @@ import Link from 'component/link';
 import FileActions from 'component/fileActions';
 import {Thumbnail, TruncatedText,} from 'component/common.js';
 import FilePrice from 'component/filePrice'
-import UriIndicator from 'component/channel-indicator.js';
+import UriIndicator from 'component/uriIndicator';
 
 /*should be merged into FileTile once FileTile is refactored to take a single id*/
 class FileTileStream extends React.Component {
@@ -71,6 +71,8 @@ class FileTileStream extends React.Component {
     const title = isConfirmed ? metadata.title : uri;
     const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
 
+    console.debug(this.props)
+
     return (
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
         <div className={"row-fluid card__inner file-tile__row"}>
diff --git a/ui/js/component/uriIndicator/index.js b/ui/js/component/uriIndicator/index.js
new file mode 100644
index 000000000..6cadf91b3
--- /dev/null
+++ b/ui/js/component/uriIndicator/index.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import {
+  connect,
+} from 'react-redux'
+import {
+  makeSelectClaimForUri,
+} from 'selectors/claims'
+import UriIndicator from './view'
+
+const makeSelect = () => {
+  const selectClaimForUri = makeSelectClaimForUri()
+
+  const select = (state, props) => ({
+    claim: selectClaimForUri(state, props),
+  })
+
+  return select
+}
+
+export default connect(makeSelect, null)(UriIndicator)
diff --git a/ui/js/component/uriIndicator/view.jsx b/ui/js/component/uriIndicator/view.jsx
new file mode 100644
index 000000000..cc3d4f0eb
--- /dev/null
+++ b/ui/js/component/uriIndicator/view.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import lbry from 'lbry';
+import lbryuri from 'lbryuri';
+import {Icon} from 'component/common';
+
+const UriIndicator = (props) => {
+  const {
+    uri,
+    claim: {
+      has_signature: hasSignature,
+      signature_is_valid: signatureIsValid,
+    } = {},
+  } = props
+
+  const uriObj = lbryuri.parse(uri);
+
+  if (!hasSignature || !uriObj.isChannel) {
+    return <span className="empty">Anonymous</span>;
+  }
+
+  const channelUriObj = Object.assign({}, uriObj);
+  delete channelUriObj.path;
+  delete channelUriObj.contentName;
+  const channelUri = lbryuri.build(channelUriObj, false);
+
+  let icon, modifier;
+  if (signatureIsValid) {
+    modifier = 'valid';
+  } else {
+    icon = 'icon-times-circle';
+    modifier = 'invalid';
+  }
+
+  return (
+    <span>
+      {channelUri} {' '}
+      { !signatureIsValid ?
+        <Icon icon={icon} className={`channel-indicator__icon channel-indicator__icon--${modifier}`} /> :
+        '' }
+    </span>
+  )
+}
+
+export default UriIndicator;
\ No newline at end of file
diff --git a/ui/js/page/showPage/view.jsx b/ui/js/page/showPage/view.jsx
index 2a3498bf9..8e46b619c 100644
--- a/ui/js/page/showPage/view.jsx
+++ b/ui/js/page/showPage/view.jsx
@@ -11,7 +11,7 @@ import {
 import FilePrice from 'component/filePrice'
 import FileActions from 'component/fileActions';
 import Link from 'component/link';
-import UriIndicator from 'component/channel-indicator.js';
+import UriIndicator from 'component/uriIndicator';
 
 const FormatItem = (props) => {
   const {
@@ -133,7 +133,7 @@ let FilePage = React.createClass({
         <section className="card">
           <div className="card__inner">
             <div className="card__title-identity">
-              {this.state.isDownloaded === false
+              {isDownloaded === false
                 ? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(uri)} metadata={metadata} /></span>
                 : null}
               <h1>{title}</h1>
@@ -143,8 +143,7 @@ let FilePage = React.createClass({
                   uriIndicator}
              </div>
               <div className="card__actions">
-                <FileActions uri={this.props.uri} outpoint={this.props.outpoint} metadata={metadata} contentType={this.props.contentType} />
-              </div>
+                <FileActions uri={uri} outpoint={outpoint} metadata={metadata} contentType={contentType} /></div>
             </div>
             <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
               {metadata.description}