@messenger-box/platform-mobile 10.0.3-alpha.5 → 10.0.3-alpha.54

package/src/compute.ts

@@ -1,9 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { getFilteredRoutes } from '@common-stack/client-react/lib/utils/filteredRoutes.js';
-import { IRouteData } from '@common-stack/client-react/lib/interfaces/router.js';
-import { IPageStore } from '@adminide-stack/core/lib/interfaces/page-store.js';
+import type { IRouteModule } from '@common-stack/core';
 
-export const inboxPageStore: IPageStore[] = [
+export const inboxPageStore: IRouteModule[] = [
     {
         key: 'message',
         path: '/message',
@@ -57,8 +56,8 @@ export const inboxPageStore: IPageStore[] = [
     },
 ];
 
-const selectedRoutes = ['message', 'thread','threadmessage'];
+const selectedRoutes = ['message', 'thread', 'threadmessage'];
 
-const filteredRoutes: IRouteData[] = getFilteredRoutes(inboxPageStore, selectedRoutes);
+const filteredRoutes = getFilteredRoutes(inboxPageStore, selectedRoutes);
 
-export { filteredRoutes };
+export { filteredRoutes };

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/navigation/InboxNavigation.tsx

@@ -28,7 +28,7 @@ const inboxConfig = {
                     gestureEnabled: false,
                     swipeEnabled: false,
                     headerLeft: (props: any) => (
-                        <Button bg="transparent" onPress={() => navigation.goBack()}>
+                        <Button className="bg-transparent" onPress={() => navigation.goBack()}>
                             <MaterialIcons size={20} name="arrow-back-ios" color={'black'} />
                         </Button>
                     ),
@@ -57,7 +57,7 @@ const inboxConfig = {
                     gestureEnabled: false,
                     swipeEnabled: false,
                     headerLeft: (props: any) => (
-                        <Button bg="transparent" onPress={() => navigation.goBack()}>
+                        <Button className="bg-transparent" onPress={() => navigation.goBack()}>
                             <MaterialIcons size={20} name="arrow-back-ios" color={'black'} />
                         </Button>
                     ),
@@ -87,7 +87,7 @@ const inboxConfig = {
                     gestureEnabled: false,
                     swipeEnabled: false,
                     headerLeft: (props: any) => (
-                        <Button bg="transparent" onPress={() => navigation.goBack()}>
+                        <Button className="bg-transparent" onPress={() => navigation.goBack()}>
                             <MaterialIcons size={20} name="arrow-back-ios" color={'black'} />
                         </Button>
                     ),

package/src/queries/inboxQueries.ts

@@ -0,0 +1,299 @@
+// Imports from common/graphql
+import {
+    useGetChannelsByUserWithServiceChannelsQuery,
+    useGetChannelsByUserQuery,
+    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 useGetChannelsByUserQuery({
+        ...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/DialogMessages.tsx

@@ -7,7 +7,7 @@ export function DialogMessages({ channelId, role, isShowThreadMessage = true, ..
     const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
     return (
         // <Box bg={'white'} flex={1} pt={5}>
-        <Box bg={'$white'} flex={1}>
+        <Box className="bg-white flex-1">
             <ConversationView
                 {...rest}
                 channelId={currentRoute?.params?.channelId ?? channelId}

package/src/screens/inbox/DialogThreadMessages.tsx

@@ -2,22 +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/lib/generated/generated.js';
+import { useChannelDetailQuery, useSendThreadMessage } from '../../queries/inboxQueries';
 import { useFocusEffect } from '@react-navigation/native';
-import { useSelector } from 'react-redux';
+// 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);
@@ -77,10 +70,10 @@ export function DialogThreadMessages({ channelId, postParentId, isPostParentIdTh
     // }, [parentId, channel]);
 
     return (
-        <Box bg={'$white'} flex={1}>
+        <Box className="bg-white flex-1">
             {/* {loading && !parentId ? ( */}
             {loading ? (
-                <Spinner color={'$blue500'} />
+                <Spinner color={colors.blue[500]} />
             ) : (
                 <ThreadConversationView
                     channelId={channelId}

package/src/screens/inbox/DialogThreads.tsx

@@ -2,44 +2,83 @@ 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/lib/generated/generated.js';
+import { useChannelDetailQuery, useThreadMessagesQueryWithOptions } from '../../queries/inboxQueries';
 import { useFocusEffect } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { config } from './config';
+import colors from 'tailwindcss/colors';
+import { useSafeDialogThreadsMachine } from './hooks/useSafeDialogThreadsMachine';
+import { Actions, BaseState } from './workflow/dialog-threads-xstate';
 const { MESSAGES_PER_PAGE } = config;
 
 export function DialogThreads({ channelId, postParentId, role }) {
+    // Use the XState machine for state management
+    const [state, send] = useSafeDialogThreadsMachine();
+    const { context, value } = state;
+    const { channelsDetail, loading, error } = context;
+
+    // Fetch channel details
     const {
         data: channelData,
         loading: channelLoading,
         refetch: channelRefetch,
-    } = useViewChannelDetailQuery({
-        variables: {
-            id: channelId?.toString(),
-        },
-    });
+    } = useChannelDetailQuery(channelId?.toString(), {});
 
+    // Fetch thread messages
     const {
         data: threadsData,
         loading: threadLoading,
         error: threadsError,
         refetch: threadsRefetch,
         subscribeToMore: threadsSubscribeToMore,
-    } = useThreadMessagesQuery({
+    } = useThreadMessagesQueryWithOptions({
         variables: {
             channelId: channelId?.toString(),
             role: role?.toString(),
             limit: MESSAGES_PER_PAGE,
             repliesLimit2: 5,
         },
-        // fetchPolicy: 'cache-and-network',
     });
+    console.log('threadsData', threadsData?.threadMessages?.totalCount);
+    console.log('channelid', channelId);
+    // Initialize the machine with props
+    React.useEffect(() => {
+        send({
+            type: Actions.INITIALIZE,
+            data: { channelId, postParentId, role },
+        });
+    }, [channelId, postParentId, role]);
 
-    const channelsDetail = React.useMemo(() => {
-        if (!channelData?.viewChannelDetail) return null;
-        return channelData?.viewChannelDetail;
+    // Update channel detail in state when data changes
+    React.useEffect(() => {
+        if (channelData?.viewChannelDetail) {
+            send({
+                type: Actions.SET_CHANNEL_DETAIL,
+                data: { channelsDetail: channelData.viewChannelDetail },
+            });
+        }
     }, [channelData]);
 
+    // Update thread data in state when data changes
+    React.useEffect(() => {
+        if (threadsData) {
+            send({
+                type: Actions.SET_THREADS,
+                data: { threadData: threadsData?.threadMessages?.data || [] },
+            });
+        }
+    }, [threadsData]);
+
+    // Handle errors
+    React.useEffect(() => {
+        if (threadsError) {
+            send({
+                type: Actions.ERROR,
+                data: { error: threadsError },
+            });
+        }
+    }, [threadsError]);
+
     const refetchChannelDetail = React.useCallback(
         (id: string) => {
             return channelRefetch({ id: id?.toString() });
@@ -56,24 +95,18 @@ export function DialogThreads({ channelId, postParentId, role }) {
     );
 
     return (
-        // <Box bg={'white'} flex={1} pt={5}>
         <>
-            {channelLoading ? (
-                <Spinner color={'$blue500'} />
+            {state.matches(BaseState.LoadingChannel) || channelLoading ? (
+                <Spinner color={colors.blue[500]} />
             ) : (
                 <>
-                    <Box
-                        flex={1}
-                        $dark-borderColor="$coolGray600"
-                        $dark-backgroundColor="$trueGray700"
-                        $light-backgroundColor="$trueGray50"
-                    >
+                    <Box className="flex-1 bg-gray-200 dark:border-gray-500 dark:bg-gray-500">
                         <ThreadsView
                             data={threadsData}
-                            loading={threadLoading}
+                            loading={threadLoading || state.matches(BaseState.LoadingThreads)}
                             refetch={threadsRefetch}
                             subscribeToMore={threadsSubscribeToMore}
-                            error={threadsError}
+                            error={error || threadsError}
                             channelId={channelId}
                             role={role}
                             channelsDetail={channelsDetail}
@@ -84,45 +117,6 @@ export function DialogThreads({ channelId, postParentId, role }) {
             )}
         </>
     );
-
-    // return (
-    //     // <Box bg={'white'} flex={1} pt={5}>
-    //     <>
-    //         {channelLoading ? (
-    //             <Spinner />
-    //         ) : (
-    //             <>
-    //                 {postParentId || postParentId == 0 ? (
-    //                     <Box bg={'white'} flex={1}>
-    //                         <ThreadConversationView
-    //                             channelId={channelId}
-    //                             postParentId={postParentId}
-    //                             channelsDetail={channelsDetail}
-    //                             refetchChannelDetail={refetchChannelDetail}
-    //                         />
-    //                     </Box>
-    //                 ) : (
-    //                     <Box
-    //                         flex={1}
-    //                         _dark={{
-    //                             borderColor: 'coolGray.600',
-    //                             backgroundColor: 'gray.700',
-    //                         }}
-    //                         _light={{
-    //                             backgroundColor: 'gray.50',
-    //                         }}
-    //                     >
-    //                         <ThreadsView
-    //                             channelId={channelId}
-    //                             channelsDetail={channelsDetail}
-    //                             refetchChannelDetail={refetchChannelDetail}
-    //                         />
-    //                     </Box>
-    //                 )}
-    //             </>
-    //         )}
-    //     </>
-    // );
 }
 
 export default DialogThreads;

package/src/screens/inbox/Inbox.tsx

@@ -7,7 +7,7 @@ import { Dialogs } from './containers/Dialogs';
 export const Inbox = (props: any) => {
     const { channelFilters, channelRole, supportServices } = props;
     return (
-        <Box bg={'$white'} flex={1}>
+        <Box className="flex-1 bg-white">
             {/* {supportServices && (
                 <SupportServiceDialogs channelFilters={channelFilters} channelRole={channelRole} {...props} />
             )} */}

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,
+    },
+});

package/src/screens/inbox/components/CachedImage/consts.ts

@@ -1,5 +1,6 @@
-import * as FileSystem from "expo-file-system"
+import * as FileSystem from 'expo-file-system';
 
-export const IMAGE_CACHE_FOLDER = `${FileSystem.cacheDirectory}`
+// Make sure cache directory path ends with a slash
+export const IMAGE_CACHE_FOLDER = `${FileSystem.cacheDirectory}/image-cache/`;
 // export const IMAGE_CACHE_FOLDER = `${FileSystem.documentDirectory}images/`
-export default IMAGE_CACHE_FOLDER
+export default IMAGE_CACHE_FOLDER;