refactor avatar url to use hook form

app/lib/methods/helpers/image.ts

@@ -1,5 +1,5 @@
 // Fast Image can't render a svg image from a uri yet, because of that we aren't test the svg within the RegEx
-const regExpUrlImage = new RegExp(
+export const regExpUrlImage = new RegExp(
 	'.(jpg|jpeg|png|webp|avif|gif|tiff)' + // type of the URL
 		'(\\?[;&a-z\\d%_.~+=-]*)?',
 	'i' // query string

app/views/ChangeAvatarView/AvatarUrl.tsx

@@ -1,24 +1,42 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 import I18n from '../../i18n';
-import { FormTextInput } from '../../containers/TextInput';
-import { useDebounce, isImage, isValidURLRequest, isValidURL } from '../../lib/methods/helpers';
+import { ControlledFormTextInput } from '../../containers/TextInput';
+import { regExpUrlImage } from '../../lib/methods/helpers';
+
+const schema = yup.object().shape({
+	avatarUrl: yup.string().matches(regExpUrlImage).required()
+});
+
+interface ISubmit {
+	avatarUrl: string;
+}
 
 const AvatarUrl = ({ submit }: { submit: (value: string) => void }) => {
-	const handleChangeText = useDebounce(async (value: string) => {
-		if (isImage(value) && isValidURL(value)) {
-			const result = await isValidURLRequest(value);
-			if (result) {
-				submit(value);
-			}
+	const {
+		control,
+		formState: { isValid },
+		getValues
+	} = useForm<ISubmit>({ mode: 'onChange', resolver: yupResolver(schema) });
+
+	useEffect(() => {
+		if (isValid) {
+			const { avatarUrl } = getValues();
+			submit(avatarUrl);
+		} else {
+			submit('');
 		}
-	}, 300);
+	}, [isValid]);
 
 	return (
-		<FormTextInput
+		<ControlledFormTextInput
+			control={control}
+			name='avatarUrl'
 			label={I18n.t('Avatar_Url')}
 			placeholder={I18n.t('insert_Avatar_URL')}
-			onChangeText={handleChangeText}
 			testID='change-avatar-view-avatar-url'
 			containerStyle={{ marginBottom: 0 }}
 		/>

app/views/ChangeAvatarView/index.tsx

@@ -3,6 +3,7 @@ import { ScrollView, View } from 'react-native';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import ImagePicker, { Image } from 'react-native-image-crop-picker';
+import { shallowEqual } from 'react-redux';
 
 import { compareServerVersion } from '../../lib/methods/helpers';
 import KeyboardView from '../../containers/KeyboardView';
@@ -34,11 +35,14 @@ const ChangeAvatarView = () => {
 	const [textAvatar, setTextAvatar] = useState('');
 	const [saving, setSaving] = useState(false);
 	const { colors } = useTheme();
-	const { userId, username, serverVersion } = useAppSelector(state => ({
-		userId: getUserSelector(state).id,
-		username: getUserSelector(state).username,
-		serverVersion: state.server.version
-	}));
+	const { userId, username, serverVersion } = useAppSelector(
+		state => ({
+			userId: getUserSelector(state).id,
+			username: getUserSelector(state).username,
+			serverVersion: state.server.version
+		}),
+		shallowEqual
+	);
 
 	const avatarUrl = useRef<string>('');