@messenger-box/platform-mobile 10.0.3-alpha.40 → 10.0.3-alpha.46

package/src/screens/inbox/components/ServiceDialogsListItem.tsx

@@ -16,14 +16,15 @@ import { format, isToday, isYesterday } from 'date-fns';
 import { useFocusEffect } from '@react-navigation/native';
 import { IChannel, IUserAccount } from 'common';
 import {
-    useOnThreadCreatedUpdatedSubscription,
-    useOnThreadChatMessageAddedSubscription,
+    THREAD_CREATED_UPDATED,
+    CHAT_MESSAGE_ADDED,
     useThreadMessagesQuery,
-    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
-    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-} from 'common/graphql';
+    useThreadCreatedUpdatedSubscription,
+    useThreadChatMessageAddedSubscription,
+} from '../../../queries/inboxQueries';
 import { startCase } from 'lodash-es';
 import colors from 'tailwindcss/colors';
+import { SubscriptionHandler } from './SubscriptionHandler';
 
 // Helper function to safely create a Date object
 const safeDate = (dateValue) => {
@@ -65,6 +66,7 @@ export interface IDialogListItemProps {
     onOpen: (id: any, title: any, postParentId?: any) => void;
     refreshing: boolean;
     role: any;
+    visible?: boolean;
 }
 
 // Helper function to compute the last message from a list of messages
@@ -121,7 +123,23 @@ const computeLastMessage = (threadMessages) => {
 };
 
 const ServiceChannelWithLastMessage = React.memo(
-    ({ channel, lastMessage, subscribeToNewMessages, subscribeToChatMessages }: any) => {
+    ({
+        channel,
+        lastMessage,
+        subscribeToNewMessages,
+        subscribeToChatMessages,
+        subscribeToMore,
+        postParentId,
+        servicePostParentId,
+    }: {
+        channel: any;
+        lastMessage: any;
+        subscribeToNewMessages: () => void;
+        subscribeToChatMessages: () => void;
+        subscribeToMore: any;
+        postParentId: any;
+        servicePostParentId: any;
+    }) => {
         React.useEffect(() => {
             console.log(`Setting up subscriptions for channel ${channel?.id}`);
             // Subscribe and store the unsubscribe functions
@@ -197,20 +215,40 @@ const ServiceChannelWithLastMessage = React.memo(
         }
 
         return (
-            <HStack space={'sm'} className="flex-1 justify-between">
-                <Box className="flex-[0.8]">
-                    <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
-                        {title}
-                    </Text>
-                    <Text color={colors.gray[600]} numberOfLines={1}>
-                        {displayMessage}
-                    </Text>
-                </Box>
-
-                <Box className="flex-[0.2]">
-                    <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-                </Box>
-            </HStack>
+            <>
+                <SubscriptionHandler
+                    subscribeToMore={subscribeToMore}
+                    document={THREAD_CREATED_UPDATED}
+                    variables={{
+                        channelId: channel?.id?.toString(),
+                        postParentId: postParentId || servicePostParentId || null,
+                    }}
+                    updateQuery={undefined} // Provide custom updateQuery if needed
+                />
+                <SubscriptionHandler
+                    subscribeToMore={subscribeToMore}
+                    document={CHAT_MESSAGE_ADDED}
+                    variables={{
+                        channelId: channel?.id?.toString(),
+                        postParentId: postParentId || servicePostParentId || null,
+                    }}
+                    updateQuery={undefined} // Provide custom updateQuery if needed
+                />
+                <HStack space={'sm'} className="flex-1 justify-between">
+                    <Box className="flex-[0.8]">
+                        <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
+                            {title}
+                        </Text>
+                        <Text color={colors.gray[600]} numberOfLines={1}>
+                            {displayMessage}
+                        </Text>
+                    </Box>
+
+                    <Box className="flex-[0.2]">
+                        <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
+                    </Box>
+                </HStack>
+            </>
         );
     },
 );
@@ -228,12 +266,15 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
     onOpen,
     refreshing,
     role,
+    visible = true,
 }) {
-    // Create a ref to track if component is mounted
     const isMountedRef = useRef(true);
     const [subscriptionsTimestamp, setSubscriptionsTimestamp] = useState(Date.now());
 
-    // Query for thread messages
+    // Only run queries/subscriptions if visible
+    const shouldQuery = !!channel?.id && visible;
+
+    // Query for thread messages (minimal fields if possible)
     const {
         data: threadMessagesData,
         loading: threadMessageLoading,
@@ -246,31 +287,31 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
             role,
             limit: 2,
         },
+        skip: !shouldQuery, // Only run if visible
         fetchPolicy: 'cache-and-network',
         onCompleted: (data) => {
-            console.log(
-                `Completed thread messages query for channel ${channel?.id}:`,
-                data?.threadMessages?.data?.length ? 'Has messages' : 'No messages',
-            );
+            if (!shouldQuery) return;
         },
         onError: (error) => {
+            if (!shouldQuery) return;
             console.error(`Error fetching thread messages for channel ${channel?.id}:`, error);
         },
     });
 
     // Extract threadMessages data for easier access
-    const threadMessages = threadMessagesData?.threadMessages?.data || [];
+    const threadMessages = useMemo(() => threadMessagesData?.threadMessages?.data || [], [threadMessagesData]);
 
     // Calculate lastMessage directly from threadMessages
     const lastMessage = useMemo(() => {
+        if (!shouldQuery) return null;
         return computeLastMessage(threadMessages);
-    }, [threadMessages]);
+    }, [shouldQuery, threadMessages]);
 
     // Calculate servicePostParentId based on lastMessage
     const servicePostParentId = useMemo(() => {
-        if (!lastMessage) return null;
+        if (!shouldQuery || !lastMessage) return null;
         return lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
-    }, [lastMessage]);
+    }, [shouldQuery, lastMessage]);
 
     // Handle component unmount
     React.useEffect(() => {
@@ -280,7 +321,7 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
     }, []);
 
     const creatorAndMembersId = useMemo(() => {
-        if (!channel?.members) return null;
+        if (!shouldQuery || !channel?.members) return null;
         const membersIds: any =
             channel?.members
                 ?.filter((m: any) => m !== null && m?.user?.id !== currentUser?.id)
@@ -288,24 +329,20 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
         const creatorId: any = channel?.creator?.id;
         const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
         return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
-    }, [channel, currentUser]);
+    }, [shouldQuery, channel, currentUser]);
 
     const postParentId = useMemo(() => {
-        if (!creatorAndMembersId?.length) return null;
-
+        if (!shouldQuery || !creatorAndMembersId?.length) return null;
         return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
             ? null
             : lastMessage?.parentId
             ? lastMessage?.parentId
             : lastMessage?.id ?? 0;
-    }, [creatorAndMembersId, lastMessage, currentUser]);
+    }, [shouldQuery, creatorAndMembersId, lastMessage, currentUser]);
 
     // Function to force refresh the component state
     const refreshThreadState = useCallback(() => {
-        if (channel?.id && isMountedRef.current) {
-            console.log('Forcing thread state refresh for channel:', channel?.id);
-
-            // Refetch messages from server
+        if (shouldQuery && channel?.id && isMountedRef.current) {
             refetchThreadMessages({
                 channelId: channel?.id?.toString(),
                 role,
@@ -314,23 +351,15 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                 console.error('Error refreshing thread state:', err);
             });
         }
-    }, [channel?.id, refetchThreadMessages, isMountedRef, role]);
+    }, [shouldQuery, channel?.id, refetchThreadMessages, role]);
 
     // Reset subscriptions when the component gains focus
     useFocusEffect(
         React.useCallback(() => {
-            // Force subscription refresh
+            if (!shouldQuery || !channel?.id) return;
             setSubscriptionsTimestamp(Date.now());
-
-            // Existing focus effect logic...
-            if (!channel?.id) return;
-
-            console.log('ServiceDialogsListItem focused for channel:', channel?.id);
-
-            // Use a direct refetch with network-only policy to force fresh data
             const fetchFreshData = async () => {
                 try {
-                    // Force a network-only fetch
                     await refetchThreadMessages({
                         channelId: channel?.id?.toString(),
                         role,
@@ -340,14 +369,9 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                     console.error('Error refetching thread messages on focus:', error);
                 }
             };
-
-            // Execute fetch
             fetchFreshData();
-
-            return () => {
-                // Cleanup function when unfocused
-            };
-        }, [refreshing, channel?.id, refetchThreadMessages, role]),
+            return () => {};
+        }, [shouldQuery, refreshing, channel?.id, refetchThreadMessages, role]),
     );
 
     return (
@@ -380,174 +404,131 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                         channel={channel}
                         lastMessage={lastMessage}
                         subscribeToNewMessages={() =>
-                            subscribeToMore({
-                                document: THREAD_CHAT_ADDED,
-                                variables: {
-                                    channelId: channel?.id?.toString(),
-                                    postParentId: postParentId || servicePostParentId || null,
-                                },
-                                updateQuery: (prev, { subscriptionData }: any) => {
-                                    if (!subscriptionData?.data) {
-                                        console.log(`No subscription data for channel ${channel?.id}`);
-                                        return prev;
-                                    }
-
-                                    try {
-                                        const newPostThreadData: any =
-                                            subscriptionData?.data?.threadCreatedUpdated?.data;
-                                        const newMessage: any =
-                                            subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
-
-                                        if (!newPostThreadData || !newMessage) {
-                                            console.log(`Missing data in subscription for channel ${channel?.id}`);
-                                            return prev;
-                                        }
-
-                                        console.log('New thread message subscription update:', {
-                                            channelId: channel?.id,
-                                            threadId: newPostThreadData?.id,
-                                            hasMessage: !!newMessage,
-                                            message: newMessage?.message?.substring(0, 20) + '...',
-                                        });
-
-                                        // Create a safe copy of the previous data
-                                        const prevThreads = prev?.threadMessages?.data || [];
-
-                                        // Check if this thread already exists
-                                        const threadExists = prevThreads.some(
-                                            (t: any) => t.id === newPostThreadData?.id,
-                                        );
-
-                                        let updatedThreads;
-                                        if (threadExists) {
-                                            // Update existing thread
-                                            updatedThreads = prevThreads.map((t: any) =>
-                                                t.id === newPostThreadData?.id
-                                                    ? {
-                                                          ...t,
-                                                          replies: [...(t?.replies || []), newMessage],
-                                                          replyCount: newPostThreadData?.replyCount,
-                                                          lastReplyAt: newPostThreadData?.lastReplyAt,
-                                                          updatedAt: newPostThreadData?.updatedAt,
-                                                      }
-                                                    : t,
-                                            );
-                                        } else {
-                                            // Add new thread
-                                            updatedThreads = [...prevThreads, newPostThreadData];
-                                        }
-
-                                        return {
-                                            ...prev,
-                                            threadMessages: {
-                                                ...prev?.threadMessages,
-                                                totalCount:
-                                                    newPostThreadData?.totalCount ??
-                                                    prev?.threadMessages?.totalCount ??
-                                                    0,
-                                                data: updatedThreads,
-                                            },
-                                        };
-                                    } catch (error) {
-                                        console.error(
-                                            `Error processing subscription data for channel ${channel?.id}:`,
-                                            error,
-                                        );
-                                        return prev;
-                                    }
-                                },
-                                onError: (error) => {
-                                    console.error(`Thread subscription error for channel ${channel?.id}:`, error);
-                                },
-                            })
+                            shouldQuery
+                                ? subscribeToMore({
+                                      document: THREAD_CREATED_UPDATED,
+                                      variables: {
+                                          channelId: channel?.id?.toString(),
+                                          postParentId: postParentId || servicePostParentId || null,
+                                      },
+                                      updateQuery: (prev, { subscriptionData }: any) => {
+                                          if (!subscriptionData?.data) {
+                                              return prev;
+                                          }
+                                          try {
+                                              const newPostThreadData: any =
+                                                  subscriptionData?.data?.threadCreatedUpdated?.data;
+                                              const newMessage: any =
+                                                  subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+                                              if (!newPostThreadData || !newMessage) {
+                                                  return prev;
+                                              }
+                                              const prevThreads = prev?.threadMessages?.data || [];
+                                              const threadExists = prevThreads.some(
+                                                  (t: any) => t.id === newPostThreadData?.id,
+                                              );
+                                              let updatedThreads;
+                                              if (threadExists) {
+                                                  updatedThreads = prevThreads.map((t: any) =>
+                                                      t.id === newPostThreadData?.id
+                                                          ? {
+                                                                ...t,
+                                                                replies: [...(t?.replies || []), newMessage],
+                                                                replyCount: newPostThreadData?.replyCount,
+                                                                lastReplyAt: newPostThreadData?.lastReplyAt,
+                                                                updatedAt: newPostThreadData?.updatedAt,
+                                                            }
+                                                          : t,
+                                                  );
+                                              } else {
+                                                  updatedThreads = [...prevThreads, newPostThreadData];
+                                              }
+                                              return {
+                                                  ...prev,
+                                                  threadMessages: {
+                                                      ...prev?.threadMessages,
+                                                      totalCount:
+                                                          newPostThreadData?.totalCount ??
+                                                          prev?.threadMessages?.totalCount ??
+                                                          0,
+                                                      data: updatedThreads,
+                                                  },
+                                              };
+                                          } catch (error) {
+                                              return prev;
+                                          }
+                                      },
+                                      onError: (error) => {
+                                          console.error(`Thread subscription error for channel ${channel?.id}:`, error);
+                                      },
+                                  })
+                                : undefined
                         }
                         subscribeToChatMessages={() =>
-                            subscribeToMore({
-                                document: CHAT_MESSAGE_ADDED,
-                                variables: {
-                                    channelId: channel?.id?.toString(),
-                                    postParentId: postParentId || servicePostParentId || null,
-                                },
-                                updateQuery: (prev, { subscriptionData }: any) => {
-                                    if (!subscriptionData?.data) {
-                                        console.log(`No chat message subscription data for channel ${channel?.id}`);
-                                        return prev;
-                                    }
-
-                                    try {
-                                        const newMessage = subscriptionData?.data?.chatMessageAdded;
-
-                                        if (!newMessage) {
-                                            console.log(
-                                                `Missing chat message data in subscription for channel ${channel?.id}`,
-                                            );
-                                            return prev;
-                                        }
-
-                                        console.log('New chat message subscription update:', {
-                                            channelId: channel?.id,
-                                            messageId: newMessage?.id,
-                                            message: newMessage?.message?.substring(0, 20) + '...',
-                                        });
-
-                                        // Find the thread this message belongs to
-                                        const prevThreads = prev?.threadMessages?.data || [];
-                                        const threadIndex = prevThreads.findIndex((t: any) => {
-                                            // Check if this message belongs to this thread
-                                            if (newMessage.parentId && t.post?.id === newMessage.parentId) {
-                                                return true;
-                                            }
-                                            // Check replies
-                                            if (t.replies && t.replies.some((r: any) => r.id === newMessage.parentId)) {
-                                                return true;
-                                            }
-                                            return false;
-                                        });
-
-                                        if (threadIndex === -1) {
-                                            console.log(
-                                                `Cannot find thread for chat message in channel ${channel?.id}`,
-                                            );
-                                            return prev;
-                                        }
-
-                                        // Update the thread with the new message
-                                        const updatedThreads = [...prevThreads];
-                                        const thread = { ...updatedThreads[threadIndex] };
-
-                                        // Add message to replies
-                                        thread.replies = [...(thread.replies || []), newMessage];
-
-                                        // Fix for arithmetic operation type error
-                                        const currentReplyCount =
-                                            typeof thread.replyCount === 'number' ? thread.replyCount : 0;
-                                        thread.replyCount = currentReplyCount + 1;
-
-                                        thread.lastReplyAt = newMessage.createdAt;
-                                        thread.updatedAt = newMessage.createdAt;
-
-                                        updatedThreads[threadIndex] = thread;
-
-                                        return {
-                                            ...prev,
-                                            threadMessages: {
-                                                ...prev?.threadMessages,
-                                                data: updatedThreads,
-                                            },
-                                        };
-                                    } catch (error) {
-                                        console.error(
-                                            `Error processing chat message subscription for channel ${channel?.id}:`,
-                                            error,
-                                        );
-                                        return prev;
-                                    }
-                                },
-                                onError: (error) => {
-                                    console.error(`Chat message subscription error for channel ${channel?.id}:`, error);
-                                },
-                            })
+                            shouldQuery
+                                ? subscribeToMore({
+                                      document: CHAT_MESSAGE_ADDED,
+                                      variables: {
+                                          channelId: channel?.id?.toString(),
+                                          postParentId: postParentId || servicePostParentId || null,
+                                      },
+                                      updateQuery: (prev, { subscriptionData }: any) => {
+                                          if (!subscriptionData?.data) {
+                                              return prev;
+                                          }
+                                          try {
+                                              const newMessage = subscriptionData?.data?.chatMessageAdded;
+                                              if (!newMessage) {
+                                                  return prev;
+                                              }
+                                              const prevThreads = prev?.threadMessages?.data || [];
+                                              const threadIndex = prevThreads.findIndex((t: any) => {
+                                                  if (newMessage.parentId && t.post?.id === newMessage.parentId) {
+                                                      return true;
+                                                  }
+                                                  if (
+                                                      t.replies &&
+                                                      t.replies.some((r: any) => r.id === newMessage.parentId)
+                                                  ) {
+                                                      return true;
+                                                  }
+                                                  return false;
+                                              });
+                                              if (threadIndex === -1) {
+                                                  return prev;
+                                              }
+                                              const updatedThreads = [...prevThreads];
+                                              const thread = { ...updatedThreads[threadIndex] };
+                                              thread.replies = [...(thread.replies || []), newMessage];
+                                              const currentReplyCount =
+                                                  typeof thread.replyCount === 'number' ? thread.replyCount : 0;
+                                              thread.replyCount = currentReplyCount + 1;
+                                              thread.lastReplyAt = newMessage.createdAt;
+                                              thread.updatedAt = newMessage.createdAt;
+                                              updatedThreads[threadIndex] = thread;
+                                              return {
+                                                  ...prev,
+                                                  threadMessages: {
+                                                      ...prev?.threadMessages,
+                                                      data: updatedThreads,
+                                                  },
+                                              };
+                                          } catch (error) {
+                                              return prev;
+                                          }
+                                      },
+                                      onError: (error) => {
+                                          console.error(
+                                              `Chat message subscription error for channel ${channel?.id}:`,
+                                              error,
+                                          );
+                                      },
+                                  })
+                                : undefined
                         }
+                        subscribeToMore={subscribeToMore}
+                        postParentId={postParentId}
+                        servicePostParentId={servicePostParentId}
                     />
                 </Box>
             </HStack>

package/src/screens/inbox/components/SlackInput.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TextInput, TextInputProps } from 'react-native';
+
+export const SlackInput = React.forwardRef<TextInput, TextInputProps>((props, ref) => {
+    return (
+        <TextInput
+            ref={ref}
+            {...props}
+            style={[
+                {
+                    flex: 1,
+                    fontSize: 16,
+                    padding: 10,
+                    borderRadius: 8,
+                    backgroundColor: '#f8f8f8',
+                    borderColor: '#e0e0e0',
+                    borderWidth: 1,
+                },
+                props.style,
+            ]}
+        />
+    );
+});