uriType as prop, allowing explicit casting, fixes #681 and #731

src/js/components/Button.js

@@ -24,6 +24,7 @@ const Button = ({
   onClick: onClickProp,
   to,
   uri,
+  uriType,
   ...rest
 }) => {
   const classNames = [];
@@ -46,7 +47,7 @@ const Button = ({
 
   let Element = 'button';
   if (to) Element = Link;
-  if (uri) Element = URILink; // MISSING URI TYPE
+  if (uri) Element = URILink;
   if (href) Element = 'a';
 
   const onClick = (e) => {
@@ -63,7 +64,7 @@ const Button = ({
 
   return (
     <Element
-      type={submit ? 'submit' : 'button'}
+      type={uri ? uriType : (submit ? 'submit' : 'button')}
       className={`button ${className} ${classNames.map((s) => ` button--${s}`).join(' ')}`}
       disabled={disabled}
       to={to}

src/js/components/SearchResults.js

@@ -56,7 +56,7 @@ const SearchResults = ({
       <h4>
         {!all && (
           <span>
-            <URILink uri={`iris:search:all:${encodedTerm}`} type="search">
+            <URILink uri={`iris:search:all:${encodedTerm}`} uriType="search" unencoded>
               <I18n path="search.title" />
             </URILink>
             {' '}
@@ -66,7 +66,7 @@ const SearchResults = ({
           </span>
         )}
         {all && (
-          <URILink uri={`iris:search:${type}:${encodedTerm}`} type="search">
+          <URILink uri={`iris:search:${type}:${encodedTerm}`} uriType="search" unencoded>
             <I18n path={`search.${type}.title`} />
           </URILink>
         )}
@@ -79,7 +79,7 @@ const SearchResults = ({
         {/* <LazyLoadListener enabled={this.props.artists_more && spotify_search_enabled} loadMore={loadMore} /> */}
 
         {resultsCount > results.length && (
-          <Button uri={`iris:search:${type}:${encodedTerm}`} debug>
+          <Button uri={`iris:search:${type}:${encodedTerm}`} uriType="search" unencoded>
             <I18n path={`search.${type}.more`} count={resultsCount} />
           </Button>
         )}
@@ -89,7 +89,12 @@ const SearchResults = ({
 };
 
 const mapStateToProps = (state, ownProps) => {
-  const { query: { term }, type } = ownProps;
+  const {
+    query: {
+      term,
+    },
+    type,
+  } = ownProps;
   const {
     ui: {
       uri_schemes_priority = [],

src/js/components/URILink.js

@@ -3,13 +3,17 @@ import Link from './Link';
 import { uriType as uriTypeHelper } from '../util/helpers';
 import { encodeUri } from '../util/format';
 
-export default memo((props) => {
+export default memo(({
+  type,
+  uri: rawUri,
+  className,
+  handleContextMenu,
+  children,
+  unencoded,
+}) => {
   let to = null;
-  let { uri, type } = props;
-  const uriType = type || uriTypeHelper(uri);
-  if (!props.unencoded) {
-    uri = encodeUri(uri);
-  }
+  const uriType = type || uriTypeHelper(rawUri);
+  const uri = (!unencoded) ? encodeUri(rawUri) : rawUri;
 
   switch (uriType) {
     case 'playlist':
@@ -41,7 +45,7 @@ export default memo((props) => {
       break;
 
     case 'search':
-      var exploded = uri.split('%3A');
+      var exploded = uri.split(':');
       to = `/search/${exploded[2]}/${exploded[3]}`;
       break;
 
@@ -52,17 +56,17 @@ export default memo((props) => {
   if (uri) {
     return (
       <Link
-        className={props.className ? props.className : null}
+        className={className}
         to={to}
-        onContextMenu={(e) => (props.handleContextMenu ? props.handleContextMenu(e) : null)}
+        onContextMenu={handleContextMenu}
       >
-        {props.children}
+        {children}
       </Link>
     );
   }
   return (
-    <span className={props.className ? props.className : null}>
-      {props.children}
+    <span className={className}>
+      {children}
     </span>
   );
 });