chore: simplify friendship protocol, direct messaging, and fix stability issues

Author: CAMOBAP

apps/p2p-chat/android/app/src/main/java/com/p2pchat/MainActivity.kt

@@ -1,22 +1,21 @@
 package com.p2pchat
 
+import android.os.Bundle
+import androidx.core.view.WindowCompat
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
 
 class MainActivity : ReactActivity() {
 
-  /**
-   * Returns the name of the main component registered from JavaScript. This is used to schedule
-   * rendering of the component.
-   */
-  override fun getMainComponentName(): String = "P2PChat"
+  override fun getMainComponentName(): String = "p2p-chat"
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    WindowCompat.setDecorFitsSystemWindows(window, true)
+  }
 
-  /**
-   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
-   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
-   */
   override fun createReactActivityDelegate(): ReactActivityDelegate =
       DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
 }

apps/p2p-chat/src/App.tsx

@@ -21,18 +21,21 @@ const App = () => {
   } = useChatInstances()
 
   const sandboxRefs = useRef<Record<string, any>>({})
+  const chatInstancesRef = useRef(chatInstances)
+  chatInstancesRef.current = chatInstances
 
-  const messageHandler = new MessageHandler(
-    chatInstances,
-    friendshipManager,
-    sandboxRefs,
-    triggerFriendshipUpdate
-  )
+  const messageHandler = useRef(
+    new MessageHandler(
+      () => chatInstancesRef.current,
+      friendshipManager,
+      sandboxRefs,
+      triggerFriendshipUpdate
+    )
+  ).current
 
-  // Use the scroll color interpolation hook
   const {currentBackgroundColor, onScroll} = useScrollColorInterpolation({
     chatInstances,
-    scrollStep: screenWidth, // Now each slide takes full screen width
+    scrollStep: screenWidth,
     onIndexChange: setCurrentIndex,
   })
 
@@ -45,7 +48,6 @@ const App = () => {
       <StatusBar
         barStyle="light-content"
         backgroundColor={currentBackgroundColor}
-        translucent
       />
 
       <ChatCarousel

apps/p2p-chat/src/ChatApp.tsx

@@ -1,5 +1,5 @@
-import React, {useCallback, useState} from 'react'
-import {LogBox, StatusBar, View} from 'react-native'
+import React, {useCallback} from 'react'
+import {LogBox, View} from 'react-native'
 
 import {
   FriendRequestsList,
@@ -16,15 +16,12 @@ import {
 import {commonStyles} from './styles'
 import {ChatAppProps, MessageData} from './types'
 
-// Utility function to create subtle background from vibrant color
 const createSubtleBackground = (vibrantColor: string): string => {
-  // Convert hex to RGB
   const hex = vibrantColor.replace('#', '')
   const r = parseInt(hex.substr(0, 2), 16)
   const g = parseInt(hex.substr(2, 2), 16)
   const b = parseInt(hex.substr(4, 2), 16)
 
-  // Create a very light version (90% white + 10% color)
   const lightR = Math.round(255 * 0.9 + r * 0.1)
   const lightG = Math.round(255 * 0.9 + g * 0.1)
   const lightB = Math.round(255 * 0.9 + b * 0.1)
@@ -37,12 +34,23 @@ LogBox.ignoreAllLogs()
 const ChatApp: React.FC<ChatAppProps> = ({
   userId,
   userName,
-  targetOptions,
-  potentialFriends,
-  pendingRequests,
+  targetOptions: initialTargetOptions,
+  potentialFriends: initialPotentialFriends,
   backgroundColor,
 }) => {
-  const [, setIsConnected] = useState(false)
+  const {
+    pendingRequests,
+    targetOptions,
+    potentialFriends,
+    respondToFriendRequest,
+    handleFriendMessage,
+    sendFriendRequest,
+  } = useFriendRequests({
+    userName,
+    initialTargetOptions,
+    initialPotentialFriends,
+    onSendMessage: (msg: MessageData) => sendMessage(msg),
+  })
 
   const {sendMessage, sendConnectionMessage} = useCommunication({
     userName,
@@ -71,34 +79,18 @@ const ChatApp: React.FC<ChatAppProps> = ({
   } = useMessages({
     userId,
     userName,
-    onSendMessage: (message: MessageData) => {
-      const success = sendMessage(message)
-      if (success) {
-        setIsConnected(true)
-      }
-      return success
-    },
+    onSendMessage: (message: MessageData, targetOrigin?: string) =>
+      sendMessage(message, targetOrigin),
   })
 
-  const {respondToFriendRequest, handleFriendMessage, sendFriendRequest} =
-    useFriendRequests({
-      userName,
-      onSendMessage: sendMessage,
-    })
-
   function handleIncomingMessage(data: MessageData) {
     console.log(`[${userName}] Processing message type: ${data.type}`)
-
     handleMessageIncoming(data)
     handleFriendMessage(data)
-    if (
-      data.type === 'chat_message' ||
-      data.type === 'connection_established'
-    ) {
-      setIsConnected(true)
-    }
   }
 
+  const isSelectedTargetFriend = targetOptions.includes(selectedTarget)
+
   const handleSendMessage = useCallback(() => {
     sendChatMessage(selectedTarget)
   }, [sendChatMessage, selectedTarget])
@@ -121,8 +113,6 @@ const ChatApp: React.FC<ChatAppProps> = ({
 
   return (
     <View style={[commonStyles.container, {backgroundColor: subtleBackground}]}>
-      <StatusBar backgroundColor={backgroundColor} barStyle="light-content" />
-
       <FriendRequestsList
         pendingRequests={pendingRequests}
         onRespondToRequest={respondToFriendRequest}
@@ -141,6 +131,7 @@ const ChatApp: React.FC<ChatAppProps> = ({
       <MessageInput
         inputText={inputText}
         selectedTarget={selectedTarget}
+        isFriend={isSelectedTargetFriend}
         onInputChange={setInputText}
         onSendMessage={handleSendMessage}
       />