From 2a641afc669857cf50d554ebe9e3d0ff251f654d Mon Sep 17 00:00:00 2001 From: Anurag Shivarathri Date: Thu, 29 Jul 2021 18:43:56 +0530 Subject: [PATCH] MM-37456 "Threads" item in the sidebar should not scroll (#5575) * Made threads item as static * Updated snapshot * Moved from Text to FormattedText * Updated snapshot .. AGAIN * Removed 8px margin bottom from threads sidebar item --- .../list/__snapshots__/list.test.js.snap | 10 +++ .../sidebars/main/channels_list/list/index.js | 1 - .../sidebars/main/channels_list/list/list.js | 28 ++++----- .../main/threads_entry/threads_entry.tsx | 61 +++++++++---------- app/constants/view.js | 1 - app/mm-redux/selectors/entities/channels.ts | 10 +-- 6 files changed, 52 insertions(+), 59 deletions(-) diff --git a/app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap b/app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap index aac21063f..e829cddbb 100644 --- a/app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap +++ b/app/components/sidebars/main/channels_list/list/__snapshots__/list.test.js.snap @@ -4,6 +4,7 @@ exports[`ChannelsList List should match snapshot 1`] = ` + + { - if (section.id === 'sidebar.threads') { - return ( - - ); - } + renderItem = ({item}) => { const {testID, favoriteChannelIds, unreadChannelIds} = this.props; const channelItemTestID = `${testID}.channel_item`; @@ -346,10 +336,6 @@ export default class List extends PureComponent { const {intl} = this.context; const {action, defaultMessage, id} = section; - if (id === 'sidebar.threads') { - return null; - } - const anchor = (id === 'sidebar.types.recent' || id === 'mobile.channel_list.channels'); return ( @@ -414,16 +400,24 @@ export default class List extends PureComponent { }; render() { + const collapsedThreadsEnabled = true; const {testID, styles, theme} = this.props; const {sections, showIndicator} = this.state; const paddingBottom = this.listContentPadding(); + const indicatorStyle = [styles.above]; + if (collapsedThreadsEnabled) { + indicatorStyle.push({marginTop: 70}); + } return ( + {collapsedThreadsEnabled && ( + + )} } diff --git a/app/components/sidebars/main/threads_entry/threads_entry.tsx b/app/components/sidebars/main/threads_entry/threads_entry.tsx index b7b675ff0..7d772da2e 100644 --- a/app/components/sidebars/main/threads_entry/threads_entry.tsx +++ b/app/components/sidebars/main/threads_entry/threads_entry.tsx @@ -2,11 +2,11 @@ // See LICENSE.txt for license information. import React, {useEffect} from 'react'; -import {injectIntl, intlShape} from 'react-intl'; -import {TouchableHighlight, Text, View} from 'react-native'; +import {TouchableHighlight, View} from 'react-native'; import Badge from '@components/badge'; import CompassIcon from '@components/compass_icon'; +import FormattedText from '@components/formatted_text'; import {getStyleSheet} from '@components/sidebars/main/channels_list/channel_item/channel_item'; import {NavigationTypes} from '@constants'; import EventEmitter from '@mm-redux/utils/event_emitter'; @@ -27,10 +27,9 @@ type Props = { }; currentTeamId: $ID; currentUserId: $ID; - intl: typeof intlShape; isUnreadSelected: boolean; theme: Theme; - threadCount: ThreadsState['counts']; + threadCount: ThreadsState['counts'][$ID]; viewingGlobalThreads: boolean; }; @@ -38,7 +37,6 @@ const ThreadsEntry = ({ actions, currentTeamId, currentUserId, - intl, isUnreadSelected, theme, threadCount, @@ -97,40 +95,41 @@ const ThreadsEntry = ({ }, [extraStyle, style, threadCount?.total_unread_mentions, threadCount?.total_unread_threads, viewingGlobalThreads]); return ( - - - {border} - - - + + + {border} + + + + + + {badge} - - {intl.formatMessage({ - id: 'threads', - defaultMessage: 'Threads', - })} - - {badge} - - + + ); }; const getExtraStyleSheet = makeStyleFromTheme((theme: Theme) => { return { - container: { + baseContainer: { marginTop: 16, + marginBottom: 4, + }, + container: { + flex: 0, // Override the existing flex: 1 }, iconContainer: { alignItems: 'center', @@ -145,4 +144,4 @@ const getExtraStyleSheet = makeStyleFromTheme((theme: Theme) => { }; }); -export default injectIntl(ThreadsEntry); +export default ThreadsEntry; diff --git a/app/constants/view.js b/app/constants/view.js index cc359a515..1fe228cf5 100644 --- a/app/constants/view.js +++ b/app/constants/view.js @@ -16,7 +16,6 @@ export const SidebarSectionTypes = { DIRECT: 'direct', RECENT_ACTIVITY: 'recent', ALPHA: 'alpha', - THREADS: 'threads', }; export const NotificationLevels = { diff --git a/app/mm-redux/selectors/entities/channels.ts b/app/mm-redux/selectors/entities/channels.ts index a344d4fdd..728a7664b 100644 --- a/app/mm-redux/selectors/entities/channels.ts +++ b/app/mm-redux/selectors/entities/channels.ts @@ -842,7 +842,7 @@ const hasChannelsChanged = (channels: {type: string;name: string;items: string[] return false; }; -export const getOrderedChannelIds = (state: GlobalState, lastUnreadChannel: Channel|null, grouping: 'by_type' | 'none', sorting: SortingType, unreadsAtTop: boolean, favoritesAtTop: boolean, collapsedThreadsEnabled: boolean) => { +export const getOrderedChannelIds = (state: GlobalState, lastUnreadChannel: Channel|null, grouping: 'by_type' | 'none', sorting: SortingType, unreadsAtTop: boolean, favoritesAtTop: boolean) => { const channels: {type: string;name: string;items: string[]}[] = []; if (grouping === 'by_type') { @@ -894,14 +894,6 @@ export const getOrderedChannelIds = (state: GlobalState, lastUnreadChannel: Chan }); } - if (collapsedThreadsEnabled) { - channels.unshift(({ - type: 'threads', - name: 'THREADS', - items: [''], - })); - } - if (hasChannelsChanged(channels)) { lastChannels = channels; }