WIP

app/screens/convert_gm_to_channel/convert_gm_to_channel.tsx

@@ -8,6 +8,7 @@ import {useServerUrl} from '@app/context/server';
 
 import {ConvertGMToChannelForm} from './convert_gm_to_channel_form';
 import {Loader} from './loader';
+import { logDebug } from '@app/utils/log';
 
 type Props = {
     channelId: string;
@@ -39,7 +40,7 @@ const ConvertGMToChannel = (props: Props) => {
         work();
     }, []);
 
-    const showLoader = !loadingAnimationTimeout && !commonTeamsFetched;
+    const showLoader = !loadingAnimationTimeout || !commonTeamsFetched;
     if (showLoader) {
         return (<Loader/>);
     }

app/screens/convert_gm_to_channel/convert_gm_to_channel_form.tsx

@@ -12,6 +12,7 @@ import Button from '@components/button';
 import {ChannelNameInput} from './channel_name_input';
 import {MessageBox} from './message_box';
 import {TeamSelector} from './team_selector';
+import { logDebug } from '@app/utils/log';
 
 const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
     return {

app/screens/convert_gm_to_channel/team_selector.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import {useIntl} from 'react-intl';
 import {Platform} from 'react-native';
 
@@ -36,18 +36,24 @@ export const TeamSelector = ({commonTeams}: Props) => {
 
     const placeholder = formatMessage({id: 'channel_into.convert_gm_to_channel.team_selector.placeholder', defaultMessage: 'Select a Team'});
 
+    const [selectedTeam, setSelectedTeam] = useState('');
+
+    const selectTeam = useCallback((teamId: string) => {
+        setSelectedTeam(teamId);
+    }, []);
+
     const goToTeamSelectorList = preventDoubleTap(async () => {
         await dismissBottomSheet();
 
         const title = formatMessage({id: 'channel_info.convert_gm_to_channel.team_selector_list.title', defaultMessage: 'Select Team'});
-        goToScreen(Screens.TEAM_SELECTOR_LIST, title, {teans: commonTeams});
+        goToScreen(Screens.TEAM_SELECTOR_LIST, title, {teams: commonTeams, selectTeam});
     });
 
     return (
         <OptionItem
             action={goToTeamSelectorList}
             containerStyle={styles.teamSelector}
-            label={label}
+            label={`${label} - ${selectedTeam}`}
             type={Platform.select({ios: 'arrow', default: 'default'})}
             info={placeholder}
         />

app/screens/convert_gm_to_channel/team_selector_list/team_selector_list.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useMemo} from 'react';
-import {View} from 'react-native';
+import {Text, View} from 'react-native';
 
 import {useTheme} from '@app/context/theme';
 import {changeOpacity, getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme} from '@app/utils/theme';
@@ -10,20 +10,19 @@ import SearchBar from '@components/search';
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
-
-    },
-    inputContainerStyle: {
-
-    },
-    inputStyle: {
-
+        padding: 12,
     },
     listContainer: {
 
     },
 }));
 
-const TeamSelectorList = () => {
+type Props = {
+    teams: Team[];
+    selectTeam: (teamId: string) => void;
+}
+
+const TeamSelectorList = ({teams, selectTeam}: Props) => {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
 
@@ -38,7 +37,15 @@ const TeamSelectorList = () => {
                 placeholderTextColor={color}
                 searchIconColor={color}
                 testID='convert_gm_to_channel_team_search_bar'
+                onChangeText={selectTeam}
             />
+            <View style={styles.listContainer}>
+                {
+                    teams.map((team) => (
+                        <Text key={team.id}>{team.name}</Text>
+                    ))
+                }
+            </View>
         </View>
     );
 };