import React, { useEffect, useState } from 'react' import { FaTimes } from 'react-icons/fa' import Identicon from 'react-identicons' import { setGlobalState, truncate, useGlobalState } from '../store' import { getConversations, getMessages } from '../services/chat' import { useNavigate } from 'react-router-dom' const ChatList = () => { const [chatListModal] = useGlobalState('chatListModal') const [currentUser] = useGlobalState('currentUser') const [conversations] = useGlobalState('conversations') useEffect(() => { getConversations().then((convs) => setGlobalState('conversations', convs)) }, [currentUser]) return ( <div className={`fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-black bg-opacity-50 transform z-50 transition-transform duration-300 ${chatListModal}`} > <div className="bg-[#222121] text-gray-400 shadow-lg shadow-slate-900 rounded-xl w-11/12 md:w-2/5 h-7/12 py-6"> <div className="flex flex-col"> <div className="flex justify-between items-center px-6"> <p className="font-semibold">Chat List</p> <button type="button" className="border-0 bg-transparent focus:outline-none" onClick={() => setGlobalState('chatListModal', 'scale-0')} > <FaTimes className="text-gray-400" /> </button> </div> <div className="flex flex-col justify-center items-start mt-5 mb-5 max-h-60 overflow-y-auto"> {conversations.map((conv, i) => ( <Conversation key={i} text={conv.lastMessage.text} owner={conv.conversationWith.uid} time={Number(conv.lastMessage.sentAt + '000')} /> ))} </div> </div> </div> </div> ) } const Conversation = ({ text, owner, time }) => { const navigate = useNavigate() const navTo = () => { navigate('/chats/' + owner) setGlobalState('chatListModal', 'scale-0') getMessages(owner).then((msgs) => setGlobalState('messages', msgs)) } return ( <div onClick={navTo} className="flex justify-between items-center mb-4 w-full hover:bg-[#151414] transition-all duration-300 px-6 py-2 cursor-pointer" > <div className="flex items-center"> <Identicon className="w-12 h-12 rounded-full object-cover mr-4 shadow-md bg-gray-400" string={owner} size={35} /> <div> <h3 className="text-lg font-bold">{truncate(owner, 4, 4, 11)}</h3> <p className="text-gray-500">{truncate(text, 37, 0, 40)}</p> </div> </div> <p className="text-sm text-gray-500 ml-auto"> {new Date(time).toLocaleString()} </p> </div> ) } export default ChatList