Fixes #3200 Claim previews right-clickable - original author (michaeltintiuc)

CHANGELOG.md

@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Prevent spacebar from toggling fullscreen on Firefox ([#3546](https://github.com/lbryio/lbry-desktop/pull/3546))
 - Context menu not working properly in some cases ([#3604](https://github.com/lbryio/lbry-desktop/pull/3604))
 - Don't autoplay paid content or content from blocked channels ([#3570](https://github.com/lbryio/lbry-desktop/pull/3570))
+- Make claim previews right clickable ([#3627](https://github.com/lbryio/lbry-desktop/pull/3627))
 
 ## [0.39.1] - [2019-1-24]
 

ui/component/claimPreview/view.jsx

@@ -1,9 +1,9 @@
 // @flow
 import type { Node } from 'react';
 import React, { useEffect, forwardRef } from 'react';
+import { NavLink, withRouter } from 'react-router-dom';
 import classnames from 'classnames';
 import { parseURI, convertToShareLink } from 'lbry-redux';
-import { withRouter } from 'react-router-dom';
 import { openCopyLinkMenu } from 'util/context-menu';
 import { formatLbryUrlForWeb } from 'util/url';
 import { isEmpty } from 'util/object';
@@ -102,6 +102,12 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
 
   const isChannel = isValid ? parseURI(uri).isChannel : false;
   const signingChannel = claim && claim.signing_channel;
+  const canonicalUrl = claim && claim.canonical_url;
+  const navigateUrl = canonicalUrl ? formatLbryUrlForWeb(canonicalUrl) : undefined;
+  const navLinkProps = {
+    to: navigateUrl || '/', // Pass in a dummy url while it's resolving, it won't be clickable
+    onClick: e => e.stopPropagation(),
+  };
 
   // do not block abandoned and nsfw claims if showUserBlocked is passed
   let shouldHide =
@@ -162,7 +168,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     }
 
     if (claim && !pending) {
-      history.push(formatLbryUrlForWeb(claim.canonical_url ? claim.canonical_url : uri));
+      history.push(navigateUrl || uri);
     }
   }
 
@@ -230,13 +236,17 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
             <ChannelThumbnail uri={uri} obscure={channelIsBlocked} />
           </UriIndicator>
         ) : (
-          <FileThumbnail thumbnail={thumbnailUrl} />
+          <NavLink {...navLinkProps}>
+            <FileThumbnail thumbnail={thumbnailUrl} />
+          </NavLink>
         )}
 
         <div className="claim-preview__text">
           <div className="claim-preview-metadata">
             <div className="claim-preview-info">
-              <ClaimPreviewTitle uri={uri} />
+              <NavLink {...navLinkProps}>
+                <ClaimPreviewTitle uri={uri} />
+              </NavLink>
               {!isChannel && <FileProperties uri={uri} />}
             </div>
 

ui/component/claimPreviewTile/view.jsx

@@ -62,7 +62,7 @@ function ClaimPreviewTile(props: Props) {
   const navigateUrl = canonicalUrl ? formatLbryUrlForWeb(canonicalUrl) : undefined;
 
   const navLinkProps = {
-    to: navigateUrl,
+    to: navigateUrl || '/', // Pass in a dummy url while it's resolving, it won't be clickable
     onClick: e => e.stopPropagation(),
   };
 

ui/scss/component/_claim-list.scss

@@ -187,6 +187,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
+  color: var(--color-text);
 }
 
 .claim-preview-metadata {