frontend: introduce avatar upload component

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 7315aa48399c26dd3cc6e78613bbd578a8e8d2b7
Parents: a5fffad
1 file(s) changed
frontend/components/ui/AvatarUpload.tsx +296 -0
frontend/components/ui/AvatarUpload.tsx
@@ -0,0 +1,296 @@
  + import React, { useState, useRef } from 'react';
  + import {
  +   View,
  +   Image,
  +   TouchableOpacity,
  +   Text,
  +   Alert,
  +   ActivityIndicator,
  +   Animated,
  +   StyleSheet,
  + } from 'react-native';
  + import * as ImagePicker from 'expo-image-picker';
  + import { Ionicons } from '@expo/vector-icons';
  + import { apiClient } from '@/lib/api';
  + import { Colors } from '@/constants/theme';
  + 
  + interface AvatarUploadProps {
  +   currentAvatar?: string | null;
  +   onUploadSuccess?: () => void;
  +   onRemoveSuccess?: () => void;
  + }
  + 
  + const AvatarUpload: React.FC<AvatarUploadProps> = ({
  +   currentAvatar = null,
  +   onUploadSuccess,
  +   onRemoveSuccess,
  + }) => {
  +   const [preview, setPreview] = useState<string | null>(currentAvatar);
  +   const [isLoading, setIsLoading] = useState<boolean>(false);
  +   const scaleAnim = useRef(new Animated.Value(1)).current;
  + 
  +   const handleImagePick = async (useCamera: boolean = false): Promise<void> => {
  +     try {
  +       const result = useCamera
  +         ? await ImagePicker.launchCameraAsync({
  +             allowsEditing: true,
  +             aspect: [1, 1],
  +             quality: 0.8,
  +           })
  +         : await ImagePicker.launchImageLibraryAsync({
  +             allowsEditing: true,
  +             aspect: [1, 1],
  +             quality: 0.8,
  +           });
  + 
  +       if (!result.canceled && result.assets && result.assets.length > 0) {
  +         const asset = result.assets[0];
  +         setPreview(asset.uri);
  +         await uploadAvatar(asset.fileName, asset.uri, asset.mimeType);
  +       }
  +     } catch (error) {
  +       console.error('Image picker error:', error);
  +       Alert.alert('Error', 'Failed to select image');
  +     }
  +   };
  + 
  +   const uploadAvatar = async (fileName: string, imageUri: string, mimeType: string): Promise<void> => {
  +     setIsLoading(true);
  + 
  +     try {
  +       const formData = new FormData();
  +       formData.append('avatar', {
  +         uri: imageUri,
  +         type: mimeType,
  +         name: fileName,
  +       } as any);
  + 
  +       const response = await apiClient.avatar(formData);
  + 
  +       onUploadSuccess?.(response.user);
  +     } catch (error) {
  +       console.error('Upload error:', error);
  +       Alert.alert('Error', error instanceof Error ? error.message : 'Upload failed');
  +       setPreview(currentAvatar);
  +     } finally {
  +       setIsLoading(false);
  +     }
  +   };
  + 
  +   const handleRemove = (): void => {
  +     Alert.alert('Remover sua foto', 'Tem certeza que quer remover sua foto de perfil?', [
  +       {
  +         text: 'Cancelar',
  +         onPress: () => {},
  +         style: 'cancel',
  +       },
  +       {
  +         text: 'Remover',
  +         onPress: async () => {
  +           setIsLoading(true);
  + 
  +           try {
  +             const response = await apiClient.removeAvatar();
  + 
  +             setPreview(null);
  +             onRemoveSuccess?.(response.user);
  +           } catch (error) {
  +             console.error('Remove error:', error);
  +             Alert.alert('Error', error instanceof Error ? error.message : 'Failed to remove avatar');
  +           } finally {
  +             setIsLoading(false);
  +           }
  +         },
  +         style: 'destructive',
  +       },
  +     ]);
  +   };
  + 
  +   const handlePressIn = (): void => {
  +     Animated.spring(scaleAnim, {
  +       toValue: 0.95,
  +       useNativeDriver: true,
  +     }).start();
  +   };
  + 
  +   const handlePressOut = (): void => {
  +     Animated.spring(scaleAnim, {
  +       toValue: 1,
  +       useNativeDriver: true,
  +     }).start();
  +   };
  + 
  +   const showImageOptions = (): void => {
  +     Alert.alert('Selecionar uma foto de perfil', 'Escolha de onde você quer:', [
  +       {
  +         text: 'Câmera',
  +         onPress: () => handleImagePick(true),
  +       },
  +       {
  +         text: 'Galeria',
  +         onPress: () => handleImagePick(false),
  +       },
  +       {
  +         text: 'Cancelar',
  +         style: 'cancel',
  +       },
  +     ]);
  +   };
  + 
  +   return (
  +     <View style={styles.container}>
  +       <View style={styles.avatarSection}>
  +         {preview ? (
  +           <View style={styles.avatarWrapper}>
  +             <Image source={{ uri: preview }} style={styles.avatarImage} />
  +             {isLoading && (
  +               <View style={styles.loadingOverlay}>
  +                 <ActivityIndicator color="#fff" size="large" />
  +               </View>
  +             )}
  +           </View>
  +         ) : (
  +           <TouchableOpacity
  +             style={styles.avatarPlaceholder}
  +             onPress={showImageOptions}
  +             activeOpacity={0.7}
  +             disabled={isLoading}
  +           >
  +             <Ionicons name="cloud-upload-outline" size={32} color="#666" />
  +             <Text style={styles.placeholderText}>Adicione uma foto</Text>
  +           </TouchableOpacity>
  +         )}
  +       </View>
  + 
  +       <View style={styles.avatarActions}>
  +         <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
  +           <TouchableOpacity
  +             style={[styles.actionBtn, styles.editBtn]}
  +             onPress={showImageOptions}
  +             onPressIn={handlePressIn}
  +             onPressOut={handlePressOut}
  +             disabled={isLoading}
  +             activeOpacity={0.8}
  +           >
  +             {isLoading ? (
  +               <ActivityIndicator color="#fff" size="small" />
  +             ) : (
  +               <Text style={styles.editBtnText}>ALTERAR FOTO</Text>
  +             )}
  +           </TouchableOpacity>
  +         </Animated.View>
  + 
  +         {preview && (
  +           <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
  +             <TouchableOpacity
  +               style={[styles.actionBtn, styles.removeBtn]}
  +               onPress={handleRemove}
  +               onPressIn={handlePressIn}
  +               onPressOut={handlePressOut}
  +               disabled={isLoading}
  +               activeOpacity={0.8}
  +             >
  +               <Text style={styles.removeBtnText}>REMOVER FOTO</Text>
  +             </TouchableOpacity>
  +           </Animated.View>
  +         )}
  +       </View>
  +     </View>
  +   );
  + };
  + 
  + const styles = StyleSheet.create({
  +   container: {
  +     alignItems: 'center',
  +     gap: 32,
  +     paddingVertical: 32,
  +   },
  +   avatarSection: {
  +     position: 'relative',
  +     width: 160,
  +     height: 160,
  +   },
  +   avatarWrapper: {
  +     width: '100%',
  +     height: '100%',
  +     borderRadius: 80,
  +     overflow: 'hidden',
  +     backgroundColor: '#f0f0f0',
  +     shadowColor: '#000',
  +     shadowOffset: { width: 0, height: 8 },
  +     shadowOpacity: 0.15,
  +     shadowRadius: 12,
  +     elevation: 8,
  +   },
  +   avatarImage: {
  +     width: '100%',
  +     height: '100%',
  +     resizeMode: 'cover',
  +   },
  +   loadingOverlay: {
  +     position: 'absolute',
  +     top: 0,
  +     left: 0,
  +     right: 0,
  +     bottom: 0,
  +     backgroundColor: 'rgba(0, 0, 0, 0.4)',
  +     alignItems: 'center',
  +     justifyContent: 'center',
  +   },
  +   avatarPlaceholder: {
  +     width: '100%',
  +     height: '100%',
  +     borderRadius: 80,
  +     borderWidth: 2,
  +     borderStyle: 'dashed',
  +     borderColor: '#d0d0d0',
  +     display: 'flex',
  +     alignItems: 'center',
  +     justifyContent: 'center',
  +     backgroundColor: '#fafafa',
  +   },
  +   placeholderText: {
  +     marginTop: 8,
  +     fontSize: 12,
  +     fontWeight: '500',
  +     color: '#666',
  +     textAlign: 'center',
  +   },
  +   avatarActions: {
  +     display: 'flex',
  +     flexDirection: 'row',
  +     gap: 16,
  +     width: '100%',
  +     maxWidth: 320,
  +     justifyContent: 'center',
  +     flexWrap: 'wrap',
  +   },
  +   actionBtn: {
  +     paddingVertical: 12,
  +     paddingHorizontal: 24,
  +     borderRadius: 6,
  +     justifyContent: 'center',
  +     alignItems: 'center',
  +     minWidth: 140,
  +   },
  +   editBtn: {
  +   },
  +   editBtnText: {
  +     fontSize: 12,
  +     fontWeight: '600',
  +     color: Colors.light.textSecondary,
  +     letterSpacing: 0.5,
  +     textTransform: 'uppercase',
  +   },
  +   removeBtn: {
  +   },
  +   removeBtnText: {
  +     fontSize: 12,
  +     fontWeight: '600',
  +     color: Colors.light.danger,
  +     letterSpacing: 0.5,
  +     textTransform: 'uppercase',
  +   },
  + });
  + 
  + export default AvatarUpload;