Adds DM/GM limit based on pref (#6074)

* Adds DM/GM limit based on pref

* PR Feedback

* Memoized ids

app/components/channel_list/categories/body/category_body.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {FlatList} from 'react-native';
 
 import ChannelListItem from './channel';
@@ -12,11 +12,19 @@ type Props = {
     currentChannelId: string;
     sortedIds: string[];
     category: CategoryModel;
+    limit: number;
 };
 
 const extractKey = (item: string) => item;
 
-const CategoryBody = ({currentChannelId, sortedIds, category}: Props) => {
+const CategoryBody = ({currentChannelId, sortedIds, category, limit}: Props) => {
+    const ids = useMemo(() => {
+        if (category.type === 'direct_messages' && limit > 0) {
+            return sortedIds.slice(0, limit - 1);
+        }
+        return sortedIds;
+    }, [category.type, limit]);
+
     const ChannelItem = useCallback(({item}: {item: string}) => {
         return (
             <ChannelListItem
@@ -29,7 +37,7 @@ const CategoryBody = ({currentChannelId, sortedIds, category}: Props) => {
 
     return (
         <FlatList
-            data={sortedIds}
+            data={ids}
             renderItem={ChannelItem}
             keyExtractor={extractKey}
             removeClippedSubviews={true}

app/components/channel_list/categories/body/index.ts

@@ -8,7 +8,7 @@ import {combineLatest, of as of$} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 
 import {MM_TABLES} from '@app/constants/database';
-import {General} from '@constants';
+import {General, Preferences} from '@constants';
 import {WithDatabaseArgs} from '@typings/database/database';
 
 import CategoryBody from './category_body';
@@ -16,12 +16,13 @@ import CategoryBody from './category_body';
 import type CategoryModel from '@typings/database/models/servers/category';
 import type ChannelModel from '@typings/database/models/servers/channel';
 import type MyChannelSettingsModel from '@typings/database/models/servers/my_channel_settings';
+import type PreferenceModel from '@typings/database/models/servers/preference';
 
 type ChannelData = Pick<ChannelModel, 'id' | 'displayName'> & {
     isMuted: boolean;
 };
 
-const {SERVER: {MY_CHANNEL_SETTINGS}} = MM_TABLES;
+const {SERVER: {MY_CHANNEL_SETTINGS, PREFERENCE}} = MM_TABLES;
 
 const sortAlpha = (locale: string, a: ChannelData, b: ChannelData) => {
     if (a.isMuted && !b.isMuted) {
@@ -87,7 +88,27 @@ const enhance = withObservables(['category'], ({category, locale, database}: {ca
         switchMap((c) => getSortedIds(database, c, locale)),
     );
 
+    let limit = of$(0);
+    if (category.type === 'direct_messages') {
+        limit = database.get<PreferenceModel>(PREFERENCE).
+            query(
+                Q.where('category', Preferences.CATEGORY_SIDEBAR_SETTINGS),
+                Q.where('name', 'limit_visible_dms_gms'),
+            ).observe().pipe(
+                switchMap(
+                    (val) => {
+                        if (val[0]) {
+                            return of$(parseInt(val[0].value, 10));
+                        }
+
+                        return of$(0);
+                    },
+                ),
+            );
+    }
+
     return {
+        limit,
         sortedIds,
         category: observedCategory,
     };