Chore: Migrate AttachmentView to Typescript (#3483)

Co-authored-by: AlexAlexandre <alexalexandrejr@gmail.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/externalModules.d.ts

@@ -9,5 +9,6 @@ declare module '@rocket.chat/ui-kit';
 declare module '@rocket.chat/sdk';
 declare module 'react-native-config-reader';
 declare module 'react-native-keycommands';
+declare module 'react-native-mime-types';
 declare module 'react-native-restart';
 declare module 'react-native-prompt-android';

app/presentation/ImageViewer/ImageComponent.ts

@@ -1,6 +1,10 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { FastImageProps } from '@rocket.chat/react-native-fast-image';
+
 import { types } from './types';
 
-export const ImageComponent = (type: string) => {
+export const ImageComponent = (type?: string): React.ComponentType<Partial<Image> | FastImageProps> => {
 	let Component;
 	if (type === types.REACT_NATIVE_IMAGE) {
 		const { Image } = require('react-native');

app/presentation/ImageViewer/ImageViewer.tsx

@@ -16,13 +16,14 @@ const styles = StyleSheet.create({
 
 interface IImageViewer {
 	uri: string;
-	imageComponentType: string;
+	imageComponentType?: string;
 	width: number;
 	height: number;
 	theme: string;
+	onLoadEnd?: () => void;
 }
 
-export const ImageViewer = ({ uri, imageComponentType, theme, width, height, ...props }: IImageViewer) => {
+export const ImageViewer = ({ uri, imageComponentType, theme, width, height, ...props }: IImageViewer): JSX.Element => {
 	const backgroundColor = themes[theme].previewBackground;
 	const Component = ImageComponent(imageComponentType);
 	return (

app/views/AttachmentView.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { PermissionsAndroid, StyleSheet, View } from 'react-native';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RouteProp } from '@react-navigation/native';
 import CameraRoll from '@react-native-community/cameraroll';
 import * as mime from 'react-native-mime-types';
 import RNFetchBlob from 'rn-fetch-blob';
 import { Video } from 'expo-av';
-import SHA256 from 'js-sha256';
+import { sha256 } from 'js-sha256';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { LISTENER } from '../containers/Toast';
@@ -30,23 +31,41 @@ const styles = StyleSheet.create({
 	}
 });
 
-class AttachmentView extends React.Component {
+// TODO: refactor when react-navigation is done
-	static propTypes = {
+export interface IAttachment {
-		navigation: PropTypes.object,
+	title: string;
-		route: PropTypes.object,
+	title_link?: string;
-		theme: PropTypes.string,
+	image_url?: string;
-		baseUrl: PropTypes.string,
+	image_type?: string;
-		width: PropTypes.number,
+	video_url?: string;
-		height: PropTypes.number,
+	video_type?: string;
-		insets: PropTypes.object,
+}
-		user: PropTypes.shape({
-			id: PropTypes.string,
-			token: PropTypes.string
-		}),
-		Allow_Save_Media_to_Gallery: PropTypes.bool
-	};
 
-	constructor(props) {
+interface IAttachmentViewState {
+	attachment: IAttachment;
+	loading: boolean;
+}
+
+interface IAttachmentViewProps {
+	navigation: StackNavigationProp<any, 'AttachmentView'>;
+	route: RouteProp<{ AttachmentView: { attachment: IAttachment } }, 'AttachmentView'>;
+	theme: string;
+	baseUrl: string;
+	width: number;
+	height: number;
+	insets: { left: number; bottom: number; right: number; top: number };
+	user: {
+		id: string;
+		token: string;
+	};
+	Allow_Save_Media_to_Gallery: boolean;
+}
+
+class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentViewState> {
+	private unsubscribeBlur: (() => void) | undefined;
+	private videoRef: any;
+
+	constructor(props: IAttachmentViewProps) {
 		super(props);
 		const attachment = props.route.params?.attachment;
 		this.state = { attachment, loading: true };
@@ -79,21 +98,9 @@ class AttachmentView extends React.Component {
 		}
 		const options = {
 			title,
-			headerLeft: () => (
+			headerLeft: () => <HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} />,
-				<HeaderButton.CloseModal
-					testID='close-attachment-view'
-					navigation={navigation}
-					buttonStyle={{ color: themes[theme].previewTintColor }}
-				/>
-			),
 			headerRight: () =>
-				Allow_Save_Media_to_Gallery ? (
+				Allow_Save_Media_to_Gallery ? <HeaderButton.Download testID='save-image' onPress={this.handleSave} /> : null,
-					<HeaderButton.Download
-						testID='save-image'
-						onPress={this.handleSave}
-						buttonStyle={{ color: themes[theme].previewTintColor }}
-					/>
-				) : null,
 			headerBackground: () => <View style={{ flex: 1, backgroundColor: themes[theme].previewBackground }} />,
 			headerTintColor: themes[theme].previewTintColor,
 			headerTitleStyle: { color: themes[theme].previewTintColor, marginHorizontal: 10 }
@@ -101,7 +108,7 @@ class AttachmentView extends React.Component {
 		navigation.setOptions(options);
 	};
 
-	getVideoRef = ref => (this.videoRef = ref);
+	getVideoRef = (ref: Video) => (this.videoRef = ref);
 
 	handleSave = async () => {
 		const { attachment } = this.state;
@@ -113,7 +120,8 @@ class AttachmentView extends React.Component {
 		if (isAndroid) {
 			const rationale = {
 				title: I18n.t('Write_External_Permission'),
-				message: I18n.t('Write_External_Permission_Message')
+				message: I18n.t('Write_External_Permission_Message'),
+				buttonPositive: 'Ok'
 			};
 			const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, rationale);
 			if (!(result || result === PermissionsAndroid.RESULTS.GRANTED)) {
@@ -125,7 +133,7 @@ class AttachmentView extends React.Component {
 		try {
 			const extension = image_url ? `.${mime.extension(image_type) || 'jpg'}` : `.${mime.extension(video_type) || 'mp4'}`;
 			const documentDir = `${RNFetchBlob.fs.dirs.DocumentDir}/`;
-			const path = `${documentDir + SHA256(url) + extension}`;
+			const path = `${documentDir + sha256(url!) + extension}`;
 			const file = await RNFetchBlob.config({ path }).fetch('GET', mediaAttachment);
 			await CameraRoll.save(path, { album: 'Rocket.Chat' });
 			await file.flush();
@@ -136,7 +144,7 @@ class AttachmentView extends React.Component {
 		this.setState({ loading: false });
 	};
 
-	renderImage = uri => {
+	renderImage = (uri: string) => {
 		const { theme, width, height, insets } = this.props;
 		const headerHeight = getHeaderHeight(width > height);
 		return (
@@ -150,7 +158,7 @@ class AttachmentView extends React.Component {
 		);
 	};
 
-	renderVideo = uri => (
+	renderVideo = (uri: string) => (
 		<Video
 			source={{ uri }}
 			rate={1.0}
@@ -190,7 +198,7 @@ class AttachmentView extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	baseUrl: state.server.server,
 	user: getUserSelector(state),
 	Allow_Save_Media_to_Gallery: state.settings.Allow_Save_Media_to_Gallery ?? true