@messenger-box/platform-mobile 10.0.3-alpha.47 → 10.0.3-alpha.48

package/src/screens/inbox/components/DialogItem.tsx

@@ -0,0 +1,306 @@
+import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import {
+    Text,
+    Pressable,
+    HStack,
+    Box,
+    AvatarGroup,
+    Avatar,
+    AvatarFallbackText,
+    AvatarImage,
+    AvatarBadge,
+} from '@admin-layout/gluestack-ui-mobile';
+import { format, isToday, isYesterday } from 'date-fns';
+import { useFocusEffect } from '@react-navigation/native';
+import { IChannel, IUserAccount, RoomType } from 'common';
+import { startCase } from 'lodash-es';
+import colors from 'tailwindcss/colors';
+
+// Helper function to safely create a Date object
+const safeDate = (dateValue: any): Date | null => {
+    if (!dateValue) return null;
+
+    try {
+        const date = new Date(dateValue);
+        if (isNaN(date.getTime())) {
+            console.warn('Invalid date value detected:', dateValue);
+            return null;
+        }
+        return date;
+    } catch (error) {
+        console.warn('Error creating date from value:', dateValue, error);
+        return null;
+    }
+};
+
+const createdAtText = (value: string): string => {
+    if (!value) return '';
+    const date = safeDate(value);
+    if (!date) return '';
+
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(date, 'MMM dd, yyyy');
+};
+
+export interface IDialogListChannel extends IChannel {
+    users: IUserAccount[];
+}
+
+export interface IDialogItemProps {
+    currentUser?: any;
+    channel?: any;
+    onOpen: (id: any, title: any, postParentId?: any) => void;
+}
+
+interface LastMessageComponentProps {
+    title: string;
+    lastMessage: any;
+    isServiceChannel?: boolean;
+}
+
+// LastMessage component that works for both direct and service channels
+const LastMessageComponent: React.FC<LastMessageComponentProps> = ({
+    title,
+    lastMessage,
+    isServiceChannel = false,
+}) => {
+    const count = 30;
+    const channelTitle = title?.slice(0, count) + (title?.length > count ? '...' : '') || '';
+
+    let displayMessage = 'No messages yet';
+
+    if (lastMessage) {
+        const hasFileAttachments = lastMessage.files?.data?.length > 0;
+        const isImageMessage =
+            lastMessage.message?.includes('<img') ||
+            lastMessage.message?.includes('[Image]') ||
+            lastMessage.message?.includes('![') ||
+            (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(lastMessage.message || '') &&
+                ((lastMessage.message || '').includes('http') || (lastMessage.message || '').includes('/images/')));
+
+        if (hasFileAttachments) {
+            displayMessage = '📎 File attachment';
+        } else if (isImageMessage) {
+            displayMessage = '[Image]';
+        } else if (lastMessage.message && lastMessage.message.trim() !== '') {
+            displayMessage = lastMessage.message;
+        } else {
+            displayMessage = '(Empty message)';
+        }
+    }
+
+    const displayDate = lastMessage?.createdAt
+        ? createdAtText(lastMessage.createdAt)
+        : lastMessage?.updatedAt
+        ? createdAtText(lastMessage.updatedAt)
+        : '';
+
+    return (
+        <HStack space={'sm'} className="flex-1 justify-between">
+            <Box className="flex-[0.8]">
+                <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
+                    {channelTitle}
+                </Text>
+                <Text color={colors.gray[600]} numberOfLines={1}>
+                    {displayMessage}
+                </Text>
+            </Box>
+
+            <Box className="flex-[0.2]">
+                <Text color={colors.gray[500]}>{displayDate}</Text>
+            </Box>
+        </HStack>
+    );
+};
+
+export const DialogItemComponent: React.FC<IDialogItemProps> = function DialogItem({ currentUser, channel, onOpen }) {
+    const isMountedRef = useRef(true);
+    const [title, setTitle] = useState('');
+    const [subscriptionsTimestamp, setSubscriptionsTimestamp] = useState(Date.now());
+
+    const isServiceChannel = channel?.type === RoomType.Service;
+
+    // Use channel.lastMessage instead of computing it
+    const lastMessage = channel?.lastMessage;
+
+    // Service channel specific calculations
+    const creatorAndMembersId = useMemo(() => {
+        if (!isServiceChannel || !channel?.members) return null;
+        const membersIds: any =
+            channel?.members
+                ?.filter((m: any) => m !== null && m?.user?.id !== currentUser?.id)
+                ?.map((mu: any) => mu?.user?.id) ?? [];
+        const creatorId: any = channel?.creator?.id;
+        const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
+        return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
+    }, [isServiceChannel, channel, currentUser]);
+
+    const postParentId = useMemo(() => {
+        if (!isServiceChannel || !creatorAndMembersId?.length) return null;
+        return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
+            ? null
+            : lastMessage?.parentId
+            ? lastMessage?.parentId
+            : lastMessage?.id ?? 0;
+    }, [isServiceChannel, creatorAndMembersId, lastMessage, currentUser]);
+
+    // Channel members computation for direct channels
+    const channelMembers = useMemo(() => {
+        if (isServiceChannel) return [];
+        return (
+            channel?.members
+                ?.filter((ch: any) => ch?.user?.id !== currentUser?.id && ch?.user?.__typename === 'UserAccount')
+                ?.map((m: any) => m?.user) ?? []
+        );
+    }, [isServiceChannel, currentUser?.id, channel?.members]);
+
+    // Set title when channel members change (for direct channels)
+    useEffect(() => {
+        if (!isServiceChannel && channelMembers.length > 0 && isMountedRef.current) {
+            const titleString =
+                channelMembers
+                    ?.map((u: any) => `${u?.givenName || ''} ${u?.familyName || ''}`.trim())
+                    ?.filter(Boolean)
+                    ?.join(', ') || '';
+            setTitle(titleString);
+        } else if (isServiceChannel && channel?.title) {
+            setTitle(channel.title);
+        }
+    }, [isServiceChannel, channelMembers, channel?.title]);
+
+    // Compute display title
+    const displayTitle = useMemo(() => {
+        const length = 30;
+        const titleToUse = isServiceChannel ? channel?.title || '' : title;
+        return titleToUse.length > length ? titleToUse.substring(0, length - 3) + '...' : titleToUse;
+    }, [isServiceChannel, channel?.title, title]);
+
+    // Set mounted state on mount/unmount
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+
+    // Focus effect handling
+    useFocusEffect(
+        useCallback(() => {
+            if (!channel?.id) return;
+
+            console.log(`DialogItem focused for ${isServiceChannel ? 'service' : 'direct'} channel:`, channel?.id);
+
+            if (isServiceChannel) {
+                setSubscriptionsTimestamp(Date.now());
+            }
+        }, [channel?.id, isServiceChannel]),
+    );
+
+    // Handle press based on channel type
+    const handlePress = useCallback(() => {
+        if (isServiceChannel) {
+            onOpen(channel?.id, displayTitle, postParentId);
+        } else {
+            onOpen(channel?.id, displayTitle);
+        }
+    }, [isServiceChannel, channel?.id, displayTitle, postParentId, onOpen]);
+
+    // Render avatar based on channel type
+    const renderAvatar = () => {
+        if (isServiceChannel) {
+            return (
+                <Avatar
+                    key={'service-channels-key-' + channel?.id}
+                    size={'sm'}
+                    className="bg-transparent top-0 right-0 z-[1]"
+                >
+                    <AvatarFallbackText>{startCase(channel?.creator?.username?.charAt(0))}</AvatarFallbackText>
+                    <AvatarImage
+                        alt="user image"
+                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                        source={{
+                            uri: channel?.creator?.picture,
+                        }}
+                    />
+                </Avatar>
+            );
+        }
+
+        return (
+            <AvatarGroup>
+                {channelMembers &&
+                    channelMembers?.length > 0 &&
+                    channelMembers?.slice(0, 1)?.map((ch: any, i: number) => (
+                        <Avatar
+                            key={'dialogs-list-' + i}
+                            size={'sm'}
+                            className={`bg-transparent top-[${i === 1 ? '4' : '0'}] right-[${
+                                i === 1 ? '-2' : '0'
+                            }] z-[${i === 1 ? 5 : 1}]`}
+                        >
+                            <AvatarFallbackText>{startCase(ch?.username?.charAt(0))}</AvatarFallbackText>
+                            {channelMembers?.length > 1 && (
+                                <AvatarBadge
+                                    style={{
+                                        width: '100%',
+                                        height: '100%',
+                                        backgroundColor: '#e5e7eb',
+                                        borderRadius: 5,
+                                    }}
+                                    className="items-center justify-center bg-gray-200 rounded-md"
+                                >
+                                    <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#000' }}>
+                                        {channelMembers?.length}
+                                    </Text>
+                                </AvatarBadge>
+                            )}
+                            {channelMembers?.length === 1 && (
+                                <>
+                                    <AvatarImage
+                                        alt="user image"
+                                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                        source={{
+                                            uri: ch?.picture,
+                                        }}
+                                    />
+                                    <AvatarBadge style={{ width: 10, height: 10 }} />
+                                </>
+                            )}
+                        </Avatar>
+                    ))}
+            </AvatarGroup>
+        );
+    };
+
+    return (
+        <Pressable
+            onPress={handlePress}
+            className="flex-1 border-gray-200 rounded-md dark:border-gray-600 dark:bg-gray-700"
+            style={{
+                borderBottomWidth: 1,
+                borderColor: '#e5e7eb',
+                marginVertical: 0,
+                paddingHorizontal: isServiceChannel ? 2 : 10,
+            }}
+        >
+            <HStack space={'md'} className="flex-1 w-[100%] py-3 items-center">
+                <Box className="flex-[0.1] items-start pl-3">{renderAvatar()}</Box>
+                <Box className="flex-1">
+                    <LastMessageComponent
+                        key={
+                            isServiceChannel
+                                ? `service-channel-${channel?.id}-${subscriptionsTimestamp}`
+                                : `last-msg-${lastMessage?.id || 'none'}-${channelMembers.length}`
+                        }
+                        title={displayTitle}
+                        lastMessage={lastMessage}
+                        isServiceChannel={isServiceChannel}
+                    />
+                </Box>
+            </HStack>
+        </Pressable>
+    );
+};
+
+export const DialogItem = React.memo(DialogItemComponent);