DappBnb Project Recent conversation view

RecentConversations.jsx

import { useEffect } from 'react'
import { getConversations } from '../services/Chat'
import { useNavigate, Link } from 'react-router-dom'
import { setGlobalState, useGlobalState, truncate } from '../store'
import Identicon from 'react-identicons'
import { toast } from 'react-toastify'

const RecentConversations = () => {
  const navigate = useNavigate()
  const [recentConversations] = useGlobalState('recentConversations')

  useEffect(async () => {
    await getConversations()
      .then((users) => setGlobalState('recentConversations', users))
      .catch((error) => {
        if (error.code == 'USER_NOT_LOGED_IN') {
          navigate('/')
          toast.warning('You should login first...')
        }
      })
  }, [])

  return (
    <div className="w-full sm:w-3/5 mx-auto mt-8">
      <h1 className="text-2xl font-bold text-center">Your Recent chats</h1>
      {recentConversations?.length > 0
        ? recentConversations?.map((conversation, index) => (
            <Link
              className="flex items-center space-x-3 w-full my-3
              border-b border-b-gray-100 p-3 bg-gray-100"
              to={`/chats/${conversation.conversationWith.uid}`}
              key={index}
            >
              <Identicon
                className="rounded-full shadow-gray-500 shadow-sm bg-white"
                string={conversation.conversationWith.uid}
                size={20}
              />
              <p>{truncate(conversation.conversationWith.name, 4, 4, 11)}</p>
            </Link>
          ))
        : "you don't have any recent chats"}
    </div>
  )
}

export default RecentConversations