Refactor claimCollecitonAddButton

- claim makeSelect to select
- only interested in claim's stream_type
- Tooltip

ui/component/claimCollectionAddButton/index.js

@@ -1,19 +1,26 @@
 import { connect } from 'react-redux';
 import { doOpenModal } from 'redux/actions/app';
 import CollectionAddButton from './view';
-import { makeSelectClaimForUri } from 'redux/selectors/claims';
+import { selectClaimForUri } from 'redux/selectors/claims';
 import { makeSelectClaimUrlInCollection } from 'redux/selectors/collections';
 
 const select = (state, props) => {
-  const claim = makeSelectClaimForUri(props.uri)(state);
+  const { uri } = props;
-  const permanentUrl = claim && claim.permanent_url;
+
+  const claim = selectClaimForUri(state, uri);
+
+  // $FlowFixMe
+  const { permanent_url: permanentUrl, value } = claim || {};
+  const streamType = (value && value.stream_type) || '';
 
   return {
-    claim,
+    streamType,
-    isSaved: makeSelectClaimUrlInCollection(permanentUrl)(state),
+    isSaved: permanentUrl && makeSelectClaimUrlInCollection(permanentUrl)(state),
   };
 };
 
-export default connect(select, {
+const perform = {
   doOpenModal,
-})(CollectionAddButton);
+};
+
+export default connect(select, perform)(CollectionAddButton);

ui/component/claimCollectionAddButton/view.jsx

@@ -4,38 +4,38 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import Button from 'component/button';
 import classnames from 'classnames';
+import Tooltip from 'component/common/tooltip';
 
 type Props = {
   uri: string,
-  doOpenModal: (string, {}) => void,
   fileAction?: boolean,
   type?: boolean,
-  claim: Claim,
+  // redux
+  streamType: Claim,
   isSaved: boolean,
+  doOpenModal: (id: string, {}) => void,
 };
 
 export default function CollectionAddButton(props: Props) {
-  const { doOpenModal, uri, fileAction, type = 'playlist', claim, isSaved } = props;
+  const { uri, fileAction, type = 'playlist', isSaved, streamType, doOpenModal } = props;
 
-  // $FlowFixMe
-  const streamType = (claim && claim.value && claim.value.stream_type) || '';
   const isPlayable = streamType === 'video' || streamType === 'audio';
 
-  if (!isPlayable) return null;
+  return !isPlayable ? null : (
-  return (
+    <Tooltip title={__('Add this claim to a list')} arrow={false}>
-    <Button
+      <Button
-      button={fileAction ? undefined : 'alt'}
+        button={!fileAction && 'alt'}
-      className={classnames({ 'button--file-action': fileAction })}
+        className={classnames({ 'button--file-action': fileAction })}
-      icon={fileAction ? (!isSaved ? ICONS.ADD : ICONS.STACK) : ICONS.LIBRARY}
+        icon={fileAction ? (!isSaved ? ICONS.ADD : ICONS.STACK) : ICONS.LIBRARY}
-      iconSize={fileAction ? 22 : undefined}
+        iconSize={fileAction && 22}
-      label={uri ? (!isSaved ? __('Save') : __('Saved')) : __('New List')}
+        label={uri ? (!isSaved ? __('Save') : __('Saved')) : __('New List')}
-      requiresAuth={IS_WEB}
+        requiresAuth
-      title={__('Add this claim to a list')}
+        onClick={(e) => {
-      onClick={(e) => {
+          e.preventDefault();
-        e.preventDefault();
+          e.stopPropagation();
-        e.stopPropagation();
+          doOpenModal(MODALS.COLLECTION_ADD, { uri, type });
-        doOpenModal(MODALS.COLLECTION_ADD, { uri, type });
+        }}
-      }}
+      />
-    />
+    </Tooltip>
   );
 }