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

package/lib/screens/inbox/containers/ThreadsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadsView.js","sources":["../../../../src/screens/inbox/containers/ThreadsView.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useEffect, useState } from 'react';\nimport { FlatList, Box, Heading, Input, Text, Icon, Center, Spinner, Button } from '@admin-layout/gluestack-ui-mobile';\nimport { Ionicons } from '@expo/vector-icons';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';\nimport { orderBy, uniqBy, startCase } from 'lodash-es';\nimport {\n    useThreadMessagesQuery,\n    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,\n    useOnThreadCreatedUpdatedSubscription,\n} from 'common/graphql';\nimport { userSelector } from '@adminide-stack/user-auth0-client';\nimport { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';\nimport { ThreadViewItem } from '../components/ThreadsViewItem';\nimport { config } from '../config';\nimport { Actions } from '../workflow/dialog-threads-xstate';\nconst { MESSAGES_PER_PAGE } = config;\n\nexport interface ThreadsViewProps {\n    data: any;\n    loading: boolean;\n    refetch: any;\n    subscribeToMore: any;\n    error: any;\n    channelId?: string;\n    role?: string;\n    channelsDetail?: any;\n    refetchChannelDetail: (id: any) => Promise<any>;\n}\n\ninterface IThreadSubscriptionHandlerProps {\n    subscribeToNewMessages: () => any;\n    channelId: string | undefined;\n}\n\nconst ThreadsViewComponent = ({\n    data,\n    loading: threadLoading,\n    refetch,\n    subscribeToMore,\n    error,\n    channelId,\n    role,\n    channelsDetail,\n    refetchChannelDetail,\n}: ThreadsViewProps) => {\n    const { params } = useRoute<any>();\n    const auth = useSelector(userSelector);\n    const dispatch = useDispatch();\n    const navigation = useNavigation<any>();\n    const isFocused = useIsFocused();\n    const [refreshing, setRefresh] = useState<boolean>(false);\n\n    // Use thread subscription for real-time updates\n    const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({\n        variables: { channelId: channelId?.toString() },\n    });\n\n    // Subscribe to thread updates\n    const subscribeToNewMessages = useCallback(() => {\n        return subscribeToMore({\n            document: THREAD_CHAT_ADDED,\n            variables: { channelId: channelId?.toString() },\n            updateQuery: (prev: any, { subscriptionData }: any) => {\n                if (!subscriptionData.data) return prev;\n\n                const newThread = subscriptionData.data.threadCreatedUpdated.data;\n                if (!newThread) return prev;\n\n                const threads = prev.threadMessages.data || [];\n                const index = threads.findIndex((t: any) => t.id === newThread.id);\n\n                let updatedThreads;\n                if (index > -1) {\n                    // Update existing thread\n                    updatedThreads = [...threads];\n                    updatedThreads[index] = newThread;\n                } else {\n                    // Add new thread\n                    updatedThreads = [newThread, ...threads];\n                }\n\n                return {\n                    ...prev,\n                    threadMessages: {\n                        ...prev.threadMessages,\n                        data: uniqBy(updatedThreads, 'id'),\n                    },\n                };\n            },\n        });\n    }, [channelId, subscribeToMore]);\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            navigation?.setOptions({ title: params?.title ?? 'Thread' });\n            refetch({\n                channelId: channelId?.toString(),\n                role: role?.toString(),\n                limit: MESSAGES_PER_PAGE,\n                repliesLimit2: 5,\n            });\n\n            // Setup subscription\n            const unsubscribe = subscribeToNewMessages();\n\n            return () => {\n                // Unsubscribe on cleanup\n                if (unsubscribe) unsubscribe();\n            };\n        }, []),\n    );\n\n    // Effect for thread updates from subscription\n    React.useEffect(() => {\n        if (threadCreatedUpdated?.threadCreatedUpdated?.data) {\n            // The subscription handler will handle updates\n        }\n    }, [threadCreatedUpdated]);\n\n    const threads = React.useMemo(() => {\n        if (data?.threadMessages?.data?.length == 0) return [];\n        const threadsFiltered = data?.threadMessages?.data\n            ? uniqBy([...data?.threadMessages?.data], ({ id }: any) => id)\n            : [];\n        return orderBy(threadsFiltered, ['updatedAt'], ['desc']) || [];\n    }, [data]);\n\n    const threadReplies = React.useMemo(() => {\n        if (!threads?.length) return null;\n        return threads?.map((t: any) => t?.replies)?.flat(1) || [];\n    }, [threads]);\n\n    const handleSelectThread = useCallback((id: any, title: any, postParentId: any) => {\n        navigation.navigate(config.THREAD_MESSEGE_PATH as any, {\n            channelId: id,\n            role: role?.toString(),\n            title: title,\n            postParentId: postParentId,\n            hideTabBar: true,\n        });\n    }, []);\n\n    const handleRefresh = useCallback(() => {\n        setRefresh(true);\n        refetch({\n            channelId: channelId?.toString(),\n            role: role?.toString(),\n            limit: MESSAGES_PER_PAGE,\n            repliesLimit2: 5,\n        }).finally(() => {\n            setRefresh(false);\n        });\n    }, []);\n\n    const fetchMoreThreads = useCallback(() => {\n        refetch({\n            channelId: channelId?.toString(),\n            role: role?.toString(),\n            limit: MESSAGES_PER_PAGE,\n            repliesLimit2: 5,\n        });\n    }, []);\n\n    if (error) {\n        return (\n            <Box style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n                <Text>Error loading threads. {error.message}</Text>\n                <Button onPress={handleRefresh} style={{ marginTop: 4 }}>\n                    <Text>Try Again</Text>\n                </Button>\n            </Box>\n        );\n    }\n\n    return (\n        <Box style={{ flex: 1 }}>\n            {threadLoading && !threads?.length ? (\n                <Center style={{ flex: 1 }}>\n                    <Spinner size=\"large\" />\n                </Center>\n            ) : threads?.length === 0 ? (\n                <Box style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n                    <Text>No threads found</Text>\n                </Box>\n            ) : (\n                <FlatList\n                    data={threads}\n                    keyExtractor={(item) => item.id.toString()}\n                    renderItem={({ item }) => (\n                        <ThreadViewItem\n                            {...item}\n                            onPress={handleSelectThread}\n                            channelId={channelId}\n                            channelsDetail={channelsDetail}\n                        />\n                    )}\n                    refreshing={refreshing}\n                    onRefresh={handleRefresh}\n                    onEndReached={fetchMoreThreads}\n                    onEndReachedThreshold={0.5}\n                    contentContainerStyle={{ padding: 16 }}\n                    ItemSeparatorComponent={() => <Box style={{ height: 3 }} />}\n                />\n            )}\n            <SubscriptionHandler subscribeToNewMessages={subscribeToNewMessages} channelId={channelId} />\n        </Box>\n    );\n};\n\n// Component to handle subscription logic\nconst SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubscriptionHandlerProps) => {\n    useEffect(() => {\n        const unsubscribe = subscribeToNewMessages();\n        return () => {\n            if (unsubscribe) unsubscribe();\n        };\n    }, [channelId]);\n\n    return null;\n};\n\nexport const ThreadsView = ThreadsViewComponent;\n"],"names":["THREAD_CHAT_ADDED","threads","React"],"mappings":";;;;;;;;;;;;;;;;;;;AAYA,MAAM;AAAA,EACJ;AACF,CAAI,GAAA,MAAA;AAgBJ,MAAM,uBAAuB,CAAC;AAAA,EAC5B,IAAA;AAAA,EACA,OAAS,EAAA,aAAA;AAAA,EACT,OAAA;AAAA,EACA,eAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAwB,KAAA;AACtB,EAAM,MAAA;AAAA,IACJ;AAAA,MACE,QAAc,EAAA;AAClB,EAAa,YAAY,YAAY;AACrC,EAAiB,WAAY;AAC7B,EAAA,MAAM,aAAa,aAAmB,EAAA;AACtC,EAAkB,YAAa;AAC/B,EAAA,MAAM,CAAC,UAAA,EAAY,UAAU,CAAA,GAAI,SAAkB,KAAK,CAAA;AAGxD,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA;AAAA,MACJ,qCAAsC,CAAA;AAAA,IACxC,SAAW,EAAA;AAAA,MACT,WAAW,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA;AAAA;AACxB,GACD,CAAA;AAGD,EAAM,MAAA,sBAAA,GAAyB,YAAY,MAAM;AAC/C,IAAA,OAAO,eAAgB,CAAA;AAAA,MACrB,QAAU,EAAAA,8BAAA;AAAA,MACV,SAAW,EAAA;AAAA,QACT,WAAW,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA;AAAA,OACxB;AAAA,MACA,WAAA,EAAa,CAAC,IAAW,EAAA;AAAA,QACvB;AAAA,OACS,KAAA;AACT,QAAA,IAAI,CAAC,gBAAiB,CAAA,IAAA;AAAM,UAAO,OAAA,IAAA;AACnC,QAAM,MAAA,SAAA,GAAY,gBAAiB,CAAA,IAAA,CAAK,oBAAqB,CAAA,IAAA;AAC7D,QAAA,IAAI,CAAC,SAAA;AAAW,UAAO,OAAA,IAAA;AACvB,QAAA,MAAMC,QAAU,GAAA,IAAA,CAAK,cAAe,CAAA,IAAA,IAAQ,EAAC;AAC7C,QAAM,MAAA,KAAA,GAAQA,SAAQ,SAAU,CAAA,CAAC,MAAW,CAAE,CAAA,EAAA,KAAO,UAAU,EAAE,CAAA;AACjE,QAAI,IAAA,cAAA;AACJ,QAAA,IAAI,QAAQ,EAAI,EAAA;AAEd,UAAiB,cAAA,GAAA,CAAC,GAAGA,QAAO,CAAA;AAC5B,UAAA,cAAA,CAAe,KAAS,CAAA,GAAA,SAAA;AAAA,SACnB,MAAA;AAEL,UAAiB,cAAA,GAAA,CAAC,SAAW,EAAA,GAAGA,QAAO,CAAA;AAAA;AAEzC,QAAA,OAAO,iCACF,IADE,CAAA,EAAA;AAAA,UAEL,cAAA,EAAgB,aACX,CAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAK,cADM,CAAA,EAAA;AAAA,YAEd,IAAA,EAAM,MAAO,CAAA,cAAA,EAAgB,IAAI;AAAA,WACnC;AAAA,SACF,CAAA;AAAA;AACF,KACD,CAAA;AAAA,GACA,EAAA,CAAC,SAAW,EAAA,eAAe,CAAC,CAAA;AAC/B,EAAe,cAAA,CAAAC,cAAA,CAAM,YAAY,MAAM;AA7FzC,IAAA,IAAA,EAAA;AA+FI,IAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,UAAW,CAAA;AAAA,MACrB,KAAA,EAAA,CAAO,EAAQ,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,KAAR,IAAiB,GAAA,EAAA,GAAA;AAAA,KAC1B,CAAA;AACA,IAAQ,OAAA,CAAA;AAAA,MACN,WAAW,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA,EAAA;AAAA,MACtB,MAAM,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACZ,KAAO,EAAA,iBAAA;AAAA,MACP,aAAe,EAAA;AAAA,KAChB,CAAA;AAGD,IAAA,MAAM,cAAc,sBAAuB,EAAA;AAC3C,IAAA,OAAO,MAAM;AAEX,MAAI,IAAA,WAAA;AAAa,QAAY,WAAA,EAAA;AAAA,KAC/B;AAAA,GACF,EAAG,EAAE,CAAC,CAAA;AAGN,EAAAA,cAAA,CAAM,UAAU,MAAM;AAlHxB,IAAA,IAAA,EAAA;AAmHI,IAAI,IAAA,CAAA,EAAA,GAAA,oBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,oBAAA,CAAsB,oBAAtB,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAA4C,IAAM,EAAA;AAEtD,GACF,EAAG,CAAC,oBAAoB,CAAC,CAAA;AACzB,EAAM,MAAA,OAAA,GAAUA,cAAM,CAAA,OAAA,CAAQ,MAAM;AAvHtC,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAwHI,IAAA,IAAA,CAAA,CAAI,EAAM,GAAA,CAAA,EAAA,GAAA,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,cAAA,KAAN,IAAsB,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,KAAtB,mBAA4B,MAAU,KAAA,CAAA;AAAG,MAAA,OAAO,EAAC;AACrD,IAAA,MAAM,eAAkB,GAAA,CAAA,CAAA,EAAA,GAAA,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,cAAN,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAsB,IAAO,IAAA,MAAA,CAAO,CAAC,GAAA,CAAG,EAAM,GAAA,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,cAAA,KAAN,IAAsB,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,GAAG,CAAC;AAAA,MAC5F;AAAA,KACF,KAAW,EAAE,CAAA,GAAI,EAAC;AAClB,IAAO,OAAA,OAAA,CAAQ,iBAAiB,CAAC,WAAW,GAAG,CAAC,MAAM,CAAC,CAAA,IAAK,EAAC;AAAA,GAC/D,EAAG,CAAC,IAAI,CAAC,CAAA;AACT,EAAsBA,cAAM,CAAA,OAAA,CAAQ,MAAM;AA9H5C,IAAA,IAAA,EAAA;AA+HI,IAAA,IAAI,EAAC,OAAS,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,MAAA,CAAA;AAAQ,MAAO,OAAA,IAAA;AAC7B,IAAO,OAAA,CAAA,CAAA,EAAA,GAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,IAAI,CAAC,CAAA,KAAW,uBAAG,OAA5B,CAAA,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAsC,IAAK,CAAA,CAAA,CAAA,KAAM,EAAC;AAAA,GAC3D,EAAG,CAAC,OAAO,CAAC;AACZ,EAAA,MAAM,kBAAqB,GAAA,WAAA,CAAY,CAAC,EAAA,EAAS,OAAY,YAAsB,KAAA;AACjF,IAAW,UAAA,CAAA,QAAA,CAAS,OAAO,mBAA4B,EAAA;AAAA,MACrD,SAAW,EAAA,EAAA;AAAA,MACX,MAAM,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACZ,KAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AACL,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAQ,OAAA,CAAA;AAAA,MACN,WAAW,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA,EAAA;AAAA,MACtB,MAAM,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACZ,KAAO,EAAA,iBAAA;AAAA,MACP,aAAe,EAAA;AAAA,KAChB,CAAE,CAAA,OAAA,CAAQ,MAAM;AACf,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,KACjB,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AACL,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAQ,OAAA,CAAA;AAAA,MACN,WAAW,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA,EAAA;AAAA,MACtB,MAAM,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACZ,KAAO,EAAA,iBAAA;AAAA,MACP,aAAe,EAAA;AAAA,KAChB,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AACL,EAAA,IAAI,KAAO,EAAA;AACT,IAAO,uBAAAA,cAAA,CAAA,aAAA,CAAC,OAAI,KAAO,EAAA;AAAA,MACjB,IAAM,EAAA,CAAA;AAAA,MACN,cAAgB,EAAA,QAAA;AAAA,MAChB,UAAY,EAAA;AAAA,KACd,EAAA,kBACaA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAK,yBAAwB,EAAA,KAAA,CAAM,OAAQ,CAAA,kBAC3CA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,aAAA,EAAe,KAAO,EAAA;AAAA,MAC/C,SAAW,EAAA;AAAA,KAEC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,IAAA,EAAA,WAAS,CACnB,CACJ,CAAA;AAAA;AAEV,EAAO,uBAAAA,cAAA,CAAA,aAAA,CAAC,OAAI,KAAO,EAAA;AAAA,IACjB,IAAM,EAAA;AAAA,OAEG,aAAiB,IAAA,EAAC,mCAAS,MAAS,CAAA,mBAAAA,cAAA,CAAA,aAAA,CAAC,UAAO,KAAO,EAAA;AAAA,IAC1D,IAAM,EAAA;AAAA,GAEQ,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,CAC1B,CAAY,GAAA,CAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,MAAW,MAAA,CAAA,mBAAKA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,KAAO,EAAA;AAAA,IAC1D,IAAM,EAAA,CAAA;AAAA,IACN,cAAgB,EAAA,QAAA;AAAA,IAChB,UAAY,EAAA;AAAA,uBAEGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAK,kBAAgB,CAC1B,oBAAUA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,IAAM,EAAA,OAAA,EAAS,cAAc,CAAQ,IAAA,KAAA,IAAA,CAAK,GAAG,QAAS,EAAA,EAAG,YAAY,CAAC;AAAA,IACnG;AAAA,wBACKA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAmB,IAAnB,CAAA,EAAA,EAAyB,SAAS,kBAAoB,EAAA,SAAA,EAAsB,cAAgC,EAAA,CAAA,CAAA,EAAI,YAAwB,SAAW,EAAA,aAAA,EAAe,cAAc,gBAAkB,EAAA,qBAAA,EAAuB,KAAK,qBAAuB,EAAA;AAAA,IAC1P,OAAS,EAAA;AAAA,GACR,EAAA,sBAAA,EAAwB,sBAAMA,cAAA,CAAA,aAAA,CAAC,OAAI,KAAO,EAAA;AAAA,IAC3C,MAAQ,EAAA;AAAA,KACP,CAAI,EAAA,CAAA,+CACE,mBAAoB,EAAA,EAAA,sBAAA,EAAgD,WAAsB,CAC/F,CAAA;AACR,CAAA;AAGA,MAAM,sBAAsB,CAAC;AAAA,EAC3B,sBAAA;AAAA,EACA;AACF,CAAuC,KAAA;AACrC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,cAAc,sBAAuB,EAAA;AAC3C,IAAA,OAAO,MAAM;AACX,MAAI,IAAA,WAAA;AAAa,QAAY,WAAA,EAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,SAAS,CAAC,CAAA;AACd,EAAO,OAAA,IAAA;AACT,CAAA;AACO,MAAM,WAAc,GAAA"}
+{"version":3,"file":"ThreadsView.js","sources":["../../../../src/screens/inbox/containers/ThreadsView.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useEffect, useState } from 'react';\nimport { FlatList, Box, Heading, Input, Text, Icon, Center, Spinner, Button } from '@admin-layout/gluestack-ui-mobile';\nimport { Ionicons } from '@expo/vector-icons';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';\nimport { orderBy, uniqBy, startCase } from 'lodash-es';\nimport {\n    useThreadMessagesQuery,\n    THREAD_CREATED_UPDATED,\n    useThreadCreatedUpdatedSubscription,\n} from '../../../queries/inboxQueries';\nimport { userSelector } from '@adminide-stack/user-auth0-client';\nimport { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';\nimport { ThreadViewItem } from '../components/ThreadsViewItem';\nimport { config } from '../config';\nimport { Actions } from '../workflow/dialog-threads-xstate';\nconst { MESSAGES_PER_PAGE } = config;\n\nexport interface ThreadsViewProps {\n    data: any;\n    loading: boolean;\n    refetch: any;\n    subscribeToMore: any;\n    error: any;\n    channelId?: string;\n    role?: string;\n    channelsDetail?: any;\n    refetchChannelDetail: (id: any) => Promise<any>;\n}\n\ninterface IThreadSubscriptionHandlerProps {\n    subscribeToNewMessages: () => any;\n    channelId: string | undefined;\n}\n\nconst ThreadsViewComponent = ({\n    data,\n    loading: threadLoading,\n    refetch,\n    subscribeToMore,\n    error,\n    channelId,\n    role,\n    channelsDetail,\n    refetchChannelDetail,\n}: ThreadsViewProps) => {\n    const { params } = useRoute<any>();\n    const auth = useSelector(userSelector);\n    const dispatch = useDispatch();\n    const navigation = useNavigation<any>();\n    const isFocused = useIsFocused();\n    const [refreshing, setRefresh] = useState<boolean>(false);\n\n    // Use thread subscription for real-time updates\n    const { data: threadCreatedUpdated } = useThreadCreatedUpdatedSubscription({\n        variables: { channelId: channelId?.toString() },\n    });\n\n    // Subscribe to thread updates\n    const subscribeToNewMessages = useCallback(() => {\n        return subscribeToMore({\n            document: THREAD_CREATED_UPDATED,\n            variables: { channelId: channelId?.toString() },\n            updateQuery: (prev: any, { subscriptionData }: any) => {\n                if (!subscriptionData.data) return prev;\n\n                const newThread = subscriptionData.data.threadCreatedUpdated.data;\n                if (!newThread) return prev;\n\n                const threads = prev.threadMessages.data || [];\n                const index = threads.findIndex((t: any) => t.id === newThread.id);\n\n                let updatedThreads;\n                if (index > -1) {\n                    // Update existing thread\n                    updatedThreads = [...threads];\n                    updatedThreads[index] = newThread;\n                } else {\n                    // Add new thread\n                    updatedThreads = [newThread, ...threads];\n                }\n\n                return {\n                    ...prev,\n                    threadMessages: {\n                        ...prev.threadMessages,\n                        data: uniqBy(updatedThreads, 'id'),\n                    },\n                };\n            },\n        });\n    }, [channelId, subscribeToMore]);\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            navigation?.setOptions({ title: params?.title ?? 'Thread' });\n            refetch({\n                channelId: channelId?.toString(),\n                role: role?.toString(),\n                limit: MESSAGES_PER_PAGE,\n                repliesLimit2: 5,\n            });\n\n            // Setup subscription\n            const unsubscribe = subscribeToNewMessages();\n\n            return () => {\n                // Unsubscribe on cleanup\n                if (unsubscribe) unsubscribe();\n            };\n        }, []),\n    );\n\n    // Effect for thread updates from subscription\n    React.useEffect(() => {\n        if (threadCreatedUpdated?.threadCreatedUpdated?.data) {\n            // The subscription handler will handle updates\n        }\n    }, [threadCreatedUpdated]);\n\n    const threads = React.useMemo(() => {\n        if (data?.threadMessages?.data?.length == 0) return [];\n        const threadsFiltered = data?.threadMessages?.data\n            ? uniqBy([...data?.threadMessages?.data], ({ id }: any) => id)\n            : [];\n        return orderBy(threadsFiltered, ['updatedAt'], ['desc']) || [];\n    }, [data]);\n\n    const threadReplies = React.useMemo(() => {\n        if (!threads?.length) return null;\n        return threads?.map((t: any) => t?.replies)?.flat(1) || [];\n    }, [threads]);\n\n    const handleSelectThread = useCallback((id: any, title: any, postParentId: any) => {\n        navigation.navigate(config.THREAD_MESSEGE_PATH as any, {\n            channelId: id,\n            role: role?.toString(),\n            title: title,\n            postParentId: postParentId,\n            hideTabBar: true,\n        });\n    }, []);\n\n    const handleRefresh = useCallback(() => {\n        setRefresh(true);\n        refetch({\n            channelId: channelId?.toString(),\n            role: role?.toString(),\n            limit: MESSAGES_PER_PAGE,\n            repliesLimit2: 5,\n        }).finally(() => {\n            setRefresh(false);\n        });\n    }, []);\n\n    const fetchMoreThreads = useCallback(() => {\n        refetch({\n            channelId: channelId?.toString(),\n            role: role?.toString(),\n            limit: MESSAGES_PER_PAGE,\n            repliesLimit2: 5,\n        });\n    }, []);\n\n    if (error) {\n        return (\n            <Box style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n                <Text>Error loading threads. {error.message}</Text>\n                <Button onPress={handleRefresh} style={{ marginTop: 4 }}>\n                    <Text>Try Again</Text>\n                </Button>\n            </Box>\n        );\n    }\n\n    return (\n        <Box style={{ flex: 1 }}>\n            {threadLoading && !threads?.length ? (\n                <Center style={{ flex: 1 }}>\n                    <Spinner size=\"large\" />\n                </Center>\n            ) : threads?.length === 0 ? (\n                <Box style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n                    <Text>No threads found</Text>\n                </Box>\n            ) : (\n                <FlatList\n                    data={threads}\n                    keyExtractor={(item) => item.id.toString()}\n                    renderItem={({ item }) => (\n                        <ThreadViewItem\n                            {...item}\n                            onPress={handleSelectThread}\n                            channelId={channelId}\n                            channelsDetail={channelsDetail}\n                        />\n                    )}\n                    refreshing={refreshing}\n                    onRefresh={handleRefresh}\n                    onEndReached={fetchMoreThreads}\n                    onEndReachedThreshold={0.5}\n                    contentContainerStyle={{ padding: 16 }}\n                    ItemSeparatorComponent={() => <Box style={{ height: 3 }} />}\n                />\n            )}\n            <SubscriptionHandler subscribeToNewMessages={subscribeToNewMessages} channelId={channelId} />\n        </Box>\n    );\n};\n\n// Component to handle subscription logic\nconst SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubscriptionHandlerProps) => {\n    useEffect(() => {\n        const unsubscribe = subscribeToNewMessages();\n        return () => {\n            if (unsubscribe) unsubscribe();\n        };\n    }, [channelId]);\n\n    return null;\n};\n\nexport const ThreadsView = ThreadsViewComponent;\n"],"names":["threads","React"],"mappings":"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"}

package/lib/screens/inbox/hooks/useInboxMessages.js

@@ -0,0 +1,31 @@
+import {useCallback}from'react';function useInboxMessages({
+  useQueryHook,
+  queryVariables,
+  subscriptionDocument,
+  subscriptionVariables,
+  updateQuery,
+  onError
+}) {
+  const {
+    data,
+    loading,
+    error,
+    refetch,
+    subscribeToMore
+  } = useQueryHook(queryVariables);
+  const subscribe = useCallback(() => {
+    return subscribeToMore({
+      document: subscriptionDocument,
+      variables: subscriptionVariables,
+      updateQuery,
+      onError
+    });
+  }, [subscribeToMore, subscriptionDocument, subscriptionVariables, updateQuery, onError]);
+  return {
+    data,
+    loading,
+    error,
+    refetch,
+    subscribe
+  };
+}export{useInboxMessages};//# sourceMappingURL=useInboxMessages.js.map

package/lib/screens/inbox/hooks/useInboxMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInboxMessages.js","sources":["../../../../src/screens/inbox/hooks/useInboxMessages.ts"],"sourcesContent":["import { useCallback } from 'react';\n\n/**\n * useInboxMessages - a generic hook for fetching and subscribing to messages\n *\n * @param useQueryHook - Apollo query hook (e.g., useChannelMessagesQuery)\n * @param queryVariables - variables for the query\n * @param subscriptionDocument - GraphQL subscription document\n * @param subscriptionVariables - variables for the subscription\n * @param updateQuery - Apollo updateQuery function (optional)\n * @param onError - error handler (optional)\n * @returns { data, loading, error, refetch, subscribe }\n */\nexport function useInboxMessages({\n    useQueryHook,\n    queryVariables,\n    subscriptionDocument,\n    subscriptionVariables,\n    updateQuery,\n    onError,\n}) {\n    const { data, loading, error, refetch, subscribeToMore } = useQueryHook(queryVariables);\n\n    const subscribe = useCallback(() => {\n        return subscribeToMore({\n            document: subscriptionDocument,\n            variables: subscriptionVariables,\n            updateQuery,\n            onError,\n        });\n    }, [subscribeToMore, subscriptionDocument, subscriptionVariables, updateQuery, onError]);\n\n    return { data, loading, error, refetch, subscribe };\n}\n"],"names":[],"mappings":"gCAaO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,YAAA;AAAA,EACA,cAAA;AAAA,EACA,oBAAA;AAAA,EACA,qBAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAG,EAAA;AACD,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF,GAAI,aAAa,cAAc,CAAA;AAC/B,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAA,OAAO,eAAgB,CAAA;AAAA,MACrB,QAAU,EAAA,oBAAA;AAAA,MACV,SAAW,EAAA,qBAAA;AAAA,MACX,WAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,KACA,CAAC,eAAA,EAAiB,sBAAsB,qBAAuB,EAAA,WAAA,EAAa,OAAO,CAAC,CAAA;AACvF,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/platform-mobile",
-    "version": "10.0.3-alpha.40",
+    "version": "10.0.3-alpha.46",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -22,8 +22,8 @@
         "watch-ts": "tsc --watch"
     },
     "dependencies": {
-        "@messenger-box/core": "10.0.3-alpha.40",
-        "@messenger-box/platform-client": "10.0.3-alpha.40",
+        "@messenger-box/core": "10.0.3-alpha.46",
+        "@messenger-box/platform-client": "10.0.3-alpha.46",
         "base-64": "1.0.0",
         "react-native-gifted-chat": "1.0.4"
     },
@@ -43,5 +43,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "9bcf95cbd1dfac789e71d3031fd44b8cf7add6ce"
+    "gitHead": "5bc321d4000aa9d26ae0bdad9461598851b75174"
 }

package/src/index.ts

@@ -1,7 +1,9 @@
 import PlatformModule from './module';
 
 import { Feature } from '@common-stack/client-react';
+// import * as inboxQueries from './queries/inboxQueries';
 
 export default new Feature(PlatformModule);
 // export * from './navigation';
 export * from './screens';
+// export { inboxQueries };

package/src/queries/inboxQueries.ts

@@ -0,0 +1,298 @@
+// Imports from common/graphql
+import {
+    useGetChannelsByUserWithServiceChannelsQuery,
+    OnChatMessageAddedDocument,
+    OnThreadCreatedUpdatedDocument,
+    useViewChannelDetailQuery,
+    useThreadMessagesQuery,
+    useSupportServiceChannelsQuery,
+    useSendThreadMessageMutation,
+    useMessagesQuery,
+    useSendMessagesMutation,
+    useAddDirectChannelMutation,
+    MessagesDocument,
+    useSendExpoNotificationOnPostMutation,
+    useOnThreadCreatedUpdatedSubscription,
+    useOnChatMessageAddedSubscription,
+    useOnThreadChatMessageAddedSubscription,
+    useCreatePostThreadMutation,
+    useGetPostThreadLazyQuery,
+} from 'common/graphql';
+import { useCallback } from 'react';
+
+// ====== CHANNEL QUERIES ======
+
+/**
+ * Hook for fetching channels by user including service channels
+ * @param options - Query options
+ * @returns Query result with data, loading state, refetch and fetchMore functions
+ */
+export const useChannelsQuery = (options: any = {}) => {
+    return useGetChannelsByUserWithServiceChannelsQuery({
+        ...options,
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'network-only',
+    });
+};
+
+/**
+ * Hook for fetching service channels
+ * @param options - Query options
+ * @returns Query result with data, loading state and refetch function
+ */
+export const useServiceChannelsQuery = (options: any = {}) => {
+    return useSupportServiceChannelsQuery({
+        ...options,
+        fetchPolicy: 'cache-and-network',
+    });
+};
+
+/**
+ * Hook for fetching channel details
+ * @param channelId - ID of the channel to fetch
+ * @param options - Additional query options
+ * @returns Query result with channel details
+ */
+export const useChannelDetailQuery = (channelId: string, options: any = {}) => {
+    return useViewChannelDetailQuery({
+        variables: { channelId },
+        ...options,
+    });
+};
+
+// ====== THREAD QUERIES ======
+
+/**
+ * Direct export of the thread messages query hook
+ */
+export { useThreadMessagesQuery };
+
+/**
+ * Direct export of the messages query hook
+ */
+export { useMessagesQuery };
+
+/**
+ * Hook for fetching thread messages with default options
+ * @param variables - Query variables including channelId, role, and limit
+ * @param options - Additional query options
+ * @returns Query result with thread messages data
+ */
+export const useThreadMessagesQueryWithOptions = (variables: any, options: any = {}) => {
+    return useThreadMessagesQuery({
+        variables,
+        fetchPolicy: 'cache-and-network',
+        refetchWritePolicy: 'overwrite',
+        nextFetchPolicy: 'network-only',
+        ...options,
+    });
+};
+
+// ====== MESSAGE QUERIES ======
+
+/**
+ * Hook for fetching channel messages
+ * @param variables - Query variables including channelId, parentId, and pagination params
+ * @param options - Additional query options
+ * @returns Query result for messages
+ */
+export const useChannelMessagesQuery = (variables: any = {}, options: any = {}) => {
+    return useMessagesQuery({
+        variables,
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        refetchWritePolicy: 'merge',
+        ...options,
+    });
+};
+
+/**
+ * Hook for sending messages in a channel
+ * @returns Mutation function and result
+ */
+export const useSendChannelMessage = () => {
+    return useSendMessagesMutation();
+};
+
+/**
+ * Hook for adding a direct channel
+ * @returns Mutation function and result
+ */
+export const useAddDirectChannel = () => {
+    return useAddDirectChannelMutation();
+};
+
+/**
+ * Messages document for queries
+ */
+export const MESSAGES_DOCUMENT = MessagesDocument;
+
+// ====== MUTATIONS ======
+
+/**
+ * Hook for sending thread messages
+ * @returns Mutation function and result
+ */
+export const useSendThreadMessage = () => {
+    return useSendThreadMessageMutation();
+};
+
+/**
+ * Hook for sending expo notifications
+ * @returns Mutation function and result
+ */
+export const useSendExpoNotification = () => {
+    return useSendExpoNotificationOnPostMutation();
+};
+
+/**
+ * Hook for creating a post thread
+ * @param options - Mutation options
+ * @returns Mutation function and result
+ */
+export const useCreatePostThread = (options: any = {}) => {
+    return useCreatePostThreadMutation(options);
+};
+
+// ====== SUBSCRIPTION DOCUMENTS ======
+
+/**
+ * Document for chat message added subscription
+ */
+export const CHAT_MESSAGE_ADDED = OnChatMessageAddedDocument;
+
+/**
+ * Document for thread created/updated subscription
+ */
+export const THREAD_CREATED_UPDATED = OnThreadCreatedUpdatedDocument;
+
+/**
+ * Hook for subscribing to thread creation and updates
+ * @returns Subscription result for thread creation/update events
+ */
+export const useThreadCreatedUpdatedSubscription = (options: any = {}) => {
+    return useOnThreadCreatedUpdatedSubscription({
+        ...options,
+    });
+};
+
+/**
+ * Hook for subscribing to chat message additions
+ * @param options - Subscription options including variables like channelId
+ * @returns Subscription result for new chat messages
+ */
+export const useChatMessageAddedSubscription = (options: any = {}) => {
+    return useOnChatMessageAddedSubscription({
+        ...options,
+    });
+};
+
+/**
+ * Hook for subscribing to thread chat message additions
+ * @param options - Subscription options including variables like channelId and threadId
+ * @returns Subscription result for new thread chat messages
+ */
+export const useThreadChatMessageAddedSubscription = (options: any = {}) => {
+    return useOnThreadChatMessageAddedSubscription({
+        ...options,
+    });
+};
+
+// ====== LAZY QUERIES ======
+
+/**
+ * Hook for lazily fetching a post thread
+ * @param options - Lazy query options
+ * @returns Lazy query function and result
+ */
+export const useGetPostThreadLazy = (options: any = {}) => {
+    return useGetPostThreadLazyQuery({
+        fetchPolicy: 'cache-and-network',
+        ...options,
+    });
+};
+
+// ====== CUSTOM QUERY HOOKS ======
+
+/**
+ * Custom hook that combines channels and provides refresh functionality
+ */
+export const useInboxChannels = () => {
+    const queryResult = useChannelsQuery();
+
+    const refresh = useCallback(() => {
+        return queryResult.refetch();
+    }, [queryResult.refetch]);
+
+    const loadMore = useCallback(
+        (page: number) => {
+            if (queryResult.loading || !queryResult.data) return;
+
+            return queryResult.fetchMore({
+                variables: { page },
+                updateQuery: (prev, { fetchMoreResult }) => {
+                    if (!fetchMoreResult) return prev;
+
+                    return {
+                        ...fetchMoreResult,
+                        channelsByUser: [...(prev.channelsByUser || []), ...(fetchMoreResult.channelsByUser || [])],
+                        supportServiceChannels: [
+                            ...(prev.supportServiceChannels || []),
+                            ...(fetchMoreResult.supportServiceChannels || []),
+                        ],
+                    };
+                },
+            });
+        },
+        [queryResult.fetchMore, queryResult.loading, queryResult.data],
+    );
+
+    return {
+        ...queryResult,
+        refresh,
+        loadMore,
+    };
+};
+
+/**
+ * Custom hook for thread message operations
+ */
+export const useThreadOperations = (channelId: string, options: any = {}) => {
+    const queryResult = useThreadMessagesQueryWithOptions({ channelId, ...options.variables }, options.queryOptions);
+
+    const [sendMessage, sendMessageResult] = useSendThreadMessage();
+
+    const refresh = useCallback(() => {
+        return queryResult.refetch();
+    }, [queryResult.refetch]);
+
+    const fetchMoreMessages = useCallback(
+        (variables: any) => {
+            return queryResult.fetchMore({
+                variables,
+                updateQuery: (prev, { fetchMoreResult }) => {
+                    if (!fetchMoreResult?.threadMessages?.data) return prev;
+
+                    return {
+                        ...prev,
+                        threadMessages: {
+                            ...prev.threadMessages,
+                            data: [...fetchMoreResult.threadMessages.data, ...(prev.threadMessages?.data || [])],
+                        },
+                    };
+                },
+            });
+        },
+        [queryResult.fetchMore],
+    );
+
+    return {
+        data: queryResult.data,
+        loading: queryResult.loading,
+        error: queryResult.error,
+        refresh,
+        fetchMoreMessages,
+        sendMessage,
+        sendMessageResult,
+    };
+};

package/src/queries/index.d.ts

@@ -0,0 +1,2 @@
+// This file ensures TypeScript recognizes the module
+export * from './inboxQueries';

package/src/queries/index.ts

@@ -0,0 +1 @@
+export * from './inboxQueries';

package/src/screens/inbox/DialogThreadMessages.tsx

@@ -2,23 +2,15 @@ import * as React from 'react';
 import { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';
 import { ThreadConversationView } from './containers/ThreadConversationView';
 import { ThreadsView } from './containers/ThreadsView';
-import { useViewChannelDetailQuery, useSendThreadMessageMutation } from 'common/graphql';
+import { useChannelDetailQuery, useSendThreadMessage } from '../../queries/inboxQueries';
 import { useFocusEffect } from '@react-navigation/native';
 // import { useSelector } from 'react-redux';
 import colors from 'tailwindcss/colors';
 
 export function DialogThreadMessages({ channelId, postParentId, isPostParentIdThread, role }) {
-    const {
-        data,
-        loading: channelLoading,
-        refetch,
-    } = useViewChannelDetailQuery({
-        variables: {
-            id: channelId?.toString(),
-        },
-    });
+    const { data, loading: channelLoading, refetch } = useChannelDetailQuery(channelId?.toString(), {});
 
-    const [sendThreadMessage] = useSendThreadMessageMutation();
+    const [sendThreadMessage] = useSendThreadMessage();
     const [loading, setLoading] = React.useState<boolean>(true);
     const [channel, setChannel] = React.useState<any>(null);
     const [parentId, setParentId] = React.useState<any>(postParentId);

package/src/screens/inbox/DialogThreads.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';
 import { ThreadConversationView } from './containers/ThreadConversationView';
 import { ThreadsView } from './containers/ThreadsView';
-import { useViewChannelDetailQuery, useThreadMessagesQuery } from 'common/graphql';
+import { useChannelDetailQuery, useThreadMessagesQueryWithOptions } from '../../queries/inboxQueries';
 import { useFocusEffect } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { config } from './config';
@@ -22,11 +22,7 @@ export function DialogThreads({ channelId, postParentId, role }) {
         data: channelData,
         loading: channelLoading,
         refetch: channelRefetch,
-    } = useViewChannelDetailQuery({
-        variables: {
-            id: channelId?.toString(),
-        },
-    });
+    } = useChannelDetailQuery(channelId?.toString(), {});
 
     // Fetch thread messages
     const {
@@ -35,7 +31,7 @@ export function DialogThreads({ channelId, postParentId, role }) {
         error: threadsError,
         refetch: threadsRefetch,
         subscribeToMore: threadsSubscribeToMore,
-    } = useThreadMessagesQuery({
+    } = useThreadMessagesQueryWithOptions({
         variables: {
             channelId: channelId?.toString(),
             role: role?.toString(),

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Modal, TouchableOpacity, View, StyleSheet } from 'react-native';
+
+export const Actionsheet = ({ isOpen, onCancel, children }) => {
+    if (!isOpen) return null;
+    return (
+        <Modal visible={isOpen} transparent animationType="slide" onRequestClose={onCancel}>
+            <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={onCancel}>
+                <View style={styles.sheet} onStartShouldSetResponder={() => true}>
+                    {children}
+                </View>
+            </TouchableOpacity>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.3)',
+        justifyContent: 'flex-end',
+    },
+    sheet: {
+        backgroundColor: '#fff',
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        padding: 16,
+        minHeight: 100,
+    },
+});