properly disable reactions when not logged in

app/javascript/flavours/glitch/components/status.jsx

@@ -61,6 +61,7 @@ class Status extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -819,6 +820,7 @@ class Status extends ImmutablePureComponent {
             numVisible={visibleReactions}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
+            canReact={this.context.identity.signedIn}
           />
 
           {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (

app/javascript/flavours/glitch/components/status_action_bar.jsx

@@ -330,7 +330,11 @@ class StatusActionBar extends ImmutablePureComponent {
         />
         <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
         <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
-        <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+        {
+          signedIn
+            ? <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+            : reactButton
+        }
         {shareButton}
         <IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 

app/javascript/flavours/glitch/components/status_reactions.js

@@ -17,6 +17,7 @@ export default class StatusReactions extends ImmutablePureComponent {
     reactions: ImmutablePropTypes.list.isRequired,
     numVisible: PropTypes.number,
     addReaction: PropTypes.func.isRequired,
+    canReact: PropTypes.bool.isRequired,
     removeReaction: PropTypes.func.isRequired,
   };
 
@@ -56,6 +57,7 @@ export default class StatusReactions extends ImmutablePureComponent {
                 style={{ transform: `scale(${style.scale})`, position: style.scale < 0.5 ? 'absolute' : 'static' }}
                 addReaction={this.props.addReaction}
                 removeReaction={this.props.removeReaction}
+                canReact={this.props.canReact}
               />
             ))}
           </div>
@@ -73,6 +75,7 @@ class Reaction extends ImmutablePureComponent {
     reaction: ImmutablePropTypes.map.isRequired,
     addReaction: PropTypes.func.isRequired,
     removeReaction: PropTypes.func.isRequired,
+    canReact: PropTypes.bool.isRequired,
     style: PropTypes.object,
   };
 
@@ -83,12 +86,10 @@ class Reaction extends ImmutablePureComponent {
   handleClick = () => {
     const { reaction, statusId, addReaction, removeReaction } = this.props;
 
-    if (!reaction.get('extern')) {
+    if (reaction.get('me')) {
-      if (reaction.get('me')) {
+      removeReaction(statusId, reaction.get('name'));
-        removeReaction(statusId, reaction.get('name'));
+    } else {
-      } else {
+      addReaction(statusId, reaction.get('name'));
-        addReaction(statusId, reaction.get('name'));
-      }
     }
   }
 
@@ -105,6 +106,7 @@ class Reaction extends ImmutablePureComponent {
         onClick={this.handleClick}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
+        disabled={!this.props.canReact}
         style={this.props.style}
       >
         <span className='reactions-bar__item__emoji'>

app/javascript/flavours/glitch/containers/status_container.js

@@ -168,11 +168,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   },
 
   onReactionAdd (statusId, name, url) {
-    const { signedIn } = this.context.identity;
+    dispatch(addReaction(statusId, name, url));
-
-    if (signedIn) {
-      dispatch(addReaction(statusId, name, url));
-    }
   },
 
   onReactionRemove (statusId, name) {

app/javascript/flavours/glitch/features/status/components/action_bar.jsx

@@ -236,7 +236,13 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
-        <div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} /></div>
+        <div className='detailed-status__button'>
+          {
+            signedIn
+              ? <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+              : reactButton
+          }
+        </div>
         {shareButton}
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 

app/javascript/flavours/glitch/features/status/components/detailed_status.jsx

@@ -26,6 +26,7 @@ class DetailedStatus extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -332,6 +333,7 @@ class DetailedStatus extends ImmutablePureComponent {
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
+            canReact={this.context.identity.signedIn}
           />
 
           <div className='detailed-status__meta'>

app/javascript/flavours/glitch/features/status/index.jsx

@@ -306,12 +306,6 @@ class Status extends ImmutablePureComponent {
 
     if (signedIn) {
       dispatch(addReaction(statusId, name, url));
-    } else {
-      dispatch(openModal('INTERACTION', {
-        type: 'reaction_add',
-        accountId: status.getIn(['account', 'id']),
-        url: status.get('url'),
-      }));
     }
   }
 

app/javascript/mastodon/components/status.jsx

@@ -64,6 +64,7 @@ class Status extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -557,7 +558,7 @@ class Status extends ImmutablePureComponent {
               numVisible={visibleReactions}
               addReaction={this.props.onReactionAdd}
               removeReaction={this.props.onReactionRemove}
-              emojiMap={this.props.emojiMap}
+              canReact={this.context.identity.signedIn}
             />
 
             <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />

app/javascript/mastodon/components/status_action_bar.jsx

@@ -130,13 +130,7 @@ class StatusActionBar extends ImmutablePureComponent {
   };
 
   handleEmojiPick = data => {
-    const { signedIn } = this.context.identity;
+      this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''), data.imageUrl);
-
-    if (signedIn) {
-      this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
-    } else {
-      this.props.onInteractionModal('favourite', this.props.status);
-    }
   }
 
   handleReblogClick = e => {

app/javascript/mastodon/components/status_reactions.js

@@ -17,8 +17,8 @@ export default class StatusReactions extends ImmutablePureComponent {
     reactions: ImmutablePropTypes.list.isRequired,
     numVisible: PropTypes.number,
     addReaction: PropTypes.func.isRequired,
+    canReact: PropTypes.bool.isRequired,
     removeReaction: PropTypes.func.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
   };
 
   willEnter() {
@@ -57,7 +57,7 @@ export default class StatusReactions extends ImmutablePureComponent {
                 style={{ transform: `scale(${style.scale})`, position: style.scale < 0.5 ? 'absolute' : 'static' }}
                 addReaction={this.props.addReaction}
                 removeReaction={this.props.removeReaction}
-                emojiMap={this.props.emojiMap}
+                canReact={this.props.canReact}
               />
             ))}
           </div>
@@ -75,7 +75,7 @@ class Reaction extends ImmutablePureComponent {
     reaction: ImmutablePropTypes.map.isRequired,
     addReaction: PropTypes.func.isRequired,
     removeReaction: PropTypes.func.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
+    canReact: PropTypes.bool.isRequired,
     style: PropTypes.object,
   };
 
@@ -85,14 +85,11 @@ class Reaction extends ImmutablePureComponent {
 
   handleClick = () => {
     const { reaction, statusId, addReaction, removeReaction } = this.props;
-    const { signedIn } = this.context.identity;
 
-    if (signedIn) {
+    if (reaction.get('me')) {
-      if (reaction.get('me')) {
+      removeReaction(statusId, reaction.get('name'));
-        removeReaction(statusId, reaction.get('name'));
+    } else {
-      } else {
+      addReaction(statusId, reaction.get('name'));
-        addReaction(statusId, reaction.get('name'));
-      }
     }
   }
 
@@ -109,10 +106,16 @@ class Reaction extends ImmutablePureComponent {
         onClick={this.handleClick}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
+        disabled={!this.props.canReact}
         style={this.props.style}
       >
         <span className='reactions-bar__item__emoji'>
-          <Emoji hovered={this.state.hovered} emoji={reaction.get('name')} emojiMap={this.props.emojiMap} />
+          <Emoji
+            hovered={this.state.hovered}
+            emoji={reaction.get('name')}
+            url={reaction.get('url')}
+            staticUrl={reaction.get('static_url')}
+          />
         </span>
         <span className='reactions-bar__item__count'>
           <AnimatedNumber value={reaction.get('count')} />
@@ -127,12 +130,13 @@ class Emoji extends React.PureComponent {
 
   static propTypes = {
     emoji: PropTypes.string.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
     hovered: PropTypes.bool.isRequired,
+    url: PropTypes.string,
+    staticUrl: PropTypes.string,
   };
 
   render() {
-    const { emoji, emojiMap, hovered } = this.props;
+    const { emoji, hovered, url, staticUrl } = this.props;
 
     if (unicodeMapping[emoji]) {
       const { filename, shortCode } = unicodeMapping[this.props.emoji];
@@ -147,10 +151,8 @@ class Emoji extends React.PureComponent {
           src={`${assetHost}/emoji/${filename}.svg`}
         />
       );
-    } else if (emojiMap.get(emoji)) {
+    } else {
-      const filename = (autoPlayGif || hovered)
+      const filename = (autoPlayGif || hovered) ? url : staticUrl;
-        ? emojiMap.getIn([emoji, 'url'])
-        : emojiMap.getIn([emoji, 'static_url']);
       const shortCode = `:${emoji}:`;
 
       return (
@@ -162,8 +164,6 @@ class Emoji extends React.PureComponent {
           src={filename}
         />
       );
-    } else {
-      return null;
     }
   }
 

app/javascript/mastodon/features/status/components/action_bar.jsx

@@ -308,7 +308,13 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
-        <div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} /></div>
+        <div className='detailed-status__button'>
+          {
+            canReact
+              ? <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+              : reactButton
+          }
+        </div>
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
         {shareButton}

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -30,6 +30,7 @@ class DetailedStatus extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -50,7 +51,6 @@ class DetailedStatus extends ImmutablePureComponent {
     onToggleMediaVisibility: PropTypes.func,
     onReactionAdd: PropTypes.func.isRequired,
     onReactionRemove: PropTypes.func.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
   };
 
   state = {
@@ -292,7 +292,7 @@ class DetailedStatus extends ImmutablePureComponent {
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
-            emojiMap={this.props.emojiMap}
+            canReact={this.context.identity.signedIn}
           />
 
           <div className='detailed-status__meta'>

app/javascript/mastodon/features/status/index.jsx

@@ -261,12 +261,6 @@ class Status extends ImmutablePureComponent {
 
     if (signedIn) {
       dispatch(addReaction(statusId, name, url));
-    } else {
-      dispatch(openModal('INTERACTION', {
-        type: 'reaction_add',
-        accountId: status.getIn(['account', 'id']),
-        url: status.get('url'),
-      }));
     }
   }