From f0f15672979ad2452aa26e8798af375f3c7de282 Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Thu, 7 Nov 2024 15:35:00 +0000
Subject: [PATCH 1/4] feat: upload photo

---
 src/screens/Profile.tsx | 31 +++++++++++++++++++++++++++++--
 src/utils/Slug.ts       | 10 ++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/Slug.ts

diff --git a/src/screens/Profile.tsx b/src/screens/Profile.tsx
index f725291..357587c 100644
--- a/src/screens/Profile.tsx
+++ b/src/screens/Profile.tsx
@@ -8,6 +8,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 import { api } from '@services/api';
+import { AppError } from '@utils/AppError';
+import { slug } from '@utils/Slug';
 
 import { useAuth } from '@hooks/useAuth';
 
@@ -16,7 +18,6 @@ import { Input } from '@components/Input';
 import { ScreenHeader } from '@components/ScreenHeader';
 import { UserPhoto } from '@components/UserPhoto';
 import { ToastMessage } from '@components/ToastMessage';
-import { AppError } from '@utils/AppError';
 
 type ProfileForm = {
   name: string;
@@ -150,7 +151,33 @@ export function Profile() {
           });
         }
 
-        setUserPhoto(photoURI);
+        const fileExtension = photoSelection.assets[0].uri.split('.').pop();
+        const photoFile = {
+          name: `${slug(user.name)}.${fileExtension}`.toLowerCase(),
+          uri: photoSelection.assets[0].uri,
+          type: `${photoSelection.assets[0].type}/${fileExtension}`,
+        } as any;
+
+        const userPhotoUploadForm = new FormData();
+        userPhotoUploadForm.append('avatar', photoFile);
+
+        await api.patch('/users/avatar', userPhotoUploadForm, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        });
+
+        toast.show({
+          placement: 'top',
+          render: ({ id }) => (
+            <ToastMessage
+              id={id}
+              title="Foto do perfil atualizada com sucesso!"
+              action="success"
+              onClose={() => toast.close(id)}
+            />
+          ),
+        });
       }
     } catch (error) {
       console.error(error);
diff --git a/src/utils/Slug.ts b/src/utils/Slug.ts
new file mode 100644
index 0000000..ab41bf3
--- /dev/null
+++ b/src/utils/Slug.ts
@@ -0,0 +1,10 @@
+export function slug(str: string): string {
+  return str
+    .normalize('NFD') // Normalize accented characters to decomposed form
+    .replace(/[\u0300-\u036f]/g, '') // Remove diacritic marks (accents)
+    .toLowerCase() // Convert to lowercase
+    .replace(/[^a-z0-9\s-]/g, '') // Remove non-alphanumeric characters except spaces and hyphens
+    .trim() // Remove leading and trailing spaces
+    .replace(/\s+/g, '-') // Replace spaces with hyphens
+    .replace(/-+/g, '-'); // Replace multiple hyphens with a single hyphen
+}
-- 
2.39.5


From c87d6b176b412a22861471642616e9673613ec62 Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Thu, 7 Nov 2024 15:40:40 +0000
Subject: [PATCH 2/4] feat: update user with new avatar file name

---
 src/screens/Profile.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/screens/Profile.tsx b/src/screens/Profile.tsx
index 357587c..b420e50 100644
--- a/src/screens/Profile.tsx
+++ b/src/screens/Profile.tsx
@@ -161,12 +161,16 @@ export function Profile() {
         const userPhotoUploadForm = new FormData();
         userPhotoUploadForm.append('avatar', photoFile);
 
-        await api.patch('/users/avatar', userPhotoUploadForm, {
+        const avatarUpdateResponse = await api.patch('/users/avatar', userPhotoUploadForm, {
           headers: {
             'Content-Type': 'multipart/form-data',
           },
         });
 
+        const userUpdated = user;
+        userUpdated.avatar = avatarUpdateResponse.data.avatar;
+        updateUserData(userUpdated);
+
         toast.show({
           placement: 'top',
           render: ({ id }) => (
-- 
2.39.5


From 7d90c66b50647216b230815191b753a1096a4b8b Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Thu, 7 Nov 2024 16:03:18 +0000
Subject: [PATCH 3/4] feat: load image on home and profile screens

---
 src/components/HomeHeader.tsx | 4 +++-
 src/screens/Profile.tsx       | 7 +++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/HomeHeader.tsx b/src/components/HomeHeader.tsx
index ba9ba45..3ee80f4 100644
--- a/src/components/HomeHeader.tsx
+++ b/src/components/HomeHeader.tsx
@@ -6,6 +6,8 @@ import { UserPhoto } from './UserPhoto';
 
 import defaultAvatar from '@assets/userPhotoDefault.png';
 
+import { api } from '@services/api';
+
 import { useAuth } from '@hooks/useAuth';
 
 export function HomeHeader() {
@@ -17,7 +19,7 @@ export function HomeHeader() {
   return (
     <HStack bg="$gray600" pt="$16" pb="$5" px="$8" alignItems="center" gap="$4">
       <UserPhoto
-        source={avatar ? { uri: avatar } : defaultAvatar}
+        source={avatar ? { uri: `${api.defaults.baseURL}/avatar/${avatar}` } : defaultAvatar}
         alt="avatar image"
         h="$16"
         w="$16"
diff --git a/src/screens/Profile.tsx b/src/screens/Profile.tsx
index b420e50..df7c409 100644
--- a/src/screens/Profile.tsx
+++ b/src/screens/Profile.tsx
@@ -51,7 +51,6 @@ const profileSchema = yup.object({
 
 export function Profile() {
   const [isUpdating, setIsUpdating] = useState(false);
-  const [userPhoto, setUserPhoto] = useState('https://i.pravatar.cc/200');
 
   const toast = useToast();
   const { user, updateUserData } = useAuth();
@@ -194,7 +193,11 @@ export function Profile() {
 
       <ScrollView contentContainerStyle={{ paddingHorizontal: 36 }}>
         <Center mt="$6" px="$10">
-          <UserPhoto source={{ uri: userPhoto }} alt="imagem de perfil" size="xl" />
+          <UserPhoto
+            source={{ uri: `${api.defaults.baseURL}/avatar/${user.avatar}` }}
+            alt="imagem de perfil"
+            size="xl"
+          />
 
           <TouchableOpacity onPress={handleUserPhotoSelection}>
             <Text color="$green500" fontFamily="$heading" fontSize="$md" mt="$2" mb="$8">
-- 
2.39.5


From e3fc71a53f682307520eff716e68bc5458a21a26 Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Thu, 7 Nov 2024 17:34:36 +0000
Subject: [PATCH 4/4] fix: default user photo on profile

---
 src/screens/Profile.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/screens/Profile.tsx b/src/screens/Profile.tsx
index df7c409..f0bd82a 100644
--- a/src/screens/Profile.tsx
+++ b/src/screens/Profile.tsx
@@ -7,6 +7,8 @@ import * as yup from 'yup';
 import { Controller, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 
+import defaultAvatar from '@assets/userPhotoDefault.png';
+
 import { api } from '@services/api';
 import { AppError } from '@utils/AppError';
 import { slug } from '@utils/Slug';
@@ -194,7 +196,9 @@ export function Profile() {
       <ScrollView contentContainerStyle={{ paddingHorizontal: 36 }}>
         <Center mt="$6" px="$10">
           <UserPhoto
-            source={{ uri: `${api.defaults.baseURL}/avatar/${user.avatar}` }}
+            source={
+              user.avatar ? { uri: `${api.defaults.baseURL}/avatar/${user.avatar}` } : defaultAvatar
+            }
             alt="imagem de perfil"
             size="xl"
           />
-- 
2.39.5