Review fixes

app/actions/websocket/channel.ts

@@ -7,7 +7,7 @@ import {
     storeMyChannelsForTeam, updateChannelInfoFromChannel, updateMyChannelFromWebsocket,
 } from '@actions/local/channel';
 import {storePostsForChannel} from '@actions/local/post';
-import {fetchMissingDirectChannelsInfo, fetchMyChannel, fetchChannelStats, fetchChannelById, handleKickFromChannel, switchToChannelById} from '@actions/remote/channel';
+import {fetchMissingDirectChannelsInfo, fetchMyChannel, fetchChannelStats, fetchChannelById, handleKickFromChannel} from '@actions/remote/channel';
 import {fetchPostsForChannel} from '@actions/remote/post';
 import {fetchRolesIfNeeded} from '@actions/remote/role';
 import {fetchUsersByIds, updateUsersNoLongerVisible} from '@actions/remote/user';
@@ -15,7 +15,7 @@ import {loadCallForChannel} from '@calls/actions/calls';
 import {Events, General} from '@constants';
 import DatabaseManager from '@database/manager';
 import {deleteChannelMembership, getChannelById, prepareMyChannelsForTeam, getCurrentChannel} from '@queries/servers/channel';
-import {getConfig, getCurrentChannelId, getCurrentTeamId} from '@queries/servers/system';
+import {getConfig, getCurrentChannelId, getCurrentTeamId, setCurrentTeamId} from '@queries/servers/system';
 import {getCurrentUser, getTeammateNameDisplay, getUserById} from '@queries/servers/user';
 import EphemeralStore from '@store/ephemeral_store';
 import MyChannelModel from '@typings/database/models/servers/my_channel';
@@ -117,10 +117,9 @@ export async function handleChannelUpdatedEvent(serverUrl: string, msg: any) {
             const currentChannelId = await getCurrentChannelId(database);
             const currentTeamId = await getCurrentTeamId(database);
 
-            // Making sure user is not only in the correct channel, but also
-            // in the correct team.
+            // Making sure user is in the correct team
             if (currentChannelId === updatedChannel.id && currentTeamId !== updatedChannel.team_id) {
-                await switchToChannelById(serverUrl, updatedChannel.id, updatedChannel.team_id);
+                await setCurrentTeamId(operator, updatedChannel.team_id);
             }
         }
     } catch {

app/components/channel_actions/convert_to_channel/convert_to_channel_label.tsx

@@ -16,7 +16,7 @@ type Props = {
 const ConvertToChannelLabel = ({channelId}: Props) => {
     const {formatMessage} = useIntl();
 
-    const goToConvertToPrivateChannl = preventDoubleTap(async () => {
+    const goToConvertToPrivateChannel = preventDoubleTap(async () => {
         await dismissBottomSheet();
         const title = formatMessage({id: 'channel_info.convert_gm_to_channel.screen_title', defaultMessage: 'Convert to Private Channel'});
         goToScreen(Screens.CONVERT_GM_TO_CHANNEL, title, {channelId});
@@ -24,7 +24,7 @@ const ConvertToChannelLabel = ({channelId}: Props) => {
 
     return (
         <OptionItem
-            action={goToConvertToPrivateChannl}
+            action={goToConvertToPrivateChannel}
             icon='lock-outline'
             label={formatMessage({id: 'channel_info.convert_gm_to_channel', defaultMessage: 'Convert to a Private Channel'})}
             type='default'

app/components/loading/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {ActivityIndicator, type StyleProp, View, type ViewStyle} from 'react-native';
+import {ActivityIndicator, type StyleProp, View, type ViewStyle, Text, type TextStyle} from 'react-native';
 
 import {useTheme} from '@context/theme';
 
@@ -11,9 +11,18 @@ type LoadingProps = {
     size?: number | 'small' | 'large';
     color?: string;
     themeColor?: keyof Theme;
+    footerText?: string;
+    footerTextStyles?: TextStyle;
 }
 
-const Loading = ({containerStyle, size, color, themeColor}: LoadingProps) => {
+const Loading = ({
+    containerStyle,
+    size,
+    color,
+    themeColor,
+    footerText,
+    footerTextStyles,
+}: LoadingProps) => {
     const theme = useTheme();
     const indicatorColor = themeColor ? theme[themeColor] : color;
 
@@ -23,6 +32,10 @@ const Loading = ({containerStyle, size, color, themeColor}: LoadingProps) => {
                 color={indicatorColor}
                 size={size}
             />
+            {
+                footerText &&
+                <Text style={footerTextStyles}>{footerText}</Text>
+            }
         </View>
     );
 };

app/constants/screens.ts

@@ -86,6 +86,7 @@ export default {
     CHANNEL_INFO,
     CHANNEL_NOTIFICATION_PREFERENCES,
     CODE,
+    CONVERT_GM_TO_CHANNEL,
     CREATE_DIRECT_MESSAGE,
     CREATE_OR_EDIT_CHANNEL,
     CREATE_TEAM,
@@ -138,13 +139,12 @@ export default {
     SNACK_BAR,
     SSO,
     TABLE,
+    TEAM_SELECTOR_LIST,
     TERMS_OF_SERVICE,
     THREAD,
     THREAD_FOLLOW_BUTTON,
     THREAD_OPTIONS,
     USER_PROFILE,
-    CONVERT_GM_TO_CHANNEL,
-    TEAM_SELECTOR_LIST,
 } as const;
 
 export const MODAL_SCREENS_WITHOUT_BACK = new Set<string>([

app/queries/servers/role.ts

@@ -74,7 +74,6 @@ export function observePermissionForTeam(database: Database, team: TeamModel | u
 
             if (myTeam) {
                 rolesArray.push(...myTeam.roles.split(' '));
-                logDebug(`myTeam.roles: ${myTeam.roles}`);
             }
 
             return queryRolesByNames(database, rolesArray).observeWithColumns(['permissions']).pipe(

app/queries/servers/system.ts

@@ -5,6 +5,7 @@ import {Database, Q} from '@nozbe/watermelondb';
 import {of as of$, Observable, combineLatest} from 'rxjs';
 import {switchMap, distinctUntilChanged} from 'rxjs/operators';
 
+import {logError} from '@app/utils/log';
 import {Preferences} from '@constants';
 import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database';
 import {PUSH_PROXY_STATUS_UNKNOWN} from '@constants/push_proxy';
@@ -434,6 +435,22 @@ export async function setCurrentChannelId(operator: ServerDataOperator, channelI
     }
 }
 
+export async function setCurrentTeamId(operator: ServerDataOperator, teamId: string) {
+    try {
+        const models = await prepareCommonSystemValues(operator, {
+            currentTeamId: teamId,
+        });
+        if (models) {
+            await operator.batchRecords(models, 'setCurrentTeamId');
+        }
+
+        return {currentTeamId: teamId};
+    } catch (error) {
+        logError(error);
+        return {error};
+    }
+}
+
 export async function setCurrentTeamAndChannelId(operator: ServerDataOperator, teamId?: string, channelId?: string) {
     try {
         const models = await prepareCommonSystemValues(operator, {

app/screens/channel_info/channel_info.tsx

@@ -5,10 +5,10 @@ import React, {useCallback} from 'react';
 import {ScrollView, View} from 'react-native';
 import {type Edge, SafeAreaView} from 'react-native-safe-area-context';
 
-import {General} from '@app/constants';
 import ChannelInfoEnableCalls from '@calls/components/channel_info_enable_calls';
 import ChannelActions from '@components/channel_actions';
 import ConvertToChannelLabel from '@components/channel_actions/convert_to_channel/convert_to_channel_label';
+import {General} from '@constants';
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';

app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx

@@ -2,13 +2,19 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect, useRef, useState} from 'react';
+import {useIntl} from 'react-intl';
 
 import {fetchChannelMemberships, getGroupMessageMembersCommonTeams} from '@actions/remote/channel';
+import Loading from '@app/components/loading';
+import {useTheme} from '@app/context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@app/utils/theme';
+import {typography} from '@app/utils/typography';
 import {PER_PAGE_DEFAULT} from '@client/rest/constants';
 import {useServerUrl} from '@context/server';
 
 import ConvertGMToChannelForm from './convert_gm_to_channel_form';
-import {Loader} from './loader';
+
+// import {Loader} from './loader';
 
 import type UserProfile from '../user_profile/user_profile';
 
@@ -19,10 +25,30 @@ type Props = {
 
 const loadingIndicatorTimeout = 1200;
 
+const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
+    return {
+        loadingContainer: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            flex: 1,
+            gap: 24,
+        },
+        text: {
+            color: changeOpacity(theme.centerChannelColor, 0.56),
+            ...typography('Body', 300, 'SemiBold'),
+        },
+    };
+});
+
 const ConvertGMToChannel = ({
     channelId,
     currentUserId,
 }: Props) => {
+    const theme = useTheme();
+    const style = getStyleFromTheme(theme);
+
+    const {formatMessage} = useIntl();
+
     const [loadingAnimationTimeout, setLoadingAnimationTimeout] = useState(false);
     const [commonTeamsFetched, setCommonTeamsFetched] = useState(false);
     const [channelMembersFetched, setChannelMembersFetched] = useState(false);
@@ -97,8 +123,17 @@ const ConvertGMToChannel = ({
     }, []);
 
     const showLoader = !loadingAnimationTimeout || !commonTeamsFetched || !channelMembersFetched;
+
     if (showLoader) {
-        return (<Loader/>);
+        return (
+            <Loading
+                containerStyle={style.loadingContainer}
+                size='large'
+                color={theme.buttonBg}
+                footerText={formatMessage({id: 'channel_info.convert_gm_to_channel.loading.footer', defaultMessage: 'Fetching details...'})}
+                footerTextStyles={style.text}
+            />
+        );
     }
 
     return (

app/screens/convert_gm_to_channel/convert_gm_to_channel_form/convert_gm_to_channel_form.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {Text, View} from 'react-native';
 
@@ -57,7 +57,7 @@ export const ConvertGMToChannelForm = ({
 
     const [selectedTeam, setSelectedTeam] = useState<Team>();
     const [newChannelName, setNewChannelName] = useState<string>('');
-    const [errorMessage, setErrorMessage] = useState<string>('Something went wrong. Failed to convert Group Message to Private Channel');
+    const [errorMessage, setErrorMessage] = useState<string>('');
 
     const submitButtonEnabled = selectedTeam && newChannelName.trim();
 
@@ -103,7 +103,7 @@ export const ConvertGMToChannelForm = ({
         defaultMessage: 'Conversation history will be visible to any channel members',
     });
 
-    const userDisplayNames = profiles.map((profile) => displayUsername(profile, locale, teammateNameDisplay));
+    const userDisplayNames = useMemo(() => profiles.map((profile) => displayUsername(profile, locale, teammateNameDisplay)), [profiles]);
     const defaultUserDisplayNames = intl.formatMessage({id: 'channel_info.convert_gm_to_channel.warning.body.yourself', defaultMessage: 'yourself'});
     const memberNames = profiles.length > 0 ? intl.formatList(userDisplayNames) : defaultUserDisplayNames;
     const messageBoxBody = intl.formatMessage({

app/screens/convert_gm_to_channel/loader.tsx

@@ -1,39 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {ActivityIndicator, Text, View} from 'react-native';
-
-import {useTheme} from '@app/context/theme';
-import {changeOpacity, makeStyleSheetFromTheme} from '@app/utils/theme';
-import {typography} from '@app/utils/typography';
-
-const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
-    return {
-        loadingContainer: {
-            justifyContent: 'center',
-            alignItems: 'center',
-            flex: 1,
-            gap: 24,
-        },
-        text: {
-            color: changeOpacity(theme.centerChannelColor, 0.56),
-            ...typography('Body', 300, 'SemiBold'),
-        },
-    };
-});
-
-export const Loader = () => {
-    const theme = useTheme();
-    const styles = getStyleFromTheme(theme);
-
-    return (
-        <View style={styles.loadingContainer}>
-            <ActivityIndicator
-                size={'large'}
-                color={theme.buttonBg}
-            />
-            <Text style={styles.text}>{'Fetching details...'}</Text>
-        </View>
-    );
-};

assets/base/i18n/en.json

@@ -1101,5 +1101,6 @@
   "channel_info.convert_gm_to_channel.button_text": "Convert to Private Channel",
   "channel_info.convert_gm_to_channel.conversion_error": "Something went wrong. Failed to convert Group Message to Private Channel.",
   "channel_info.convert_gm_to_channel.team_selector_list.title": "Select Team",
+  "channel_info.convert_gm_to_channel.loading.footer": "Fetching details...",
   "generic.back": "Back"
 }

ios/Podfile.lock

@@ -570,9 +570,9 @@ PODS:
     - React-Core
   - RNVectorIcons (10.0.0):
     - React-Core
-  - SDWebImage (5.18.2):
-    - SDWebImage/Core (= 5.18.2)
-  - SDWebImage/Core (5.18.2)
+  - SDWebImage (5.18.3):
+    - SDWebImage/Core (= 5.18.3)
+  - SDWebImage/Core (5.18.3)
   - SDWebImageWebPCoder (0.13.0):
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.17)
@@ -986,7 +986,7 @@ SPEC CHECKSUMS:
   RNShare: da6d90b6dc332f51f86498041d6e34211f96b630
   RNSVG: 03e4d258ca355d7836a0a5dd4d4dc63c1eb49cbb
   RNVectorIcons: 8b5bb0fa61d54cd2020af4f24a51841ce365c7e9
-  SDWebImage: c0de394d7cf7f9838aed1fd6bb6037654a4572e4
+  SDWebImage: 96e0c18ef14010b7485210e92fac888587ebb958
   SDWebImageWebPCoder: af09429398d99d524cae2fe00f6f0f6e491ed102
   Sentry: 56c76eed917f7dffd46db50906afbf5c9aa2673a
   SentryPrivate: f3be34b5deb9fe676fdfb1f1ad5cdb1b740c5688
@@ -1001,4 +1001,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 25f07cb9e5eed8c84db8e8723000e8470c349058
 
-COCOAPODS: 1.14.2
+COCOAPODS: 1.14.2