From 5bc74c6c68ef47b383960886e79e9160d2253fc0 Mon Sep 17 00:00:00 2001 From: Alex Junior Date: Wed, 15 Sep 2021 17:37:21 -0300 Subject: [PATCH] Chore: Migrate DirectoryView to Typescript (#3379) * [improve] - migrate the view: DirectoryView to typescript * [improve] - migrate the view: removing unnecessary variables * minor changes Co-authored-by: Diego Mello --- app/presentation/DirectoryItem/index.tsx | 6 +-- app/utils/log/events.js | 1 + .../DirectoryView/{Options.js => Options.tsx} | 27 +++++----- .../DirectoryView/{index.js => index.tsx} | 53 +++++++++---------- .../DirectoryView/{styles.js => styles.ts} | 1 + 5 files changed, 45 insertions(+), 43 deletions(-) rename app/views/DirectoryView/{Options.js => Options.tsx} (90%) rename app/views/DirectoryView/{index.js => index.tsx} (89%) rename app/views/DirectoryView/{styles.js => styles.ts} (98%) diff --git a/app/presentation/DirectoryItem/index.tsx b/app/presentation/DirectoryItem/index.tsx index d818b3ed..b8d9811a 100644 --- a/app/presentation/DirectoryItem/index.tsx +++ b/app/presentation/DirectoryItem/index.tsx @@ -25,14 +25,14 @@ interface IDirectoryItem { rightLabel: string; rid: string; theme: string; - teamMain: boolean; + teamMain?: boolean; } const DirectoryItemLabel = React.memo(({ text, theme }: IDirectoryItemLabel) => { if (!text) { return null; } - return {text}; + return {text}; }); const DirectoryItem = ({ @@ -47,7 +47,7 @@ const DirectoryItem = ({ rid, theme, teamMain -}: IDirectoryItem) => ( +}: IDirectoryItem): JSX.Element => ( diff --git a/app/utils/log/events.js b/app/utils/log/events.js index 2ab3f539..c39ccc42 100644 --- a/app/utils/log/events.js +++ b/app/utils/log/events.js @@ -85,6 +85,7 @@ export default { // DIRECTORY VIEW DIRECTORY_SEARCH_USERS: 'directory_search_users', DIRECTORY_SEARCH_CHANNELS: 'directory_search_channels', + DIRECTORY_SEARCH_TEAMS: 'directory_search_teams', // NEW MESSAGE VIEW NEW_MSG_CREATE_CHANNEL: 'new_msg_create_channel', diff --git a/app/views/DirectoryView/Options.js b/app/views/DirectoryView/Options.tsx similarity index 90% rename from app/views/DirectoryView/Options.js rename to app/views/DirectoryView/Options.tsx index 7d6b1e2d..fcc0f7bf 100644 --- a/app/views/DirectoryView/Options.js +++ b/app/views/DirectoryView/Options.tsx @@ -1,6 +1,5 @@ import React, { PureComponent } from 'react'; import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native'; -import PropTypes from 'prop-types'; import Touch from '../../utils/touch'; import { CustomIcon } from '../../lib/Icons'; @@ -16,18 +15,20 @@ const ANIMATION_PROPS = { useNativeDriver: true }; -export default class DirectoryOptions extends PureComponent { - static propTypes = { - type: PropTypes.string, - globalUsers: PropTypes.bool, - isFederationEnabled: PropTypes.bool, - close: PropTypes.func, - changeType: PropTypes.func, - toggleWorkspace: PropTypes.func, - theme: PropTypes.string - }; +interface IDirectoryOptionsProps { + type: string; + globalUsers: boolean; + isFederationEnabled: boolean; + close: Function; + changeType: Function; + toggleWorkspace(): void; + theme: string; +} - constructor(props) { +export default class DirectoryOptions extends PureComponent { + private animatedValue: Animated.Value; + + constructor(props: IDirectoryOptionsProps) { super(props); this.animatedValue = new Animated.Value(0); } @@ -47,7 +48,7 @@ export default class DirectoryOptions extends PureComponent { }).start(() => close()); }; - renderItem = itemType => { + renderItem = (itemType: string) => { const { changeType, type: propType, theme } = this.props; let text = 'Users'; let icon = 'user'; diff --git a/app/views/DirectoryView/index.js b/app/views/DirectoryView/index.tsx similarity index 89% rename from app/views/DirectoryView/index.js rename to app/views/DirectoryView/index.tsx index e05a806f..25d53b83 100644 --- a/app/views/DirectoryView/index.js +++ b/app/views/DirectoryView/index.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { FlatList, Text, View } from 'react-native'; import { connect } from 'react-redux'; @@ -24,9 +23,22 @@ import { goRoom } from '../../utils/goRoom'; import styles from './styles'; import Options from './Options'; -class DirectoryView extends React.Component { - static navigationOptions = ({ navigation, isMasterDetail }) => { - const options = { +interface IDirectoryViewProps { + navigation: object; + baseUrl: string; + isFederationEnabled: boolean; + user: { + id: string; + token: string; + }; + theme: string; + directoryDefaultView: string; + isMasterDetail: boolean; +} + +class DirectoryView extends React.Component { + static navigationOptions = ({ navigation, isMasterDetail }: any) => { + const options: any = { title: I18n.t('Directory') }; if (isMasterDetail) { @@ -35,20 +47,7 @@ class DirectoryView extends React.Component { return options; }; - static propTypes = { - navigation: PropTypes.object, - baseUrl: PropTypes.string, - isFederationEnabled: PropTypes.bool, - user: PropTypes.shape({ - id: PropTypes.string, - token: PropTypes.string - }), - theme: PropTypes.string, - directoryDefaultView: PropTypes.string, - isMasterDetail: PropTypes.bool - }; - - constructor(props) { + constructor(props: IDirectoryViewProps) { super(props); this.state = { data: [], @@ -65,7 +64,7 @@ class DirectoryView extends React.Component { this.load({}); } - onSearchChangeText = text => { + onSearchChangeText = (text: string) => { this.setState({ text }, this.search); }; @@ -115,7 +114,7 @@ class DirectoryView extends React.Component { this.load({ newSearch: true }); }; - changeType = type => { + changeType = (type: string) => { this.setState({ type, data: [] }, () => this.search()); if (type === 'users') { @@ -129,17 +128,17 @@ class DirectoryView extends React.Component { toggleWorkspace = () => { this.setState( - ({ globalUsers }) => ({ globalUsers: !globalUsers, data: [] }), + ({ globalUsers }: any) => ({ globalUsers: !globalUsers, data: [] }), () => this.search() ); }; toggleDropdown = () => { - this.setState(({ showOptionsDropdown }) => ({ showOptionsDropdown: !showOptionsDropdown })); + this.setState(({ showOptionsDropdown }: any) => ({ showOptionsDropdown: !showOptionsDropdown })); }; - goRoom = item => { - const { navigation, isMasterDetail } = this.props; + goRoom = (item: any) => { + const { navigation, isMasterDetail }: any = this.props; if (isMasterDetail) { navigation.navigate('DrawerNavigator'); } else { @@ -148,7 +147,7 @@ class DirectoryView extends React.Component { goRoom({ item, isMasterDetail }); }; - onPressItem = async item => { + onPressItem = async (item: any) => { const { type } = this.state; if (type === 'users') { const result = await RocketChat.createDirectMessage(item.username); @@ -215,7 +214,7 @@ class DirectoryView extends React.Component { ); }; - renderItem = ({ item, index }) => { + renderItem = ({ item, index }: any) => { const { data, type } = this.state; const { baseUrl, user, theme } = this.props; @@ -308,7 +307,7 @@ class DirectoryView extends React.Component { }; } -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ baseUrl: state.server.server, user: getUserSelector(state), isFederationEnabled: state.settings.FEDERATION_Enabled, diff --git a/app/views/DirectoryView/styles.js b/app/views/DirectoryView/styles.ts similarity index 98% rename from app/views/DirectoryView/styles.js rename to app/views/DirectoryView/styles.ts index b026041c..543e6bab 100644 --- a/app/views/DirectoryView/styles.js +++ b/app/views/DirectoryView/styles.ts @@ -35,6 +35,7 @@ export default StyleSheet.create({ top: 0 }, backdrop: { + // @ts-ignore ...StyleSheet.absoluteFill }, dropdownContainerHeader: {