Fetch user profile - abhiram-shaji/Langroove GitHub Wiki

  1. Component Structure:

    • FeedScreen: The main screen that displays a list of topics. It uses useFeed to get topics and useHeader to fetch and display user information (like the logged-in user's name). When a topic is clicked, it navigates to a profile screen with the topic owner’s ID as a parameter.
    • TopicCard: A card component for each topic that shows the owner’s name, avatar, and description. It uses useUserInfo to fetch the profile of the topic owner by their ID.

  2. Fetching User Info with useHeader and useUserInfo:

    • useHeader: This hook is likely used to fetch the logged-in user's information and status (isUserLoading, userInfoLoading) so it can display "Welcome" or the user's name.
    • useUserInfo: This hook fetches the specific user information (like avatar) for each topic owner. When a TopicCard renders, useUserInfo retrieves the owner's profile based on their ownerId. If loading, it displays a default avatar; otherwise, it displays the user’s actual avatar.

  3. Caching and Fetching Topics:

    • useFeed Hook: Manages topic fetching from Firestore. It also handles offline support with caching:
      • Load Cached Topics: useFeed first tries to load cached topics from AsyncStorage for faster initial load.
      • Fetch from Firestore: It sets up a real-time listener on the 'topics' collection in Firestore using onSnapshot. When topics are fetched, it stores them in AsyncStorage to update the cache and provides real-time updates when topics change.

  4. Navigating to Profile:

    • When a user clicks on a TopicCard, the FeedScreen navigates to the profile screen (Profile) with ownerId as a parameter, enabling the Profile screen to fetch that specific user’s details.

  5. Unsubscribe Logic:

    • To manage the real-time listener efficiently, useFeed stores the unsubscribe function from onSnapshot. This function is called when the component unmounts to avoid memory leaks and unnecessary data fetching.

  6. Activity Indicators:

    • Top Bar Loading: Displays an ActivityIndicator if isUserLoading or userInfoLoading are true, showing a loading spinner until user data is fetched.
    • Default Avatar: In TopicCard, if useUserInfo is loading, a default avatar is displayed until the actual avatar is fetched.

In summary, this approach efficiently handles profile fetching with real-time Firestore updates and caching for offline support. It also cleans up listeners on unmount, ensuring optimal performance.