From a27d63c22e4830e893852bf3c79d2f0d404248c8 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Mon, 2 May 2022 08:53:47 -0300 Subject: [PATCH] Chore: Evaluate DirectoryView - TypeScript (#4130) --- app/containers/DirectoryItem/index.tsx | 4 +- app/definitions/IRoom.ts | 5 +++ app/views/DirectoryView/index.tsx | 60 +++++++++++++++----------- 3 files changed, 43 insertions(+), 26 deletions(-) diff --git a/app/containers/DirectoryItem/index.tsx b/app/containers/DirectoryItem/index.tsx index e2d25a98..1fbd254d 100644 --- a/app/containers/DirectoryItem/index.tsx +++ b/app/containers/DirectoryItem/index.tsx @@ -17,8 +17,8 @@ interface IDirectoryItemLabel { interface IDirectoryItem { title: string; - description: string; - avatar: string; + description?: string; + avatar?: string; type: string; onPress(): void; testID: string; diff --git a/app/definitions/IRoom.ts b/app/definitions/IRoom.ts index ed6f3d2b..0fe2a7bb 100644 --- a/app/definitions/IRoom.ts +++ b/app/definitions/IRoom.ts @@ -142,6 +142,11 @@ export interface IServerRoom extends IRocketChatRecord { encrypted?: boolean; topic?: any; + username?: string; + nickname?: string; + federation?: any; + roomsCount?: number; + u: Pick; uids: Array; diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx index 58ec6ed7..6f3c5766 100644 --- a/app/views/DirectoryView/index.tsx +++ b/app/views/DirectoryView/index.tsx @@ -1,9 +1,11 @@ import React from 'react'; -import { FlatList, Text, View } from 'react-native'; +import { FlatList, ListRenderItem, Text, View } from 'react-native'; import { connect } from 'react-redux'; import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; +import { CompositeNavigationProp } from '@react-navigation/native'; import { ChatsStackParamList } from '../../stacks/types'; +import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types'; import * as List from '../../containers/List'; import Touch from '../../utils/touch'; import DirectoryItem from '../../containers/DirectoryItem'; @@ -20,25 +22,36 @@ import { TSupportedThemes, withTheme } from '../../theme'; import { themes } from '../../lib/constants'; import { getUserSelector } from '../../selectors/login'; import SafeAreaView from '../../containers/SafeAreaView'; -import { goRoom } from '../../utils/goRoom'; +import { goRoom, TGoRoomItem } from '../../utils/goRoom'; +import { IApplicationState, IServerRoom, IUser, SubscriptionType } from '../../definitions'; import styles from './styles'; import Options from './Options'; import { Services } from '../../lib/services'; interface IDirectoryViewProps { - navigation: StackNavigationProp; + navigation: CompositeNavigationProp< + StackNavigationProp, + StackNavigationProp + >; baseUrl: string; isFederationEnabled: boolean; - user: { - id: string; - token: string; - }; + user: IUser; theme: TSupportedThemes; directoryDefaultView: string; isMasterDetail: boolean; } -class DirectoryView extends React.Component { +interface IDirectoryViewState { + data: IServerRoom[]; + loading: boolean; + text: string; + total: number; + showOptionsDropdown: boolean; + globalUsers: boolean; + type: string; +} + +class DirectoryView extends React.Component { static navigationOptions = ({ navigation, isMasterDetail }: IDirectoryViewProps) => { const options: StackNavigationOptions = { title: I18n.t('Directory') @@ -70,7 +83,6 @@ class DirectoryView extends React.Component { this.setState({ text }, this.search); }; - // eslint-disable-next-line react/sort-comp load = debounce(async ({ newSearch = false }) => { if (newSearch) { this.setState({ data: [], total: -1, loading: false }); @@ -99,7 +111,7 @@ class DirectoryView extends React.Component { }); if (directories.success) { this.setState({ - data: [...data, ...directories.result], + data: [...data, ...(directories.result as IServerRoom[])], loading: false, total: directories.total }); @@ -130,17 +142,17 @@ class DirectoryView extends React.Component { toggleWorkspace = () => { this.setState( - ({ globalUsers }: any) => ({ globalUsers: !globalUsers, data: [] }), + ({ globalUsers }) => ({ globalUsers: !globalUsers, data: [] }), () => this.search() ); }; toggleDropdown = () => { - this.setState(({ showOptionsDropdown }: any) => ({ showOptionsDropdown: !showOptionsDropdown })); + this.setState(({ showOptionsDropdown }) => ({ showOptionsDropdown: !showOptionsDropdown })); }; - goRoom = (item: any) => { - const { navigation, isMasterDetail }: any = this.props; + goRoom = (item: TGoRoomItem) => { + const { navigation, isMasterDetail } = this.props; if (isMasterDetail) { navigation.navigate('DrawerNavigator'); } else { @@ -149,12 +161,12 @@ class DirectoryView extends React.Component { goRoom({ item, isMasterDetail }); }; - onPressItem = async (item: any) => { + onPressItem = async (item: IServerRoom) => { const { type } = this.state; if (type === 'users') { - const result = await Services.createDirectMessage(item.username); + const result = await Services.createDirectMessage(item.username as string); if (result.success) { - this.goRoom({ rid: result.room._id, name: item.username, t: 'd' }); + this.goRoom({ rid: result.room._id, name: item.username, t: SubscriptionType.DIRECT }); } } else if (['p', 'c'].includes(item.t) && !item.teamMain) { const result = await Services.getRoomInfo(item._id); @@ -163,7 +175,7 @@ class DirectoryView extends React.Component { rid: item._id, name: item.name, joinCodeRequired: result.room.joinCodeRequired, - t: item.t, + t: item.t as SubscriptionType, search: true }); } @@ -171,7 +183,7 @@ class DirectoryView extends React.Component { this.goRoom({ rid: item._id, name: item.name, - t: item.t, + t: item.t as SubscriptionType, search: true, teamMain: item.teamMain, teamId: item.teamId @@ -218,7 +230,7 @@ class DirectoryView extends React.Component { ); }; - renderItem = ({ item, index }: any) => { + renderItem: ListRenderItem = ({ item, index }) => { const { data, type } = this.state; const { baseUrl, user, theme } = this.props; @@ -231,7 +243,7 @@ class DirectoryView extends React.Component { } const commonProps = { - title: item.name, + title: item.name as string, onPress: () => this.onPressItem(item), baseUrl, testID: `directory-view-item-${item.name}`.toLowerCase(), @@ -311,11 +323,11 @@ class DirectoryView extends React.Component { }; } -const mapStateToProps = (state: any) => ({ +const mapStateToProps = (state: IApplicationState) => ({ baseUrl: state.server.server, user: getUserSelector(state), - isFederationEnabled: state.settings.FEDERATION_Enabled, - directoryDefaultView: state.settings.Accounts_Directory_DefaultView, + isFederationEnabled: state.settings.FEDERATION_Enabled as boolean, + directoryDefaultView: state.settings.Accounts_Directory_DefaultView as string, isMasterDetail: state.app.isMasterDetail });