This documentation provides details on the useEditProfile hook, which manages user profile editing, including language selections and bio management in a React Native Firebase application.

---

The useEditProfile hook:

1. Fetches and manages user profile data.
2. Allows users to edit their name, bio, and language skills (native, fluent, learning).
3. Handles saving the updated profile data to a backend service.
4. Provides helper functions for language selection and removal.

---

• Manages user input for profile fields (e.g., name, bio, languages).

1. State Variables:

   • name: User's name.
   • bio: User's biography (with a character limit).
   • nativeLanguages, fluentLanguages, learningLanguages: Arrays for language skills.
   • nativeLangMenuVisible, fluentLangMenuVisible, learningLangMenuVisible: Track visibility of language selection menus.

2. Code Snippet:

   const [name, setName] = useState('');
   const [nativeLanguages, setNativeLanguages] = useState<string[]>([]);
   const [fluentLanguages, setFluentLanguages] = useState<string[]>([]);
   const [learningLanguages, setLearningLanguages] = useState<string[]>([]);
   const [bio, setBio] = useState('');
   const [bioCharacterLimit] = useState(200);
   const [nativeLangMenuVisible, setNativeLangMenuVisible] = useState(false);
   const [fluentLangMenuVisible, setFluentLangMenuVisible] = useState(false);
   const [learningLangMenuVisible, setLearningLangMenuVisible] = useState(false);

3. Process:

   • Updates state dynamically using setter functions (e.g., setName, setNativeLanguages).

---

• Loads existing profile data for the logged-in user from the backend service.

1. Functionality:

   • Fetches profile data using fetchProfile service.
   • Updates state variables with retrieved data.

2. Code Snippet:

   useEffect(() => {
     if (!userId) return;
     const loadProfileData = async () => {
       const profileData = await fetchProfile(userId);
       if (profileData) {
         setName(profileData.name || '');
         setNativeLanguages(profileData.nativeLanguages || []);
         setFluentLanguages(profileData.fluentLanguages || []);
         setLearningLanguages(profileData.learningLanguages || []);
         setBio(profileData.bio || '');
       }
     };
     loadProfileData();
   }, [userId]);

3. Process:

   • Triggers on component mount or when userId changes.
   • Ensures profile fields are populated with existing data.

---

• Handles language selection, removal, and filtering of available options.

1. Get Available Languages:

   • Filters out already selected languages from the available list.

   const getAvailableLanguages = (currentSelection: string[]) => {
     return languages.filter(
       (language) =>
         !nativeLanguages.includes(language) &&
         !fluentLanguages.includes(language) &&
         !learningLanguages.includes(language) &&
         !currentSelection.includes(language)
     );
   };

2. Add a Language:

   • Adds a selected language to the corresponding state array.

   const handleLanguageSelection = (
     selectedLanguage: string,
     setter: React.Dispatch<React.SetStateAction<string[]>>,
     setMenuVisible: React.Dispatch<React.SetStateAction<boolean>>
   ) => {
     setter((prev) => [...prev, selectedLanguage]);
     setMenuVisible(false);
   };

3. Remove a Language:

   • Removes a language from the corresponding state array.

   const handleRemoveLanguage = (
     language: string,
     setter: React.Dispatch<React.SetStateAction<string[]>>
   ) => {
     setter((prev) => prev.filter((lang) => lang !== language));
   };

---

• Saves updated profile data to the backend using handleSaveProfile.

1. Functionality:

   • Assembles profile data into an object.
   • Calls handleSaveProfile service to persist changes.

2. Code Snippet:

   const saveProfile = async () => {
     if (!userId) return;
     const profileData = {
       name,
       nativeLanguages,
       fluentLanguages,
       learningLanguages,
       bio,
     };
     await handleSaveProfile(userId, profileData);
   };

3. Process:

   • Prevents saving if userId is unavailable.
   • Ensures asynchronous operation completion before proceeding.

---

Property/Method	Description
name, setName	User's name and its setter function.
bio, setBio	User's biography and its setter function.
nativeLanguages, fluentLanguages, learningLanguages	Arrays for user's language skills.
getAvailableLanguages()	Filters out already selected languages.
handleLanguageSelection()	Adds a selected language to the corresponding list.
handleRemoveLanguage()	Removes a language from the corresponding list.
saveProfile()	Saves updated profile data to the backend.
getFlagUrl(language)	Fetches the flag URL for a given language using useFlags.

---

• Profile Fetching:
  • Ensures profile data is only fetched if userId is available.
• Language Selection:
  • Prevents duplicate entries by filtering available languages.

---

• Bio Character Limit:

  • bioCharacterLimit ensures the biography text remains within a predefined limit (200 characters).

• Service Dependencies:

  • Relies on fetchProfile and handleSaveProfile for backend operations.
  • Uses useFlags for fetching language-specific flag URLs.

---

For further integration details, refer to the services handling profile operations (profileService) or consult the Firebase Authentication Documentation.