feat: improved robustness of changing the conversation header subtitle

the previous logic relied on the length of the subtitles array which didn't account for when it changed depending on the conversation we were on

ts/components/conversation/header/ConversationHeaderSubtitle.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { Flex } from '../../basic/Flex';
 import { SessionIconButton } from '../../icon';
+import { SubtitleStrings, SubtitleStringsType } from './ConversationHeaderTitle';
 
-// NOTE the subtitle toggling logic needs improvment
-function loadDataTestId(subtitles: Array<string>, currentIndex: number) {
-  if (currentIndex === subtitles.length - 1) {
+function loadDataTestId(currentSubtitle: SubtitleStringsType) {
+  if (currentSubtitle === 'disappearingMessages') {
     return 'disappear-messages-type-and-time';
   } else {
     return 'conversation-header-subtitle';
@@ -63,34 +63,36 @@ const SubtitleDotMenu = ({
 );
 
 type ConversationHeaderSubitleProps = {
-  subtitles: Array<string>;
-  currentIndex: number;
-  setCurrentIndex: (index: number) => void;
+  subtitlesArray: Array<SubtitleStringsType>;
+  subtitleStrings: SubtitleStrings;
+  currentSubtitle: SubtitleStringsType;
+  setCurrentSubtitle: (index: SubtitleStringsType) => void;
   onClickFunction: () => void;
   showDisappearingMessageIcon: boolean;
 };
 
 export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps) => {
   const {
-    subtitles,
-    currentIndex,
-    setCurrentIndex,
+    subtitlesArray,
+    subtitleStrings,
+    currentSubtitle,
+    setCurrentSubtitle,
     onClickFunction,
     showDisappearingMessageIcon,
   } = props;
 
   const handleTitleCycle = (direction: 1 | -1) => {
-    let newIndex = currentIndex + direction;
-    if (newIndex > subtitles.length - 1) {
+    let newIndex = subtitlesArray.indexOf(currentSubtitle) + direction;
+    if (newIndex > subtitlesArray.length - 1) {
       newIndex = 0;
     }
 
     if (newIndex < 0) {
-      newIndex = subtitles.length - 1;
+      newIndex = subtitlesArray.length - 1;
     }
 
-    if (subtitles[newIndex]) {
-      setCurrentIndex(newIndex);
+    if (subtitlesArray[newIndex]) {
+      setCurrentSubtitle(subtitlesArray[newIndex]);
     }
   };
 
@@ -99,7 +101,7 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
       <Flex
         container={true}
         flexDirection={'row'}
-        justifyContent={subtitles.length < 2 ? 'center' : 'space-between'}
+        justifyContent={subtitlesArray.length < 2 ? 'center' : 'space-between'}
         alignItems={'center'}
         width={'100%'}
       >
@@ -112,7 +114,7 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
           onClick={() => {
             handleTitleCycle(-1);
           }}
-          isHidden={subtitles.length < 2}
+          isHidden={subtitlesArray.length < 2}
           tabIndex={0}
         />
         {showDisappearingMessageIcon && (
@@ -134,9 +136,9 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
             }
           }}
           tabIndex={0}
-          data-testid={loadDataTestId(subtitles, currentIndex)}
+          data-testid={loadDataTestId(currentSubtitle)}
         >
-          {subtitles[currentIndex]}
+          {subtitleStrings[currentSubtitle]}
         </span>
         <SessionIconButton
           iconColor={'var(--button-icon-stroke-selected-color)'}
@@ -147,14 +149,14 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
           onClick={() => {
             handleTitleCycle(1);
           }}
-          isHidden={subtitles.length < 2}
+          isHidden={subtitlesArray.length < 2}
           tabIndex={0}
         />
       </Flex>
       <SubtitleDotMenu
-        options={subtitles}
-        selectedOptionIndex={currentIndex}
-        style={{ display: subtitles.length < 2 ? 'none' : undefined, margin: '8px 0' }}
+        options={subtitlesArray}
+        selectedOptionIndex={subtitlesArray.indexOf(currentSubtitle)}
+        style={{ display: subtitlesArray.length < 2 ? 'none' : undefined, margin: '8px 0' }}
       />
     </StyledSubtitleContainer>
   );

ts/components/conversation/header/ConversationHeaderTitle.tsx

@@ -15,6 +15,16 @@ import {
 } from '../../../util/expiringMessages';
 import { ConversationHeaderSubitle } from './ConversationHeaderSubtitle';
 
+export type SubtitleStrings = Record<string, string> & {
+  notifications?: string;
+  members?: string;
+  disappearingMessages?: string;
+};
+export type SubtitleStringsType = keyof Pick<
+  SubtitleStrings,
+  'notifications' | 'members' | 'disappearingMessages'
+>;
+
 export type ConversationHeaderTitleProps = {
   conversationKey: string;
   isMe: boolean;
@@ -37,7 +47,7 @@ export const ConversationHeaderTitle = () => {
   const convoName = useConversationUsername(headerTitleProps?.conversationKey);
   const dispatch = useDispatch();
 
-  const [visibleTitleIndex, setVisibleTitleIndex] = useState(0);
+  const [visibleSubtitle, setVisibleSubtitle] = useState<SubtitleStringsType>('notifications');
 
   if (!headerTitleProps) {
     return null;
@@ -56,12 +66,15 @@ export const ConversationHeaderTitle = () => {
 
   const { i18n } = window;
 
-  const subtitles: Array<string> = [];
+  const subtitleStrings: SubtitleStrings = {};
+  const subtitleArray: Array<SubtitleStringsType> = [];
+
   const notificationSubtitle = notificationSetting
     ? i18n('notificationSubtitle', [notificationSetting])
     : null;
   if (notificationSubtitle) {
-    subtitles.push(notificationSubtitle);
+    subtitleStrings.notifications = notificationSubtitle;
+    subtitleArray.push('notifications');
   }
 
   let memberCount = 0;
@@ -79,7 +92,8 @@ export const ConversationHeaderTitle = () => {
     memberCountSubtitle = isPublic ? i18n('activeMembers', [count]) : i18n('members', [count]);
   }
   if (memberCountSubtitle) {
-    subtitles.push(memberCountSubtitle);
+    subtitleStrings.members = memberCountSubtitle;
+    subtitleArray.push('members');
   }
 
   const disappearingMessageSettingText =
@@ -102,14 +116,15 @@ export const ConversationHeaderTitle = () => {
       }`
     : null;
   if (disappearingMessageSubtitle) {
-    subtitles.push(disappearingMessageSubtitle);
+    subtitleStrings.disappearingMessages = disappearingMessageSubtitle;
+    subtitleArray.push('disappearingMessages');
   }
 
   const handleRightPanelToggle = () => {
     if (isRightPanelOn) {
       dispatch(closeRightPanel());
     } else {
-      if (visibleTitleIndex === subtitles.length - 1) {
+      if (visibleSubtitle === 'disappearingMessages') {
         dispatch(setRightOverlayMode('disappearing-messages'));
       } else {
         dispatch(setRightOverlayMode('panel-settings'));
@@ -119,14 +134,14 @@ export const ConversationHeaderTitle = () => {
   };
 
   useEffect(() => {
-    setVisibleTitleIndex(0);
+    setVisibleSubtitle('notifications');
   }, [convoName]);
 
   useEffect(() => {
-    if (!subtitles[visibleTitleIndex]) {
-      setVisibleTitleIndex(0);
+    if (subtitleArray.indexOf(visibleSubtitle) < 0) {
+      setVisibleSubtitle('notifications');
     }
-  }, [visibleTitleIndex, subtitles]);
+  }, [subtitleArray, visibleSubtitle]);
 
   return (
     <div className="module-conversation-header__title-container">
@@ -150,13 +165,16 @@ export const ConversationHeaderTitle = () => {
               {convoName}
             </span>
           )}
-          {subtitles && subtitles[visibleTitleIndex] && (
+          {subtitleArray.length && subtitleArray.indexOf(visibleSubtitle) > -1 && (
             <ConversationHeaderSubitle
-              currentIndex={visibleTitleIndex}
-              setCurrentIndex={setVisibleTitleIndex}
-              subtitles={subtitles}
+              currentSubtitle={visibleSubtitle}
+              setCurrentSubtitle={setVisibleSubtitle}
+              subtitlesArray={subtitleArray}
+              subtitleStrings={subtitleStrings}
               onClickFunction={handleRightPanelToggle}
-              showDisappearingMessageIcon={visibleTitleIndex === 2 && expirationType !== 'off'}
+              showDisappearingMessageIcon={
+                visibleSubtitle === 'disappearingMessages' && expirationType !== 'off'
+              }
             />
           )}
         </div>