ConversationPreview.tsx

import * as React from 'react';
import { HiTrash } from 'react-icons/hi';
import { useLongPress } from '../lib/hooks';
import ChatHeadshot from './ChatHeadshot';
import DeleteConversationModal from './DeleteConversationModal';
import { useDeviceDetect } from '../lib/hooks';
import { killEvent } from '../lib/utils';

type ConversationPreviewProps = {
  conversation: any;
  shouldStopLongPress?: boolean;
  loadConversation: (conversation: any) => void;
  clearConversation: () => void;
};

export default function ConversationPreview({
  conversation,
  shouldStopLongPress = false,
  loadConversation,
  clearConversation,
}: ConversationPreviewProps) {
  const { isMobile } = useDeviceDetect();
  const [unreadMessageCount, setUnreadMessageCount] = React.useState<number>(0);
  const [_showDelete, setShowDelete] = React.useState(false);
  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);

  const handleDeleteConversation = () => {
    setDeleteModalOpen(true);
  };

  const defaultOptions = {
    shouldPreventDefault: true,
    delay: 700,
  };

  console.log(isMobile);


  React.useEffect(() => {
    setUnreadMessageCount(conversation.unreadMessageCount);
  }, [conversation]);

  const selectConversation = () => {
      loadConversation(conversation);
      setUnreadMessageCount(0);
  };

  const longPressEvent = useLongPress(handleDeleteConversation, selectConversation, defaultOptions);

  const messagePreviewText = () => {
    switch (conversation.lastMessage.type) {
      case 'text':
        return conversation.lastMessage.text;
      case 'video':
      case 'audio':
      case 'image':
      case 'file':
      case 'media':
        return 'Media Message';
      case 'meeting':
        return conversation.data?.customData?.meetingURL;
      default:
        return ' ';
    }
  };

  return (
    <>
      <div
        {...(!shouldStopLongPress && { ...longPressEvent })}
        key={conversation.id}
        onMouseOver={() => setShowDelete(true)}
        onMouseLeave={() => setShowDelete(false)}
        onClick={selectConversation}
        className="relative flex flex-col cursor-pointer p-2 border-b-2 border-gray hover:bg-gray-50"
      >
        <div className="flex items-center">
          <ChatHeadshot
            size="small"
            image={conversation?.conversationWith?.avatar}
            userId={conversation?.conversationWith?.uid}
          />
          <div className="overflow-hidden">
            <p className="m-0 ml-4 text-lg">{conversation?.conversationWith?.name}</p>
            {conversation?.lastMessage && <p className="m-0 ml-4 truncate">{messagePreviewText()}</p>}
          </div>
          {unreadMessageCount > 0 && (
            <div className="ml-auto text-2xs bg-blue-600 rounded-full text-white flex items-center justify-center p-1"></div>
          )}
        </div>
      </div>
      <DeleteConversationModal
        isOpen={deleteModalOpen}
        setIsOpen={setDeleteModalOpen}
        conversation={conversation}
        deleteConversation={clearConversation}
      />
    </>
  );
}