@messenger-box/tailwind-ui-inbox 10.0.3-alpha.65 → 10.0.3-alpha.69

package/src/container/Inbox.tsx

@@ -18,6 +18,7 @@ import { objectId } from '@messenger-box/core';
 import { ThreadsInbox } from './ThreadsInbox';
 import { ThreadMessagesInbox } from './ThreadMessagesInbox';
 import { useApolloClient } from '@apollo/client';
+import { SubscriptionHandler } from '../components/InboxMessage/SubscriptionHandler';
 
 const { MESSAGES_PER_PAGE } = config;
 
@@ -151,11 +152,16 @@ const Inbox = (props: InboxProps) => {
         return uniqBy([...(userChannels?.supportServiceChannels ?? []), ...(userChannels?.channelsByUser ?? [])], 'id');
     }, [userChannels]);
 
+    // Memoize stable channel array to prevent unnecessary re-renders
+    const stableChannels = useMemo(() => {
+        return channels || [];
+    }, [channels]);
+
     // Memoized values derived from Apollo cache data
     const channelFilters = useMemo(() => {
         const filters = { ...channelFilterProp };
         const channelType = filters?.type ?? RoomType.Direct;
-        filters.type = supportServices ? [channelType, RoomType.Service] : RoomType.Direct;
+        filters.type = supportServices ? [channelType, RoomType.Service] : channelType;
         return filters;
     }, [channelFilterProp, supportServices]);
 
@@ -168,10 +174,11 @@ const Inbox = (props: InboxProps) => {
         );
     }, [channels]);
 
-    const currentUser = useMemo(
-        () => users?.find((user) => user && user.alias?.includes(auth?.authUserId)),
-        [users, auth?.authUserId],
-    );
+    // const currentUser = useMemo(
+    //     () => users?.find((user) => user && user.alias?.includes(auth?.authUserId)),
+    //     [users, auth?.authUserId],
+    // );
+    const currentUser = auth;
 
     const channelName = useMemo(() => {
         if (!channels || !pathChannelId) return '';
@@ -226,8 +233,8 @@ const Inbox = (props: InboxProps) => {
             const basePath = pathPrefix ? `${pathPrefix}${mainPath}` : mainPath;
 
             const searchParams = new URLSearchParams();
-            if (channelRole) searchParams.set('channelRole', channelRole);
-            if (orgName) searchParams.set('orgName', orgName);
+            // if (channelRole) searchParams.set('channelRole', channelRole);
+            // if (orgName) searchParams.set('orgName', orgName);
 
             const newPath = searchParams.toString() ? `${basePath}?${searchParams.toString()}` : basePath;
             navigate(newPath, { replace: true });
@@ -282,7 +289,7 @@ const Inbox = (props: InboxProps) => {
             >
                 <LeftSidebar
                     currentUser={currentUser}
-                    userChannels={channels || []}
+                    userChannels={stableChannels}
                     userChannelsLoading={userChannelsLoading}
                     users={users}
                     handleSelectChannel={handleSelectChannel}
@@ -290,6 +297,7 @@ const Inbox = (props: InboxProps) => {
                     channelToTop={0}
                     getChannelsRefetch={getChannelsRefetch}
                     role={channelRole}
+                    messagesQuery={data?.[1]}
                 />
             </div>
 
@@ -764,33 +772,43 @@ const MessagesComponent = React.memo((props: any) => {
                 onScroll={onMessagesScroll}
             >
                 {messages.length > 0 ? (
-                    <Messages
-                        innerRef={messageListRef}
-                        channelId={channelId}
-                        currentUser={auth}
-                        channelMessages={messages}
-                        totalCount={totalCount}
-                        onMessageClick={onMessageClick}
-                        subscribeToNewMessages={() =>
-                            subscribeToMore?.({
-                                document: CHAT_MESSAGE_ADDED,
-                                variables: { channelId: channelId.toString() },
-                                updateQuery: (prev: any, { subscriptionData }: any) => {
-                                    if (!subscriptionData.data) return prev;
-                                    const newMessage = subscriptionData.data.chatMessageAdded;
-
-                                    return {
-                                        ...prev,
-                                        messages: {
-                                            ...prev?.messages,
-                                            data: uniqBy([...(prev?.messages?.data || []), newMessage], 'id'),
-                                            totalCount: (prev?.messages?.totalCount || 0) + 1,
-                                        },
-                                    };
-                                },
-                            })
-                        }
-                    />
+                    <>
+                        <Messages
+                            innerRef={messageListRef}
+                            channelId={channelId}
+                            currentUser={auth}
+                            channelMessages={messages}
+                            totalCount={totalCount}
+                            onMessageClick={onMessageClick}
+                        />
+                        <SubscriptionHandler
+                            subscribeToMore={subscribeToMore}
+                            document={CHAT_MESSAGE_ADDED}
+                            variables={{ channelId: channelId.toString() }}
+                            enabled={!!channelId && !!subscribeToMore}
+                            updateQuery={(prev: any, { subscriptionData }: any) => {
+                                console.log('Subscription updateQuery called:', { prev, subscriptionData });
+                                if (!subscriptionData.data) {
+                                    console.log('No subscription data, returning prev');
+                                    return prev;
+                                }
+                                const newMessage = subscriptionData.data.chatMessageAdded;
+                                console.log('New message received via subscription:', newMessage);
+
+                                return {
+                                    ...prev,
+                                    messages: {
+                                        ...prev?.messages,
+                                        data: uniqBy([...(prev?.messages?.data || []), newMessage], 'id'),
+                                        totalCount: (prev?.messages?.totalCount || 0) + 1,
+                                    },
+                                };
+                            }}
+                            onError={(error) => {
+                                console.error('Subscription error:', error);
+                            }}
+                        />
+                    </>
                 ) : (
                     <div className="flex-1 flex items-center justify-center text-gray-500">
                         <div className="text-center">

package/src/container/InboxWithLoader.tsx

@@ -1,23 +1,38 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { useParams, useLocation } from '@remix-run/react';
 
 // import AddGovernmentId from './AddGovernmentId';
 import Inbox from './Inbox';
-import { useGetChannelsByUserQuery, useMessagesQuery, useViewChannelDetailQuery } from 'common/graphql';
+import {
+    useGetChannelsByUserQuery,
+    useGetChannelsByUserWithLastMessageQuery,
+    useMessagesQuery,
+    useViewChannelDetailQuery,
+} from 'common/graphql';
 import { RoomType } from 'common';
 import { config } from '../config';
 
 const { MESSAGES_PER_PAGE } = config;
 
-// Static utility function moved outside component - exported for external use
-export const queryParamsGenerator = (params) => ({
+// Enhanced query parameters generator with better typing and flexibility
+export const queryParamsGenerator = (params: {
+    role?: string;
+    criteria?: Record<string, any>;
+    supportServices?: boolean;
+    orgName?: string;
+}) => ({
     variable1: {
         role: params.role,
-        criteria: params.criteria,
-        supportServices: params.supportServices ? true : false,
-        supportServiceCriteria: {
-            type: RoomType.Service,
+        criteria: {
+            ...params.criteria,
+            ...(params.orgName && { orgName: params.orgName }),
         },
+        supportServices: params.supportServices ? true : false,
+        supportServiceCriteria: params.supportServices
+            ? {
+                  type: RoomType.Service,
+              }
+            : undefined,
         orderBy: {
             lastPostAt: 'desc',
         },
@@ -172,28 +187,35 @@ const InboxWithLoader = (props: InboxWithLoaderProps) => {
     const { channelFilters: channelFilterProp, channelRole: channelRoleProp, supportServices, pathPrefix } = props;
     const { orgName, channelRole: channelRoleParam } = useParams();
     const channelRole = channelRoleParam || channelRoleProp;
-    // Get full location info
+
     // Create new props object with orgName instead of mutating original props
-    const inboxProps = {
-        ...props,
-        orgName: orgName || '',
-        pathPrefix: pathPrefix || '',
-    };
+    const inboxProps = useMemo(
+        () => ({
+            ...props,
+            orgName: orgName || '',
+            pathPrefix: pathPrefix || '',
+        }),
+        [props, orgName, pathPrefix],
+    );
 
     const { id: pathChannelId } = useParams();
 
-    // Optimized query variables with stable references
-    const channelsQueryVariables = useMemo(
-        () =>
-            queryParamsGenerator({
-                role: channelRole,
-                criteria: orgName
-                    ? { ...channelFilterProp, orgName: channelFilterProp?.orgName || orgName || '' }
-                    : channelFilterProp,
-                supportServices,
-            }).variable1,
-        [channelRole, channelFilterProp, supportServices, orgName],
-    );
+    // Enhanced query variables with better filtering and stable references
+    const channelsQueryVariables = useMemo(() => {
+        const channelFilters = { ...channelFilterProp };
+        const channelType = channelFilters?.type ?? RoomType.Direct;
+        const baseFilters = {
+            ...channelFilters,
+            type: supportServices ? [channelType, RoomType.Service] : channelType,
+        };
+
+        return queryParamsGenerator({
+            role: channelRole,
+            criteria: baseFilters,
+            supportServices,
+            orgName: orgName || '',
+        }).variable1;
+    }, [channelRole, channelFilterProp, supportServices, orgName]);
 
     const messagesQueryVariables = useMemo(
         () => ({
@@ -211,43 +233,67 @@ const InboxWithLoader = (props: InboxWithLoaderProps) => {
         [pathChannelId],
     );
 
-    // Apollo queries with optimized cache policies
+    // Enhanced Apollo queries with better cache policies and error handling
     const channelsQuery = useGetChannelsByUserQuery({
         variables: channelsQueryVariables,
-        fetchPolicy: 'cache-first',
+        fetchPolicy: 'cache-and-network', // Better for real-time updates
         errorPolicy: 'all',
-        notifyOnNetworkStatusChange: true,
-        // Enable optimistic updates and real-time subscriptions
+        notifyOnNetworkStatusChange: false,
         returnPartialData: true,
+        // Add context for better cache management
+        context: {
+            cacheKey: 'channels-list',
+        },
     });
 
     const messagesQuery = useMessagesQuery({
         variables: messagesQueryVariables,
         skip: !pathChannelId,
-        fetchPolicy: 'cache-and-network', // Changed to cache-and-network for better UX
+        fetchPolicy: 'cache-and-network', // Better for real-time messaging
         errorPolicy: 'all',
         notifyOnNetworkStatusChange: true,
         returnPartialData: true,
-        // Enable polling for real-time updates as fallback
-        pollInterval: process.env.NODE_ENV === 'development' ? 0 : 30000,
+        // Disable polling to allow subscriptions to work properly
+        pollInterval: 0,
+        // Add context for better cache management
+        context: {
+            cacheKey: 'messages-list',
+        },
     });
 
     const channelDetailQuery = useViewChannelDetailQuery({
         variables: channelDetailQueryVariables,
         skip: !pathChannelId,
-        fetchPolicy: 'cache-first',
+        fetchPolicy: 'cache-first', // Channel details don't change often
         errorPolicy: 'all',
-        notifyOnNetworkStatusChange: true,
+        notifyOnNetworkStatusChange: false, // No need for real-time updates
         returnPartialData: true,
+        // Add context for better cache management
+        context: {
+            cacheKey: 'channel-detail',
+        },
     });
 
-    // Create loader data array for Inbox component
+    // Enhanced error handling with retry logic
+    const handleRetry = useCallback(() => {
+        if (channelsQuery.error) {
+            channelsQuery.refetch();
+        }
+        if (messagesQuery.error) {
+            messagesQuery.refetch();
+        }
+        if (channelDetailQuery.error) {
+            channelDetailQuery.refetch();
+        }
+    }, [channelsQuery, messagesQuery, channelDetailQuery]);
+
+    // Create loader data array for Inbox component with better error handling
     const loaderData = useMemo(
         () => [channelsQuery, messagesQuery, channelDetailQuery],
         [channelsQuery, messagesQuery, channelDetailQuery],
     );
 
-    // Enhanced loading states with skeleton
+    // Enhanced loading states with better UX
     if (channelsQuery.loading && !pathChannelId && !channelsQuery.data) {
         return <InboxSkeleton showRightSidebar={false} />;
     }
@@ -262,8 +308,28 @@ const InboxWithLoader = (props: InboxWithLoaderProps) => {
         return <InboxSkeleton showRightSidebar={true} />;
     }
 
+    // Enhanced error handling with retry option
     if (channelsQuery.error && !channelsQuery.data) {
-        return <TailwindAlert>Error loading channels: {channelsQuery.error.message}</TailwindAlert>;
+        return (
+            <div className="flex flex-col items-center justify-center min-h-screen space-y-4">
+                <TailwindAlert>Error loading channels: {channelsQuery.error.message}</TailwindAlert>
+                <button
+                    onClick={handleRetry}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                    Retry
+                </button>
+            </div>
+        );
+    }
+
+    // Handle individual query errors gracefully
+    if (messagesQuery.error && !messagesQuery.data && pathChannelId) {
+        console.warn('Messages query error:', messagesQuery.error);
+    }
+
+    if (channelDetailQuery.error && !channelDetailQuery.data && pathChannelId) {
+        console.warn('Channel detail query error:', channelDetailQuery.error);
     }
 
     return <Inbox data={loaderData} {...inboxProps} />;