Unverified Commit 691bf1ef authored by Gerzon Z's avatar Gerzon Z Committed by GitHub
Browse files

Chore: Migrate react-navigation to TypeScript (#3480)



Co-authored-by: default avatarAlexAlexandre <alexalexandrejr@gmail.com>
parent 4af97f19
......@@ -14,6 +14,7 @@ import OrSeparator from '../containers/OrSeparator';
import Input from '../containers/UIKit/MultiSelect/Input';
import { forwardRoom as forwardRoomAction } from '../actions/room';
import { ILivechatDepartment } from './definition/ILivechatDepartment';
import { ChatsStackParamList } from '../stacks/types';
const styles = StyleSheet.create({
container: {
......@@ -47,8 +48,8 @@ interface IParsedData {
}
interface IForwardLivechatViewProps {
navigation: StackNavigationProp<any, 'ForwardLivechatView'>;
route: RouteProp<{ ForwardLivechatView: { rid: string } }, 'ForwardLivechatView'>;
navigation: StackNavigationProp<ChatsStackParamList, 'ForwardLivechatView'>;
route: RouteProp<ChatsStackParamList, 'ForwardLivechatView'>;
theme: string;
forwardRoom: (rid: string, transferData: ITransferData) => void;
}
......
......@@ -19,6 +19,7 @@ import { withTheme } from '../../theme';
import SafeAreaView from '../../containers/SafeAreaView';
import { events, logEvent } from '../../utils/log';
import styles from './styles';
import { ChatsStackParamList } from '../../stacks/types';
const OPTIONS = {
days: [
......@@ -67,9 +68,9 @@ const OPTIONS = {
]
};
interface IInviteUsersEditView {
navigation: StackNavigationProp<any, 'InviteUsersEditView'>;
route: RouteProp<{ InviteUsersEditView: { rid: string } }, 'InviteUsersEditView'>;
interface IInviteUsersEditViewProps {
navigation: StackNavigationProp<ChatsStackParamList, 'InviteUsersEditView'>;
route: RouteProp<ChatsStackParamList, 'InviteUsersEditView'>;
theme: string;
createInviteLink(rid: string): void;
inviteLinksSetParams(params: { [key: string]: number }): void;
......@@ -77,14 +78,14 @@ interface IInviteUsersEditView {
maxUses: number;
}
class InviteUsersView extends React.Component<IInviteUsersEditView, any> {
class InviteUsersEditView extends React.Component<IInviteUsersEditViewProps, any> {
static navigationOptions = (): StackNavigationOptions => ({
title: I18n.t('Invite_users')
});
private rid: string;
constructor(props: IInviteUsersEditView) {
constructor(props: IInviteUsersEditViewProps) {
super(props);
this.rid = props.route.params?.rid;
}
......@@ -160,4 +161,4 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
createInviteLink: (rid: string) => dispatch(inviteLinksCreateAction(rid))
});
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(InviteUsersView));
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(InviteUsersEditView));
......@@ -6,6 +6,7 @@ import { StackNavigationProp, StackNavigationOptions } from '@react-navigation/s
import { RouteProp } from '@react-navigation/core';
import { Dispatch } from 'redux';
import { ChatsStackParamList } from '../../stacks/types';
import {
inviteLinksClear as inviteLinksClearAction,
inviteLinksCreate as inviteLinksCreateAction
......@@ -22,9 +23,9 @@ import SafeAreaView from '../../containers/SafeAreaView';
import { events, logEvent } from '../../utils/log';
import styles from './styles';
interface IInviteUsersView {
navigation: StackNavigationProp<any, 'InviteUsersView'>;
route: RouteProp<any, 'InviteUsersView'>;
interface IInviteUsersViewProps {
navigation: StackNavigationProp<ChatsStackParamList, 'InviteUsersView'>;
route: RouteProp<ChatsStackParamList, 'InviteUsersView'>;
theme: string;
timeDateFormat: string;
invite: {
......@@ -36,14 +37,14 @@ interface IInviteUsersView {
createInviteLink(rid: string): void;
clearInviteLink(): void;
}
class InviteUsersView extends React.Component<IInviteUsersView, any> {
class InviteUsersView extends React.Component<IInviteUsersViewProps, any> {
private rid: string;
static navigationOptions: StackNavigationOptions = {
title: I18n.t('Invite_users')
};
constructor(props: IInviteUsersView) {
constructor(props: IInviteUsersViewProps) {
super(props);
this.rid = props.route.params?.rid;
}
......
......@@ -12,6 +12,7 @@ import ActivityIndicator from '../containers/ActivityIndicator';
import { events, logEvent } from '../utils/log';
import { isAndroid, isIOS } from '../utils/deviceInfo';
import { withTheme } from '../theme';
import { InsideStackParamList } from '../stacks/types';
const formatUrl = (url: string, baseUrl: string, uriSize: number, avatarAuthURLFragment: string) =>
`${baseUrl}/avatar/${url}?format=png&width=${uriSize}&height=${uriSize}${avatarAuthURLFragment}`;
......@@ -25,8 +26,8 @@ interface IJitsiMeetViewState {
}
interface IJitsiMeetViewProps {
navigation: StackNavigationProp<any, 'JitsiMeetView'>;
route: RouteProp<{ JitsiMeetView: { rid: string; url: string; onlyAudio?: boolean } }, 'JitsiMeetView'>;
navigation: StackNavigationProp<InsideStackParamList, 'JitsiMeetView'>;
route: RouteProp<InsideStackParamList, 'JitsiMeetView'>;
baseUrl: string;
theme: string;
user: {
......
......@@ -15,6 +15,7 @@ import TextInput from '../containers/TextInput';
import { loginRequest as loginRequestAction } from '../actions/login';
import LoginServices from '../containers/LoginServices';
import sharedStyles from './Styles';
import { OutsideParamList } from '../stacks/types';
const styles = StyleSheet.create({
registerDisabled: {
......@@ -47,9 +48,9 @@ const styles = StyleSheet.create({
}
});
interface IProps {
navigation: StackNavigationProp<any>;
route: RouteProp<any, 'RegisterView'>;
interface ILoginViewProps {
navigation: StackNavigationProp<OutsideParamList, 'LoginView'>;
route: RouteProp<OutsideParamList, 'LoginView'>;
Site_Name: string;
Accounts_RegistrationForm: string;
Accounts_RegistrationForm_LinkReplacementText: string;
......@@ -67,15 +68,15 @@ interface IProps {
inviteLinkToken: string;
}
class LoginView extends React.Component<IProps, any> {
class LoginView extends React.Component<ILoginViewProps, any> {
private passwordInput: any;
static navigationOptions = ({ route, navigation }: Partial<IProps>) => ({
static navigationOptions = ({ route, navigation }: ILoginViewProps) => ({
title: route?.params?.title ?? 'Rocket.Chat',
headerRight: () => <HeaderButton.Legal testID='login-view-more' navigation={navigation} />
});
constructor(props: IProps) {
constructor(props: ILoginViewProps) {
super(props);
this.state = {
user: props.route.params?.username ?? '',
......@@ -83,7 +84,7 @@ class LoginView extends React.Component<IProps, any> {
};
}
UNSAFE_componentWillReceiveProps(nextProps: IProps) {
UNSAFE_componentWillReceiveProps(nextProps: ILoginViewProps) {
const { error } = this.props;
if (nextProps.failure && !dequal(error, nextProps.error)) {
if (nextProps.error?.error === 'error-invalid-email') {
......
......@@ -7,12 +7,10 @@ import I18n from '../i18n';
import { isIOS } from '../utils/deviceInfo';
import { themes } from '../constants/colors';
import { withTheme } from '../theme';
import { ChatsStackParamList } from '../stacks/types';
interface IMarkdownTableViewProps {
route: RouteProp<
{ MarkdownTableView: { renderRows: (drawExtraBorders?: boolean) => JSX.Element; tableWidth: number } },
'MarkdownTableView'
>;
route: RouteProp<ChatsStackParamList, 'MarkdownTableView'>;
theme: string;
}
......
......@@ -3,8 +3,9 @@ import { FlatList, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { dequal } from 'dequal';
import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/core';
import { CompositeNavigationProp, RouteProp } from '@react-navigation/core';
import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
import Message from '../../containers/message';
import ActivityIndicator from '../../containers/ActivityIndicator';
import I18n from '../../i18n';
......@@ -18,22 +19,19 @@ import { withActionSheet } from '../../containers/ActionSheet';
import SafeAreaView from '../../containers/SafeAreaView';
import getThreadName from '../../lib/methods/getThreadName';
import styles from './styles';
type TMessagesViewRouteParams = {
MessagesView: {
rid: string;
t: string;
name: string;
};
};
import { ChatsStackParamList } from '../../stacks/types';
import { IRoom, RoomType } from '../../definitions/IRoom';
interface IMessagesViewProps {
user: {
id: string;
};
baseUrl: string;
navigation: StackNavigationProp<any, 'MessagesView'>;
route: RouteProp<TMessagesViewRouteParams, 'MessagesView'>;
navigation: CompositeNavigationProp<
StackNavigationProp<ChatsStackParamList, 'MessagesView'>,
StackNavigationProp<MasterDetailInsideStackParamList>
>;
route: RouteProp<ChatsStackParamList, 'MessagesView'>;
customEmojis: { [key: string]: string };
theme: string;
showActionSheet: Function;
......@@ -41,6 +39,14 @@ interface IMessagesViewProps {
isMasterDetail: boolean;
}
interface IRoomInfoParam {
room: IRoom;
member: any;
rid: string;
t: RoomType;
joined: boolean;
}
interface IMessagesViewState {
loading: boolean;
messages: [];
......@@ -65,17 +71,22 @@ interface IMessageItem {
}
interface IParams {
rid?: string;
jumpToMessageId: string;
t?: string;
room: any;
rid: string;
t: RoomType;
tmid?: string;
message?: string;
name?: string;
fname?: string;
prid?: string;
room: IRoom;
jumpToMessageId?: string;
jumpToThreadId?: string;
roomUserId?: string;
}
class MessagesView extends React.Component<IMessagesViewProps, any> {
private rid?: string;
private t?: string;
private rid: string;
private t: RoomType;
private content: any;
private room: any;
......@@ -121,7 +132,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
});
};
navToRoomInfo = (navParam: { rid: string }) => {
navToRoomInfo = (navParam: IRoomInfoParam) => {
const { navigation, user } = this.props;
if (navParam.rid === user.id) {
return;
......@@ -147,7 +158,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
...params,
tmid: item.tmid,
name: await getThreadName(this.rid, item.tmid, item._id),
t: 'thread'
t: RoomType.THREAD
};
navigation.push('RoomView', params);
} else {
......
......@@ -33,6 +33,7 @@ import { isTablet } from '../../utils/deviceInfo';
import { verticalScale, moderateScale } from '../../utils/scaling';
import { withDimensions } from '../../dimensions';
import ServerInput from './ServerInput';
import { OutsideParamList } from '../../stacks/types';
const styles = StyleSheet.create({
onboardingImage: {
......@@ -73,7 +74,7 @@ export interface IServer extends Model {
}
interface INewServerView {
navigation: StackNavigationProp<any, 'NewServerView'>;
navigation: StackNavigationProp<OutsideParamList, 'NewServerView'>;
theme: string;
connecting: boolean;
connectServer(server: string, username?: string, fromServerHistory?: boolean): void;
......
......@@ -17,6 +17,7 @@ import SafeAreaView from '../../containers/SafeAreaView';
import log, { events, logEvent } from '../../utils/log';
import sharedStyles from '../Styles';
import { OPTIONS } from './options';
import { ChatsStackParamList } from '../../stacks/types';
const styles = StyleSheet.create({
pickerText: {
......@@ -26,16 +27,8 @@ const styles = StyleSheet.create({
});
interface INotificationPreferencesView {
navigation: StackNavigationProp<any, 'NotificationPreferencesView'>;
route: RouteProp<
{
NotificationPreferencesView: {
rid: string;
room: Model;
};
},
'NotificationPreferencesView'
>;
navigation: StackNavigationProp<ChatsStackParamList, 'NotificationPrefView'>;
route: RouteProp<ChatsStackParamList, 'NotificationPrefView'>;
theme: string;
}
......
interface IOptionsField {
export interface IOptionsField {
label: string;
value: string | number;
second?: number;
......
......@@ -11,6 +11,8 @@ import * as List from '../containers/List';
import SearchBox from '../containers/SearchBox';
import SafeAreaView from '../containers/SafeAreaView';
import sharedStyles from './Styles';
import { ChatsStackParamList } from '../stacks/types';
import { IOptionsField } from './NotificationPreferencesView/options';
const styles = StyleSheet.create({
search: {
......@@ -25,37 +27,21 @@ const styles = StyleSheet.create({
}
});
interface IData {
label: string;
value: string;
second?: string;
}
interface IItem {
item: IData;
item: IOptionsField;
selected: boolean;
onItemPress: () => void;
theme: string;
}
interface IPickerViewState {
data: IData[];
value: string;
}
interface IParams {
title: string;
data: IOptionsField[];
value: string;
data: IData[];
onChangeText: (value: string) => IData[];
goBack: boolean;
onChange: Function;
onChangeValue: (value: string) => void;
}
interface IPickerViewProps {
navigation: StackNavigationProp<any, 'PickerView'>;
route: RouteProp<{ PickerView: IParams }, 'PickerView'>;
navigation: StackNavigationProp<ChatsStackParamList, 'PickerView'>;
route: RouteProp<ChatsStackParamList, 'PickerView'>;
theme: string;
}
......@@ -69,7 +55,7 @@ const Item = React.memo(({ item, selected, onItemPress, theme }: IItem) => (
));
class PickerView extends React.PureComponent<IPickerViewProps, IPickerViewState> {
private onSearch: (text: string) => IData[];
private onSearch?: ((text: string) => IOptionsField[]) | ((term?: string | undefined) => Promise<any>);
static navigationOptions = ({ route }: IPickerViewProps) => ({
title: route.params?.title ?? I18n.t('Select_an_option')
......@@ -126,13 +112,13 @@ class PickerView extends React.PureComponent<IPickerViewProps, IPickerViewState>
{this.renderSearch()}
<FlatList
data={data}
keyExtractor={item => item.value}
keyExtractor={item => item.value as string}
renderItem={({ item }) => (
<Item
item={item}
theme={theme}
selected={!this.onSearch && (value || data[0]?.value) === item.value}
onItemPress={() => this.onChangeValue(item.value)}
onItemPress={() => this.onChangeValue(item.value as string)}
/>
)}
ItemSeparatorComponent={List.Separator}
......
import { StackNavigationProp } from '@react-navigation/stack';
import React from 'react';
import { ProfileStackParamList } from '../../stacks/types';
export interface IUser {
id: string;
name: string;
......@@ -31,14 +33,12 @@ export interface IAvatarButton {
}
export interface INavigationOptions {
navigation: StackNavigationProp<any, 'ProfileView'>;
navigation: StackNavigationProp<ProfileStackParamList, 'ProfileView'>;
isMasterDetail?: boolean;
}
export interface IProfileViewProps {
user: IUser;
navigation: StackNavigationProp<any, 'ProfileView'>;
isMasterDetail?: boolean;
baseUrl: string;
Accounts_AllowEmailChange: boolean;
Accounts_AllowPasswordChange: boolean;
......
......@@ -16,6 +16,7 @@ import { withTheme } from '../../theme';
import { themes } from '../../constants/colors';
import SafeAreaView from '../../containers/SafeAreaView';
import styles from './styles';
import { ChatsStackParamList } from '../../stacks/types';
interface IReceipts {
_id: string;
......@@ -36,8 +37,8 @@ interface IReadReceiptViewState {
}
interface INavigationOption {
navigation: StackNavigationProp<any, 'ReadReceiptView'>;
route: RouteProp<{ ReadReceiptView: { messageId: string } }, 'ReadReceiptView'>;
navigation: StackNavigationProp<ChatsStackParamList, 'ReadReceiptsView'>;
route: RouteProp<ChatsStackParamList, 'ReadReceiptsView'>;
isMasterDetail: boolean;
}
......
......@@ -5,6 +5,7 @@ import { RouteProp } from '@react-navigation/core';
import { connect } from 'react-redux';
import RNPickerSelect from 'react-native-picker-select';
import { OutsideParamList } from '../stacks/types';
import log, { events, logEvent } from '../utils/log';
import Button from '../containers/Button';
import I18n from '../i18n';
......@@ -51,8 +52,8 @@ const styles = StyleSheet.create({
});
interface IProps {
navigation: StackNavigationProp<any>;
route: RouteProp<any, 'RegisterView'>;
navigation: StackNavigationProp<OutsideParamList, 'RegisterView'>;
route: RouteProp<OutsideParamList, 'RegisterView'>;
server: string;
Site_Name: string;
Gitlab_URL: string;
......
import React from 'react';
import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/core';
import { CompositeNavigationProp, RouteProp } from '@react-navigation/core';
import { FlatList, Text, View } from 'react-native';
import { Q } from '@nozbe/watermelondb';
import { connect } from 'react-redux';
import { dequal } from 'dequal';
import { IRoom, RoomType } from '../../definitions/IRoom';
import { IAttachment } from '../../definitions/IAttachment';
import RCTextInput from '../../containers/TextInput';
import ActivityIndicator from '../../containers/ActivityIndicator';
import Markdown from '../../containers/markdown';
......@@ -13,7 +15,7 @@ import debounce from '../../utils/debounce';
import RocketChat from '../../lib/rocketchat';
import Message from '../../containers/message';
import scrollPersistTaps from '../../utils/scrollPersistTaps';
import { IMessage, IMessageAttachments } from '../../containers/message/interfaces';
import { IMessage } from '../../containers/message/interfaces';
import I18n from '../../i18n';
import StatusBar from '../../containers/StatusBar';
import log from '../../utils/log';
......@@ -29,26 +31,30 @@ import getRoomInfo from '../../lib/methods/getRoomInfo';
import { isIOS } from '../../utils/deviceInfo';
import { compareServerVersion, methods } from '../../lib/utils';
import styles from './styles';
import { InsideStackParamList, ChatsStackParamList } from '../../stacks/types';
const QUERY_SIZE = 50;
type TRouteParams = {
SearchMessagesView: {
showCloseModal?: boolean;
rid: string;
t?: string;
encrypted?: boolean;
};
};
interface ISearchMessagesViewState {
loading: boolean;
messages: IMessage[];
searchText: string;
}
interface IRoomInfoParam {
room: IRoom;
member: any;
rid: string;
t: RoomType;
joined: boolean;
}
interface INavigationOption {
navigation: StackNavigationProp<any, 'SearchMessagesView'>;
route: RouteProp<TRouteParams, 'SearchMessagesView'>;
navigation: CompositeNavigationProp<
StackNavigationProp<ChatsStackParamList, 'SearchMessagesView'>,
StackNavigationProp<InsideStackParamList>
>;
route: RouteProp<ChatsStackParamList, 'SearchMessagesView'>;
}
interface ISearchMessagesViewProps extends INavigationOption {
......@@ -183,12 +189,12 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
return null;
};
showAttachment = (attachment: IMessageAttachments) => {
showAttachment = (attachment: IAttachment) => {
const { navigation } = this.props;
navigation.navigate('AttachmentView', { attachment });
};
navToRoomInfo = (navParam: IMessage) => {
navToRoomInfo = (navParam: IRoomInfoParam) => {
const { navigation, user } = this.props;
if (navParam.rid === user.id) {
return;
......
import React, { useEffect, useState } from 'react';
import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/core';
import { OutsideParamList } from '../stacks/types';
import TextInput from '../containers/TextInput';
import Button from '../containers/Button';
import { showErrorAlert } from '../utils/info';
......@@ -12,16 +14,12 @@ import FormContainer, { FormContainerInner } from '../containers/FormContainer';
import log, { events, logEvent } from '../utils/log';
import sharedStyles from './Styles';
interface ISendEmailConfirmationView {
navigation: StackNavigationProp<any, 'SendEmailConfirmationView'>;
route: {
params: {
user?: string;
};
};
interface ISendEmailConfirmationViewProps {
navigation: StackNavigationProp<OutsideParamList, 'SendEmailConfirmationView'>;
route: RouteProp<OutsideParamList, 'SendEmailConfirmationView'>;
}
const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmationView): JSX.Element => {
const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmationViewProps): JSX.Element => {
const [email, setEmail] = useState('');
const [invalidEmail, setInvalidEmail] = useState(true);
const [isFetching, setIsFetching] = useState(false);
......
......@@ -5,6 +5,7 @@ import FastImage from '@rocket.chat/react-native-fast-image';
import CookieManager from '@react-native-cookies/cookies';
import { StackNavigationProp } from '@react-navigation/stack';
import { SettingsStackParamList } from '../../stacks/types';
import { logout as logoutAction } from '../../actions/login';
import { selectServerRequest as selectServerRequestAction } from '../../actions/server';
import { themes } from '../../constants/colors';
......@@ -29,8 +30,8 @@ import database from '../../lib/database';
import { isFDroidBuild } from '../../constants/environment';
import { getUserSelector } from '../../selectors/login';
interface IProps {