@messenger-box/platform-mobile 10.0.3-alpha.16 → 10.0.3-alpha.162

package/src/screens/inbox/containers/ThreadsView.tsx

@@ -6,13 +6,14 @@ import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-na
 import { orderBy, uniqBy, startCase } from 'lodash-es';
 import {
     useThreadMessagesQuery,
-    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
-    useOnThreadCreatedUpdatedSubscription,
-} from 'common/graphql';
+    THREAD_CREATED_UPDATED,
+    useThreadCreatedUpdatedSubscription,
+} from '../../../queries/inboxQueries';
 import { userSelector } from '@adminide-stack/user-auth0-client';
 import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
 import { ThreadViewItem } from '../components/ThreadsViewItem';
 import { config } from '../config';
+import { Actions } from '../workflow/dialog-threads-xstate';
 const { MESSAGES_PER_PAGE } = config;
 
 export interface ThreadsViewProps {
@@ -49,27 +50,46 @@ const ThreadsViewComponent = ({
     const navigation = useNavigation<any>();
     const isFocused = useIsFocused();
     const [refreshing, setRefresh] = useState<boolean>(false);
-    const [threadData, setThreadsData] = useState<any>([]);
 
-    // const {
-    //     data,
-    //     loading: threadLoading,
-    //     error,
-    //     refetch,
-    //     subscribeToMore,
-    // } = useThreadMessagesQuery({
-    //     variables: {
-    //         channelId: channelId?.toString(),
-    //         role: role?.toString(),
-    //         limit: MESSAGES_PER_PAGE,
-    //         repliesLimit2: 5,
-    //     },
-    //     // fetchPolicy: 'cache-and-network',
-    // });
-
-    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
-    //     variables: { channelId: channelId?.toString() },
-    // });
+    // Use thread subscription for real-time updates
+    const { data: threadCreatedUpdated } = useThreadCreatedUpdatedSubscription({
+        variables: { channelId: channelId?.toString() },
+    });
+
+    // Subscribe to thread updates
+    const subscribeToNewMessages = useCallback(() => {
+        return subscribeToMore({
+            document: THREAD_CREATED_UPDATED,
+            variables: { channelId: channelId?.toString() },
+            updateQuery: (prev: any, { subscriptionData }: any) => {
+                if (!subscriptionData.data) return prev;
+
+                const newThread = subscriptionData.data.threadCreatedUpdated.data;
+                if (!newThread) return prev;
+
+                const threads = prev.threadMessages.data || [];
+                const index = threads.findIndex((t: any) => t.id === newThread.id);
+
+                let updatedThreads;
+                if (index > -1) {
+                    // Update existing thread
+                    updatedThreads = [...threads];
+                    updatedThreads[index] = newThread;
+                } else {
+                    // Add new thread
+                    updatedThreads = [newThread, ...threads];
+                }
+
+                return {
+                    ...prev,
+                    threadMessages: {
+                        ...prev.threadMessages,
+                        data: uniqBy(updatedThreads, 'id'),
+                    },
+                };
+            },
+        });
+    }, [channelId, subscribeToMore]);
 
     useFocusEffect(
         React.useCallback(() => {
@@ -81,64 +101,25 @@ const ThreadsViewComponent = ({
                 limit: MESSAGES_PER_PAGE,
                 repliesLimit2: 5,
             });
-            // .then(({ data }) => {
-            //     if (!data?.threadMessages?.data) {
-            //         return;
-            //     }
 
-            //     if (data?.threadMessages?.data?.length) {
-            //         const { data: newThreads } = data?.threadMessages;
-            //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
-            //     }
-            // });
+            // Setup subscription
+            const unsubscribe = subscribeToNewMessages();
 
             return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
+                // Unsubscribe on cleanup
+                if (unsubscribe) unsubscribe();
             };
         }, []),
     );
 
-    // React.useEffect(() => {
-    //     if (data?.threadMessages?.data?.length) {
-    //         const { data: newThreads } = data?.threadMessages;
-    //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
-    //     }
-    // }, [data]);
-
-    // React.useEffect(() => {
-    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
-    //         const { data: newThreads } = threadCreatedUpdated?.threadCreatedUpdated;
-
-    //         setThreadsData((oldThreads: any) => {
-    //             const i = oldThreads.findIndex((el: any) => el.id === newThreads?.id);
-    //             if (i > -1) oldThreads[i] = newThreads; // (2)
-    //             else oldThreads.push(newThreads);
-    //             return oldThreads;
-    //         });
-    //         // setThreadsData((oldThreads: any) => uniqBy([...oldThreads, newThreads], ({ id }) => id));
-    //     }
-    // }, [threadCreatedUpdated]);
-
-    const setData = React.useCallback((newThreads: any) => {
-        setThreadsData((oldThreads: any) => {
-            const i = oldThreads.findIndex((el: any) => el.id === newThreads?.id);
-            if (i > -1) oldThreads[i] = newThreads; // (2)
-            else oldThreads.push(newThreads);
-            return oldThreads;
-        });
-        // setThreadsData((oldThreads: any) => uniqBy([...oldThreads, newThreads], ({ id }) => id));
-    }, []);
-
-    // const threads = React.useMemo(() => {
-    //     if (!threadData?.length) return null;
-    //     return orderBy(threadData, ['updatedAt'], ['desc']) || [];
-    //     //return threadData || [];
-    // }, [threadData]);
+    // Effect for thread updates from subscription
+    React.useEffect(() => {
+        if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
+            // The subscription handler will handle updates
+        }
+    }, [threadCreatedUpdated]);
 
     const threads = React.useMemo(() => {
-        // if (!data?.threadMessages?.data?.length) return null;
-        // const { data: newThreads } = data?.threadMessages;
         if (data?.threadMessages?.data?.length == 0) return [];
         const threadsFiltered = data?.threadMessages?.data
             ? uniqBy([...data?.threadMessages?.data], ({ id }: any) => id)
@@ -149,7 +130,6 @@ const ThreadsViewComponent = ({
     const threadReplies = React.useMemo(() => {
         if (!threads?.length) return null;
         return threads?.map((t: any) => t?.replies)?.flat(1) || [];
-        //return threadData || [];
     }, [threads]);
 
     const handleSelectThread = useCallback((id: any, title: any, postParentId: any) => {
@@ -160,146 +140,85 @@ const ThreadsViewComponent = ({
             postParentId: postParentId,
             hideTabBar: true,
         });
-        // if (params?.channelId) {
-        //     navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
-        //         channelId: params?.channelId,
-        //         title: params?.title ?? null,
-        //         postParentId: postParentId,
-        //         hideTabBar: true,
-        //     });
-        // } else {
-        //     navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
-        //         channelId: id,
-        //         title: title,
-        //         postParentId: postParentId,
-        //         hideTabBar: true,
-        //     });
-        // }
     }, []);
 
     const handleRefresh = useCallback(() => {
+        setRefresh(true);
         refetch({
             channelId: channelId?.toString(),
             role: role?.toString(),
             limit: MESSAGES_PER_PAGE,
             repliesLimit2: 5,
+        }).finally(() => {
+            setRefresh(false);
         });
-        // .then(({ data }) => {
-        //     if (!data?.threadMessages?.data) {
-        //         return;
-        //     }
-
-        //     if (data?.threadMessages?.data?.length) {
-        //         const { data: newThreads } = data?.threadMessages;
-        //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
-        //     }
-        // });
     }, []);
 
     const fetchMoreThreads = useCallback(() => {
         refetch({
             channelId: channelId?.toString(),
             role: role?.toString(),
-            skip: threads?.length,
+            limit: MESSAGES_PER_PAGE,
+            repliesLimit2: 5,
         });
     }, []);
 
-    // if (!threadReplies || threadReplies?.length == 0) {
-    //     return (
-    //         <Center w="full" bg={'f8f8f8'} height={'full'}>
-    //             You don't have any message yet!
-    //         </Center>
-    //     );
-    // }
-    console.log('threadLoading', threadLoading, ' threads?.length=', threads?.length);
+    if (error) {
+        return (
+            <Box style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                <Text>Error loading threads. {error.message}</Text>
+                <Button onPress={handleRefresh} style={{ marginTop: 4 }}>
+                    <Text>Try Again</Text>
+                </Button>
+            </Box>
+        );
+    }
 
     return (
-        <Box className="flex-1 p-2 pb-0 bg-gray-100 dark:border-gray-600 dark:bg-gray-700">
-            <FlatList
-                style={{ flex: 1 }}
-                data={threads && threads?.length > 0 ? threads : []}
-                onRefresh={handleRefresh}
-                refreshing={threadLoading}
-                contentContainerStyle={{ paddingBottom: 60 }}
-                ItemSeparatorComponent={() => <Box className="h-0.5 bg-gray-200" />}
-                renderItem={({ item: thread, index }) => (
-                    <ThreadViewItem
-                        key={index}
-                        onOpen={handleSelectThread}
-                        currentUser={auth}
-                        thread={thread}
-                        role={role}
-                        setData={setData}
-                    />
-                )}
-                ListEmptyComponent={() => (
-                    <>
-                        {/* {!threadLoading || threads?.length == 0} */}
-                        {!threadLoading && threads?.length == 0 && (
-                            <Box className="p-5">
-                                <Center className="mt-6">
-                                    <Ionicons name="chatbubbles" size={50} />
-                                    <Text>You don't have any message yet!</Text>
-                                </Center>
-                            </Box>
-                        )}
-                    </>
-                )}
-                ListFooterComponent={() => (
-                    <>
-                        <SubscriptionHandler
+        <Box style={{ flex: 1 }}>
+            {threadLoading && !threads?.length ? (
+                <Center style={{ flex: 1 }}>
+                    <Spinner size="large" />
+                </Center>
+            ) : threads?.length === 0 ? (
+                <Box style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                    <Text>No threads found</Text>
+                </Box>
+            ) : (
+                <FlatList
+                    data={threads}
+                    keyExtractor={(item) => item.id.toString()}
+                    renderItem={({ item }) => (
+                        <ThreadViewItem
+                            {...item}
+                            onPress={handleSelectThread}
                             channelId={channelId}
-                            subscribeToNewMessages={() =>
-                                subscribeToMore({
-                                    document: THREAD_CHAT_ADDED,
-                                    variables: {
-                                        channelId: channelId?.toString(),
-                                        postParentId: null,
-                                    },
-                                    updateQuery: (prev, { subscriptionData }: any) => {
-                                        if (!subscriptionData.data) return prev;
-                                        const newPostThreadData: any =
-                                            subscriptionData?.data?.threadCreatedUpdated?.data;
-                                        const newMessage: any =
-                                            subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
-                                        const data = prev?.threadMessages?.data?.map((t: any) =>
-                                            t.id === newPostThreadData?.id
-                                                ? {
-                                                      ...t,
-                                                      replies: [newMessage, ...t?.replies],
-                                                      replyCount: newPostThreadData?.replyCount,
-                                                      lastReplyAt: newPostThreadData?.lastReplyAt,
-                                                      updatedAt: newPostThreadData?.updatedAt,
-                                                  }
-                                                : t,
-                                        );
-
-                                        return Object.assign({}, prev, {
-                                            threadMessages: {
-                                                ...prev?.threadMessages,
-                                                // totalCount: prev?.threadMessages?.totalCount + 1,
-                                                data: data,
-                                            },
-                                        });
-                                    },
-                                })
-                            }
+                            channelsDetail={channelsDetail}
                         />
-                    </>
-                )}
-                keyExtractor={(item, index) => 'threads-view-key' + index}
-                onEndReached={fetchMoreThreads}
-                onEndReachedThreshold={0.1}
-            />
+                    )}
+                    refreshing={refreshing}
+                    onRefresh={handleRefresh}
+                    onEndReached={fetchMoreThreads}
+                    onEndReachedThreshold={0.5}
+                    contentContainerStyle={{ padding: 16 }}
+                    ItemSeparatorComponent={() => <Box style={{ height: 3 }} />}
+                />
+            )}
+            <SubscriptionHandler subscribeToNewMessages={subscribeToNewMessages} channelId={channelId} />
         </Box>
     );
 };
 
+// Component to handle subscription logic
 const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubscriptionHandlerProps) => {
-    useEffect(() => subscribeToNewMessages(), [channelId]);
-    return <></>;
+    useEffect(() => {
+        const unsubscribe = subscribeToNewMessages();
+        return () => {
+            if (unsubscribe) unsubscribe();
+        };
+    }, [channelId]);
+
+    return null;
 };
 
 export const ThreadsView = ThreadsViewComponent;
-
-// export const ThreadsView = React.memo(ThreadsViewComponent);

package/src/screens/inbox/containers/workflow/apollo/handleResult.ts

@@ -0,0 +1,20 @@
+import { ApolloError, FetchResult, SingleExecutionResult } from '@apollo/client';
+
+// Accept any promise-like object with a data field
+export const newHandleMutationResult = async (
+    promise: Promise<any>,
+    transformer: (result: any) => any,
+): Promise<any> => {
+    try {
+        const result = await promise;
+        if (result.errors) {
+            throw result.errors;
+        }
+        if (!result.data) {
+            throw new Error('No data returned from query');
+        }
+        return transformer(result.data);
+    } catch (error: any) {
+        throw error;
+    }
+};