feat: set limits on input fields

Author: HelanaNady

src/mocks/handlers/editProfileHandlers.ts

@@ -12,7 +12,7 @@ const mockUsername = 'johndoe';
 export const editProfileHandlers = [
   // Update profile info
   http.patch(`${baseURL}/me`, async ({ request }) => {
-    const body = (await request.json()) as UpdateProfileRequest;
+    const body = (await request.json()) as Partial<UpdateProfileRequest>;
     const mockResponse = { ...mockUsers[mockUsername], ...body };
 
     if (!mockResponse) {

src/screens/profile/EditProfileScreen.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-raw-text */
 import { useCallback, useEffect, useState } from 'react';
 
 import {
@@ -21,6 +22,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import Avatar from '@/components/profile/Avatar';
 import ProfileBanner from '@/components/profile/Banner';
 import { TextInput } from '@/components/ui';
+import AppText from '@/components/ui/AppText';
 import Button from '@/components/ui/Button';
 import Spinner from '@/components/ui/Spinner';
 import { formatBirthDate } from '@/components/utils/profile';
@@ -49,14 +51,14 @@ const EditProfileScreen = () => {
   const [websiteError, setWebsiteError] = useState<string | null>(null);
   const [birthDateError, setBirthDateError] = useState<string | null>(null);
 
-  const [birthDate, setBirthDate] = useState<string | null>(user?.birthDate || null);
+  const [birthDate, setBirthDate] = useState<string | null>(user.birthDate || null);
   const [birthDateInput, setBirthDateInput] = useState<string>(
-    formatBirthDate(user?.birthDate ?? null) || ''
+    formatBirthDate(user.birthDate ?? null) || ''
   );
   const [showDatePicker, setShowDatePicker] = useState<boolean>(false);
 
-  const [avatarUrl, setAvatarUrl] = useState<string | null>(user?.avatarUrl || null);
-  const [bannerUrl, setBannerUrl] = useState<string | null>(user?.bannerUrl || null);
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(user.avatarUrl || null);
+  const [bannerUrl, setBannerUrl] = useState<string | null>(user.bannerUrl || null);
   const [isEditingBanner, setIsEditingBanner] = useState<boolean>(false);
   const [menuVisible, setMenuVisible] = useState<boolean>(false);
   const [warningMenuVisible, setWarningMenuVisible] = useState<boolean>(false);
@@ -65,10 +67,10 @@ const EditProfileScreen = () => {
   const [canNavigateAway, setCanNavigateAway] = useState<boolean>(false);
 
   const [formData, setFormData] = useState({
-    displayName: user?.displayName || '',
-    bio: user?.bio || '',
-    location: user?.location || '',
-    websiteUrl: user?.websiteUrl || '',
+    displayName: user.displayName || '',
+    bio: user.bio || '',
+    location: user.location || '',
+    websiteUrl: user.websiteUrl || '',
   });
 
   const openDatePicker = () => {
@@ -96,10 +98,10 @@ const EditProfileScreen = () => {
       // format as YYYY-MM-DD
       const newBirthDate = selectedDate.toISOString().split('T')[0].trim();
       setBirthDateInput(newBirthDateInput);
+
       // update in date picker
       setBirthDate(newBirthDate);
       // update form data
-      // console.log('selected date:', newBirthDate);
       setFormData((prev) => ({ ...prev, birthDate: newBirthDate || '' }));
       setFormDataChanged(true);
       setBirthDateError(null);
@@ -201,31 +203,33 @@ const EditProfileScreen = () => {
       if (formDataChanged) {
         // to be implemented with mock later: updates to profile media
 
-        const request: UpdateProfileRequest = {
-          displayName: formData.displayName.trim() || '', //fallback
-          bio: formData.bio.trim() === '' ? null : formData.bio,
-          location: formData.location.trim() === '' ? null : formData.location,
-          websiteUrl: formData.websiteUrl.trim() === '' ? null : formData.websiteUrl,
-          birthDate: birthDate === '' ? null : birthDate,
-        };
+        const request: Partial<UpdateProfileRequest> = {};
+
+        for (const [key, value] of Object.entries(formData)) {
+          const changedInput = value.trim() === '' ? null : value;
+
+          if (changedInput) {
+            request[key as keyof UpdateProfileRequest] = changedInput;
+          }
+        }
+
+        if (birthDate !== user.birthDate) {
+          request.birthDate = birthDate;
+        }
 
-        // console.log(request);
-        // console.log(user);
         // call update profile
         await updateUserProfile(request);
 
         // update user store
         updateUser({ ...request, avatarUrl, bannerUrl });
 
         // update react query cache for profile screen
-        queryClient.setQueryData(['profile', user?.username], (user: UserProfile) => ({
+        queryClient.setQueryData(['profile', user.username], (user: UserProfile) => ({
           ...user,
           ...request,
-          birthDate: birthDate,
           avatarUrl: avatarUrl,
           bannerUrl: bannerUrl,
         }));
-        // console.log('inside update', user);
       }
 
       // navigate back to profile screen
@@ -256,11 +260,7 @@ const EditProfileScreen = () => {
   ]);
 
   const isSaveDisabled =
-    isLoading ||
-    formData.displayName.trim().length === 0 ||
-    !!websiteError ||
-    !!birthDateError ||
-    !formDataChanged;
+    isLoading || formData.displayName.trim().length === 0 || !!websiteError || !!birthDateError;
 
   useEffect(() => {
     navigation.setOptions({
@@ -292,6 +292,12 @@ const EditProfileScreen = () => {
     return unsubscribe;
   }, [navigation, formDataChanged, canNavigateAway]);
 
+  if (!user) {
+    return (
+      <AppText variant="heading1">This account does not exist. Try refreshing the page</AppText>
+    );
+  }
+
   if (isLoading) {
     return (
       <View style={styles.centerContainer} testID="profile-loading-spinner">
@@ -318,8 +324,8 @@ const EditProfileScreen = () => {
             >
               <ProfileBanner
                 uri={bannerUrl}
-                username={user?.username}
-                displayName={user?.displayName}
+                username={user.username}
+                displayName={user.displayName}
                 isEdit={true}
                 testID="banner-image"
               />
@@ -352,6 +358,7 @@ const EditProfileScreen = () => {
               }}
               autoCapitalize="none"
               testID="edit-display-name-input"
+              maxLength={50}
             />
             <TextInput
               value={formData.bio}
@@ -362,8 +369,8 @@ const EditProfileScreen = () => {
               }}
               autoCapitalize="none"
               multiline={true}
-              numberOfLines={5}
               maxLength={160}
+              numberOfLines={4}
               testID="edit-bio-input"
             />
             <TextInput
@@ -374,6 +381,7 @@ const EditProfileScreen = () => {
                 setFormDataChanged(true);
               }}
               testID="edit-location-input"
+              maxLength={30}
             />
             <TextInput
               value={formData.websiteUrl}
@@ -382,6 +390,7 @@ const EditProfileScreen = () => {
               autoCapitalize="none"
               error={websiteError || undefined}
               testID="edit-website-input"
+              maxLength={100}
             />
             <Pressable onPress={openDatePicker} testID="edit-birthdate-button">
               <TextInput

src/services/user.ts

@@ -9,7 +9,7 @@ export async function getUserProfile(username: string) {
   return response;
 }
 
-export async function updateUserProfile(updatedProfile: UpdateProfileRequest) {
+export async function updateUserProfile(updatedProfile: Partial<UpdateProfileRequest>) {
   try {
     const response = await api.patch<ApiSuccessResponse<UpdateProfileRequest>>(
       '/me',