Merge branch 'develop' into new.drawer-omnichannel

app/containers/Loading.tsx

@@ -1,8 +1,17 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import { Animated, Modal, StyleSheet, View } from 'react-native';
+import { Modal, StyleSheet, View, PixelRatio } from 'react-native';
+import Animated, {
+	cancelAnimation,
+	Extrapolate,
+	interpolate,
+	useAnimatedStyle,
+	useSharedValue,
+	withRepeat,
+	withSequence,
+	withTiming
+} from 'react-native-reanimated';
 
-import { TSupportedThemes, withTheme } from '../theme';
+import { useTheme } from '../theme';
-import { themes } from '../lib/constants';
 
 const styles = StyleSheet.create({
 	container: {
@@ -11,130 +20,54 @@ const styles = StyleSheet.create({
 		justifyContent: 'center'
 	},
 	image: {
-		width: 100,
+		width: PixelRatio.get() * 40,
-		height: 100,
+		height: PixelRatio.get() * 40,
 		resizeMode: 'contain'
 	}
 });
 
 interface ILoadingProps {
 	visible: boolean;
-	theme?: TSupportedThemes;
 }
 
-interface ILoadingState {
+const Loading = ({ visible }: ILoadingProps): React.ReactElement => {
-	scale: Animated.Value;
+	const opacity = useSharedValue(0);
-	opacity: Animated.Value;
+	const scale = useSharedValue(1);
-}
+	const { colors } = useTheme();
-
-class Loading extends React.PureComponent<ILoadingProps, ILoadingState> {
-	state = {
-		scale: new Animated.Value(1),
-		opacity: new Animated.Value(0)
-	};
-
-	private opacityAnimation?: Animated.CompositeAnimation;
-
-	private scaleAnimation?: Animated.CompositeAnimation;
-
-	componentDidMount() {
-		const { opacity, scale } = this.state;
-		const { visible } = this.props;
-
-		this.opacityAnimation = Animated.timing(opacity, {
-			toValue: 1,
-			duration: 200,
-			useNativeDriver: true
-		});
-		this.scaleAnimation = Animated.loop(
-			Animated.sequence([
-				Animated.timing(scale, {
-					toValue: 0,
-					duration: 1000,
-					useNativeDriver: true
-				}),
-				Animated.timing(scale, {
-					toValue: 1,
-					duration: 1000,
-					useNativeDriver: true
-				})
-			])
-		);
 
+	useEffect(() => {
 		if (visible) {
-			this.startAnimations();
+			opacity.value = withTiming(1, {
+				duration: 200
+			});
+			scale.value = withRepeat(withSequence(withTiming(0, { duration: 1000 }), withTiming(1, { duration: 1000 })), -1);
 		}
-	}
+		return () => {
+			cancelAnimation(scale);
+		};
+	}, [opacity, scale, visible]);
 
-	componentDidUpdate(prevProps: ILoadingProps) {
+	const animatedOpacity = useAnimatedStyle(() => ({
-		const { visible } = this.props;
+		opacity: interpolate(opacity.value, [0, 1], [0, colors.backdropOpacity], Extrapolate.CLAMP)
-		if (visible && visible !== prevProps.visible) {
+	}));
-			this.startAnimations();
+	const animatedScale = useAnimatedStyle(() => ({ transform: [{ scale: interpolate(scale.value, [0, 0.5, 1], [1, 1.1, 1]) }] }));
-		}
-	}
 
-	componentWillUnmount() {
+	return (
-		if (this.opacityAnimation && this.opacityAnimation.stop) {
+		<Modal visible={visible} transparent onRequestClose={() => {}}>
-			this.opacityAnimation.stop();
+			<View style={styles.container} testID='loading'>
-		}
+				<Animated.View
-		if (this.scaleAnimation && this.scaleAnimation.stop) {
+					style={[
-			this.scaleAnimation.stop();
+						{
-		}
+							...StyleSheet.absoluteFillObject,
-	}
+							backgroundColor: colors.backdropColor
+						},
+						animatedOpacity
+					]}
+				/>
+				<Animated.Image source={require('../static/images/logo.png')} style={[styles.image, animatedScale]} />
+			</View>
+		</Modal>
+	);
+};
 
-	startAnimations() {
+export default Loading;
-		if (this.opacityAnimation && this.opacityAnimation.start) {
-			this.opacityAnimation.start();
-		}
-		if (this.scaleAnimation && this.scaleAnimation.start) {
-			this.scaleAnimation.start();
-		}
-	}
-
-	render() {
-		const { opacity, scale } = this.state;
-		const { visible, theme } = this.props;
-
-		const scaleAnimation = scale.interpolate({
-			inputRange: [0, 0.5, 1],
-			outputRange: [1, 1.1, 1]
-		});
-
-		const opacityAnimation = opacity.interpolate({
-			inputRange: [0, 1],
-			outputRange: [0, themes[theme!].backdropOpacity],
-			extrapolate: 'clamp'
-		});
-
-		return (
-			<Modal visible={visible} transparent onRequestClose={() => {}}>
-				<View style={styles.container} testID='loading'>
-					<Animated.View
-						style={[
-							{
-								...StyleSheet.absoluteFillObject,
-								backgroundColor: themes[theme!].backdropColor,
-								opacity: opacityAnimation
-							}
-						]}
-					/>
-					<Animated.Image
-						source={require('../static/images/logo.png')}
-						style={[
-							styles.image,
-							{
-								transform: [
-									{
-										scale: scaleAnimation
-									}
-								]
-							}
-						]}
-					/>
-				</View>
-			</Modal>
-		);
-	}
-}
-
-export default withTheme(Loading);

app/lib/methods/useServer.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { IApplicationState, TServerModel } from '../../definitions';
+import database from '../database';
+
+export default function useServer() {
+	const [server, setServer] = useState<TServerModel | null>(null);
+	const shareServer = useSelector((state: IApplicationState) => state.share.server.server);
+	const appServer = useSelector((state: IApplicationState) => state.server.server);
+
+	useEffect(() => {
+		async function init() {
+			const serversDB = database.servers;
+			const serversCollection = serversDB.get('servers');
+			let serverInfo = null;
+			try {
+				serverInfo = await serversCollection.find(shareServer || appServer);
+				setServer(serverInfo);
+			} catch {
+				setServer(serverInfo);
+			}
+		}
+
+		init();
+	}, []);
+
+	return [server];
+}

app/utils/localAuthentication.ts

@@ -50,11 +50,13 @@ export const saveLastLocalAuthenticationSession = async (
 
 export const resetAttempts = (): Promise<void> => AsyncStorage.multiRemove([LOCKED_OUT_TIMER_KEY, ATTEMPTS_KEY]);
 
-const openModal = (hasBiometry: boolean) =>
+const openModal = (hasBiometry: boolean, force?: boolean) =>
-	new Promise<void>(resolve => {
+	new Promise<void>((resolve, reject) => {
 		EventEmitter.emit(LOCAL_AUTHENTICATE_EMITTER, {
 			submit: () => resolve(),
-			hasBiometry
+			hasBiometry,
+			force,
+			cancel: () => reject()
 		});
 	});
 
@@ -100,6 +102,20 @@ export const checkHasPasscode = async ({ force = true }: { force?: boolean }): P
 	return Promise.resolve();
 };
 
+export const handleLocalAuthentication = async (canCloseModal = false) => {
+	// let hasBiometry = false;
+	let hasBiometry = UserPreferences.getBool(BIOMETRY_ENABLED_KEY) ?? false;
+
+	// if biometry is enabled on the app
+	if (hasBiometry) {
+		const isEnrolled = await LocalAuthentication.isEnrolledAsync();
+		hasBiometry = isEnrolled;
+	}
+
+	// Authenticate
+	await openModal(hasBiometry, canCloseModal);
+};
+
 export const localAuthenticate = async (server: string): Promise<void> => {
 	const serversDB = database.servers;
 	const serversCollection = serversDB.get('servers');
@@ -136,17 +152,7 @@ export const localAuthenticate = async (server: string): Promise<void> => {
 				// set isLocalAuthenticated to false
 				store.dispatch(setLocalAuthenticated(false));
 
-				// let hasBiometry = false;
+				await handleLocalAuthentication();
-				let hasBiometry = UserPreferences.getBool(BIOMETRY_ENABLED_KEY) ?? false;
-
-				// if biometry is enabled on the app
-				if (hasBiometry) {
-					const isEnrolled = await LocalAuthentication.isEnrolledAsync();
-					hasBiometry = isEnrolled;
-				}
-
-				// Authenticate
-				await openModal(hasBiometry);
 
 				// set isLocalAuthenticated to true
 				store.dispatch(setLocalAuthenticated(true));

app/views/MessagesView/index.tsx

@@ -22,7 +22,7 @@ import { ChatsStackParamList } from '../../stacks/types';
 import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
 import { IEmoji } from '../../definitions/IEmoji';
 import { IRoomInfoParam } from '../SearchMessagesView';
-import { TMessageModel } from '../../definitions';
+import { TMessageModel, IUrl } from '../../definitions';
 import { Services } from '../../lib/services';
 
 interface IMessagesViewProps {
@@ -280,8 +280,25 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
 		try {
 			const result = await this.content.fetchFunc();
 			if (result.success) {
+				const urlRenderMessages = result.messages?.map((message: any) => {
+					if (message.urls && message.urls.length > 0) {
+						message.urls = message.urls?.map((url: any, index: any) => {
+							if (url.meta) {
+								return {
+									_id: index,
+									title: url.meta.pageTitle,
+									description: url.meta.ogDescription,
+									image: url.meta.ogImage,
+									url: url.url
+								} as IUrl;
+							}
+							return {} as IUrl;
+						});
+					}
+					return message;
+				});
 				this.setState({
-					messages: [...messages, ...result.messages],
+					messages: [...messages, ...urlRenderMessages],
 					total: result.total,
 					loading: false
 				});

app/views/ScreenLockedView.tsx

@@ -1,22 +1,37 @@
-import React, { useEffect, useState } from 'react';
-import Modal from 'react-native-modal';
-import useDeepCompareEffect from 'use-deep-compare-effect';
 import isEmpty from 'lodash/isEmpty';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Modal from 'react-native-modal';
 import Orientation from 'react-native-orientation-locker';
+import Touchable from 'react-native-platform-touchable';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 
-import EventEmitter from '../utils/events';
-import { LOCAL_AUTHENTICATE_EMITTER } from '../lib/constants';
-import { isTablet } from '../utils/deviceInfo';
 import { PasscodeEnter } from '../containers/Passcode';
+import { LOCAL_AUTHENTICATE_EMITTER } from '../lib/constants';
+import { CustomIcon } from '../containers/CustomIcon';
+import { useTheme } from '../theme';
+import { hasNotch, isTablet } from '../utils/deviceInfo';
+import EventEmitter from '../utils/events';
 
 interface IData {
 	submit?: () => void;
+	cancel?: () => void;
 	hasBiometry?: boolean;
+	force?: boolean;
 }
 
+const styles = StyleSheet.create({
+	close: {
+		position: 'absolute',
+		top: hasNotch ? 50 : 30,
+		left: 15
+	}
+});
+
 const ScreenLockedView = (): JSX.Element => {
 	const [visible, setVisible] = useState(false);
 	const [data, setData] = useState<IData>({});
+	const { colors } = useTheme();
 
 	useDeepCompareEffect(() => {
 		if (!isEmpty(data)) {
@@ -51,6 +66,14 @@ const ScreenLockedView = (): JSX.Element => {
 		setData({});
 	};
 
+	const onCancel = () => {
+		const { cancel } = data;
+		if (cancel) {
+			cancel();
+		}
+		setData({});
+	};
+
 	return (
 		<Modal
 			useNativeDriver
@@ -60,6 +83,11 @@ const ScreenLockedView = (): JSX.Element => {
 			animationIn='fadeIn'
 			animationOut='fadeOut'>
 			<PasscodeEnter hasBiometry={!!data?.hasBiometry} finishProcess={onSubmit} />
+			{data?.force ? (
+				<Touchable onPress={onCancel} style={styles.close}>
+					<CustomIcon name='close' color={colors.passcodePrimary} size={30} />
+				</Touchable>
+			) : null}
 		</Modal>
 	);
 };

app/views/SearchMessagesView/index.tsx

@@ -32,6 +32,7 @@ import styles from './styles';
 import { InsideStackParamList, ChatsStackParamList } from '../../stacks/types';
 import { IEmoji } from '../../definitions/IEmoji';
 import { compareServerVersion } from '../../lib/methods/helpers/compareServerVersion';
+import { IUrl } from '../../definitions';
 import { Services } from '../../lib/services';
 
 const QUERY_SIZE = 50;
@@ -155,9 +156,25 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 		// If it's not a encrypted room, search messages on the server
 		const result = await Services.searchMessages(this.rid, searchText, QUERY_SIZE, this.offset);
 		if (result.success) {
-			return result.messages;
+			const urlRenderMessages = result.messages?.map(message => {
+				if (message.urls && message.urls.length > 0) {
+					message.urls = message.urls?.map((url, index) => {
+						if (url.meta) {
+							return {
+								_id: index,
+								title: url.meta.pageTitle,
+								description: url.meta.ogDescription,
+								image: url.meta.ogImage,
+								url: url.url
+							} as IUrl;
+						}
+						return {} as IUrl;
+					});
+				}
+				return message;
+			});
+			return urlRenderMessages;
 		}
-
 		return [];
 	};
 	getMessages = async (searchText: string, debounced?: boolean) => {

app/views/SecurityPrivacyView.tsx

@@ -1,24 +1,26 @@
+import AsyncStorage from '@react-native-community/async-storage';
+import { StackNavigationProp } from '@react-navigation/stack';
 import React, { useEffect, useState } from 'react';
 import { Switch } from 'react-native';
-import { StackNavigationProp } from '@react-navigation/stack';
-import AsyncStorage from '@react-native-community/async-storage';
 import { useSelector } from 'react-redux';
 
-import StatusBar from '../containers/StatusBar';
 import * as List from '../containers/List';
-import I18n from '../i18n';
-import {
-	logEvent,
-	events,
-	toggleCrashErrorsReport,
-	toggleAnalyticsEventsReport,
-	getReportCrashErrorsValue,
-	getReportAnalyticsEventsValue
-} from '../utils/log';
 import SafeAreaView from '../containers/SafeAreaView';
-import { ANALYTICS_EVENTS_KEY, CRASH_REPORT_KEY, isFDroidBuild, SWITCH_TRACK_COLOR } from '../lib/constants';
+import StatusBar from '../containers/StatusBar';
-import { SettingsStackParamList } from '../stacks/types';
 import { IApplicationState } from '../definitions';
+import I18n from '../i18n';
+import { ANALYTICS_EVENTS_KEY, CRASH_REPORT_KEY, isFDroidBuild, SWITCH_TRACK_COLOR } from '../lib/constants';
+import useServer from '../lib/methods/useServer';
+import { SettingsStackParamList } from '../stacks/types';
+import { handleLocalAuthentication } from '../utils/localAuthentication';
+import {
+	events,
+	getReportAnalyticsEventsValue,
+	getReportCrashErrorsValue,
+	logEvent,
+	toggleAnalyticsEventsReport,
+	toggleCrashErrorsReport
+} from '../utils/log';
 
 interface ISecurityPrivacyViewProps {
 	navigation: StackNavigationProp<SettingsStackParamList, 'SecurityPrivacyView'>;
@@ -27,6 +29,7 @@ interface ISecurityPrivacyViewProps {
 const SecurityPrivacyView = ({ navigation }: ISecurityPrivacyViewProps): JSX.Element => {
 	const [crashReportState, setCrashReportState] = useState(getReportCrashErrorsValue());
 	const [analyticsEventsState, setAnalyticsEventsState] = useState(getReportAnalyticsEventsValue());
+	const [server] = useServer();
 
 	const e2eEnabled = useSelector((state: IApplicationState) => state.settings.E2E_Enable);
 
@@ -56,6 +59,13 @@ const SecurityPrivacyView = ({ navigation }: ISecurityPrivacyViewProps): JSX.Ele
 		navigation.navigate(screen);
 	};
 
+	const navigateToScreenLockConfigView = async () => {
+		if (server?.autoLock) {
+			await handleLocalAuthentication(true);
+		}
+		navigateToScreen('ScreenLockConfigView');
+	};
+
 	return (
 		<SafeAreaView testID='security-privacy-view'>
 			<StatusBar />
@@ -76,7 +86,7 @@ const SecurityPrivacyView = ({ navigation }: ISecurityPrivacyViewProps): JSX.Ele
 					<List.Item
 						title='Screen_lock'
 						showActionIndicator
-						onPress={() => navigateToScreen('ScreenLockConfigView')}
+						onPress={navigateToScreenLockConfigView}
 						testID='security-privacy-view-screen-lock'
 					/>
 					<List.Separator />

app/views/ShareView/index.tsx

@@ -361,7 +361,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}>
 				<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
 				{this.renderContent()}
-				<Loading visible={loading} theme={theme} />
+				<Loading visible={loading} />
 			</SafeAreaView>
 		);
 	}

package.json

@@ -131,11 +131,14 @@
 		"rn-fetch-blob": "0.12.0",
 		"rn-root-view": "1.0.3",
 		"semver": "7.3.5",
-		"ua-parser-js": "0.7.28",
+		"ua-parser-js": "^0.7.24",
 		"url-parse": "1.5.6",
 		"use-deep-compare-effect": "1.6.1",
 		"xregexp": "5.0.2"
 	},
+	"resolutions": {
+		"ua-parser-js": "^0.7.24"
+	},
 	"devDependencies": {
 		"@babel/core": "^7.12.9",
 		"@babel/eslint-parser": "^7.14.7",

yarn.lock

@@ -17444,15 +17444,10 @@ typical@^5.2.0:
   resolved "https://registry.yarnpkg.com/typical/-/typical-5.2.0.tgz#4daaac4f2b5315460804f0acf6cb69c52bb93066"
   integrity sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==
 
-ua-parser-js@0.7.28:
+ua-parser-js@^0.7.18, ua-parser-js@^0.7.24:
-  version "0.7.28"
+  version "0.7.31"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
-  integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
+  integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
-
-ua-parser-js@^0.7.18:
-  version "0.7.21"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
-  integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
 
 uglify-es@^3.1.9:
   version "3.3.9"