16 - EditProfileHeader

src/components/ProfileTemplate/components/ProfileButton.tsx

@@ -27,15 +27,21 @@ const buttonVariants: Record<
 type ProfileButtonProps = {
   isMyProfile?: boolean;
   isFollowing?: boolean;
+  userId: number;
 };
-export function ProfileButton({isFollowing, isMyProfile}: ProfileButtonProps) {
+export function ProfileButton({
+  isFollowing,
+  isMyProfile,
+  userId,
+}: ProfileButtonProps) {
   const navigation = useNavigation();
+
   const variant = getVariant({isFollowing, isMyProfile});
   const buttonProps = buttonVariants[variant];
 
   function handleOnPress() {
     if (isMyProfile) {
-      navigation.navigate('EditProfileScreen');
+      navigation.navigate('EditProfileScreen', {userId});
     }
   }
 

src/components/ProfileTemplate/components/ProfileHeader.tsx

@@ -54,6 +54,7 @@ export function ProfileHeader({
       </Box>
 
       <ProfileButton
+        userId={userDetails.id}
         isMyProfile={isMyProfile}
         isFollowing={userDetails.isFollowing}
       />

src/routes/AppStack.tsx

@@ -35,9 +35,9 @@ export type AppStackParamList = {
     imageUri: string;
   };
   CameraScreen: undefined;
-  EditProfileScreen: undefined;
-  EditEmailScreen: undefined;
-  EditPasswordScreen: undefined;
+  EditProfileScreen: {userId: number};
+  EditEmailScreen: {userId: number};
+  EditPasswordScreen: {userId: number};
 };
 
 const Stack = createNativeStackNavigator<AppStackParamList>();

src/screens/app/EditProfileScreen/EditProfileScreen.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 
-import {Screen, Text} from '@components';
+import {useUserGetById} from '@domain';
+
+import {Screen} from '@components';
 import {AppScreenProps} from '@routes';
 
-export function EditProfileScreen({}: AppScreenProps<'EditProfileScreen'>) {
+import {EditProfileHeader} from './components/EditProfileHeader';
+
+export function EditProfileScreen({
+  route,
+}: AppScreenProps<'EditProfileScreen'>) {
+  const {user} = useUserGetById(route.params.userId);
   return (
     <Screen canGoBack scrollable title="Editar Perfil">
-      <Text preset="headingSmall">Editar Perfil</Text>
+      <EditProfileHeader user={user} />
     </Screen>
   );
 }

src/screens/app/EditProfileScreen/components/EditProfileHeader.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Pressable} from 'react-native';
+
+import {User} from '@domain';
+
+import {Box, ProfileAvatar, Text} from '@components';
+
+type Props = {
+  user?: User;
+};
+export function EditProfileHeader({user}: Props) {
+  if (!user) {
+    return null;
+  }
+
+  function navigateToPhoto() {
+    //TODO: add navigate to edit photo
+    console.log('navigate to edit photo ');
+  }
+
+  return (
+    <Box flexDirection="row" alignItems="center">
+      <ProfileAvatar imageURL={user?.profileUrl} size={64} borderRadius={24} />
+
+      <Pressable hitSlop={12} onPress={navigateToPhoto}>
+        <Text preset="paragraphMedium" color="primary" bold ml="s16">
+          Alterar foto
+        </Text>
+      </Pressable>
+    </Box>
+  );
+}