refactor avatar suggestion

app/views/ChangeAvatarView/AvatarSuggestion.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Text, View, TouchableOpacity } from 'react-native';
 
 import { IAvatar, IUser } from '../../definitions';
+import { Services } from '../../lib/services';
 import I18n from '../../i18n';
 import Avatar from '../../containers/Avatar';
-// import Touch from '../../containers/Touch';
 import styles from './styles';
 import { useTheme } from '../../theme';
 
@@ -23,16 +23,35 @@ const Item = ({ item, onPress, text }: { item?: IAvatar; onPress: (value?: IAvat
 	);
 };
 const AvatarSuggestion = ({
-	avatarSuggestions,
 	onPress,
 	user,
 	resetAvatar
 }: {
-	avatarSuggestions: IAvatar[];
 	onPress: (value?: IAvatar) => void;
 	user?: IUser;
 	resetAvatar?: () => void;
-}) => (
+}) => {
+	const [avatarSuggestions, setAvatarSuggestions] = useState<IAvatar[]>([]);
+
+	const getAvatarSuggestion = async () => {
+		const result = await Services.getAvatarSuggestion();
+		const suggestions = Object.keys(result).map(service => {
+			const { url, blob, contentType } = result[service];
+			return {
+				url,
+				data: blob,
+				service,
+				contentType
+			};
+		});
+		setAvatarSuggestions(suggestions);
+	};
+
+	useEffect(() => {
+		getAvatarSuggestion();
+	}, []);
+
+	return (
 		<View style={{ flex: 1 }}>
 			<Text style={styles.itemLabel}>{I18n.t('Images_uploaded')}</Text>
 			<View style={styles.containerAvatarSuggestion}>
@@ -42,6 +61,7 @@ const AvatarSuggestion = ({
 				))}
 			</View>
 		</View>
-);
+	);
+};
 
 export default AvatarSuggestion;

app/views/ChangeAvatarView/index.tsx

@@ -27,7 +27,7 @@ import log from '../../lib/methods/helpers/log';
 
 const ChangeAvatarView = () => {
 	const [avatar, setAvatarState] = useState<IAvatar>();
-	const [avatarSuggestions, setAvatarSuggestions] = useState<IAvatar[]>([]);
+	
 	const [textAvatar, setTextAvatar] = useState('');
 	const [saving, setSaving] = useState(false);
 	const { colors } = useTheme();
@@ -66,26 +66,6 @@ const ChangeAvatarView = () => {
 		});
 	}, [navigation]);
 
-	const getAvatarSuggestion = async () => {
-		const result = await Services.getAvatarSuggestion();
-		const suggestions = Object.keys(result).map(service => {
-			const { url, blob, contentType } = result[service];
-			return {
-				url,
-				data: blob,
-				service,
-				contentType
-			};
-		});
-		setAvatarSuggestions(suggestions);
-	};
-
-	useEffect(() => {
-		if (fromUser) {
-			getAvatarSuggestion();
-		}
-	}, [fromUser]);
-
 	const setAvatar = (value?: IAvatar) => {
 		avatarUrl.current = value?.url;
 		setAvatarState(value);
@@ -126,6 +106,12 @@ const ChangeAvatarView = () => {
 		avatarUrl.current = `@${user.username}`;
 	};
 
+	const resetRoomAvatar = () => {
+		setAvatar(undefined);
+
+		// await Services.saveRoomSettings(room.rid, params);
+	};
+
 	const pickImage = async () => {
 		const options = {
 			cropping: true,
@@ -166,11 +152,9 @@ const ChangeAvatarView = () => {
 							isUserProfile={fromUser}
 						/>
 					</View>
-					<AvatarUrl submit={value => setAvatar({ url: value, data: value, service: 'url' })} />
+					{fromUser ? <AvatarUrl submit={value => setAvatar({ url: value, data: value, service: 'url' })} /> : null}
 					<List.Separator style={styles.separator} />
-					{fromUser ? (
+					{fromUser ? <AvatarSuggestion resetAvatar={resetAvatar} user={user} onPress={setAvatar} /> : null}
-						<AvatarSuggestion resetAvatar={resetAvatar} user={user} onPress={setAvatar} avatarSuggestions={avatarSuggestions} />
-					) : null}
 
 					<Button
 						title={I18n.t('Upload_image')}
@@ -186,7 +170,7 @@ const ChangeAvatarView = () => {
 							type='primary'
 							disabled={saving}
 							backgroundColor={colors.dangerColor}
-							onPress={() => {}}
+							onPress={resetRoomAvatar}
 							testID='change-avatar-view-delete-my-account'
 						/>
 					) : null}