Chore: Evaluate ShareView - TypeScript (#4087)

app/containers/MessageBox/index.tsx

@@ -677,7 +677,12 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	canUploadFile = (file: any) => {
 		const { permissionToUpload } = this.state;
 		const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize } = this.props;
-		const result = canUploadFile(file, FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize, permissionToUpload);
+		const result = canUploadFile({
+			file,
+			allowList: FileUpload_MediaTypeWhiteList,
+			maxFileSize: FileUpload_MaxFileSize,
+			permissionToUploadFile: permissionToUpload
+		});
 		if (result.success) {
 			return true;
 		}

app/definitions/IAttachment.ts

@@ -56,3 +56,14 @@ export interface IServerAttachment {
 	url: string;
 	user: Pick<IUser, '_id' | 'username' | 'name'>;
 }
+
+export interface IShareAttachment {
+	filename: string;
+	description?: string;
+	size: number;
+	mime?: string;
+	path: string;
+	canUpload: boolean;
+	error?: any;
+	uri: string;
+}

app/stacks/types.ts

@@ -10,6 +10,7 @@ import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definiti
 import { ICannedResponse } from '../definitions/ICannedResponse';
 import { TDataSelect } from '../definitions/IDataSelect';
 import { ModalStackParamList } from './MasterDetailStack/types';
+import { TThreadModel } from '../definitions';
 
 export type ChatsStackParamList = {
 	ModalStackNavigator: NavigatorScreenParams<ModalStackParamList>;
@@ -246,7 +247,7 @@ export type InsideStackParamList = {
 		serverInfo: IServer;
 		text: string;
 		room: TSubscriptionModel;
-		thread: any; // TODO: Change
+		thread: TThreadModel;
 	};
 	ModalBlockView: {
 		data: any; // TODO: Change;

app/utils/media.ts

@@ -1,15 +1,20 @@
-import { IAttachment } from '../views/ShareView/interfaces';
+import { IShareAttachment } from '../definitions';
 
-export const canUploadFile = (
-	file: IAttachment,
-	allowList: string,
-	maxFileSize: number,
-	permissionToUploadFile: boolean
-): { success: boolean; error?: string } => {
+export const canUploadFile = ({
+	file,
+	allowList,
+	maxFileSize,
+	permissionToUploadFile
+}: {
+	file: IShareAttachment;
+	allowList?: string;
+	maxFileSize?: number;
+	permissionToUploadFile: boolean;
+}): { success: boolean; error?: string } => {
 	if (!(file && file.path)) {
 		return { success: true };
 	}
-	if (maxFileSize > -1 && file.size > maxFileSize) {
+	if (maxFileSize && maxFileSize > -1 && file.size > maxFileSize) {
 		return { success: false, error: 'error-file-too-large' };
 	}
 	if (!permissionToUploadFile) {

app/views/ShareView/Header.tsx

@@ -8,7 +8,7 @@ import { useTheme } from '../../theme';
 import { isAndroid, isTablet } from '../../utils/deviceInfo';
 import sharedStyles from '../Styles';
 import { makeThreadName } from '../../utils/room';
-import { ISubscription } from '../../definitions';
+import { ISubscription, TThreadModel } from '../../definitions';
 import { getRoomTitle, isGroupChat } from '../../lib/methods';
 
 const androidMarginLeft = isTablet ? 0 : 4;
@@ -37,7 +37,7 @@ const styles = StyleSheet.create({
 
 interface IHeader {
 	room: ISubscription;
-	thread: { id?: string };
+	thread: TThreadModel;
 }
 
 const Header = React.memo(({ room, thread }: IHeader) => {

app/views/ShareView/Preview.tsx

@@ -12,10 +12,10 @@ import sharedStyles from '../Styles';
 import I18n from '../../i18n';
 import { isAndroid } from '../../utils/deviceInfo';
 import { allowPreview } from './utils';
-import { IAttachment, IUseDimensions } from './interfaces';
 import { THUMBS_HEIGHT } from './constants';
 import { TSupportedThemes } from '../../theme';
 import { themes } from '../../lib/constants';
+import { IShareAttachment } from '../../definitions';
 
 const MESSAGEBOX_HEIGHT = 56;
 
@@ -57,7 +57,7 @@ const IconPreview = React.memo(({ iconName, title, description, theme, width, he
 ));
 
 interface IPreview {
-	item: IAttachment;
+	item: IShareAttachment;
 	theme: TSupportedThemes;
 	isShareExtension: boolean;
 	length: number;
@@ -65,7 +65,7 @@ interface IPreview {
 
 const Preview = React.memo(({ item, theme, isShareExtension, length }: IPreview) => {
 	const type = item?.mime;
-	const { width, height } = useDimensions() as IUseDimensions;
+	const { width, height } = useDimensions();
 	const { isLandscape } = useOrientation();
 	const insets = useSafeAreaInsets();
 	const headerHeight = getHeaderHeight(isLandscape);

app/views/ShareView/Thumbs.tsx

@@ -8,8 +8,8 @@ import { CustomIcon } from '../../containers/CustomIcon';
 import { isIOS } from '../../utils/deviceInfo';
 import { THUMBS_HEIGHT } from './constants';
 import { allowPreview } from './utils';
-import { IAttachment } from './interfaces';
 import { TSupportedThemes } from '../../theme';
+import { IShareAttachment } from '../../definitions';
 
 const THUMB_SIZE = 64;
 
@@ -62,18 +62,18 @@ const styles = StyleSheet.create({
 });
 
 interface IThumbContent {
-	item: IAttachment;
+	item: IShareAttachment;
 	theme: TSupportedThemes;
 	isShareExtension: boolean;
 }
 
 interface IThumb extends IThumbContent {
-	onPress(item: IAttachment): void;
-	onRemove(item: IAttachment): void;
+	onPress(item: IShareAttachment): void;
+	onRemove(item: IShareAttachment): void;
 }
 
 interface IThumbs extends Omit<IThumb, 'item'> {
-	attachments: IAttachment[];
+	attachments: IShareAttachment[];
 }
 
 const ThumbContent = React.memo(({ item, theme, isShareExtension }: IThumbContent) => {

app/views/ShareView/index.tsx

@@ -26,20 +26,19 @@ import Thumbs from './Thumbs';
 import Preview from './Preview';
 import Header from './Header';
 import styles from './styles';
-import { IAttachment } from './interfaces';
-import { IUser, TSubscriptionModel } from '../../definitions';
+import { IApplicationState, IServer, IShareAttachment, IUser, TSubscriptionModel, TThreadModel } from '../../definitions';
 import { hasPermission, sendFileMessage, sendMessage } from '../../lib/methods';
 
 interface IShareViewState {
-	selected: IAttachment;
+	selected: IShareAttachment;
 	loading: boolean;
 	readOnly: boolean;
-	attachments: IAttachment[];
+	attachments: IShareAttachment[];
 	text: string;
 	room: TSubscriptionModel;
-	thread: any; // change
-	maxFileSize: number;
-	mediaAllowList: string;
+	thread: TThreadModel;
+	maxFileSize?: number;
+	mediaAllowList?: string;
 }
 
 interface IShareViewProps {
@@ -65,7 +64,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 	private messagebox: React.RefObject<IMessageBoxShareView>;
 	private files: any[];
 	private isShareExtension: boolean;
-	private serverInfo: any;
+	private serverInfo: IServer;
 
 	constructor(props: IShareViewProps) {
 		super(props);
@@ -75,7 +74,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		this.serverInfo = props.route.params?.serverInfo ?? {};
 
 		this.state = {
-			selected: {} as IAttachment,
+			selected: {} as IShareAttachment,
 			loading: false,
 			readOnly: false,
 			attachments: [],
@@ -163,7 +162,12 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		const items = await Promise.all(
 			this.files.map(async item => {
 				// Check server settings
-				const { success: canUpload, error } = canUploadFile(item, mediaAllowList, maxFileSize, permissionToUploadFile);
+				const { success: canUpload, error } = canUploadFile({
+					file: item,
+					allowList: mediaAllowList,
+					maxFileSize,
+					permissionToUploadFile
+				});
 				item.canUpload = canUpload;
 				item.error = error;
 
@@ -230,7 +234,6 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 								},
 								thread?.id,
 								server,
-								// @ts-ignore
 								{ id: user.id, token: user.token }
 							);
 						}
@@ -252,7 +255,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		}
 	};
 
-	selectFile = (item: IAttachment) => {
+	selectFile = (item: IShareAttachment) => {
 		const { attachments, selected } = this.state;
 		if (attachments.length > 0) {
 			const text = this.messagebox.current?.text;
@@ -266,7 +269,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		}
 	};
 
-	removeFile = (item: IAttachment) => {
+	removeFile = (item: IShareAttachment) => {
 		const { selected, attachments } = this.state;
 		let newSelected;
 		if (item.path === selected.path) {
@@ -367,11 +370,11 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 	}
 }
 
-const mapStateToProps = (state: any) => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	user: getUserSelector(state),
 	server: state.share.server.server || state.server.server,
-	FileUpload_MediaTypeWhiteList: state.settings.FileUpload_MediaTypeWhiteList,
-	FileUpload_MaxFileSize: state.settings.FileUpload_MaxFileSize
+	FileUpload_MediaTypeWhiteList: state.settings.FileUpload_MediaTypeWhiteList as string,
+	FileUpload_MaxFileSize: state.settings.FileUpload_MaxFileSize as number
 });
 
 export default connect(mapStateToProps)(withTheme(ShareView));

app/views/ShareView/interfaces.ts

@@ -1,15 +0,0 @@
-export interface IAttachment {
-	filename: string;
-	description?: string;
-	size: number;
-	mime?: string;
-	path: string;
-	canUpload: boolean;
-	error?: any;
-	uri: string;
-}
-
-export interface IUseDimensions {
-	width: number;
-	height: number;
-}