From 21a4f606b4182f85de8594f84192ef1485e2a012 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Tue, 20 Jun 2023 09:37:24 +0200 Subject: [PATCH] Add badge to thread screen (#7404) * Add mention badge to global threads and threads screens * Tablet fix * Remove changes on Thread screen --- app/actions/remote/channel.ts | 2 +- .../other_mentions_badge/index.tsx | 13 +++++++++---- app/screens/channel/header/header.tsx | 2 +- app/screens/global_threads/global_threads.tsx | 11 +++++++++++ 4 files changed, 22 insertions(+), 6 deletions(-) rename app/{screens/channel/header => components}/other_mentions_badge/index.tsx (87%) diff --git a/app/actions/remote/channel.ts b/app/actions/remote/channel.ts index 212e19c83..9d1f429b6 100644 --- a/app/actions/remote/channel.ts +++ b/app/actions/remote/channel.ts @@ -7,7 +7,6 @@ import {DeviceEventEmitter} from 'react-native'; import {addChannelToDefaultCategory, storeCategories} from '@actions/local/category'; import {markChannelAsViewed, removeCurrentUserFromChannel, setChannelDeleteAt, storeMyChannelsForTeam, switchToChannel} from '@actions/local/channel'; import {switchToGlobalThreads} from '@actions/local/thread'; -import {getIsCRTEnabled} from '@app/queries/servers/thread'; import {loadCallForChannel} from '@calls/actions/calls'; import {DeepLink, Events, General, Preferences, Screens} from '@constants'; import DatabaseManager from '@database/manager'; @@ -20,6 +19,7 @@ import {prepareMyChannelsForTeam, getChannelById, getChannelByName, getMyChannel import {queryDisplayNamePreferences} from '@queries/servers/preference'; import {getCommonSystemValues, getConfig, getCurrentChannelId, getCurrentTeamId, getCurrentUserId, getLicense, setCurrentChannelId, setCurrentTeamAndChannelId} from '@queries/servers/system'; import {getNthLastChannelFromTeam, getMyTeamById, getTeamByName, queryMyTeams, removeChannelFromTeamHistory} from '@queries/servers/team'; +import {getIsCRTEnabled} from '@queries/servers/thread'; import {getCurrentUser} from '@queries/servers/user'; import {dismissAllModalsAndPopToRoot} from '@screens/navigation'; import EphemeralStore from '@store/ephemeral_store'; diff --git a/app/screens/channel/header/other_mentions_badge/index.tsx b/app/components/other_mentions_badge/index.tsx similarity index 87% rename from app/screens/channel/header/other_mentions_badge/index.tsx rename to app/components/other_mentions_badge/index.tsx index 3beda4db7..0556af363 100644 --- a/app/screens/channel/header/other_mentions_badge/index.tsx +++ b/app/components/other_mentions_badge/index.tsx @@ -1,10 +1,12 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useRef, useState} from 'react'; import {StyleSheet, View} from 'react-native'; import Badge from '@components/badge'; +import {Screens} from '@constants'; +import {useServerUrl} from '@context/server'; import {subscribeAllServers} from '@database/subscription/servers'; import {subscribeMentionsByServer} from '@database/subscription/unreads'; @@ -27,9 +29,9 @@ const styles = StyleSheet.create({ }, }); -const subscriptions: Map = new Map(); - const OtherMentionsBadge = ({channelId}: Props) => { + const currentServerUrl = useServerUrl(); + const subscriptions: Map = useRef(new Map()).current; const [count, setCount] = useState(0); const updateCount = () => { @@ -50,7 +52,10 @@ const OtherMentionsBadge = ({channelId}: Props) => { } } - unreads.mentions = mentions + threadMentionCount; + unreads.mentions = mentions; + if (serverUrl !== currentServerUrl || channelId !== Screens.GLOBAL_THREADS) { + unreads.mentions += threadMentionCount; + } subscriptions.set(serverUrl, unreads); updateCount(); } diff --git a/app/screens/channel/header/header.tsx b/app/screens/channel/header/header.tsx index 0a7a779e5..7d83a064a 100644 --- a/app/screens/channel/header/header.tsx +++ b/app/screens/channel/header/header.tsx @@ -11,6 +11,7 @@ import CompassIcon from '@components/compass_icon'; import CustomStatusEmoji from '@components/custom_status/custom_status_emoji'; import NavigationHeader from '@components/navigation_header'; import {ITEM_HEIGHT} from '@components/option_item'; +import OtherMentionsBadge from '@components/other_mentions_badge'; import RoundedHeaderContext from '@components/rounded_header_context'; import {General, Screens} from '@constants'; import {useTheme} from '@context/theme'; @@ -23,7 +24,6 @@ import {preventDoubleTap} from '@utils/tap'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; -import OtherMentionsBadge from './other_mentions_badge'; import QuickActions, {MARGIN, SEPARATOR_HEIGHT} from './quick_actions'; import type {HeaderRightButton} from '@components/navigation_header/header'; diff --git a/app/screens/global_threads/global_threads.tsx b/app/screens/global_threads/global_threads.tsx index fac693f78..3102a6065 100644 --- a/app/screens/global_threads/global_threads.tsx +++ b/app/screens/global_threads/global_threads.tsx @@ -8,7 +8,9 @@ import {type Edge, SafeAreaView} from 'react-native-safe-area-context'; import {setGlobalThreadsTab} from '@actions/local/systems'; import NavigationHeader from '@components/navigation_header'; +import OtherMentionsBadge from '@components/other_mentions_badge'; import RoundedHeaderContext from '@components/rounded_header_context'; +import {Screens} from '@constants'; import {useServerUrl} from '@context/server'; import useAndroidHardwareBackHandler from '@hooks/android_back_handler'; import {useIsTablet} from '@hooks/device'; @@ -49,6 +51,14 @@ const GlobalThreads = ({componentId, globalThreadsTab}: Props) => { return {flex: 1, marginTop}; }, [defaultHeight]); + const headerLeftComponent = useMemo(() => { + if (isTablet) { + return undefined; + } + + return (); + }, [isTablet]); + useEffect(() => { mounted.current = true; return () => { @@ -85,6 +95,7 @@ const GlobalThreads = ({componentId, globalThreadsTab}: Props) => { defaultMessage: 'Threads', }) } + leftComponent={headerLeftComponent} />