@messenger-box/tailwind-ui-inbox 10.0.3-alpha.67 → 10.0.3-alpha.70

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} />;