From 5e1f1c89dabbf8714c7d59a210ea9c41adc75b8c Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Wed, 7 Dec 2022 18:02:16 -0300
Subject: [PATCH] avatar Url

---
 app/i18n/locales/en.json                 |  3 ++-
 app/lib/methods/helpers/image.ts         |  2 ++
 app/lib/methods/helpers/index.ts         |  1 +
 app/lib/methods/helpers/url.ts           | 11 +++++++++++
 app/views/ChangeAvatarView/AvatarUrl.tsx | 19 +++++++++++++------
 app/views/ChangeAvatarView/index.tsx     | 17 ++++-------------
 app/views/ChangeAvatarView/styles.ts     |  4 ++--
 7 files changed, 35 insertions(+), 22 deletions(-)
 create mode 100644 app/lib/methods/helpers/image.ts

diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index c3b680f8e..87dbf80b0 100644
--- a/app/i18n/locales/en.json
+++ b/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"
 }
\ No newline at end of file
diff --git a/app/lib/methods/helpers/image.ts b/app/lib/methods/helpers/image.ts
new file mode 100644
index 000000000..60120670e
--- /dev/null
+++ b/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);
diff --git a/app/lib/methods/helpers/index.ts b/app/lib/methods/helpers/index.ts
index 0c9414e9c..4098203a0 100644
--- a/app/lib/methods/helpers/index.ts
+++ b/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';
diff --git a/app/lib/methods/helpers/url.ts b/app/lib/methods/helpers/url.ts
index efe675b7e..0370e33d3 100644
--- a/app/lib/methods/helpers/url.ts
+++ b/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;
+	}
+};
diff --git a/app/views/ChangeAvatarView/AvatarUrl.tsx b/app/views/ChangeAvatarView/AvatarUrl.tsx
index 5b712bad7..cb0d0ef0e 100644
--- a/app/views/ChangeAvatarView/AvatarUrl.tsx
+++ b/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 }}
 		/>
diff --git a/app/views/ChangeAvatarView/index.tsx b/app/views/ChangeAvatarView/index.tsx
index 0f843f58e..21cb5b141 100644
--- a/app/views/ChangeAvatarView/index.tsx
+++ b/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>
diff --git a/app/views/ChangeAvatarView/styles.ts b/app/views/ChangeAvatarView/styles.ts
index 406723fb4..492d93809 100644
--- a/app/views/ChangeAvatarView/styles.ts
+++ b/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,