From dfa04c68f40b51c71e343ba8d17d36af501e5923 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 28 Oct 2021 17:14:30 +1100
Subject: [PATCH] fix emoji click on button while open closes it

Fixes #1980
---
 .../message/OutgoingMessageStatus.tsx         |  1 +
 .../conversation/SessionCompositionBox.tsx    | 44 ++++++++++++-------
 .../session/icon/SessionIconButton.tsx        |  5 ++-
 .../conversations/unsendingInteractions.ts    |  1 -
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/ts/components/conversation/message/OutgoingMessageStatus.tsx b/ts/components/conversation/message/OutgoingMessageStatus.tsx
index 0701ce13104..c710adfde8c 100644
--- a/ts/components/conversation/message/OutgoingMessageStatus.tsx
+++ b/ts/components/conversation/message/OutgoingMessageStatus.tsx
@@ -9,6 +9,7 @@ const MessageStatusSendingContainer = styled.div`
   align-self: flex-end;
   margin-bottom: 2px;
   margin-inline-start: 5px;
+  cursor: pointer;
 `;
 
 const MessageStatusSending = () => {
diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx
index c65b52b7657..b71117a1d37 100644
--- a/ts/components/session/conversation/SessionCompositionBox.tsx
+++ b/ts/components/session/conversation/SessionCompositionBox.tsx
@@ -109,18 +109,21 @@ const StartRecordingButton = (props: { onClick: () => void }) => {
   );
 };
 
-const ToggleEmojiButton = (props: { onClick: () => void }) => {
-  return (
-    <SessionIconButton
-      iconType="emoji"
-      backgroundColor="var(--color-compose-view-button-background)"
-      iconSize={'huge2'}
-      borderRadius="300px"
-      iconPadding="6px"
-      onClick={props.onClick}
-    />
-  );
-};
+const ToggleEmojiButton = React.forwardRef<HTMLDivElement, { onClick: () => void }>(
+  (props, ref) => {
+    return (
+      <SessionIconButton
+        iconType="emoji"
+        ref={ref}
+        backgroundColor="var(--color-compose-view-button-background)"
+        iconSize={'huge2'}
+        borderRadius="300px"
+        iconPadding="6px"
+        onClick={props.onClick}
+      />
+    );
+  }
+);
 
 const SendMessageButton = (props: { onClick: () => void }) => {
   return (
@@ -205,7 +208,8 @@ const getDefaultState = (newConvoId?: string) => {
 class SessionCompositionBoxInner extends React.Component<Props, State> {
   private readonly textarea: React.RefObject<any>;
   private readonly fileInput: React.RefObject<HTMLInputElement>;
-  private emojiPanel: any;
+  private readonly emojiPanel: any;
+  private readonly emojiPanelButton: any;
   private linkPreviewAbortController?: AbortController;
   private container: any;
   private readonly mentionsRegex = /@\uFFD205[0-9a-f]{64}\uFFD7[^\uFFD2]+\uFFD2/gu;
@@ -219,7 +223,8 @@ class SessionCompositionBoxInner extends React.Component<Props, State> {
     this.fileInput = React.createRef();
 
     // Emojis
-    this.emojiPanel = null;
+    this.emojiPanel = React.createRef();
+    this.emojiPanelButton = React.createRef();
     autoBind(this);
     this.toggleEmojiPanel = debounce(this.toggleEmojiPanel.bind(this), 100);
   }
@@ -271,7 +276,10 @@ class SessionCompositionBoxInner extends React.Component<Props, State> {
   }
 
   private handleClick(e: any) {
-    if (this.emojiPanel && this.emojiPanel.contains(e.target)) {
+    if (
+      (this.emojiPanel?.current && this.emojiPanel.current.contains(e.target)) ||
+      (this.emojiPanelButton?.current && this.emojiPanelButton.current.contains(e.target))
+    ) {
       return;
     }
 
@@ -421,11 +429,13 @@ class SessionCompositionBoxInner extends React.Component<Props, State> {
           {this.renderTextArea()}
         </div>
 
-        {typingEnabled && <ToggleEmojiButton onClick={this.toggleEmojiPanel} />}
+        {typingEnabled && (
+          <ToggleEmojiButton ref={this.emojiPanelButton} onClick={this.toggleEmojiPanel} />
+        )}
         <SendMessageButton onClick={this.onSendMessage} />
 
         {typingEnabled && (
-          <div ref={ref => (this.emojiPanel = ref)} onKeyDown={this.onKeyDown} role="button">
+          <div ref={this.emojiPanel} onKeyDown={this.onKeyDown} role="button">
             {showEmojiPanel && (
               <SessionEmojiPanel onEmojiClicked={this.onEmojiClick} show={showEmojiPanel} />
             )}
diff --git a/ts/components/session/icon/SessionIconButton.tsx b/ts/components/session/icon/SessionIconButton.tsx
index f0cd37585e1..48271ec53cf 100644
--- a/ts/components/session/icon/SessionIconButton.tsx
+++ b/ts/components/session/icon/SessionIconButton.tsx
@@ -12,7 +12,7 @@ interface SProps extends SessionIconProps {
   margin?: string;
 }
 
-const SessionIconButtonInner = (props: SProps) => {
+const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props, ref) => {
   const {
     iconType,
     iconSize,
@@ -40,6 +40,7 @@ const SessionIconButtonInner = (props: SProps) => {
     <div
       className={classNames('session-icon-button', iconSize, isSelected ? 'no-opacity' : '')}
       role="button"
+      ref={ref}
       onClick={clickHandler}
       style={{ display: isHidden ? 'none' : 'flex', margin: margin ? margin : '' }}
     >
@@ -58,6 +59,6 @@ const SessionIconButtonInner = (props: SProps) => {
       {Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
     </div>
   );
-};
+});
 
 export const SessionIconButton = React.memo(SessionIconButtonInner, _.isEqual);
diff --git a/ts/interactions/conversations/unsendingInteractions.ts b/ts/interactions/conversations/unsendingInteractions.ts
index d360941fd34..5686bbb5d67 100644
--- a/ts/interactions/conversations/unsendingInteractions.ts
+++ b/ts/interactions/conversations/unsendingInteractions.ts
@@ -53,7 +53,6 @@ async function unsendMessagesForEveryone(
     // sending to recipient all the messages separately for now
     await Promise.all(
       unsendMsgObjects.map(unsendObject => {
-        console.warn('sending unsend message', unsendObject);
         getMessageQueue()
           .sendToGroup(unsendObject, undefined, new PubKey(destinationId))
           .catch(window?.log?.error);