WIP

app/components/no_results_with_term/index.tsx

@@ -50,7 +50,7 @@ const NoResultsWithTerm = ({term, type}: Props) => {
 
     useEffect(() => {
         setTitleId(type === TabTypes.FILES ? t('mobile.no_results_with_term.files') : t('mobile.no_results_with_term.messages'));
-        setDefaultMessage(type === TabTypes.FILES ? 'No files matching “{term}”' : 'No matches found for “{term}”');
+        setDefaultMessage(type === TabTypes.FILES ? 'No files matching “{term}”' : 'No matches fzxcxcound for “{term}”');
     }, [type]);
 
     return (

app/components/team_list/index.tsx

@@ -11,6 +11,7 @@ import Loading from '@components/loading';
 import TeamListItem from './team_list_item';
 
 import type TeamModel from '@typings/database/models/servers/team';
+import { logDebug } from '@app/utils/log';
 
 type Props = {
     iconBackgroundColor?: string;
@@ -68,6 +69,8 @@ export default function TeamList({
         footer = (<Loading/>);
     }
 
+    logDebug(teams);
+
     return (
         <View style={styles.container}>
             <List

app/screens/convert_gm_to_channel/team_selector.tsx

@@ -28,18 +28,20 @@ type Props = {
 }
 
 export const TeamSelector = ({commonTeams}: Props) => {
+    const {formatMessage} = useIntl();
     const theme = useTheme();
     const styles = getStyleFromTheme(theme);
 
-    const {formatMessage} = useIntl();
-    const label = formatMessage({id: 'channel_into.convert_gm_to_channel.team_selector.label', defaultMessage: 'Team'});
+    const [selectedTeam, setSelectedTeam] = useState<Team>();
 
+    const label = formatMessage({id: 'channel_into.convert_gm_to_channel.team_selector.label', defaultMessage: 'Team'});
     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 team = commonTeams.find((t) => t.id === teamId);
+        if (team) {
+            setSelectedTeam(team);
+        }
     }, []);
 
     const goToTeamSelectorList = preventDoubleTap(async () => {
@@ -53,9 +55,9 @@ export const TeamSelector = ({commonTeams}: Props) => {
         <OptionItem
             action={goToTeamSelectorList}
             containerStyle={styles.teamSelector}
-            label={`${label} - ${selectedTeam}`}
+            label={label}
             type={Platform.select({ios: 'arrow', default: 'default'})}
-            info={placeholder}
+            info={selectedTeam ? selectedTeam.display_name : placeholder}
         />
     );
 };

app/screens/convert_gm_to_channel/team_selector_list/team_selector_list.tsx

@@ -1,13 +1,16 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 
 import TeamList from '@app/components/team_list';
 import {useTheme} from '@app/context/theme';
 import {changeOpacity, getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme} from '@app/utils/theme';
 import SearchBar from '@components/search';
+import { filter } from 'lodash';
+import { logDebug } from '@app/utils/log';
+import { loadDefs } from 'nock';
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
@@ -29,6 +32,17 @@ const TeamSelectorList = ({teams, selectTeam}: Props) => {
 
     const color = useMemo(() => changeOpacity(theme.centerChannelColor, 0.72), [theme]);
 
+    const [filteredTeams, setFilteredTeam] = useState(teams);
+
+    const handleOnChangeSearchText = useCallback((searchTerm: string) => {
+        logDebug(searchTerm);
+        if (searchTerm === '') {
+            setFilteredTeam(teams);
+        } else {
+            setFilteredTeam(teams.filter((team) => team.display_name.includes(searchTerm) || team.name.includes(searchTerm)));
+        }
+    }, [teams]);
+
     return (
         <View style={styles.container}>
             <SearchBar
@@ -38,12 +52,12 @@ const TeamSelectorList = ({teams, selectTeam}: Props) => {
                 placeholderTextColor={color}
                 searchIconColor={color}
                 testID='convert_gm_to_channel_team_search_bar'
-                onChangeText={selectTeam}
+                onChangeText={handleOnChangeSearchText}
             />
             <View style={styles.listContainer}>
                 <TeamList
-                    teams={teams}
-                    onPress={() => ''}
+                    teams={filteredTeams}
+                    onPress={selectTeam}
                 />
             </View>
         </View>