@messenger-box/platform-mobile 10.0.3-alpha.20 → 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/CachedImage/index.tsx

@@ -75,7 +75,7 @@ const CachedImage = (props: any) => {
             }
         };
 
-        console.log('CachedImage loading with URI:', uri);
+        // console.log('CachedImage loading with URI:', uri);
         console.log('Cache key:', cacheKey);
 
         initCache();
@@ -92,8 +92,8 @@ const CachedImage = (props: any) => {
             const expired = expiresIn && new Date().getTime() / 1000 - metadata?.modificationTime > expiresIn;
             console.log({ expiresIn, expired });
 
-            console.log({ modificationTime: metadata.modificationTime, currentTime: new Date().getTime() / 1000 });
-            console.log({ metadata });
+            // console.log({ modificationTime: metadata.modificationTime, currentTime: new Date().getTime() / 1000 });
+            // console.log({ metadata });
 
             if (!metadata.exists || metadata?.size === 0 || expired) {
                 if (componentIsMounted.current) {
@@ -105,9 +105,9 @@ const CachedImage = (props: any) => {
                     // download to cache
                     setImgUri(null);
 
-                    console.log('Downloading image from URI:', uri);
+                    // console.log('Downloading image from URI:', uri);
                     if (!uri) {
-                        console.log('Image URI is undefined or null');
+                        // console.log('Image URI is undefined or null');
                         setLoadError(true);
                         return;
                     }
@@ -121,11 +121,11 @@ const CachedImage = (props: any) => {
 
                     try {
                         const response: any = await downloadResumableRef.current.downloadAsync();
-                        console.log('Download response:', response);
+                        // console.log('Download response:', response);
 
                         if (componentIsMounted.current && response && response.status === 200) {
                             setImgUri(`${fileURI}?`); // deep clone to force re-render
-                            console.log('Image cached successfully, new URI:', `${fileURI}?`);
+                            // console.log('Image cached successfully, new URI:', `${fileURI}?`);
                         } else {
                             console.log('Failed to download image, status:', response?.status);
                             console.log('Falling back to original URI');
@@ -141,7 +141,7 @@ const CachedImage = (props: any) => {
                     }
                 }
             } else {
-                console.log('Using cached image at:', fileURI);
+                //console.log('Using cached image at:', fileURI);
             }
         } catch (err) {
             console.log({ err });
@@ -151,7 +151,7 @@ const CachedImage = (props: any) => {
         }
     };
 
-    console.log({ placeholderContent, imgUri, loadError, useFallbackUri });
+    //console.log({ placeholderContent, imgUri, loadError, useFallbackUri });
 
     // Default placeholder if none is provided
     const defaultPlaceholder = (

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;