From 94f1598455a13d63829c7fa671da317c776d1f3e Mon Sep 17 00:00:00 2001
From: Jason Frerich <jason.frerich@mattermost.com>
Date: Tue, 13 Sep 2022 17:38:39 -0500
Subject: [PATCH] [Gekidou MM-45046] Always show threads button when filtered
 and unfiltered (#6635)

---
 .../threads_button.test.tsx.snap              | 82 +++++++++++++++++++
 .../categories_list/threads_button/index.ts   | 10 +++
 .../threads_button/threads_button.test.tsx    | 38 +++++----
 .../threads_button/threads_button.tsx         |  5 +-
 4 files changed, 119 insertions(+), 16 deletions(-)

diff --git a/app/screens/home/channel_list/categories_list/threads_button/__snapshots__/threads_button.test.tsx.snap b/app/screens/home/channel_list/categories_list/threads_button/__snapshots__/threads_button.test.tsx.snap
index 549ce44373..95e26fe5ef 100644
--- a/app/screens/home/channel_list/categories_list/threads_button/__snapshots__/threads_button.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/threads_button/__snapshots__/threads_button.test.tsx.snap
@@ -83,3 +83,85 @@ exports[`Thread item in the channel list Threads Component should match snapshot
 `;
 
 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
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+  testID="channel_list.threads.button"
+>
+  <View
+    style={
+      Object {
+        "marginLeft": -18,
+        "marginRight": -20,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "minHeight": 40,
+            "paddingHorizontal": 20,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Icon
+        name="message-text-outline"
+        style={
+          Array [
+            Object {
+              "color": "rgba(255,255,255,0.5)",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+      />
+      <Text
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            Object {
+              "fontFamily": "OpenSans",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
+            },
+            Object {
+              "color": "rgba(255,255,255,0.72)",
+              "marginTop": -1,
+              "paddingLeft": 12,
+              "paddingRight": 20,
+            },
+            undefined,
+            undefined,
+          ]
+        }
+      >
+        Threads
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/app/screens/home/channel_list/categories_list/threads_button/index.ts b/app/screens/home/channel_list/categories_list/threads_button/index.ts
index cd0bcec098..657eb1f106 100644
--- a/app/screens/home/channel_list/categories_list/threads_button/index.ts
+++ b/app/screens/home/channel_list/categories_list/threads_button/index.ts
@@ -3,8 +3,13 @@
 
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
+import {of as of$} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 
+import Preferences from '@app/constants/preferences';
+import {PreferenceModel} from '@app/database/models/server';
+import {queryPreferencesByCategoryAndName} from '@app/queries/servers/preference';
+import {getPreferenceAsBool} from '@helpers/api/preference';
 import {observeCurrentChannelId, observeCurrentTeamId, observeOnlyUnreads} from '@queries/servers/system';
 import {observeUnreadsAndMentionsInTeam} from '@queries/servers/thread';
 
@@ -17,6 +22,11 @@ const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
 
     return {
         currentChannelId: observeCurrentChannelId(database),
+        groupUnreadsSeparately: queryPreferencesByCategoryAndName(database, Preferences.CATEGORY_SIDEBAR_SETTINGS, Preferences.CHANNEL_SIDEBAR_GROUP_UNREADS).
+            observeWithColumns(['value']).
+            pipe(
+                switchMap((prefs: PreferenceModel[]) => of$(getPreferenceAsBool(prefs, Preferences.CATEGORY_SIDEBAR_SETTINGS, Preferences.CHANNEL_SIDEBAR_GROUP_UNREADS, false))),
+            ),
         onlyUnreads: observeOnlyUnreads(database),
         unreadsAndMentions: currentTeamId.pipe(
             switchMap(
diff --git a/app/screens/home/channel_list/categories_list/threads_button/threads_button.test.tsx b/app/screens/home/channel_list/categories_list/threads_button/threads_button.test.tsx
index 630a62e91e..c89b80180c 100644
--- a/app/screens/home/channel_list/categories_list/threads_button/threads_button.test.tsx
+++ b/app/screens/home/channel_list/categories_list/threads_button/threads_button.test.tsx
@@ -7,31 +7,41 @@ import {renderWithIntlAndTheme} from '@test/intl-test-helper';
 
 import Threads from './threads_button';
 
+const baseProps = {
+    currentChannelId: 'someChannelId',
+    groupUnreadsSeparately: true,
+    onlyUnreads: false,
+    unreadsAndMentions: {
+        unreads: false,
+        mentions: 0,
+    },
+};
+
 describe('Thread item in the channel list', () => {
     test('Threads Component should match snapshot', () => {
         const {toJSON} = renderWithIntlAndTheme(
-            <Threads
-                currentChannelId='someChannelId'
-                onlyUnreads={false}
-                unreadsAndMentions={{
-                    unreads: false,
-                    mentions: 0,
-                }}
-            />,
+            <Threads {...baseProps}/>,
         );
-
         expect(toJSON()).toMatchSnapshot();
     });
 
     test('Threads Component should match snapshot with only unreads filter', () => {
         const {toJSON} = renderWithIntlAndTheme(
             <Threads
-                currentChannelId='someChannelId'
+                {...baseProps}
+                onlyUnreads={true}
+            />,
+        );
+
+        expect(toJSON()).toMatchSnapshot();
+    });
+
+    test('Threads Component should match snapshot, groupUnreadsSeparately false, always show', () => {
+        const {toJSON} = renderWithIntlAndTheme(
+            <Threads
+                {...baseProps}
+                groupUnreadsSeparately={false}
                 onlyUnreads={true}
-                unreadsAndMentions={{
-                    unreads: false,
-                    mentions: 0,
-                }}
             />,
         );
 
diff --git a/app/screens/home/channel_list/categories_list/threads_button/threads_button.tsx b/app/screens/home/channel_list/categories_list/threads_button/threads_button.tsx
index fba41e1522..bf1fce63a5 100644
--- a/app/screens/home/channel_list/categories_list/threads_button/threads_button.tsx
+++ b/app/screens/home/channel_list/categories_list/threads_button/threads_button.tsx
@@ -38,13 +38,14 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
 type Props = {
     currentChannelId: string;
     onlyUnreads: boolean;
+    groupUnreadsSeparately: boolean;
     unreadsAndMentions: {
         unreads: boolean;
         mentions: number;
     };
 };
 
-const ThreadsButton = ({currentChannelId, onlyUnreads, unreadsAndMentions}: Props) => {
+const ThreadsButton = ({currentChannelId, groupUnreadsSeparately, onlyUnreads, unreadsAndMentions}: Props) => {
     const isTablet = useIsTablet();
     const serverUrl = useServerUrl();
 
@@ -81,7 +82,7 @@ const ThreadsButton = ({currentChannelId, onlyUnreads, unreadsAndMentions}: Prop
         return [container, icon, text];
     }, [customStyles, isActive, styles, unreads]);
 
-    if (onlyUnreads && !isActive && !unreads && !mentions) {
+    if (groupUnreadsSeparately && (onlyUnreads && !isActive && !unreads && !mentions)) {
         return null;
     }