[IMPROVE] - migrating the MessageBox container (in progress)

app/containers/MessageBox/EmojiKeyboard.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
 import { KeyboardRegistry } from 'react-native-ui-lib/keyboard';
-import PropTypes from 'prop-types';
 
 import store from '../../lib/createStore';
 import EmojiPicker from '../EmojiPicker';
@@ -9,18 +8,19 @@ import styles from './styles';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 
-export default class EmojiKeyboard extends React.PureComponent {
-	static propTypes = {
-		theme: PropTypes.string
-	};
+interface IMessageBoxEmojiKeyboard {
+	theme: string
+}
+export default class EmojiKeyboard extends React.PureComponent<IMessageBoxEmojiKeyboard, any> {
+	private readonly baseUrl: any;
 
-	constructor(props) {
+	constructor(props: IMessageBoxEmojiKeyboard) {
 		super(props);
 		const state = store.getState();
 		this.baseUrl = state.share.server.server || state.server.server;
 	}
 
-	onEmojiSelected = (emoji) => {
+	onEmojiSelected = (emoji: any) => {
 		KeyboardRegistry.onItemSelected('EmojiKeyboard', { emoji });
 	}
 

app/containers/MessageBox/LeftButtons.android.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import { CancelEditingButton, ToggleEmojiButton } from './buttons';
 
+interface IMessageBoxLeftButtons {
+	theme: string;
+	showEmojiKeyboard: boolean;
+	openEmoji(): void;
+	closeEmoji(): void;
+	editing: boolean;
+	editCancel(): void;
+}
+
 const LeftButtons = React.memo(({
 	theme, showEmojiKeyboard, editing, editCancel, openEmoji, closeEmoji
-}) => {
+}: IMessageBoxLeftButtons) => {
 	if (editing) {
 		return <CancelEditingButton onPress={editCancel} theme={theme} />;
 	}
@@ -19,13 +26,4 @@ const LeftButtons = React.memo(({
 	);
 });
 
-LeftButtons.propTypes = {
-	theme: PropTypes.string,
-	showEmojiKeyboard: PropTypes.bool,
-	openEmoji: PropTypes.func.isRequired,
-	closeEmoji: PropTypes.func.isRequired,
-	editing: PropTypes.bool,
-	editCancel: PropTypes.func.isRequired
-};
-
 export default LeftButtons;

app/containers/MessageBox/LeftButtons.ios.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { View } from 'react-native';
 
 import { CancelEditingButton, ActionsButton } from './buttons';
 import styles from './styles';
 
+interface IMessageBoxLeftButtons {
+	theme: string;
+	showMessageBoxActions(): void;
+	editing: boolean;
+	editCancel(): void;
+	isActionsEnabled: boolean;
+}
+
 const LeftButtons = React.memo(({
 	theme, showMessageBoxActions, editing, editCancel, isActionsEnabled
-}) => {
+}: IMessageBoxLeftButtons) => {
 	if (editing) {
 		return <CancelEditingButton onPress={editCancel} theme={theme} />;
 	}
@@ -17,12 +24,4 @@ const LeftButtons = React.memo(({
 	return <View style={styles.buttonsWhitespace} />;
 });
 
-LeftButtons.propTypes = {
-	theme: PropTypes.string,
-	showMessageBoxActions: PropTypes.func.isRequired,
-	editing: PropTypes.bool,
-	editCancel: PropTypes.func.isRequired,
-	isActionsEnabled: PropTypes.bool
-};
-
 export default LeftButtons;

app/containers/MessageBox/RecordAudio.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { View, Text } from 'react-native';
 import { Audio } from 'expo-av';
 import { BorderlessButton } from 'react-native-gesture-handler';
@@ -12,6 +11,12 @@ import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
 import { logEvent, events } from '../../utils/log';
 
+interface IMessageBoxRecordAudioProps {
+	theme: string;
+	recordingCallback({}): void;
+	onFinish({}): void;
+}
+
 const RECORDING_EXTENSION = '.aac';
 const RECORDING_SETTINGS = {
 	android: {
@@ -41,22 +46,19 @@ const RECORDING_MODE = {
 	interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX
 };
 
-const formatTime = function(seconds) {
-	let minutes = Math.floor(seconds / 60);
+const formatTime = function(seconds: any) {
+	let minutes: any = Math.floor(seconds / 60);
 	seconds %= 60;
 	if (minutes < 10) { minutes = `0${ minutes }`; }
 	if (seconds < 10) { seconds = `0${ seconds }`; }
 	return `${ minutes }:${ seconds }`;
 };
 
-export default class RecordAudio extends React.PureComponent {
-	static propTypes = {
-		theme: PropTypes.string,
-		recordingCallback: PropTypes.func,
-		onFinish: PropTypes.func
-	}
+export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAudioProps, any> {
+	private isRecorderBusy: boolean;
+	private recording: any;
 
-	constructor(props) {
+	constructor(props: IMessageBoxRecordAudioProps) {
 		super(props);
 		this.isRecorderBusy = false;
 		this.state = {
@@ -96,7 +98,7 @@ export default class RecordAudio extends React.PureComponent {
 		return false;
 	}
 
-	onRecordingStatusUpdate = (status) => {
+	onRecordingStatusUpdate = (status: any) => {
 		this.setState({
 			isRecording: status.isRecording,
 			recordingDurationMillis: status.durationMillis
@@ -183,6 +185,7 @@ export default class RecordAudio extends React.PureComponent {
 					onPress={this.startRecordingAudio}
 					style={styles.actionButton}
 					testID='messagebox-send-audio'
+					// @ts-ignore
 					accessibilityLabel={I18n.t('Send_audio_message')}
 					accessibilityTraits='button'
 				>
@@ -196,6 +199,7 @@ export default class RecordAudio extends React.PureComponent {
 				<View style={styles.textArea}>
 					<BorderlessButton
 						onPress={this.cancelRecordingAudio}
+						// @ts-ignore
 						accessibilityLabel={I18n.t('Cancel_recording')}
 						accessibilityTraits='button'
 						style={styles.actionButton}
@@ -214,6 +218,7 @@ export default class RecordAudio extends React.PureComponent {
 				</View>
 				<BorderlessButton
 					onPress={this.finishRecordingAudio}
+					// @ts-ignore
 					accessibilityLabel={I18n.t('Finish_recording')}
 					accessibilityTraits='button'
 					style={styles.actionButton}

app/containers/MessageBox/ReplyPreview.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 import moment from 'moment';
 import { connect } from 'react-redux';
 
@@ -41,9 +40,25 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface IMessageBoxReplyPreview {
+	replying: boolean;
+	message: {
+		ts: Date;
+		msg: string;
+		u: any;
+	};
+	Message_TimeFormat: string;
+	close(): void;
+	baseUrl: string;
+	username: string;
+	getCustomEmoji(): void;
+	theme: string;
+	useRealName: boolean;
+}
+
 const ReplyPreview = React.memo(({
 	message, Message_TimeFormat, baseUrl, username, replying, getCustomEmoji, close, theme, useRealName
-}) => {
+}: IMessageBoxReplyPreview) => {
 	if (!replying) {
 		return null;
 	}
@@ -61,6 +76,7 @@ const ReplyPreview = React.memo(({
 					<Text style={[styles.username, { color: themes[theme].tintColor }]}>{useRealName ? message.u?.name : message.u?.username}</Text>
 					<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 				</View>
+				{/*@ts-ignore*/}
 				<Markdown
 					msg={message.msg}
 					baseUrl={baseUrl}
@@ -74,21 +90,9 @@ const ReplyPreview = React.memo(({
 			<CustomIcon name='close' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
 		</View>
 	);
-}, (prevProps, nextProps) => prevProps.replying === nextProps.replying && prevProps.theme === nextProps.theme && prevProps.message.id === nextProps.message.id);
+}, (prevProps: any, nextProps: any) => prevProps.replying === nextProps.replying && prevProps.theme === nextProps.theme && prevProps.message.id === nextProps.message.id);
 
-ReplyPreview.propTypes = {
-	replying: PropTypes.bool,
-	message: PropTypes.object.isRequired,
-	Message_TimeFormat: PropTypes.string.isRequired,
-	close: PropTypes.func.isRequired,
-	baseUrl: PropTypes.string.isRequired,
-	username: PropTypes.string.isRequired,
-	getCustomEmoji: PropTypes.func,
-	theme: PropTypes.string,
-	useRealName: PropTypes.bool
-};
-
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	Message_TimeFormat: state.settings.Message_TimeFormat,
 	baseUrl: state.server.server,
 	useRealName: state.settings.UI_Use_Real_Name

app/containers/MessageBox/RightButtons.android.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { View } from 'react-native';
 
 import { SendButton, ActionsButton } from './buttons';
 import styles from './styles';
 
+interface IMessageBoxRightButtons {
+	theme: string;
+	showSend: boolean;
+	submit(): void;
+	showMessageBoxActions(): void;
+	isActionsEnabled: boolean;
+}
+
 const RightButtons = React.memo(({
 	theme, showSend, submit, showMessageBoxActions, isActionsEnabled
-}) => {
+}: IMessageBoxRightButtons) => {
 	if (showSend) {
 		return <SendButton onPress={submit} theme={theme} />;
 	}
@@ -18,12 +25,4 @@ const RightButtons = React.memo(({
 	return <View style={styles.buttonsWhitespace} />;
 });
 
-RightButtons.propTypes = {
-	theme: PropTypes.string,
-	showSend: PropTypes.bool,
-	submit: PropTypes.func.isRequired,
-	showMessageBoxActions: PropTypes.func.isRequired,
-	isActionsEnabled: PropTypes.bool
-};
-
 export default RightButtons;

app/containers/MessageBox/RightButtons.ios.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { SendButton } from './buttons';
-
-const RightButtons = React.memo(({ theme, showSend, submit }) => {
-	if (showSend) {
-		return <SendButton theme={theme} onPress={submit} />;
-	}
-	return null;
-});
-
-RightButtons.propTypes = {
-	theme: PropTypes.string,
-	showSend: PropTypes.bool,
-	submit: PropTypes.func.isRequired
-};
-
-export default RightButtons;

app/containers/MessageBox/RightButtons.ios.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SendButton } from './buttons';
+
+interface IMessageBoxRightButtons {
+	theme: string;
+	showSend: boolean;
+	submit(): void;
+}
+
+const RightButtons = React.memo(({ theme, showSend, submit }: IMessageBoxRightButtons) => {
+	if (showSend) {
+		return <SendButton theme={theme} onPress={submit} />;
+	}
+	return null;
+});
+
+export default RightButtons;

app/externalModules.d.ts

@@ -4,3 +4,4 @@ declare module 'commonmark-react-renderer';
 declare module 'remove-markdown';
 declare module 'react-native-image-progress';
 declare module 'react-native-platform-touchable';
+declare module 'react-native-ui-lib/keyboard';