From 4773b76ea902ae2f6476f2ba35618eac318369b9 Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Thu, 30 Dec 2021 19:44:15 +0000
Subject: [PATCH] fix(channel header): fix action callbacks

---
 src/lib/defer.ts                             | 10 ++++++
 src/pages/channels/actions/HeaderActions.tsx | 37 ++++++++++++--------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/lib/defer.ts b/src/lib/defer.ts
index 79de63ae..73663ac6 100644
--- a/src/lib/defer.ts
+++ b/src/lib/defer.ts
@@ -1 +1,11 @@
+/**
+ * Schedule a task at the end of the Event Loop
+ * @param cb Callback
+ */
 export const defer = (cb: () => void) => setTimeout(cb, 0);
+
+/**
+ * Schedule a task at the end of the second Event Loop
+ * @param cb Callback
+ */
+export const chainedDefer = (cb: () => void) => defer(() => defer(cb));
diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx
index c8cc235d..2127b4bb 100644
--- a/src/pages/channels/actions/HeaderActions.tsx
+++ b/src/pages/channels/actions/HeaderActions.tsx
@@ -10,6 +10,7 @@ import {
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 
+import { chainedDefer, defer } from "../../../lib/defer";
 import { internalEmit } from "../../../lib/eventEmitter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
@@ -29,7 +30,8 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
     const { openScreen } = useIntermediate();
     const history = useHistory();
 
-    function openRightSidebar() {
+    function slideOpen() {
+        if (!isTouchscreenDevice) return;
         const panels = document.querySelector("#app > div > div > div");
         panels?.scrollTo({
             behavior: "smooth",
@@ -37,12 +39,25 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
         });
     }
 
-    function openSidebar() {
-        if (isTouchscreenDevice) {
-            openRightSidebar();
-        } else {
+    function openSearch() {
+        if (
+            !isTouchscreenDevice &&
+            !layout.getSectionState(SIDEBAR_MEMBERS, true)
+        ) {
             layout.toggleSectionState(SIDEBAR_MEMBERS, true);
         }
+
+        slideOpen();
+        chainedDefer(() => internalEmit("RightSidebar", "open", "search"));
+    }
+
+    function openMembers() {
+        if (!isTouchscreenDevice) {
+            layout.toggleSectionState(SIDEBAR_MEMBERS, true);
+        }
+
+        slideOpen();
+        chainedDefer(() => internalEmit("RightSidebar", "open", undefined));
     }
 
     return (
@@ -74,21 +89,13 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
             )}
             <VoiceActions channel={channel} />
             {channel.channel_type !== "VoiceChannel" && (
-                <IconButton
-                    onClick={() => {
-                        internalEmit("RightSidebar", "open", "search");
-                        openRightSidebar();
-                    }}>
+                <IconButton onClick={openSearch}>
                     <Search size={25} />
                 </IconButton>
             )}
             {(channel.channel_type === "Group" ||
                 channel.channel_type === "TextChannel") && (
-                <IconButton
-                    onClick={() => {
-                        internalEmit("RightSidebar", "open", undefined);
-                        openRightSidebar();
-                    }}>
+                <IconButton onClick={openMembers}>
                     <Group size={25} />
                 </IconButton>
             )}