diff --git a/app/components/selected_users/index.tsx b/app/components/selected_users/index.tsx index fda1eaa91..98ff1ee62 100644 --- a/app/components/selected_users/index.tsx +++ b/app/components/selected_users/index.tsx @@ -121,7 +121,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { shadowRadius: 24, }, toast: { - backgroundColor: theme.centerChannelColor, + backgroundColor: theme.errorTextColor, }, usersScroll: { marginTop: SCROLL_MARGIN_TOP, @@ -133,7 +133,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { flexWrap: 'wrap', }, message: { - color: changeOpacity(theme.centerChannelColor, 0.6), + color: theme.centerChannelBg, fontSize: 12, marginRight: 5, marginTop: 10, @@ -250,11 +250,11 @@ export default function SelectedUsers({ const animatedToastStyle = useAnimatedStyle(() => { return { - bottom: TOAST_BOTTOM_MARGIN + totalPanelHeight.value, + bottom: TOAST_BOTTOM_MARGIN + totalPanelHeight.value + insets.bottom, opacity: withTiming(showToast ? 1 : 0, {duration: 250}), position: 'absolute', }; - }, [showToast, keyboard]); + }, [showToast, insets.bottom]); const animatedViewStyle = useAnimatedStyle(() => ({ height: withTiming(totalPanelHeight.value, {duration: 250}), diff --git a/app/screens/thread/thread.tsx b/app/screens/thread/thread.tsx index 10a361243..d35bdf19c 100644 --- a/app/screens/thread/thread.tsx +++ b/app/screens/thread/thread.tsx @@ -1,6 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. +import {uniqueId} from 'lodash'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {type LayoutChangeEvent, StyleSheet, View} from 'react-native'; import {type Edge, SafeAreaView} from 'react-native-safe-area-context'; @@ -62,11 +63,12 @@ const Thread = ({ useEffect(() => { if (isCRTEnabled && rootId) { + const id = `${componentId}-${rootId}-${uniqueId()}`; + const name = Screens.THREAD_FOLLOW_BUTTON; setButtons(componentId, {rightButtons: [{ - id: `${componentId}-${rootId}`, + id, component: { - id: rootId, - name: Screens.THREAD_FOLLOW_BUTTON, + name, passProps: { threadId: rootId, }, diff --git a/app/screens/thread/thread_follow_button/index.ts b/app/screens/thread/thread_follow_button/index.ts index bc1af92d8..fd8ee7092 100644 --- a/app/screens/thread/thread_follow_button/index.ts +++ b/app/screens/thread/thread_follow_button/index.ts @@ -19,14 +19,21 @@ type Props = WithDatabaseArgs & { const enhanced = withObservables(['threadId'], ({threadId, database}: Props) => { const thId = threadId || EphemeralStore.getCurrentThreadId(); - const tId = observeTeamIdByThreadId(database, thId).pipe( - switchMap((t) => of$(t || '')), - ); + let tId = of$(''); + let isFollowing = of$(false); + + if (thId) { + tId = observeTeamIdByThreadId(database, thId).pipe( + switchMap((t) => of$(t || '')), + ); + + isFollowing = observeThreadById(database, thId).pipe( + switchMap((thread) => of$(thread?.isFollowing)), + ); + } return { - isFollowing: observeThreadById(database, thId).pipe( - switchMap((thread) => of$(thread?.isFollowing)), - ), + isFollowing, threadId: of$(thId), teamId: tId, }; diff --git a/app/screens/thread/thread_follow_button/thread_follow_button.tsx b/app/screens/thread/thread_follow_button/thread_follow_button.tsx index 22b723924..4ab2a1066 100644 --- a/app/screens/thread/thread_follow_button/thread_follow_button.tsx +++ b/app/screens/thread/thread_follow_button/thread_follow_button.tsx @@ -59,6 +59,10 @@ function ThreadFollow({isFollowing, teamId, threadId}: Props) { updateThreadFollowing(serverUrl, teamId, threadId, !isFollowing, false); }); + if (!threadId) { + return null; + } + const containerStyle: StyleProp = [styles.container]; let followTextProps = { id: t('threads.follow'),