From 2233952cebd368629eed4e5aebe0741e4616084e Mon Sep 17 00:00:00 2001
From: Fernando Valverde <fdov88@gmail.com>
Date: Tue, 30 Jun 2020 12:03:41 -0600
Subject: [PATCH] [deploy] Discoverable channel will open CTA to request join
 if not available (#8999)

---
 app/javascript/chat/channels.jsx              |   3 +
 app/javascript/chat/chat.jsx                  |   3 +
 .../chat/components/channelButton.jsx         | 126 ++++++++++--------
 3 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/app/javascript/chat/channels.jsx b/app/javascript/chat/channels.jsx
index 310366c59..79ea0a6a3 100644
--- a/app/javascript/chat/channels.jsx
+++ b/app/javascript/chat/channels.jsx
@@ -28,6 +28,9 @@ const Channels = ({
           channel={channel}
           discoverableChannel
           triggerActiveContent={triggerActiveContent}
+          isActiveChannel={
+            parseInt(activeChannelId, 10) === channel.chat_channel_id
+          }
         />
       );
     },
diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx
index d5deda3dd..1600a8d2c 100644
--- a/app/javascript/chat/chat.jsx
+++ b/app/javascript/chat/chat.jsx
@@ -146,6 +146,9 @@ export default class Chat extends Component {
         searchType: '',
         paginationNumber: channelPaginationNum,
       };
+      if (activeChannelId !== null) {
+        searchParams.searchType = 'discoverable';
+      }
       getChannels(searchParams, filters, this.loadChannels);
       getUnopenedChannelIds(this.markUnopenedChannelIds);
     }
diff --git a/app/javascript/chat/components/channelButton.jsx b/app/javascript/chat/components/channelButton.jsx
index 42422b0b2..24e8aa55b 100644
--- a/app/javascript/chat/components/channelButton.jsx
+++ b/app/javascript/chat/components/channelButton.jsx
@@ -1,81 +1,97 @@
-import { h } from 'preact';
+import { h, Component, createRef } from 'preact';
 import PropTypes from 'prop-types';
 
-const ChannelButton = ({
-  channel,
-  handleSwitchChannel,
-  otherClassname,
-  newMessagesIndicator,
-  isUnopened,
-  discoverableChannel,
-  triggerActiveContent,
-}) => {
-  return (
-    <button
-      type="button"
-      key={channel.id}
-      className="chatchanneltabbutton"
-      onClick={discoverableChannel ? triggerActiveContent : handleSwitchChannel}
-      data-content="sidecar-channel-request"
-      data-channel-id={channel.chat_channel_id}
-      data-channel-slug={channel.channel_modified_slug}
-      data-channel-status={channel.status}
-      data-channel-name={channel.channel_name}
-    >
+class ChannelButton extends Component {
+  buttonRef = createRef();
+
+  componentDidMount() {
+    const { isActiveChannel = false } = this.props;
+
+    if (isActiveChannel) {
+      this.buttonRef.current.click();
+    }
+  }
+
+  renderChannelImage = () => {
+    const { channel, newMessagesIndicator, discoverableChannel } = this.props;
+
+    return (
       <span
+        data-channel-slug={channel.channel_modified_slug}
         className={
           discoverableChannel
-            ? 'chatchanneltab chatchanneltab--inactive'
-            : `chatchanneltab ${otherClassname} chatchanneltab--${newMessagesIndicator}`
+            ? 'chatchanneltabindicator'
+            : `chatchanneltabindicator chatchanneltabindicator--${newMessagesIndicator}`
         }
         data-channel-id={channel.chat_channel_id}
+      >
+        <img
+          src={channel.channel_image}
+          alt="pic"
+          className={
+            channel.channel_type === 'direct'
+              ? 'chatchanneltabindicatordirectimage'
+              : 'chatchanneltabindicatordirectimage invert-channel-image'
+          }
+        />
+      </span>
+    );
+  };
+
+  render() {
+    const {
+      channel,
+      handleSwitchChannel,
+      otherClassname,
+      newMessagesIndicator,
+      isUnopened,
+      discoverableChannel,
+      triggerActiveContent,
+    } = this.props;
+
+    return (
+      <button
+        type="button"
+        ref={this.buttonRef}
+        key={channel.id}
+        className="chatchanneltabbutton"
+        onClick={
+          discoverableChannel ? triggerActiveContent : handleSwitchChannel
+        }
         data-content="sidecar-channel-request"
+        data-channel-id={channel.chat_channel_id}
         data-channel-slug={channel.channel_modified_slug}
         data-channel-status={channel.status}
         data-channel-name={channel.channel_name}
-        style={{
-          border: `1px solid ${channel.channel_color}`,
-          boxShadow: `3px 3px 0px ${channel.channel_color}`,
-        }}
       >
         <span
-          data-channel-slug={channel.channel_modified_slug}
           className={
             discoverableChannel
-              ? 'chatchanneltabindicator'
-              : `chatchanneltabindicator chatchanneltabindicator--${newMessagesIndicator}`
+              ? 'chatchanneltab chatchanneltab--inactive'
+              : `chatchanneltab ${otherClassname} chatchanneltab--${newMessagesIndicator}`
           }
           data-channel-id={channel.chat_channel_id}
-        >
-          <img
-            src={channel.channel_image}
-            alt="pic"
-            className={
-              channel.channel_type === 'direct'
-                ? 'chatchanneltabindicatordirectimage'
-                : 'chatchanneltabindicatordirectimage invert-channel-image'
-            }
-          />
-        </span>
-        {isUnopened ? (
-          <span className="crayons-indicator crayons-indicator--accent crayons-indicator--bullet" />
-        ) : (
-          ''
-        )}
-        <span
+          data-content="sidecar-channel-request"
           data-channel-slug={channel.channel_modified_slug}
-          className="chatchanneltab__name"
-          data-channel-id={channel.chat_channel_id}
           data-channel-status={channel.status}
           data-channel-name={channel.channel_name}
-          data-content="sidecar-channel-request"
+          style={{
+            border: `1px solid ${channel.channel_color}`,
+            boxShadow: `3px 3px 0px ${channel.channel_color}`,
+          }}
         >
+          {this.renderChannelImage()}
+          {isUnopened ? (
+            <span className="crayons-indicator crayons-indicator--accent crayons-indicator--bullet" />
+          ) : (
+            ''
+          )}
           {channel.channel_name}
         </span>
-      </span>
-    </button>
-  );
-};
+      </button>
+    );
+  }
+}
 
 ChannelButton.propTypes = {
   channel: PropTypes.shape({