Refactor fileReactions component

- makeSelectReactionsForUri and selectThemePath were not being used
- isLivestreamClaim from redux
- Reduce repetition, make single reaction component

ui/component/fileReactions/index.js

@@ -1,26 +1,37 @@
 import { connect } from 'react-redux';
 import {
-  makeSelectReactionsForUri,
   makeSelectMyReactionForUri,
   makeSelectLikeCountForUri,
   makeSelectDislikeCountForUri,
 } from 'redux/selectors/reactions';
 import { doFetchReactions, doReactionLike, doReactionDislike } from 'redux/actions/reactions';
-import { selectThemePath } from 'redux/selectors/settings';
 import FileViewCount from './view';
-import { makeSelectClaimForUri } from 'redux/selectors/claims';
+import { selectClaimForUri, selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
 
-const select = (state, props) => ({
+const select = (state, props) => {
-  claim: makeSelectClaimForUri(props.uri)(state),
+  const { uri } = props;
-  reactions: makeSelectReactionsForUri(props.uri)(state),
-  myReaction: makeSelectMyReactionForUri(props.uri)(state),
-  likeCount: makeSelectLikeCountForUri(props.uri)(state),
-  dislikeCount: makeSelectDislikeCountForUri(props.uri)(state),
-  theme: selectThemePath(state),
-});
 
-export default connect(select, {
+  const claim = selectClaimForUri(state, uri);
+  const { claim_id: claimId, signing_channel, value_type } = claim || {};
+
+  const channelName = signing_channel && signing_channel.name;
+  const isCollection = value_type && value_type === 'collection'; // hack because nudge gets cut off by card on cols.
+
+  return {
+    myReaction: makeSelectMyReactionForUri(uri)(state),
+    likeCount: makeSelectLikeCountForUri(uri)(state),
+    dislikeCount: makeSelectDislikeCountForUri(uri)(state),
+    isLivestreamClaim: selectIsStreamPlaceholderForUri(state, uri),
+    claimId,
+    channelName,
+    isCollection,
+  };
+};
+
+const perform = {
   doFetchReactions,
   doReactionLike,
   doReactionDislike,
-})(FileViewCount);
+};
+
+export default connect(select, perform)(FileViewCount);

ui/component/fileReactions/view.jsx

@@ -6,42 +6,73 @@ import classnames from 'classnames';
 import Button from 'component/button';
 import { formatNumberWithCommas } from 'util/number';
 import NudgeFloating from 'component/nudgeFloating';
-import { SIMPLE_SITE } from 'config';
+import Tooltip from 'component/common/tooltip';
+
+const LIVE_REACTION_FETCH_MS = 1000 * 45;
 
 type Props = {
-  claim: StreamClaim,
-  doFetchReactions: (string) => void,
-  doReactionLike: (string) => void,
-  doReactionDislike: (string) => void,
   uri: string,
+  // redux
+  claimId?: string,
+  channelName?: string,
+  isCollection?: boolean,
   likeCount: number,
   dislikeCount: number,
   myReaction: ?string,
-  livestream?: boolean,
+  isLivestreamClaim?: boolean,
+  doFetchReactions: (claimId: ?string) => void,
+  doReactionLike: (uri: string) => void,
+  doReactionDislike: (uri: string) => void,
 };
 
-function FileReactions(props: Props) {
+export default function FileReactions(props: Props) {
   const {
-    claim,
     uri,
-    doFetchReactions,
+    claimId,
-    doReactionLike,
+    channelName,
-    doReactionDislike,
+    isCollection,
     myReaction,
     likeCount,
     dislikeCount,
-    livestream,
+    isLivestreamClaim,
+    doFetchReactions,
+    doReactionLike,
+    doReactionDislike,
   } = props;
 
-  const claimId = claim && claim.claim_id;
+  const likeIcon = myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE;
-  const channel = claim && claim.signing_channel && claim.signing_channel.name;
+  const dislikeIcon = myReaction === REACTION_TYPES.DISLIKE ? ICONS.SLIME_ACTIVE : ICONS.SLIME;
-  const isCollection = claim && claim.value_type === 'collection'; // hack because nudge gets cut off by card on cols.
+
-  const likeIcon = SIMPLE_SITE ? (myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE) : ICONS.UPVOTE;
+  const likeLabel = (
-  const dislikeIcon = SIMPLE_SITE
+    <>
-    ? myReaction === REACTION_TYPES.DISLIKE
+      {myReaction === REACTION_TYPES.LIKE && (
-      ? ICONS.SLIME_ACTIVE
+        <>
-      : ICONS.SLIME
+          <div className="button__fire-glow" />
-    : ICONS.DOWNVOTE;
+          <div className="button__fire-particle1" />
+          <div className="button__fire-particle2" />
+          <div className="button__fire-particle3" />
+          <div className="button__fire-particle4" />
+          <div className="button__fire-particle5" />
+          <div className="button__fire-particle6" />
+        </>
+      )}
+      {formatNumberWithCommas(likeCount, 0)}
+    </>
+  );
+
+  const dislikeLabel = (
+    <>
+      {myReaction === REACTION_TYPES.DISLIKE && (
+        <>
+          <div className="button__slime-stain" />
+          <div className="button__slime-drop1" />
+          <div className="button__slime-drop2" />
+        </>
+      )}
+      {formatNumberWithCommas(dislikeCount, 0)}
+    </>
+  );
+
   React.useEffect(() => {
     function fetchReactions() {
       doFetchReactions(claimId);
@@ -51,8 +82,8 @@ function FileReactions(props: Props) {
     if (claimId) {
       fetchReactions();
 
-      if (livestream) {
+      if (isLivestreamClaim) {
-        fetchInterval = setInterval(fetchReactions, 45000);
+        fetchInterval = setInterval(fetchReactions, LIVE_REACTION_FETCH_MS);
       }
     }
 
@@ -61,65 +92,63 @@ function FileReactions(props: Props) {
         clearInterval(fetchInterval);
       }
     };
-  }, [claimId, doFetchReactions, livestream]);
+  }, [claimId, doFetchReactions, isLivestreamClaim]);
 
   return (
     <>
-      {channel && !isCollection && (
+      {channelName && !isCollection && (
         <NudgeFloating
           name="nudge:support-acknowledge"
-          text={__('Let %channel% know you enjoyed this!', { channel })}
+          text={__('Let %channel% know you enjoyed this!', { channel: channelName })}
         />
       )}
 
-      <Button
+      <FileReaction
         title={__('I like this')}
-        requiresAuth={IS_WEB}
+        label={likeLabel}
-        authSrc="filereaction_like"
-        className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
-        label={
-          <>
-            {myReaction === REACTION_TYPES.LIKE && SIMPLE_SITE && (
-              <>
-                <div className="button__fire-glow" />
-                <div className="button__fire-particle1" />
-                <div className="button__fire-particle2" />
-                <div className="button__fire-particle3" />
-                <div className="button__fire-particle4" />
-                <div className="button__fire-particle5" />
-                <div className="button__fire-particle6" />
-              </>
-            )}
-            {formatNumberWithCommas(likeCount, 0)}
-          </>
-        }
-        iconSize={18}
         icon={likeIcon}
+        isActive={myReaction === REACTION_TYPES.LIKE}
+        activeClassName="button--fire"
         onClick={() => doReactionLike(uri)}
       />
-      <Button
+
-        requiresAuth={IS_WEB}
+      <FileReaction
-        authSrc={'filereaction_dislike'}
         title={__('I dislike this')}
-        className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
+        label={dislikeLabel}
-        label={
-          <>
-            {myReaction === REACTION_TYPES.DISLIKE && SIMPLE_SITE && (
-              <>
-                <div className="button__slime-stain" />
-                <div className="button__slime-drop1" />
-                <div className="button__slime-drop2" />
-              </>
-            )}
-            {formatNumberWithCommas(dislikeCount, 0)}
-          </>
-        }
-        iconSize={18}
         icon={dislikeIcon}
+        isActive={myReaction === REACTION_TYPES.DISLIKE}
+        activeClassName="button--slime"
         onClick={() => doReactionDislike(uri)}
       />
     </>
   );
 }
 
-export default FileReactions;
+type ReactionProps = {
+  title: string,
+  label: any,
+  icon: string,
+  isActive: boolean,
+  activeClassName: string,
+  onClick: () => void,
+};
+
+const FileReaction = (reactionProps: ReactionProps) => {
+  const { title, label, icon, isActive, activeClassName, onClick } = reactionProps;
+
+  return (
+    <Tooltip title={title} arrow={false}>
+      <div style={{ margin: '0' }}>
+        <Button
+          requiresAuth
+          authSrc="filereaction_like"
+          className={classnames('button--file-action', { [activeClassName]: isActive })}
+          label={label}
+          iconSize={18}
+          icon={icon}
+          onClick={onClick}
+        />
+      </div>
+    </Tooltip>
+  );
+};