[MM-56585]Show only unreads filter stays active after changing the 'Group unreads' setting (#7790)

* showing unread and threads, of group unread setting in on

* using third variable to maintain state for showing categories

* removed useState from useMemo

* Removed state, return orderctegroies if onlyUnreads & unreadsOnTop is true

* test cases updates

* removed onlyUnreads props from threads

* removed onlyUnreads

* test cases updated

* removed unnecessary changes

* removed onlyUnreads from dep

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

app/components/threads_button/__snapshots__/threads_button.test.tsx.snap

@@ -189,98 +189,3 @@ exports[`Thread item in the channel list Threads Component should match snapshot
   </View>
 </View>
 `;
-
-exports[`Thread item in the channel list Threads Component should match snapshot with only unreads filter 1`] = `null`;
-
-exports[`Thread item in the channel list Threads Component should match snapshot, groupUnreadsSeparately false, always show 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    {
-      "opacity": 1,
-    }
-  }
-  testID="channel_list.threads.button"
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-        },
-        false,
-        undefined,
-        undefined,
-        {
-          "minHeight": 40,
-        },
-      ]
-    }
-  >
-    <Icon
-      name="message-text-outline"
-      style={
-        [
-          {
-            "color": "rgba(255,255,255,0.5)",
-            "fontSize": 24,
-            "marginRight": 12,
-          },
-          false,
-          undefined,
-        ]
-      }
-    />
-    <Text
-      style={
-        [
-          {
-            "flex": 1,
-          },
-          {
-            "fontFamily": "OpenSans",
-            "fontSize": 16,
-            "fontWeight": "400",
-            "lineHeight": 24,
-          },
-          {
-            "color": "rgba(255,255,255,0.72)",
-          },
-          false,
-          undefined,
-          undefined,
-        ]
-      }
-    >
-      Threads
-    </Text>
-  </View>
-</View>
-`;

app/components/threads_button/index.ts

@@ -2,31 +2,20 @@
 // See LICENSE.txt for license information.
 
 import {withDatabase, withObservables} from '@nozbe/watermelondb/react';
-import {of as of$} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 
-import Preferences from '@constants/preferences';
-import {getSidebarPreferenceAsBool} from '@helpers/api/preference';
-import {querySidebarPreferences} from '@queries/servers/preference';
-import {observeCurrentChannelId, observeCurrentTeamId, observeOnlyUnreads} from '@queries/servers/system';
+import {observeCurrentChannelId, observeCurrentTeamId} from '@queries/servers/system';
 import {observeUnreadsAndMentionsInTeam} from '@queries/servers/thread';
 
 import ThreadsButton from './threads_button';
 
 import type {WithDatabaseArgs} from '@typings/database/database';
-import type PreferenceModel from '@typings/database/models/servers/preference';
 
 const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
     const currentTeamId = observeCurrentTeamId(database);
 
     return {
         currentChannelId: observeCurrentChannelId(database),
-        groupUnreadsSeparately: querySidebarPreferences(database, Preferences.CHANNEL_SIDEBAR_GROUP_UNREADS).
-            observeWithColumns(['value']).
-            pipe(
-                switchMap((prefs: PreferenceModel[]) => of$(getSidebarPreferenceAsBool(prefs, Preferences.CHANNEL_SIDEBAR_GROUP_UNREADS))),
-            ),
-        onlyUnreads: observeOnlyUnreads(database),
         unreadsAndMentions: currentTeamId.pipe(
             switchMap(
                 (teamId) => observeUnreadsAndMentionsInTeam(database, teamId),

app/components/threads_button/threads_button.test.tsx

@@ -9,8 +9,6 @@ import Threads from './threads_button';
 
 const baseProps = {
     currentChannelId: 'someChannelId',
-    groupUnreadsSeparately: true,
-    onlyUnreads: false,
     unreadsAndMentions: {
         unreads: false,
         mentions: 0,
@@ -25,17 +23,6 @@ describe('Thread item in the channel list', () => {
         expect(toJSON()).toMatchSnapshot();
     });
 
-    test('Threads Component should match snapshot with only unreads filter', () => {
-        const {toJSON} = renderWithIntlAndTheme(
-            <Threads
-                {...baseProps}
-                onlyUnreads={true}
-            />,
-        );
-
-        expect(toJSON()).toMatchSnapshot();
-    });
-
     test('Threads Component should match snapshot with onCenterBg', () => {
         const {toJSON} = renderWithIntlAndTheme(
             <Threads
@@ -46,16 +33,4 @@ describe('Thread item in the channel list', () => {
 
         expect(toJSON()).toMatchSnapshot();
     });
-
-    test('Threads Component should match snapshot, groupUnreadsSeparately false, always show', () => {
-        const {toJSON} = renderWithIntlAndTheme(
-            <Threads
-                {...baseProps}
-                groupUnreadsSeparately={false}
-                onlyUnreads={true}
-            />,
-        );
-
-        expect(toJSON()).toMatchSnapshot();
-    });
 });

app/components/threads_button/threads_button.tsx

@@ -39,9 +39,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
 
 type Props = {
     currentChannelId: string;
-    groupUnreadsSeparately: boolean;
     onCenterBg?: boolean;
-    onlyUnreads: boolean;
     onPress?: () => void;
     shouldHighlighActive?: boolean;
     unreadsAndMentions: {
@@ -53,9 +51,7 @@ type Props = {
 
 const ThreadsButton = ({
     currentChannelId,
-    groupUnreadsSeparately,
     onCenterBg,
-    onlyUnreads,
     onPress,
     unreadsAndMentions,
     shouldHighlighActive = false,
@@ -113,10 +109,6 @@ const ThreadsButton = ({
         return [container, icon, text, badge];
     }, [customStyles, isActive, onCenterBg, styles, unreads, isOnHome]);
 
-    if (groupUnreadsSeparately && (onlyUnreads && !isActive && !unreads && !mentions)) {
-        return null;
-    }
-
     return (
         <TouchableOpacity
             onPress={handlePress}

app/screens/home/channel_list/categories_list/categories/categories.tsx

@@ -49,17 +49,21 @@ const Categories = ({
     const isTablet = useIsTablet();
     const switchingTeam = useTeamSwitch();
     const teamId = categories[0]?.teamId;
+    const showOnlyUnreadsCategory = onlyUnreads && !unreadsOnTop;
+
     const categoriesToShow = useMemo(() => {
-        if (onlyUnreads && !unreadsOnTop) {
+        if (showOnlyUnreadsCategory) {
             return ['UNREADS' as const];
         }
+
         const orderedCategories = [...categories];
         orderedCategories.sort((a, b) => a.sortOrder - b.sortOrder);
+
         if (unreadsOnTop) {
             return ['UNREADS' as const, ...orderedCategories];
         }
         return orderedCategories;
-    }, [categories, onlyUnreads, unreadsOnTop]);
+    }, [categories, unreadsOnTop, showOnlyUnreadsCategory]);
 
     const [initiaLoad, setInitialLoad] = useState(!categoriesToShow.length);
 
@@ -74,7 +78,7 @@ const Categories = ({
                     currentTeamId={teamId}
                     isTablet={isTablet}
                     onChannelSwitch={onChannelSwitch}
-                    onlyUnreads={onlyUnreads}
+                    onlyUnreads={showOnlyUnreadsCategory}
                 />
             );
         }
@@ -89,7 +93,7 @@ const Categories = ({
                 />
             </>
         );
-    }, [teamId, intl.locale, isTablet, onChannelSwitch, onlyUnreads]);
+    }, [teamId, intl.locale, isTablet, onChannelSwitch, showOnlyUnreadsCategory]);
 
     useEffect(() => {
         const t = setTimeout(() => {
@@ -105,17 +109,17 @@ const Categories = ({
 
     return (
         <>
-            {!switchingTeam && !initiaLoad && onlyUnreads &&
+            {!switchingTeam && !initiaLoad && showOnlyUnreadsCategory &&
             <View style={styles.mainList}>
                 <UnreadCategories
                     currentTeamId={teamId}
                     isTablet={isTablet}
                     onChannelSwitch={onChannelSwitch}
-                    onlyUnreads={onlyUnreads}
+                    onlyUnreads={showOnlyUnreadsCategory}
                 />
             </View>
             }
-            {!switchingTeam && !initiaLoad && !onlyUnreads && (
+            {!switchingTeam && !initiaLoad && !showOnlyUnreadsCategory && (
                 <FlatList
                     data={categoriesToShow}
                     ref={listRef}