refactor(messenger-main): remove outdated rendering, processing and s…

…ocial channel handling of MessengerFeed from main messenger container (#2757)

* refactor(messenger-main): reduce unnecessary DOM elements by conditionally rendering MembersSidekick to improve performance

* refactor(feed-chat): reduce unnecessary DOM elements by conditionally rendering MembersSidekick to improve performance

* refactor(messenger-main): remove outdated rendering, processing and social channel handling of MessengerFeed from main messenger container

src/apps/messenger/Main.test.tsx

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 
 import { Container as Main, Properties } from './Main';
 import { MessengerChat } from '../../components/messenger/chat';
-import { MessengerFeed } from '../../components/messenger/feed';
 import { JoiningConversationDialog } from '../../components/joining-conversation-dialog';
 import { MembersSidekick } from '../../components/sidekick/variants/members-sidekick';
 
@@ -21,7 +20,6 @@ describe(Main, () => {
         isAuthenticated: false,
       },
       isValidConversation: false,
-      isSocialChannel: false,
       isJoiningConversation: false,
       isConversationsLoaded: true,
       isSecondarySidekickOpen: false,
@@ -51,7 +49,7 @@ describe(Main, () => {
     expect(wrapper).not.toHaveElement(JoiningConversationDialog);
   });
 
-  it('renders direct message chat component when not a social channel, conversations loaded and is valid', () => {
+  it('renders direct message chat component when conversations loaded and is valid', () => {
     const wrapper = subject({ context: { isAuthenticated: true }, isValidConversation: true });
 
     expect(wrapper).toHaveElement(MessengerChat);
@@ -60,54 +58,13 @@ describe(Main, () => {
   it('should not render messenger chat container when conversations have not loaded', () => {
     const wrapper = subject({
       context: { isAuthenticated: true },
-      isSocialChannel: true,
       isValidConversation: true,
       isConversationsLoaded: false,
     });
 
     expect(wrapper).not.toHaveElement(MessengerChat);
   });
 
-  it('should not render messenger chat container when is not valid conversation', () => {
-    const wrapper = subject({
-      context: { isAuthenticated: true },
-      isSocialChannel: false,
-      isValidConversation: false,
-      isConversationsLoaded: false,
-    });
-
-    expect(wrapper).not.toHaveElement(MessengerFeed);
-  });
-
-  it('renders messenger feed container when is social channel, conversations loaded and is valid conversation', () => {
-    const wrapper = subject({ context: { isAuthenticated: true }, isSocialChannel: true, isValidConversation: true });
-
-    expect(wrapper).toHaveElement(MessengerFeed);
-  });
-
-  it('should not render messenger feed container when is not social channel ', () => {
-    const wrapper = subject({ context: { isAuthenticated: true }, isSocialChannel: false, isValidConversation: true });
-
-    expect(wrapper).not.toHaveElement(MessengerFeed);
-  });
-
-  it('should not render messenger feed container when conversations have not loaded', () => {
-    const wrapper = subject({
-      context: { isAuthenticated: true },
-      isSocialChannel: true,
-      isValidConversation: true,
-      isConversationsLoaded: false,
-    });
-
-    expect(wrapper).not.toHaveElement(MessengerFeed);
-  });
-
-  it('should not render messenger feed container when is not valid conversation', () => {
-    const wrapper = subject({ context: { isAuthenticated: true }, isSocialChannel: true, isValidConversation: false });
-
-    expect(wrapper).not.toHaveElement(MessengerFeed);
-  });
-
   it('should render members sidekick when is secondary sidekick open', () => {
     const wrapper = subject({
       context: { isAuthenticated: true },

src/apps/messenger/Main.tsx

@@ -4,10 +4,8 @@ import { connectContainer } from '../../store/redux-container';
 
 import { withContext as withAuthenticationContext } from '../../components/authentication/context';
 import { MessengerChat } from '../../components/messenger/chat';
-import { MessengerFeed } from '../../components/messenger/feed';
 import { DevPanelContainer } from '../../components/dev-panel/container';
 import { FeatureFlag } from '../../components/feature-flag';
-import { denormalize } from '../../store/channels';
 import { JoiningConversationDialog } from '../../components/joining-conversation-dialog';
 import { ConversationsSidekick } from '../../components/sidekick/variants/conversations-sidekick';
 import { MembersSidekick } from '../../components/sidekick/variants/members-sidekick';
@@ -19,7 +17,6 @@ export interface Properties {
     isAuthenticated: boolean;
   };
   isValidConversation: boolean;
-  isSocialChannel: boolean;
   isJoiningConversation: boolean;
   isConversationsLoaded: boolean;
   isSecondarySidekickOpen: boolean;
@@ -32,11 +29,8 @@ export class Container extends React.Component<Properties> {
       groupManagement: { isSecondarySidekickOpen },
     } = state;
 
-    const currentChannel = denormalize(activeConversationId, state) || null;
-
     return {
       isValidConversation: !!activeConversationId,
-      isSocialChannel: currentChannel?.isSocialChannel,
       isJoiningConversation,
       isConversationsLoaded,
       isSecondarySidekickOpen,
@@ -56,9 +50,7 @@ export class Container extends React.Component<Properties> {
             <div className={styles.Split}>
               {this.props.isJoiningConversation && !this.props.isValidConversation && <JoiningConversationDialog />}
 
-              {this.props.isConversationsLoaded &&
-                this.props.isValidConversation &&
-                (this.props.isSocialChannel ? <MessengerFeed /> : <MessengerChat />)}
+              {this.props.isConversationsLoaded && this.props.isValidConversation && <MessengerChat />}
             </div>
             {this.props.isConversationsLoaded && this.props.isSecondarySidekickOpen && <MembersSidekick />}