feat: Enhance user profile management with image upload and display in account and friends screens

Devasy · Devasy · commit 6f9e0160c10b · 2025-08-09T00:06:55.000+05:30
diff --git a/frontend/api/auth.js b/frontend/api/auth.js
@@ -8,7 +8,7 @@ export const signup = (name, email, password) => {
   return apiClient.post("/auth/signup/email", { name, email, password });
 };
 
-export const updateUser = (userData) => apiClient.patch("/user/", userData);
+export const updateUser = (userData) => apiClient.patch("/users/me", userData);
 
 export const refresh = (refresh_token) => {
   return apiClient.post("/auth/refresh", { refresh_token });
diff --git a/frontend/screens/AccountScreen.js b/frontend/screens/AccountScreen.js
@@ -1,18 +1,18 @@
-import React, { useContext } from 'react';
-import { View, StyleSheet, Alert } from 'react-native';
-import { Text, Appbar, Avatar, List, Divider } from 'react-native-paper';
-import { AuthContext } from '../context/AuthContext';
+import { useContext } from "react";
+import { Alert, StyleSheet, View } from "react-native";
+import { Appbar, Avatar, Divider, List, Text } from "react-native-paper";
+import { AuthContext } from "../context/AuthContext";
 
 const AccountScreen = ({ navigation }) => {
-    const { user, logout } = useContext(AuthContext);
+  const { user, logout } = useContext(AuthContext);
 
-    const handleLogout = () => {
-        logout();
-    };
+  const handleLogout = () => {
+    logout();
+  };
 
-    const handleComingSoon = () => {
-        Alert.alert('Coming Soon', 'This feature is not yet implemented.');
-    };
+  const handleComingSoon = () => {
+    Alert.alert("Coming Soon", "This feature is not yet implemented.");
+  };
 
   return (
     <View style={styles.container}>
@@ -21,35 +21,43 @@ const AccountScreen = ({ navigation }) => {
       </Appbar.Header>
       <View style={styles.content}>
         <View style={styles.profileSection}>
-            <Avatar.Text size={80} label={user?.name?.charAt(0) || 'A'} />
-            <Text variant="headlineSmall" style={styles.name}>{user?.name}</Text>
-            <Text variant="bodyLarge" style={styles.email}>{user?.email}</Text>
+          {user?.imageUrl && /^(https?:|data:image)/.test(user.imageUrl) ? (
+            <Avatar.Image size={80} source={{ uri: user.imageUrl }} />
+          ) : (
+            <Avatar.Text size={80} label={user?.name?.charAt(0) || "A"} />
+          )}
+          <Text variant="headlineSmall" style={styles.name}>
+            {user?.name}
+          </Text>
+          <Text variant="bodyLarge" style={styles.email}>
+            {user?.email}
+          </Text>
         </View>
 
         <List.Section>
-            <List.Item
-                title="Edit Profile"
-                left={() => <List.Icon icon="account-edit" />}
-                onPress={() => navigation.navigate('EditProfile')}
-            />
-            <Divider />
-            <List.Item
-                title="Email Settings"
-                left={() => <List.Icon icon="email-settings" />}
-                onPress={handleComingSoon}
-            />
-            <Divider />
-            <List.Item
-                title="Send Feedback"
-                left={() => <List.Icon icon="feedback" />}
-                onPress={handleComingSoon}
-            />
-             <Divider />
-            <List.Item
-                title="Logout"
-                left={() => <List.Icon icon="logout" />}
-                onPress={handleLogout}
-            />
+          <List.Item
+            title="Edit Profile"
+            left={() => <List.Icon icon="account-edit" />}
+            onPress={() => navigation.navigate("EditProfile")}
+          />
+          <Divider />
+          <List.Item
+            title="Email Settings"
+            left={() => <List.Icon icon="email-settings" />}
+            onPress={handleComingSoon}
+          />
+          <Divider />
+          <List.Item
+            title="Send Feedback"
+            left={() => <List.Icon icon="feedback" />}
+            onPress={handleComingSoon}
+          />
+          <Divider />
+          <List.Item
+            title="Logout"
+            left={() => <List.Icon icon="logout" />}
+            onPress={handleLogout}
+          />
         </List.Section>
       </View>
     </View>
@@ -64,16 +72,16 @@ const styles = StyleSheet.create({
     padding: 16,
   },
   profileSection: {
-    alignItems: 'center',
+    alignItems: "center",
     marginBottom: 24,
   },
   name: {
-      marginTop: 16,
+    marginTop: 16,
+  },
+  email: {
+    marginTop: 4,
+    color: "gray",
   },
-    email: {
-        marginTop: 4,
-        color: 'gray',
-    }
 });
 
 export default AccountScreen;
diff --git a/frontend/screens/EditProfileScreen.js b/frontend/screens/EditProfileScreen.js
@@ -1,12 +1,14 @@
+import * as ImagePicker from "expo-image-picker";
 import { useContext, useState } from "react";
 import { Alert, StyleSheet, View } from "react-native";
-import { Appbar, Button, TextInput, Title } from "react-native-paper";
+import { Appbar, Avatar, Button, TextInput, Title } from "react-native-paper";
 import { updateUser } from "../api/auth";
 import { AuthContext } from "../context/AuthContext";
 
 const EditProfileScreen = ({ navigation }) => {
   const { user, token, updateUserInContext } = useContext(AuthContext);
   const [name, setName] = useState(user?.name || "");
+  const [pickedImage, setPickedImage] = useState(null); // { uri, base64 }
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleUpdateProfile = async () => {
@@ -16,7 +18,14 @@ const EditProfileScreen = ({ navigation }) => {
     }
     setIsSubmitting(true);
     try {
-      const response = await updateUser({ name });
+      const updates = { name };
+
+      // Add image if picked
+      if (pickedImage?.base64) {
+        updates.imageUrl = `data:image/jpeg;base64,${pickedImage.base64}`;
+      }
+
+      const response = await updateUser(updates);
       updateUserInContext(response.data);
       Alert.alert("Success", "Profile updated successfully.");
       navigation.goBack();
@@ -28,6 +37,29 @@ const EditProfileScreen = ({ navigation }) => {
     }
   };
 
+  const pickImage = async () => {
+    // Ask permissions
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== "granted") {
+      Alert.alert(
+        "Permission required",
+        "We need media library permission to select an image."
+      );
+      return;
+    }
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      base64: true,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 0.8,
+    });
+    if (!result.canceled && result.assets && result.assets.length > 0) {
+      const asset = result.assets[0];
+      setPickedImage({ uri: asset.uri, base64: asset.base64 });
+    }
+  };
+
   return (
     <View style={styles.container}>
       <Appbar.Header>
@@ -36,6 +68,26 @@ const EditProfileScreen = ({ navigation }) => {
       </Appbar.Header>
       <View style={styles.content}>
         <Title>Edit Your Details</Title>
+
+        {/* Profile Picture Section */}
+        <View style={styles.profilePictureSection}>
+          {pickedImage?.uri ? (
+            <Avatar.Image size={100} source={{ uri: pickedImage.uri }} />
+          ) : user?.imageUrl && /^(https?:|data:image)/.test(user.imageUrl) ? (
+            <Avatar.Image size={100} source={{ uri: user.imageUrl }} />
+          ) : (
+            <Avatar.Text size={100} label={(user?.name || "?").charAt(0)} />
+          )}
+          <Button
+            mode="outlined"
+            onPress={pickImage}
+            icon="camera"
+            style={styles.imageButton}
+          >
+            {pickedImage ? "Change Photo" : "Add Photo"}
+          </Button>
+        </View>
+
         <TextInput
           label="Name"
           value={name}
@@ -63,6 +115,13 @@ const styles = StyleSheet.create({
   content: {
     padding: 16,
   },
+  profilePictureSection: {
+    alignItems: "center",
+    marginBottom: 24,
+  },
+  imageButton: {
+    marginTop: 12,
+  },
   input: {
     marginBottom: 16,
   },
diff --git a/frontend/screens/FriendsScreen.js b/frontend/screens/FriendsScreen.js
@@ -4,12 +4,13 @@ import { Alert, FlatList, StyleSheet, View } from "react-native";
 import {
   ActivityIndicator,
   Appbar,
+  Avatar,
   Divider,
   IconButton,
   List,
   Text,
 } from "react-native-paper";
-import { getFriendsBalance } from "../api/groups";
+import { getFriendsBalance, getGroupMembers, getGroups } from "../api/groups";
 import { AuthContext } from "../context/AuthContext";
 
 const FriendsScreen = () => {
@@ -23,20 +24,51 @@ const FriendsScreen = () => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
+        // Fetch friends balance data
         const friendsResponse = await getFriendsBalance();
         const friendsData = friendsResponse.data.friendsBalance || [];
 
-        // Transform the backend data to match the expected frontend format
-        const transformedFriends = friendsData.map((friend) => ({
-          id: friend.userId,
-          name: friend.userName,
-          netBalance: friend.netBalance,
-          groups: friend.breakdown.map((group) => ({
-            id: group.groupId,
-            name: group.groupName,
-            balance: group.balance,
-          })),
-        }));
+        // Fetch all groups to get member details with user images
+        const groupsResponse = await getGroups();
+        const groups = groupsResponse.data.groups || [];
+
+        // Create a map of userId to user details by fetching all group members
+        const userDetailsMap = new Map();
+
+        for (const group of groups) {
+          try {
+            const membersResponse = await getGroupMembers(group.id);
+            const members = membersResponse.data || [];
+
+            members.forEach((member) => {
+              if (member.user && member.userId) {
+                userDetailsMap.set(member.userId, member.user);
+              }
+            });
+          } catch (error) {
+            console.warn(
+              `Failed to fetch members for group ${group.id}:`,
+              error
+            );
+          }
+        }
+
+        // Transform the backend data and enrich with user details
+        const transformedFriends = friendsData.map((friend) => {
+          const userDetails = userDetailsMap.get(friend.userId);
+
+          return {
+            id: friend.userId,
+            name: friend.userName,
+            imageUrl: userDetails?.imageUrl || null,
+            netBalance: friend.netBalance,
+            groups: friend.breakdown.map((group) => ({
+              id: group.groupId,
+              name: group.groupName,
+              balance: group.balance,
+            })),
+          };
+        });
 
         setFriends(transformedFriends);
       } catch (error) {
@@ -59,14 +91,31 @@ const FriendsScreen = () => {
         ? `You owe $${Math.abs(item.netBalance).toFixed(2)}`
         : `Owes you $${item.netBalance.toFixed(2)}`;
 
+    const isImage =
+      item.imageUrl && /^(https?:|data:image)/.test(item.imageUrl);
+
     return (
       <List.Accordion
         title={item.name}
         description={item.netBalance !== 0 ? balanceText : "Settled up"}
         descriptionStyle={{
           color: item.netBalance !== 0 ? balanceColor : "gray",
         }}
-        left={(props) => <List.Icon {...props} icon="account" />}
+        left={(props) =>
+          isImage ? (
+            <Avatar.Image
+              {...props}
+              size={40}
+              source={{ uri: item.imageUrl }}
+            />
+          ) : (
+            <Avatar.Text
+              {...props}
+              size={40}
+              label={(item.name || "?").charAt(0)}
+            />
+          )
+        }
       >
         {item.groups.map((group) => {
           const groupBalanceColor = group.balance < 0 ? "red" : "green";
