feat: habit completion pic in storage (#163)

- `uploadImageToStorage` util function
- fixed bugs in edit profile 
	- allow you to use your username 
	- default form values

Author: AnkushSarkar10

src/api/common/firebase-utils.ts

@@ -0,0 +1,16 @@
+import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
+
+import { storage } from '@/api';
+
+export const uploadImageToStorage = async (
+  uri: string, // local path from expo-image-picker
+  path: string,
+): Promise<string> => {
+  const response = await fetch(uri);
+  const blob = await response.blob();
+
+  const imageRef = ref(storage, path);
+  await uploadBytes(imageRef, blob);
+
+  return getDownloadURL(imageRef);
+};

src/api/habits/use-modify-entry.tsx

@@ -3,9 +3,9 @@ import { createMutation } from 'react-query-kit';
 import { queryClient } from '../common';
 import { type UserIdT } from '../users/types';
 import { modifyHabitEntry } from './firebase-mutations';
-import { type AllCompletionsT, type HabitEntryT, type HabitIdT } from './types';
+import { type HabitEntryT, type HabitIdT } from './types';
 
-type Response = AllCompletionsT;
+type Response = void;
 type Variables = {
   userId: UserIdT;
   habitId: HabitIdT;
@@ -21,7 +21,6 @@ export const useModifyHabitEntry = createMutation<Response, Variables, Error>({
       variables.date,
       variables.modifiedEntry,
     );
-    return {} as AllCompletionsT; // Return type is required but not used
   },
   onSuccess: (_, variables) => {
     queryClient.invalidateQueries({

src/app/auth/create-edit-profile.tsx

@@ -1,4 +1,4 @@
-import { getDownloadURL, ref, uploadBytes } from '@firebase/storage';
+import { getDownloadURL, ref } from '@firebase/storage';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as ImagePicker from 'expo-image-picker';
 import { useLocalSearchParams, useRouter } from 'expo-router';
@@ -18,7 +18,8 @@ import { useForm } from 'react-hook-form';
 import { Image, KeyboardAvoidingView } from 'react-native';
 import * as z from 'zod';
 
-import { db, getUserById, storage, type UserT } from '@/api';
+import { db, getUserById, storage } from '@/api';
+import { uploadImageToStorage } from '@/api/common/firebase-utils';
 import { getCurrentUserId } from '@/core';
 import { Button, ControlledInput, Header, ScreenContainer, View } from '@/ui';
 
@@ -34,14 +35,21 @@ export default function CreateProfile() {
   const currentUid = getCurrentUserId();
   const defaultProfilePic = require('/assets/images/default_profile_pic.png');
   const [profileImage, setProfileImage] = useState<string | null>(null);
-  const [currentUserData, setCurrentUserData] = useState<UserT | null>(null);
   const [isUploading, setIsUploading] = useState(false);
   const [isSubmiting, setIsSubmiting] = useState(false);
 
   const { mode } = useLocalSearchParams<{
     mode: 'edit' | 'create';
   }>();
 
+  const { handleSubmit, control, setError, reset } = useForm<ProfileFormType>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      displayName: '',
+      username: '',
+    },
+  });
+
   useEffect(() => {
     const fetchProfilePic = async () => {
       if (mode !== 'edit') return;
@@ -60,23 +68,18 @@ export default function CreateProfile() {
       try {
         const userData = await getUserById(currentUid);
         if (userData == null) return;
-        setCurrentUserData(userData);
+        reset({
+          displayName: userData.displayName,
+          username: userData.username,
+        });
       } catch (error) {
         console.log('No user Data found.');
       }
     };
 
     fetchProfilePic();
     getCurrentUserData();
-  }, [mode, currentUid]);
-
-  const { handleSubmit, control, setError } = useForm<ProfileFormType>({
-    resolver: zodResolver(profileSchema),
-    defaultValues: {
-      displayName: '',
-      username: '',
-    },
-  });
+  }, [mode, currentUid, reset]);
 
   const handleImageUpload = async () => {
     setIsUploading(true);
@@ -102,11 +105,8 @@ export default function CreateProfile() {
     if (!profileImage) return;
 
     try {
-      const response = await fetch(profileImage);
-      const blob = await response.blob();
-      const storageRef = ref(storage, `profilePics/${currentUid}`);
-      await uploadBytes(storageRef, blob);
-      return;
+      const filePath = `profilePics/${currentUid}`;
+      await uploadImageToStorage(profileImage, filePath);
     } catch (error) {
       console.error('Failed to upload profile image:', error);
       return;
@@ -166,7 +166,12 @@ export default function CreateProfile() {
       );
       const usernameSnapshot = await getDocs(usernameQuery);
 
-      if (!usernameSnapshot.empty) {
+      // Check if any other user has this username
+      const usernameTakenByAnotherUser = usernameSnapshot.docs.some(
+        (doc) => doc.id !== currentUid,
+      );
+
+      if (usernameTakenByAnotherUser) {
         setError('username', {
           type: 'custom',
           message: 'This username is already taken',
@@ -229,13 +234,11 @@ export default function CreateProfile() {
             control={control}
             name="displayName"
             label="Display Name"
-            defaultValue={currentUserData ? currentUserData.displayName : ''}
           />
           <ControlledInput
             control={control}
             name="username"
             label="Unique Username"
-            defaultValue={currentUserData ? currentUserData.username : ''}
           />
 
           <Button

src/components/modify-habit-entry/modify-entry-modal.tsx

@@ -9,6 +9,7 @@ import {
   type HabitEntryT,
   type HabitT,
 } from '@/api';
+import { uploadImageToStorage } from '@/api/common/firebase-utils';
 import { useModifyHabitEntry } from '@/api/habits/use-modify-entry';
 import { getCurrentUserId } from '@/core';
 import { colors, Header, Modal, type ModalMethods, Text, View } from '@/ui';
@@ -46,6 +47,7 @@ export function ModifyEntryModal({
     control: noteControl,
     handleSubmit: handleNoteSubmit,
     watch,
+    setError,
     reset: resetForm,
   } = useForm<NoteFormType>({
     resolver: zodResolver(noteSchema),
@@ -86,15 +88,32 @@ export function ModifyEntryModal({
   };
 
   const handleSave = handleNoteSubmit(async (data) => {
+    let imageUrl: string | undefined = undefined;
+    const myId = getCurrentUserId();
+    if (image && image !== '') {
+      // upload image to storage, store the url in firestore
+      try {
+        const filePath = `habitCompletions/${habit.id}_${myId}_${selectedCompletion.date}`;
+        imageUrl = await uploadImageToStorage(image, filePath);
+      } catch (error) {
+        console.error('Habit Completion Image upload failed:', error);
+        setError('note', {
+          type: 'custom',
+          message: 'Image upload failed. Please try again.',
+        });
+        return;
+      }
+    }
+
     const modifiedEntry: HabitEntryT = {
       numberOfCompletions: numberOfCompletions,
       note: data.note !== '' ? data.note : undefined,
-      image: image !== '' ? image : undefined,
+      image: imageUrl,
     };
 
     await modifyEntry.mutateAsync({
       habitId: habit.id,
-      userId: getCurrentUserId(),
+      userId: myId,
       date: selectedCompletion.date,
       modifiedEntry: modifiedEntry,
     });