57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Text, View } from 'react-native';
|
|
|
|
import { IAvatar } from '../../definitions';
|
|
import { Services } from '../../lib/services';
|
|
import I18n from '../../i18n';
|
|
import styles from './styles';
|
|
import { useTheme } from '../../theme';
|
|
import AvatarSuggestionItem from './AvatarSuggestionItem';
|
|
|
|
const AvatarSuggestion = ({
|
|
onPress,
|
|
username,
|
|
resetAvatar
|
|
}: {
|
|
onPress: (value: IAvatar) => void;
|
|
username?: string;
|
|
resetAvatar?: () => void;
|
|
}) => {
|
|
const [avatarSuggestions, setAvatarSuggestions] = useState<IAvatar[]>([]);
|
|
|
|
const { colors } = useTheme();
|
|
|
|
useEffect(() => {
|
|
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);
|
|
};
|
|
getAvatarSuggestion();
|
|
}, []);
|
|
|
|
return (
|
|
<View style={styles.containerImagesUploaded}>
|
|
<Text style={[styles.itemLabel, { color: colors.titleText }]}>{I18n.t('Images_uploaded')}</Text>
|
|
<View style={styles.containerAvatarSuggestion}>
|
|
{username && resetAvatar ? (
|
|
<AvatarSuggestionItem text={`@${username}`} testID={`reset-avatar-suggestion`} onPress={resetAvatar} />
|
|
) : null}
|
|
{avatarSuggestions.slice(0, 7).map(item => (
|
|
<AvatarSuggestionItem item={item} testID={`${item?.service}-avatar-suggestion`} onPress={onPress} />
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default AvatarSuggestion;
|