diff --git a/app/components/channel_list/categories/body/category_body.tsx b/app/components/channel_list/categories/body/category_body.tsx index 605e16e090..38f3787a94 100644 --- a/app/components/channel_list/categories/body/category_body.tsx +++ b/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 ( { return ( & { 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(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, };