Chore: Evaluate SelectListView - TypeScript (#4119)

* Chore: Evaluate SelectListView - TypeScript

* minor tweak

app/definitions/IDataSelect.ts

@@ -0,0 +1,4 @@
+import { TSubscriptionModel } from './ISubscription';
+
+export type TDataSelect = Pick<TSubscriptionModel, 'rid'> &
+	Partial<Pick<TSubscriptionModel, 't' | 'name' | 'teamMain' | 'alert'>>;

app/stacks/types.ts

@@ -2,13 +2,13 @@ import { NavigatorScreenParams } from '@react-navigation/core';
 import { TextInputProps } from 'react-native';
 import Model from '@nozbe/watermelondb/Model';
 
-import { IRoom } from '../definitions/IRoom';
 import { IOptionsField } from '../views/NotificationPreferencesView/options';
 import { IServer } from '../definitions/IServer';
 import { IAttachment } from '../definitions/IAttachment';
 import { IMessage, TMessageModel } from '../definitions/IMessage';
 import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
 import { ICannedResponse } from '../definitions/ICannedResponse';
+import { TDataSelect } from '../definitions/IDataSelect';
 import { ModalStackParamList } from './MasterDetailStack/types';
 
 export type ChatsStackParamList = {
@@ -43,13 +43,13 @@ export type ChatsStackParamList = {
 		joined: boolean;
 	};
 	SelectListView: {
-		data?: IRoom[];
+		data?: TDataSelect[];
 		title: string;
 		infoText?: string;
 		nextAction: (selected: string[]) => void;
 		showAlert?: () => void;
 		isSearch?: boolean;
-		onSearch?: (text: string) => Promise<Partial<IRoom[]> | any>;
+		onSearch?: (text: string) => Promise<TDataSelect[] | any>;
 		isRadio?: boolean;
 	};
 	RoomInfoView: {

app/views/RoomActionsView/index.tsx

@@ -16,15 +16,7 @@ import RoomTypeIcon from '../../containers/RoomTypeIcon';
 import SafeAreaView from '../../containers/SafeAreaView';
 import Status from '../../containers/Status';
 import StatusBar from '../../containers/StatusBar';
-import {
-	IApplicationState,
-	IBaseScreen,
-	IRoom,
-	ISubscription,
-	IUser,
-	SubscriptionType,
-	TSubscriptionModel
-} from '../../definitions';
+import { IApplicationState, IBaseScreen, ISubscription, IUser, SubscriptionType, TSubscriptionModel } from '../../definitions';
 import { withDimensions } from '../../dimensions';
 import I18n from '../../i18n';
 import database from '../../lib/database';
@@ -587,14 +579,14 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 
 			if (result.success) {
 				if (result.rooms?.length) {
-					const teamChannels = result.rooms.map((r: any) => ({
+					const teamChannels = result.rooms.map(r => ({
 						rid: r._id,
 						name: r.name,
 						teamId: r.teamId
 					}));
 					navigation.navigate('SelectListView', {
 						title: 'Converting_Team_To_Channel',
-						data: teamChannels as any,
+						data: teamChannels,
 						infoText: 'Select_Team_Channels_To_Delete',
 						nextAction: (data: string[]) => this.convertTeamToChannelConfirmation(data)
 					});
@@ -728,10 +720,10 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 
 			if (teamRooms.length) {
 				const data = teamRooms.map(team => ({
-					rid: team.teamId,
+					rid: team.teamId as string,
 					t: team.t,
 					name: team.name
-				})) as IRoom[]; // TODO: review this usage later
+				}));
 				navigation.navigate('SelectListView', {
 					title: 'Move_to_Team',
 					infoText: 'Move_Channel_Paragraph',

app/views/SelectListView.tsx

@@ -18,7 +18,8 @@ import { animateNextTransition } from '../utils/layoutAnimation';
 import { ICON_SIZE } from '../containers/List/constants';
 import SearchBox from '../containers/SearchBox';
 import sharedStyles from './Styles';
-import { IRoom } from '../definitions/IRoom';
+import { IApplicationState } from '../definitions';
+import { TDataSelect } from '../definitions/IDataSelect';
 
 const styles = StyleSheet.create({
 	buttonText: {
@@ -29,8 +30,8 @@ const styles = StyleSheet.create({
 });
 
 interface ISelectListViewState {
-	data?: IRoom[];
-	dataFiltered?: IRoom[];
+	data?: TDataSelect[];
+	dataFiltered?: TDataSelect[];
 	isSearching: boolean;
 	selected: string[];
 }
@@ -53,7 +54,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 
 	private isSearch: boolean;
 
-	private onSearch?: (text: string) => Promise<Partial<IRoom[]> | any>;
+	private onSearch?: (text: string) => Promise<TDataSelect[] | any>;
 
 	private isRadio?: boolean;
 
@@ -122,7 +123,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 	search = async (text: string) => {
 		try {
 			this.setState({ isSearching: true });
-			const result = (await this.onSearch?.(text)) as IRoom[];
+			const result = await this.onSearch?.(text);
 			this.setState({ dataFiltered: result });
 		} catch (e) {
 			log(e);
@@ -150,19 +151,19 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 		}
 	};
 
-	renderItem = ({ item }: { item: Partial<IRoom> }) => {
+	renderItem = ({ item }: { item: TDataSelect }) => {
 		const { theme } = this.props;
 		const { selected } = this.state;
 
 		const channelIcon = item.t === 'p' ? 'channel-private' : 'channel-public';
 		const teamIcon = item.t === 'p' ? 'teams-private' : 'teams';
 		const icon = item.teamMain ? teamIcon : channelIcon;
-		const checked = this.isChecked(item.rid!) ? 'check' : '';
+		const checked = this.isChecked(item.rid) ? 'check' : '';
 
 		const showRadio = () => (
 			<RadioButton
 				testID={selected ? `radio-button-selected-${item.name}` : `radio-button-unselected-${item.name}`}
-				selected={selected.includes(item.rid!)}
+				selected={selected.includes(item.rid)}
 				color={themes[theme].actionTintColor}
 				size={ICON_SIZE}
 			/>
@@ -182,7 +183,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 					title={item.name}
 					translateTitle={false}
 					testID={`select-list-view-item-${item.name}`}
-					onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid!))}
+					onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid))}
 					alert={item.alert}
 					left={() => <List.Icon name={icon} color={themes[theme].controlText} />}
 					right={() => (this.isRadio ? showRadio() : showCheck())}
@@ -211,7 +212,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 	}
 }
 
-const mapStateToProps = (state: any) => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	isMasterDetail: state.app.isMasterDetail
 });