@messenger-box/platform-mobile 10.0.3-alpha.22 → 10.0.3-alpha.23

package/src/screens/inbox/DialogThreads.tsx

@@ -7,9 +7,17 @@ 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,
@@ -20,6 +28,7 @@ export function DialogThreads({ channelId, postParentId, role }) {
         },
     });
 
+    // Fetch thread messages
     const {
         data: threadsData,
         loading: threadLoading,
@@ -33,14 +42,46 @@ export function DialogThreads({ channelId, postParentId, role }) {
             limit: MESSAGES_PER_PAGE,
             repliesLimit2: 5,
         },
-        // fetchPolicy: 'cache-and-network',
     });
 
-    const channelsDetail = React.useMemo(() => {
-        if (!channelData?.viewChannelDetail) return null;
-        return channelData?.viewChannelDetail;
+    // Initialize the machine with props
+    React.useEffect(() => {
+        send({
+            type: Actions.INITIALIZE,
+            data: { channelId, postParentId, role },
+        });
+    }, [channelId, postParentId, role]);
+
+    // 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() });
@@ -57,24 +98,18 @@ export function DialogThreads({ channelId, postParentId, role }) {
     );
 
     return (
-        // <Box bg={'white'} flex={1} pt={5}>
         <>
-            {channelLoading ? (
+            {state.matches(BaseState.LoadingChannel) || channelLoading ? (
                 <Spinner color={colors.blue[500]} />
             ) : (
                 <>
-                    <Box
-                        // $dark-borderColor="$coolGray600"
-                        // $dark-backgroundColor="$trueGray700"
-                        // $light-backgroundColor="$trueGray50"
-                        className="flex-1 bg-gray-200 dark:border-gray-500 dark:bg-gray-500  "
-                    >
+                    <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}
@@ -85,45 +120,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/components/SmartLoader.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Spinner, Text, VStack, Button, ButtonText } from '@admin-layout/gluestack-ui-mobile';
+import colors from 'tailwindcss/colors';
+
+interface SmartLoaderProps {
+    isLoading: boolean;
+    timeoutMs?: number;
+    message?: string;
+    onRetry?: () => void;
+}
+
+/**
+ * SmartLoader component that automatically shows a timeout message
+ * if loading takes too long, preventing infinite loading states
+ */
+export const SmartLoader: React.FC<SmartLoaderProps> = ({
+    isLoading,
+    timeoutMs = 20000, // Default 20 seconds
+    message = 'Taking longer than expected...',
+    onRetry,
+}) => {
+    const [showTimeout, setShowTimeout] = useState(false);
+
+    useEffect(() => {
+        if (!isLoading) {
+            setShowTimeout(false);
+            return;
+        }
+
+        const timeoutId = setTimeout(() => {
+            if (isLoading) {
+                setShowTimeout(true);
+            }
+        }, timeoutMs);
+
+        return () => clearTimeout(timeoutId);
+    }, [isLoading, timeoutMs]);
+
+    if (!isLoading) return null;
+
+    return (
+        <Box className="flex-1 bg-gray-100 dark:bg-gray-800 items-center justify-center">
+            <VStack space="md" className="items-center">
+                <Spinner color={colors.blue[500]} size="large" />
+
+                {showTimeout && (
+                    <VStack space="sm" className="p-4 items-center">
+                        <Text className="text-gray-700 dark:text-gray-300 text-center">{message}</Text>
+                        {onRetry && (
+                            <Button onPress={onRetry} className="bg-blue-500 mt-3 rounded-full">
+                                <ButtonText>Try Again</ButtonText>
+                            </Button>
+                        )}
+                    </VStack>
+                )}
+            </VStack>
+        </Box>
+    );
+};
+
+export default SmartLoader;