chore: Migrate RoomView/List to Hooks

app/views/RoomView/EmptyRoom.tsx → app/views/RoomView/List/components/EmptyRoom.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ImageBackground, StyleSheet } from 'react-native';
 
-import { useTheme } from '../../theme';
+import { useTheme } from '../../../../theme';
 
 const styles = StyleSheet.create({
 	image: {
@@ -11,12 +11,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-const EmptyRoom = React.memo(({ length, mounted, rid }: { length: number; mounted: boolean; rid: string }) => {
+export const EmptyRoom = React.memo(({ length, rid }: { length: number; rid: string }) => {
 	const { theme } = useTheme();
-	if ((length === 0 && mounted) || !rid) {
+	if (length === 0 || !rid) {
 		return <ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />;
 	}
 	return null;
 });
-
-export default EmptyRoom;

app/views/RoomView/List/components/List.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { FlatListProps, StyleSheet } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedScrollHandler } from 'react-native-reanimated';
+
+import { isIOS } from '../../../../lib/methods/helpers';
+import scrollPersistTaps from '../../../../lib/methods/helpers/scrollPersistTaps';
+import NavBottomFAB from './NavBottomFAB';
+import { IListProps } from '../definitions';
+import { SCROLL_LIMIT } from '../constants';
+import { TAnyMessageModel } from '../../../../definitions';
+
+const AnimatedFlatList = Animated.createAnimatedComponent<FlatListProps<TAnyMessageModel>>(FlatList);
+
+const styles = StyleSheet.create({
+	list: {
+		flex: 1
+	},
+	contentContainer: {
+		paddingTop: 10
+	}
+});
+
+export const List = ({ listRef, jumpToBottom, isThread, ...props }: IListProps) => {
+	const [visible, setVisible] = useState(false);
+
+	const scrollHandler = useAnimatedScrollHandler({
+		onScroll: event => {
+			if (event.contentOffset.y > SCROLL_LIMIT) {
+				runOnJS(setVisible)(true);
+			} else {
+				runOnJS(setVisible)(false);
+			}
+		}
+	});
+
+	return (
+		<>
+			<AnimatedFlatList
+				testID='room-view-messages'
+				// @ts-ignore createAnimatedComponent is making this fail
+				ref={listRef}
+				keyExtractor={item => item.id}
+				contentContainerStyle={styles.contentContainer}
+				style={styles.list}
+				inverted={isIOS}
+				removeClippedSubviews={isIOS}
+				initialNumToRender={7}
+				onEndReachedThreshold={0.5}
+				maxToRenderPerBatch={5}
+				windowSize={10}
+				scrollEventThrottle={16}
+				onScroll={scrollHandler}
+				{...props}
+				{...scrollPersistTaps}
+			/>
+			<NavBottomFAB visible={visible} onPress={jumpToBottom} isThread={isThread} />
+		</>
+	);
+};

app/views/RoomView/List/components/NavBottomFAB.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { StyleSheet, View, Platform } from 'react-native';
+
+import { CustomIcon } from '../../../../containers/CustomIcon';
+import { useTheme } from '../../../../theme';
+import Touch from '../../../../containers/Touch';
+
+const styles = StyleSheet.create({
+	container: {
+		position: 'absolute',
+		right: 15
+	},
+	button: {
+		borderRadius: 25
+	},
+	content: {
+		width: 50,
+		height: 50,
+		borderRadius: 25,
+		borderWidth: 1,
+		alignItems: 'center',
+		justifyContent: 'center'
+	}
+});
+
+const NavBottomFAB = ({
+	visible,
+	onPress,
+	isThread
+}: {
+	visible: boolean;
+	onPress: Function;
+	isThread: boolean;
+}): React.ReactElement | null => {
+	const { colors } = useTheme();
+
+	if (!visible) {
+		return null;
+	}
+
+	return (
+		<View
+			style={[
+				styles.container,
+				{
+					...Platform.select({
+						ios: {
+							bottom: 100 + (isThread ? 40 : 0)
+						},
+						android: {
+							top: 15,
+							scaleY: -1
+						}
+					})
+				}
+			]}
+			testID='nav-jump-to-bottom'
+		>
+			<Touch onPress={() => onPress()} style={[styles.button, { backgroundColor: colors.backgroundColor }]}>
+				<View style={[styles.content, { borderColor: colors.borderColor }]}>
+					<CustomIcon name='chevron-down' color={colors.auxiliaryTintColor} size={36} />
+				</View>
+			</Touch>
+		</View>
+	);
+};
+
+export default NavBottomFAB;

app/views/RoomView/List/RefreshControl.tsx → app/views/RoomView/List/components/RefreshControl.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { RefreshControl as RNRefreshControl, RefreshControlProps, StyleSheet } from 'react-native';
 
-import { useTheme } from '../../../theme';
-import { isAndroid } from '../../../lib/methods/helpers';
+import { useTheme } from '../../../../theme';
+import { isAndroid } from '../../../../lib/methods/helpers';
 
 const style = StyleSheet.create({
 	container: {
@@ -17,7 +17,7 @@ interface IRefreshControl extends RefreshControlProps {
 	children: React.ReactElement;
 }
 
-const RefreshControl = ({ children, onRefresh, refreshing }: IRefreshControl): React.ReactElement => {
+export const RefreshControl = ({ children, onRefresh, refreshing }: IRefreshControl): React.ReactElement => {
 	const { colors } = useTheme();
 	if (isAndroid) {
 		return (
@@ -36,5 +36,3 @@ const RefreshControl = ({ children, onRefresh, refreshing }: IRefreshControl): R
 
 	return React.cloneElement(children, { refreshControl });
 };
-
-export default RefreshControl;

app/views/RoomView/List/components/index.ts

@@ -0,0 +1,4 @@
+export * from './NavBottomFAB';
+export * from './RefreshControl';
+export * from './EmptyRoom';
+export * from './List';

app/views/RoomView/List/constants.ts

@@ -0,0 +1,7 @@
+export const QUERY_SIZE = 50;
+
+export const VIEWABILITY_CONFIG = {
+	itemVisiblePercentThreshold: 10
+};
+
+export const SCROLL_LIMIT = 200;

app/views/RoomView/List/definitions.ts

@@ -0,0 +1,31 @@
+import { RefObject } from 'react';
+import { FlatListProps } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+
+import { TAnyMessageModel } from '../../../definitions';
+
+export type TListRef = RefObject<FlatList<TAnyMessageModel>>;
+
+export type TMessagesIdsRef = RefObject<string[]>;
+
+export interface IListProps extends FlatListProps<TAnyMessageModel> {
+	listRef: TListRef;
+	jumpToBottom: () => void;
+	isThread: boolean;
+}
+
+export interface IListContainerRef {
+	jumpToMessage: (messageId: string) => Promise<void>;
+	cancelJumpToMessage: () => void;
+}
+
+export interface IListContainerProps {
+	renderRow: Function;
+	rid: string;
+	tmid?: string;
+	loading: boolean;
+	listRef: TListRef;
+	hideSystemMessages: string[];
+	showMessageInMainThread: boolean;
+	serverVersion: string | null;
+}

app/views/RoomView/List/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useMessages';
+export * from './useRefresh';
+export * from './useScroll';