List of Chats Logic - abhiram-shaji/Langroove GitHub Wiki

Function:
This custom hook manages fetching and filtering a user's chat list from Firestore.

Example:

const { search, setSearch, filteredChats } = useChatList();

This allows you to access the chat list, search functionality, and filtered results in a component.

Function:
This hook manages the state for search input and the list of chats.

Example:

const [search, setSearch] = useState<string>(''); // Search state
const [chats, setChats] = useState<Chat[]>([]);

Here, search starts as an empty string, and chats starts as an empty array.

Function:
This retrieves the currently logged-in user using Firebase Authentication.

Example:

const currentUser = auth.currentUser; // Get the current user

This gets the current user object, which is used to fetch their chats.

Function:
This hook fetches the chat list when the component mounts or when the current user changes.

Example:

useEffect(() => {
  if (!currentUser) return;
  // Fetching logic here
}, [currentUser]);

When currentUser is available, it fetches the chats associated with that user.

Function:
This retrieves the chat list from Firestore, specifically chats where the current user is a participant.

Example:

const chatsRef = collection(db, 'chats');
const q = query(
  chatsRef,
  where('participants', 'array-contains', currentUser.uid),
  orderBy('lastMessageTimestamp', 'desc')
);

This sets up a query to fetch chats where the current user is included in the participants and orders them by the last message timestamp.

Function:
This part listens for real-time updates to the chat data.

Example:

const unsubscribe = onSnapshot(q, (snapshot) => {
  const fetchedChats = snapshot.docs.map((doc) => {
    const data = doc.data();
    return {
      id: doc.id,
      name: data.name || 'Unknown User',
      avatarUrl: data.avatarUrl || 'https://robohash.org/default-avatar.png',
      lastMessage: data.lastMessage?.text || '',
      timestamp: data.lastMessageTimestamp?.toDate().toLocaleTimeString() || '',
      unreadCount: data.unreadCount || 0,
    };
  });
  setChats(fetchedChats);
});

This listens for changes in the chat collection and updates the chats state with the fetched data.

Function:
This ensures the real-time listener is removed when the component unmounts to prevent memory leaks.

Example:

return () => unsubscribe();

This line returns a function that will unsubscribe from the Firestore listener when the component is no longer in use.

Function:
This filters the chats based on the current search input.

Example:

const filteredChats = chats.filter(
  (chat) =>
    chat.name.toLowerCase().includes(search.toLowerCase()) ||
    chat.lastMessage.toLowerCase().includes(search.toLowerCase())
);

This creates a new array of chats that match the search term in either the chat name or the last message text.