avatar Url

app/i18n/locales/en.json

@@ -879,5 +879,6 @@
   "room_unarchived": "unarchived room",
   "Upload_image": "Upload image",
   "Delete_image": "Delete image",
-  "Images_uploaded": "Images uploaded"
+  "Images_uploaded": "Images uploaded",
+  "Avatar": "Avatar"
 }

app/lib/methods/helpers/image.ts

@@ -0,0 +1,2 @@
+const regExpUrlImage = new RegExp(/\.(jpg|jpeg|png|webp|avif|gif|svg)$/);
+export const isImage = (url: string) => regExpUrlImage.test(url);

app/lib/methods/helpers/index.ts

@@ -14,3 +14,4 @@ export * from './server';
 export * from './url';
 export * from './isValidEmail';
 export * from './random';
+export * from './image';

app/lib/methods/helpers/url.ts

@@ -1,3 +1,5 @@
+import fetch from './fetch';
+
 export const isValidURL = (url: string): boolean => {
 	const pattern = new RegExp(
 		'^(https?:\\/\\/)?' + // protocol
@@ -13,3 +15,12 @@ export const isValidURL = (url: string): boolean => {
 
 // Use checkUseSsl: false only if server url starts with http://
 export const isSsl = (url: string): boolean => !/http:\/\//.test(url);
+
+export const isValidURLRequest = async (url: string) => {
+	try {
+		const result = await fetch(url);
+		return result.status === 200;
+	} catch {
+		return false;
+	}
+};

app/views/ChangeAvatarView/AvatarUrl.tsx

@@ -1,17 +1,24 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import I18n from '../../i18n';
 import { FormTextInput } from '../../containers/TextInput';
+import { useDebounce, isImage, isValidURLRequest, isValidURL } from '../../lib/methods/helpers';
+
+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);
+			}
+		}
+	}, 300);
 
-const AvatarUrl = ({ onSubmit }: { onSubmit: (value: string) => void }) => {
-	const [avatarUrl, setAvatarUrl] = useState('');
 	return (
 		<FormTextInput
 			label={I18n.t('Avatar_Url')}
 			placeholder={I18n.t('Avatar_Url')}
-			value={avatarUrl || undefined}
-			onChangeText={setAvatarUrl}
-			onSubmitEditing={() => onSubmit(avatarUrl)}
+			onChangeText={handleChangeText}
 			testID='change-avatar-view-avatar-url'
 			containerStyle={{ marginBottom: 0 }}
 		/>

app/views/ChangeAvatarView/index.tsx

@@ -31,9 +31,7 @@ const ChangeAvatarView = () => {
 	const { fromUser, titleHeader } = useRoute<RouteProp<ChatsStackParamList, 'ChangeAvatarView'>>().params;
 
 	useLayoutEffect(() => {
-		if (titleHeader) {
-			navigation.setOptions({ title: titleHeader });
-		}
+		titleHeader ? navigation.setOptions({ title: titleHeader }) : navigation.setOptions({ title: I18n.t('Avatar') });
 	}, [titleHeader, navigation]);
 
 	const getAvatarSuggestion = async () => {
@@ -74,9 +72,9 @@ const ChangeAvatarView = () => {
 					<View style={styles.avatarContainer} testID='change-avatar-view-avatar'>
 						<Avatar text={user.username} avatar={avatarUrl} isStatic={avatarUrl} size={100} />
 					</View>
-					<AvatarUrl onSubmit={(value: string) => setAvatarUrl(value)} />
+					<AvatarUrl submit={setAvatarUrl} />
 					<List.Separator style={styles.separator} />
-					{fromUser && avatarSuggestions ? <AvatarSuggestion avatarSuggestions={avatarSuggestions} /> : null}
+					{fromUser && avatarSuggestions.length ? <AvatarSuggestion avatarSuggestions={avatarSuggestions} /> : null}
 
 					<Button
 						title={I18n.t('Upload_image')}
@@ -92,14 +90,7 @@ const ChangeAvatarView = () => {
 						onPress={() => {}}
 						testID='change-avatar-view-delete-my-account'
 					/>
-					<Button
-						title={I18n.t('Save')}
-						type='primary'
-						onPress={() => {}}
-						// disabled={!this.formIsChanged()}
-						testID='change-avatar-view-submit'
-						// loading={saving}
-					/>
+					<Button title={I18n.t('Save')} type='primary' onPress={() => {}} testID='change-avatar-view-submit' />
 				</ScrollView>
 			</SafeAreaView>
 		</KeyboardView>

app/views/ChangeAvatarView/styles.ts

@@ -15,9 +15,9 @@ export default StyleSheet.create({
 		marginVertical: 16
 	},
 	itemLabel: {
-		marginBottom: 10,
+		marginBottom: 12,
 		fontSize: 14,
-		...sharedStyles.textMedium
+		...sharedStyles.textSemibold
 	},
 	avatarButton: {
 		width: 64,