From 2082c19c53900ea96003476245873836e29adfbd Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 9 Jul 2021 16:51:47 -0500
Subject: [PATCH] Rename justEmojis to onlyEmoji

---
 app/soapbox/components/status_content.js         | 16 ++++++++--------
 .../chats/components/chat_message_list.js        |  6 ++++--
 app/soapbox/utils/rich_content.js                |  3 ++-
 app/styles/chats.scss                            |  2 +-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js
index 468f158f0..b08acc805 100644
--- a/app/soapbox/components/status_content.js
+++ b/app/soapbox/components/status_content.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { addGreentext } from 'soapbox/utils/greentext';
-import { justEmojis } from 'soapbox/utils/rich_content';
+import { onlyEmoji } from 'soapbox/utils/rich_content';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
 const BIG_EMOJI_LIMIT = 10;
@@ -90,16 +90,16 @@ class StatusContent extends React.PureComponent {
     }
   }
 
-  setJustEmojis = () => {
-    if (this.node && this.state.justEmojis === undefined) {
-      this.setState({ justEmojis: justEmojis(this.node, BIG_EMOJI_LIMIT) });
+  setOnlyEmoji = () => {
+    if (this.node && this.state.onlyEmoji === undefined) {
+      this.setState({ onlyEmoji: onlyEmoji(this.node, BIG_EMOJI_LIMIT) });
     }
   }
 
   refresh = () => {
     this.setCollapse();
     this._updateStatusLinks();
-    this.setJustEmojis();
+    this.setOnlyEmoji();
   }
 
   componentDidMount() {
@@ -183,7 +183,7 @@ class StatusContent extends React.PureComponent {
 
   render() {
     const { status } = this.props;
-    const { justEmojis } = this.state;
+    const { onlyEmoji } = this.state;
 
     if (status.get('content').length === 0) {
       return null;
@@ -198,7 +198,7 @@ class StatusContent extends React.PureComponent {
       'status__content--with-action': this.props.onClick && this.context.router,
       'status__content--with-spoiler': status.get('spoiler_text').length > 0,
       'status__content--collapsed': this.state.collapsed === true,
-      'status__content--big': justEmojis,
+      'status__content--big': onlyEmoji,
     });
 
     if (isRtl(status.get('search_index'))) {
@@ -265,7 +265,7 @@ class StatusContent extends React.PureComponent {
           tabIndex='0'
           ref={this.setRef}
           className={classnames('status__content', {
-            'status__content--big': justEmojis,
+            'status__content--big': onlyEmoji,
           })}
           style={directionStyle}
           dangerouslySetInnerHTML={content}
diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index ec15dd7f6..a72e49421 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -15,7 +15,7 @@ import Bundle from 'soapbox/features/ui/components/bundle';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { initReportById } from 'soapbox/actions/reports';
 import { createSelector } from 'reselect';
-import { justEmojis } from 'soapbox/utils/rich_content';
+import { onlyEmoji } from 'soapbox/utils/rich_content';
 
 const BIG_EMOJI_LIMIT = 1;
 
@@ -124,8 +124,10 @@ class ChatMessageList extends ImmutablePureComponent {
       link.setAttribute('target', '_blank');
     });
 
-    if (justEmojis(c, BIG_EMOJI_LIMIT)) {
+    if (onlyEmoji(c, BIG_EMOJI_LIMIT)) {
       c.classList.add('chat-message__bubble--onlyEmoji');
+    } else {
+      c.classList.remove('chat-message__bubble--onlyEmoji');
     }
   }
 
diff --git a/app/soapbox/utils/rich_content.js b/app/soapbox/utils/rich_content.js
index bbafbac78..fc36733a5 100644
--- a/app/soapbox/utils/rich_content.js
+++ b/app/soapbox/utils/rich_content.js
@@ -1,8 +1,9 @@
 // Returns `true` if the node contains only emojis, up to a limit
-export const justEmojis = (node, limit = 1) => {
+export const onlyEmoji = (node, limit = 1) => {
   if (!node) return false;
   if (node.textContent.replaceAll(' ', '') !== '') return false;
   const emojis = [...node.querySelectorAll('img.emojione')];
+  if (emojis.length === 0) return false;
   if (emojis.length > limit) return false;
   const images = [...node.querySelectorAll('img')];
   if (images.length > emojis.length) return false;
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 61f9a1169..70ae5ef5c 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -165,7 +165,7 @@
     }
 
     &--onlyEmoji {
-      background: transparent;
+      background: transparent !important;
 
       img.emojione {
         width: 36px !important;