Messaging Module Documentation

The Messaging module provides a complete interface for managing real-time chat interactions. It leverages the MessagesMenu component to fetch and display chat conversations, handle new chat creation, and update chats in real time using Supabase channels.

Features

• Real-time Updates: Subscribes to changes in chats, messages, participants, and group settings via Supabase channels.
• Interactive UI:
  • Swipe to hide/clear chats
  • Select a chat to view messages
  • Open a dedicated chat screen
  • Support for direct, group, admin, and sub-group chats
• Media Support:
  • Take and upload pictures directly from the chat
  • Send and receive images in conversations
  • Image preview and gallery view
• Responsive Design:
  • Incorporates safe area insets
  • Dynamic theming based on the user's color scheme
  • Modern UI with avatars and message timestamps
• Event-Driven:
  • Utilizes event listeners to respond to actions like opening specific chats or the new chat form
  • Handles chat state management through events
• Chat Management:
  • Create new direct chats
  • Create sub-group chats
  • Delete group chats
  • Hide chats from view
  • Persistent chat visibility preferences using AsyncStorage

Media Handling

The messaging system includes comprehensive media support:

• Image Capture: Users can take pictures directly from the chat interface using their device's camera
• Image Upload: Support for uploading existing images from the device's gallery
• Image Preview: Messages containing images can be previewed in a gallery view
• Storage Integration: Images are stored securely in Supabase storage and linked to messages

Code Overview

The MessagesMenu component is the central hub for chat functionality. Here's a key implementation snippet:

tsx

export default function MessagesMenu() { const [chats, setChats] = useState<Chat[]>([]); const [showNewChat, setShowNewChat] = useState(false); const [selectedChatId, setSelectedChatId] = useState<string | null>(null); const [hiddenChatIds, setHiddenChatIds] = useState<string[]>([]); const [currentGroupId, setCurrentGroupId] = useState<string | null>(null); // Real-time subscriptions for chat updates useEffect(() => { fetchChats(); const channel = supabase .channel("chats-channel") .on("postgres_changes", { event: "*", schema: "public", table: "chats" }, () => fetchChats()) .on("postgres_changes", { event: "*", schema: "public", table: "messages" }, () => fetchChats()) .on("postgres_changes", { event: "*", schema: "public", table: "chat_participants" }, () => fetchChats()) .on("postgres_changes", { event: "*", schema: "public", table: "group_settings" }, () => fetchChats()) .subscribe(); return () => channel.unsubscribe(); }, []); // Event handling for menu actions useEffect(() => { const menuListener = EventRegister.addEventListener("openMenu", (data: any) => { if (data.tab === "messages") { if (data.action === "openChat" && data.chatId) { setSelectedChatId(data.chatId); // Additional chat opening logic... } } }); return () => EventRegister.removeEventListener(menuListener as string); }, []); }

Chat Types

The messaging system supports several types of chats:

1. Direct Chats: One-on-one conversations between users
2. Group Chats: Conversations within a group
3. Admin Chats: Special chats for group administrators
4. Sub-group Chats: Chats created within a group for specific members

Data Structure

Chats are stored in the following tables:

• chats: Main chat information
• messages: Individual messages
• chat_participants: User participation in chats
• group_settings: Chat settings for groups

Event System

The module uses an event-driven architecture with the following key events:

• openMenu: Handles navigation between chat views
• slidingMenuStateChange: Manages menu visibility
• Real-time Supabase events for chat updates

Integration

The messaging module integrates with:

• Supabase for real-time data and storage
• React Native's gesture system for swipe actions
• AsyncStorage for persistent preferences
• The app's theme system for consistent styling