feat: add edit profile photo and name functionality

Copilot · andrew-bierman · Copilot · commit 16196c6e0940 · 2026-03-09T11:03:52.000Z
- Add avatarUrl column to users table with migration
- Update API UserSchema and handlers to support avatarUrl
- Add useUpdateProfile hook for saving profile changes
- Fix name.tsx to use real user data and save via API
- Make profile avatar tappable with image picker and upload
- Add navigation from name row to name edit screen

Co-authored-by: andrew-bierman &lt;94939237+andrew-bierman@users.noreply.github.com&gt;
diff --git a/apps/expo/app/(app)/(tabs)/profile/index.tsx b/apps/expo/app/(app)/(tabs)/profile/index.tsx
@@ -1,9 +1,10 @@
 import type { AlertRef } from '@packrat/ui/nativewindui';
 import {
   ActivityIndicator,
-  Alert,
+  Alert as AlertComponent,
   Avatar,
   AvatarFallback,
+  AvatarImage,
   Button,
   ESTIMATED_ITEM_HEIGHT,
   List,
@@ -18,13 +19,17 @@ import { withAuthWall } from 'expo-app/features/auth/hocs';
 import { useAuth } from 'expo-app/features/auth/hooks/useAuth';
 import { useUser } from 'expo-app/features/auth/hooks/useUser';
 import { ProfileAuthWall } from 'expo-app/features/profile/components';
+import { useUpdateProfile } from 'expo-app/features/profile/hooks/useUpdateProfile';
+import { useImagePicker } from 'expo-app/features/packs/hooks/useImagePicker';
+import { uploadImage } from 'expo-app/features/packs/utils/uploadImage';
 import { cn } from 'expo-app/lib/cn';
 import { hasUnsyncedChanges } from 'expo-app/lib/hasUnsyncedChanges';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
-import { Stack } from 'expo-router';
+import { buildPackTemplateItemImageUrl } from 'expo-app/lib/utils/buildPackTemplateItemImageUrl';
+import { router, Stack } from 'expo-router';
 import * as Updates from 'expo-updates';
 import { useRef, useState } from 'react';
-import { Platform, SafeAreaView, View } from 'react-native';
+import { Alert, Platform, SafeAreaView, TouchableOpacity, View } from 'react-native';
 
 const ESTIMATED_ITEM_SIZE =
   ESTIMATED_ITEM_HEIGHT[Platform.OS === 'ios' ? 'titleOnly' : 'withSubTitle'];
@@ -52,6 +57,7 @@ function Profile() {
     {
       id: 'name',
       title: t('common.name'),
+      onPress: () => router.push('/(app)/(tabs)/profile/name'),
       ...(Platform.OS === 'ios' ? { value: displayName } : { subTitle: displayName }),
     },
     {
@@ -92,6 +98,7 @@ function Item({ info }: { info: ListRenderItemInfo<DataItem> }) {
   return (
     <ListItem
       titleClassName="text-lg"
+      onPress={info.item.onPress}
       rightView={
         <View className="flex-1 flex-row items-center gap-0.5 px-2">
           {!!info.item.value && <Text className="text-muted-foreground">{info.item.value}</Text>}
@@ -104,6 +111,11 @@ function Item({ info }: { info: ListRenderItemInfo<DataItem> }) {
 
 function ListHeaderComponent() {
   const user = useUser();
+  const { updateProfile } = useUpdateProfile();
+  const { pickImage } = useImagePicker();
+  const [isUploading, setIsUploading] = useState(false);
+  const { t } = useTranslation();
+
   const initials =
     user?.firstName && user?.lastName
       ? `${user.firstName[0]}${user.lastName[0]}`
@@ -116,21 +128,51 @@ function ListHeaderComponent() {
 
   const username = user?.email || '';
 
+  // Build the full avatar URL from the stored R2 key or an absolute URL
+  const avatarUri = user?.avatarUrl ? buildPackTemplateItemImageUrl(user.avatarUrl) : null;
+
+  async function handleAvatarPress() {
+    try {
+      const image = await pickImage();
+      if (!image) return;
+      setIsUploading(true);
+      const remoteFileName = await uploadImage(image.fileName, image.uri);
+      if (remoteFileName) {
+        await updateProfile({ avatarUrl: remoteFileName });
+      }
+    } catch (err) {
+      if (err instanceof Error && err.message !== 'Permission to access media library was denied') {
+        Alert.alert(t('errors.somethingWentWrong'), t('errors.tryAgain'));
+      }
+    } finally {
+      setIsUploading(false);
+    }
+  }
+
   return (
     <SafeAreaView className="ios:pb-8 items-center pb-4 pt-8">
-      <Avatar alt={`${displayName}'s Profile`} className="h-24 w-24">
-        <AvatarFallback>
-          <Text
-            variant="largeTitle"
-            className={cn(
-              'font-medium text-white dark:text-background',
-              Platform.OS === 'ios' && 'dark:text-foreground',
+      <TouchableOpacity onPress={handleAvatarPress} disabled={isUploading}>
+        <Avatar alt={`${displayName}'s Profile`} className="h-24 w-24">
+          {avatarUri ? (
+            <AvatarImage source={{ uri: avatarUri }} />
+          ) : null}
+          <AvatarFallback>
+            {isUploading ? (
+              <ActivityIndicator />
+            ) : (
+              <Text
+                variant="largeTitle"
+                className={cn(
+                  'font-medium text-white dark:text-background',
+                  Platform.OS === 'ios' && 'dark:text-foreground',
+                )}
+              >
+                {initials}
+              </Text>
             )}
-          >
-            {initials}
-          </Text>
-        </AvatarFallback>
-      </Avatar>
+          </AvatarFallback>
+        </Avatar>
+      </TouchableOpacity>
       <View className="p-1" />
       <Text variant="title1">{displayName}</Text>
       <Text className="text-muted-foreground">{username}</Text>
@@ -216,7 +258,7 @@ function ListFooterComponent() {
           <Text className="text-destructive">{t('auth.logOut')}</Text>
         )}
       </Button>
-      <Alert title="" buttons={[]} ref={alertRef} />
+      <AlertComponent title="" buttons={[]} ref={alertRef} />
     </View>
   );
 }
diff --git a/apps/expo/app/(app)/(tabs)/profile/name.tsx b/apps/expo/app/(app)/(tabs)/profile/name.tsx
@@ -1,19 +1,24 @@
 import { Button, Form, FormItem, FormSection, Text, TextField } from '@packrat/ui/nativewindui';
 import { cn } from 'expo-app/lib/cn';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
+import { useUser } from 'expo-app/features/auth/hooks/useUser';
+import { useUpdateProfile } from 'expo-app/features/profile/hooks/useUpdateProfile';
 import { router, Stack } from 'expo-router';
 import * as React from 'react';
-import { Platform, View } from 'react-native';
+import { Alert, Platform, View } from 'react-native';
 import { KeyboardAwareScrollView, KeyboardController } from 'react-native-keyboard-controller';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function NameScreen() {
   const insets = useSafeAreaInsets();
   const { t } = useTranslation();
+  const user = useUser();
+  const { updateProfile, isLoading } = useUpdateProfile();
+
   const [form, setForm] = React.useState({
-    first: 'Zach',
-    middle: 'Danger',
-    last: 'Nugent',
+    first: user?.firstName || '',
+    middle: '',
+    last: user?.lastName || '',
   });
 
   function onChangeText(type: 'first' | 'middle' | 'last') {
@@ -26,11 +31,26 @@ export default function NameScreen() {
     KeyboardController.setFocusTo('next');
   }
 
+  const originalFirst = user?.firstName || '';
+  const originalLast = user?.lastName || '';
+
   const canSave =
-    (form.first !== 'Zach' || form.middle !== 'Danger' || form.last !== 'Nugent') &&
+    (form.first !== originalFirst || form.last !== originalLast) &&
     !!form.first &&
     !!form.last;
 
+  async function handleSave() {
+    const success = await updateProfile({
+      firstName: form.first,
+      lastName: form.last,
+    });
+    if (success) {
+      router.back();
+    } else {
+      Alert.alert(t('errors.somethingWentWrong'), t('errors.tryAgain'));
+    }
+  }
+
   return (
     <>
       <Stack.Screen
@@ -42,9 +62,9 @@ export default function NameScreen() {
             ios: () => (
               <Button
                 className="ios:px-0"
-                disabled={!canSave}
+                disabled={!canSave || isLoading}
                 variant="plain"
-                onPress={router.back}
+                onPress={handleSave}
               >
                 <Text className={cn(canSave && 'text-primary')}>{t('common.save')}</Text>
               </Button>
@@ -106,7 +126,7 @@ export default function NameScreen() {
                 placeholder={t('profile.requiredPlaceholder')}
                 value={form.last}
                 onChangeText={onChangeText('last')}
-                onSubmitEditing={router.back}
+                onSubmitEditing={handleSave}
                 enterKeyHint="done"
               />
             </FormItem>
@@ -115,8 +135,8 @@ export default function NameScreen() {
             <View className="items-end">
               <Button
                 className={cn('px-6', !canSave && 'bg-muted')}
-                disabled={!canSave}
-                onPress={router.back}
+                disabled={!canSave || isLoading}
+                onPress={handleSave}
               >
                 <Text>{t('common.save')}</Text>
               </Button>
diff --git a/apps/expo/features/profile/hooks/useUpdateProfile.ts b/apps/expo/features/profile/hooks/useUpdateProfile.ts
@@ -0,0 +1,35 @@
+import { userStore } from 'expo-app/features/auth/store';
+import axiosInstance, { handleApiError } from 'expo-app/lib/api/client';
+import { useState } from 'react';
+
+export type UpdateProfilePayload = {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  avatarUrl?: string | null;
+};
+
+export function useUpdateProfile() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const updateProfile = async (payload: UpdateProfilePayload): Promise<boolean> => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await axiosInstance.put('/api/user/profile', payload);
+      if (response.data?.user) {
+        userStore.set(response.data.user);
+      }
+      return true;
+    } catch (err) {
+      const { message } = handleApiError(err);
+      setError(message);
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { updateProfile, isLoading, error };
+}
diff --git a/apps/expo/features/profile/types.ts b/apps/expo/features/profile/types.ts
@@ -5,6 +5,7 @@ export interface User {
   email: string;
   firstName: string;
   lastName: string;
+  avatarUrl?: string | null;
   role: 'USER' | 'ADMIN';
   preferredWeightUnit: WeightUnit;
 }
diff --git a/packages/api/drizzle/0033_add_avatar_url_to_users.sql b/packages/api/drizzle/0033_add_avatar_url_to_users.sql
@@ -0,0 +1 @@
+ALTER TABLE "users" ADD COLUMN "avatar_url" text;
diff --git a/packages/api/drizzle/meta/_journal.json b/packages/api/drizzle/meta/_journal.json
@@ -239,6 +239,13 @@
       "when": 1760175950793,
       "tag": "0032_curvy_bromley",
       "breakpoints": true
+    },
+    {
+      "idx": 33,
+      "version": "7",
+      "when": 1741516482000,
+      "tag": "0033_add_avatar_url_to_users",
+      "breakpoints": true
     }
   ]
-}
+}
diff --git a/packages/api/src/db/schema.ts b/packages/api/src/db/schema.ts
@@ -25,6 +25,7 @@ export const users = pgTable('users', {
   passwordHash: text('password_hash'),
   firstName: text('first_name'),
   lastName: text('last_name'),
+  avatarUrl: text('avatar_url'),
   role: text('role').default('USER'), // 'USER', 'ADMIN'
   createdAt: timestamp('created_at').defaultNow(),
   updatedAt: timestamp('updated_at').defaultNow(),
diff --git a/packages/api/src/routes/user/index.ts b/packages/api/src/routes/user/index.ts
@@ -63,6 +63,7 @@ userRoutes.openapi(getUserProfileRoute, async (c) => {
         email: users.email,
         firstName: users.firstName,
         lastName: users.lastName,
+        avatarUrl: users.avatarUrl,
         role: users.role,
         emailVerified: users.emailVerified,
         createdAt: users.createdAt,
@@ -165,7 +166,7 @@ userRoutes.openapi(updateUserProfileRoute, async (c) => {
   try {
     const auth = c.get('user');
 
-    const { firstName, lastName, email } = c.req.valid('json');
+    const { firstName, lastName, email, avatarUrl } = c.req.valid('json');
     const db = createDb(c);
 
     // If email is being updated, check if it's already in use
@@ -191,6 +192,7 @@ userRoutes.openapi(updateUserProfileRoute, async (c) => {
 
     if (firstName !== undefined) updateData.firstName = firstName;
     if (lastName !== undefined) updateData.lastName = lastName;
+    if (avatarUrl !== undefined) updateData.avatarUrl = avatarUrl;
     if (email !== undefined) {
       updateData.email = email.toLowerCase();
       updateData.emailVerified = false; // Reset verification if email changes
@@ -220,6 +222,7 @@ userRoutes.openapi(updateUserProfileRoute, async (c) => {
           email: updatedUser.email,
           firstName: updatedUser.firstName,
           lastName: updatedUser.lastName,
+          avatarUrl: updatedUser.avatarUrl,
           role: updatedUser.role,
           emailVerified: updatedUser.emailVerified,
           createdAt: updatedUser.createdAt?.toISOString() || null,
diff --git a/packages/api/src/schemas/users.ts b/packages/api/src/schemas/users.ts
@@ -40,6 +40,10 @@ export const UserSchema = z
       example: '2024-01-15T10:30:00Z',
       description: 'User account last update timestamp',
     }),
+    avatarUrl: z.string().nullable().optional().openapi({
+      example: 'https://example.com/avatar.jpg',
+      description: 'User profile avatar URL',
+    }),
   })
   .openapi('User');
 
@@ -66,6 +70,10 @@ export const UpdateUserRequestSchema = z
       example: 'newemail@example.com',
       description: 'Updated email address (requires re-verification)',
     }),
+    avatarUrl: z.string().nullable().optional().openapi({
+      example: 'https://example.com/avatar.jpg',
+      description: 'Updated profile avatar URL',
+    }),
   })
   .openapi('UpdateUserRequest');
 

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ export interface User {`
`5`	`5`	`email: string;`
`6`	`6`	`firstName: string;`
`7`	`7`	`lastName: string;`
	`8`	`+ avatarUrl?: string \| null;`
`8`	`9`	`role: 'USER' \| 'ADMIN';`
`9`	`10`	`preferredWeightUnit: WeightUnit;`
`10`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+ALTER TABLE "users" ADD COLUMN "avatar_url" text;`