change avatar view and avatar suggestion

app/definitions/IProfile.ts

@@ -24,9 +24,7 @@ export interface IAvatar {
 }
 
 export interface IAvatarSuggestion {
-	[service: string]: {
-		url: string;
-		blob: string;
-		contentType: string;
-	};
+	url: string;
+	blob: string;
+	contentType: string;
 }

app/i18n/locales/en.json

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

app/lib/services/restApi.ts

@@ -594,7 +594,7 @@ export const getRoomRoles = (
 	// RC 0.65.0
 	sdk.get(`${roomTypeToApiType(type)}.roles`, { roomId });
 
-export const getAvatarSuggestion = (): Promise<IAvatarSuggestion> =>
+export const getAvatarSuggestion = (): Promise<{ [service: string]: IAvatarSuggestion }> =>
 	// RC 0.51.0
 	sdk.methodCallWrapper('getAvatarSuggestion');
 

app/views/ChangeAvatarView/AvatarSuggestion.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Text, View, Alert, TouchableOpacity } from 'react-native';
+
+import { IAvatar } from '../../definitions';
+import I18n from '../../i18n';
+import Avatar from '../../containers/Avatar';
+// import Touch from '../../containers/Touch';
+import styles from './styles';
+import { useTheme } from '../../theme';
+
+const AvatarSuggestion = ({ avatarSuggestions }: { avatarSuggestions: IAvatar[] }) => {
+	const { colors } = useTheme();
+	const test = [
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions,
+		...avatarSuggestions
+	];
+	const renderItem = () =>
+		test.slice(0, 8).map(item => (
+			<TouchableOpacity
+				key={item.service}
+				testID={`${item.service}-avatar-suggestion`}
+				onPress={() => Alert.alert('aqui')}
+				style={[styles.avatarButton, { backgroundColor: colors.borderColor }]}
+			>
+				<Avatar avatar={item.url} size={64} />
+			</TouchableOpacity>
+		));
+
+	return (
+		<View style={{ flex: 1 }}>
+			<Text style={styles.itemLabel}>{I18n.t('Images_uploaded')}</Text>
+			<View style={styles.containerAvatarSuggestion}>{renderItem()}</View>
+		</View>
+	);
+};
+
+export default AvatarSuggestion;

app/views/ChangeAvatarView/index.tsx

@@ -1,5 +1,7 @@
-import React, { useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { ScrollView, View } from 'react-native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import KeyboardView from '../../containers/KeyboardView';
 import sharedStyles from '../Styles';
@@ -15,11 +17,45 @@ import Avatar from '../../containers/Avatar';
 import AvatarUrl from './AvatarUrl';
 import Button from '../../containers/Button';
 import I18n from '../../i18n';
+import { ChatsStackParamList } from '../../stacks/types';
+import { IAvatar } from '../../definitions';
+import { Services } from '../../lib/services';
+import AvatarSuggestion from './AvatarSuggestion';
 
 const ChangeAvatarView = () => {
 	const [avatarUrl, setAvatarUrl] = useState('');
+	const [avatarSuggestions, setAvatarSuggestions] = useState<IAvatar[]>([]);
 	const { colors } = useTheme();
 
+	const navigation = useNavigation<StackNavigationProp<ChatsStackParamList, 'ChangeAvatarView'>>();
+	const { fromUser, titleHeader } = useRoute<RouteProp<ChatsStackParamList, 'ChangeAvatarView'>>().params;
+
+	useLayoutEffect(() => {
+		if (titleHeader) {
+			navigation.setOptions({ title: titleHeader });
+		}
+	}, [titleHeader, 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 user = useAppSelector(state => getUserSelector(state));
 
 	return (
@@ -40,6 +76,7 @@ const ChangeAvatarView = () => {
 					</View>
 					<AvatarUrl onSubmit={(value: string) => setAvatarUrl(value)} />
 					<List.Separator style={styles.separator} />
+					{fromUser && avatarSuggestions ? <AvatarSuggestion avatarSuggestions={avatarSuggestions} /> : null}
 
 					<Button
 						title={I18n.t('Upload_image')}

app/views/ChangeAvatarView/styles.ts

@@ -1,5 +1,7 @@
 import { StyleSheet } from 'react-native';
 
+import sharedStyles from '../Styles';
+
 export default StyleSheet.create({
 	disabled: {
 		opacity: 0.3
@@ -11,5 +13,24 @@ export default StyleSheet.create({
 	},
 	separator: {
 		marginVertical: 16
+	},
+	itemLabel: {
+		marginBottom: 10,
+		fontSize: 14,
+		...sharedStyles.textMedium
+	},
+	avatarButton: {
+		width: 64,
+		height: 64,
+		alignItems: 'center',
+		justifyContent: 'center',
+		marginRight: 20,
+		marginBottom: 12,
+		borderRadius: 4
+	},
+	containerAvatarSuggestion: {
+		flex: 1,
+		flexWrap: 'wrap',
+		flexDirection: 'row'
 	}
 });

app/views/ProfileView/index.tsx

@@ -69,7 +69,7 @@ interface IProfileViewState {
 	currentPassword: string | null;
 	avatarUrl: string | null;
 	avatar: IAvatar;
-	avatarSuggestions: IAvatarSuggestion;
+	avatarSuggestions: { [service: string]: IAvatarSuggestion };
 	customFields: {
 		[key: string | number]: string;
 	};
@@ -415,6 +415,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 				})}
 				{Object.keys(avatarSuggestions).map(service => {
 					const { url, blob, contentType } = avatarSuggestions[service];
+					console.log('🚀 ~ file: index.tsx:418 ~ ProfileView ~ {Object.keys ~ url', url);
 					return this.renderAvatarButton({
 						disabled: !Accounts_AllowUserAvatarChange,
 						key: `profile-view-avatar-${service}`,