120 lines
3.8 KiB
JavaScript
120 lines
3.8 KiB
JavaScript
import { t } from "@/utils";
|
|
import ChatListCard from "./ChatListCard";
|
|
import ChatListCardSkeleton from "./ChatListCardSkeleton";
|
|
import BlockedUsersMenu from "./BlockedUsersMenu";
|
|
import NoChatListFound from "./NoChatListFound";
|
|
import InfiniteScroll from "react-infinite-scroll-component";
|
|
import CustomLink from "@/components/Common/CustomLink";
|
|
|
|
const ChatList = ({
|
|
chatId,
|
|
activeTab,
|
|
buyer,
|
|
setBuyer,
|
|
isLargeScreen,
|
|
seller,
|
|
setSeller,
|
|
IsLoading,
|
|
fetchSellerChatList,
|
|
fetchBuyerChatList,
|
|
setSelectedChatDetails
|
|
}) => {
|
|
const handleChatTabClick = (chat, isSelling) => {
|
|
if (isSelling) {
|
|
setSeller((prev) => ({
|
|
...prev,
|
|
SellerChatList: prev.SellerChatList.map((item) =>
|
|
item.id === chat.id ? { ...item, unread_chat_count: 0 } : item
|
|
),
|
|
}));
|
|
} else {
|
|
setBuyer((prev) => ({
|
|
...prev,
|
|
BuyerChatList: prev.BuyerChatList.map((item) =>
|
|
item.id === chat.id ? { ...item, unread_chat_count: 0 } : item
|
|
),
|
|
}));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="h-[60vh] max-h-[800px] flex flex-col lg:h-full">
|
|
{isLargeScreen && (
|
|
<div className="p-4 flex items-center gap-1 justify-between border-b">
|
|
<h4 className="font-medium text-xl">{t("chat")}</h4>
|
|
{/* Blocked Users Menu Component */}
|
|
<BlockedUsersMenu setSelectedChatDetails={setSelectedChatDetails} />
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center">
|
|
<CustomLink
|
|
href={`/chat?activeTab=selling`}
|
|
className={`py-4 flex-1 text-center border-b ${activeTab === "selling" ? "border-primary" : ""
|
|
}`}
|
|
scroll={false}
|
|
>
|
|
{t("selling")}
|
|
</CustomLink>
|
|
<CustomLink
|
|
href={`/chat?activeTab=buying`}
|
|
className={`py-4 flex-1 text-center border-b ${activeTab === "buying" ? "border-primary" : ""
|
|
}`}
|
|
scroll={false}
|
|
>
|
|
{t("buying")}
|
|
</CustomLink>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto" id="chatList">
|
|
<InfiniteScroll
|
|
dataLength={
|
|
activeTab === "buying"
|
|
? buyer.BuyerChatList?.length
|
|
: seller.SellerChatList?.length
|
|
}
|
|
next={() => {
|
|
activeTab === "buying"
|
|
? fetchBuyerChatList(buyer.CurrentBuyerPage + 1)
|
|
: fetchSellerChatList(seller.CurrentSellerPage + 1);
|
|
}}
|
|
hasMore={
|
|
activeTab === "buying" ? buyer.HasMoreBuyer : seller.HasMoreSeller
|
|
}
|
|
loader={Array.from({ length: 3 }, (_, index) => (
|
|
<ChatListCardSkeleton key={index} />
|
|
))}
|
|
scrollableTarget="chatList"
|
|
>
|
|
{IsLoading
|
|
? Array.from({ length: 8 }, (_, index) => (
|
|
<ChatListCardSkeleton key={index} />
|
|
))
|
|
: (() => {
|
|
const chatList =
|
|
activeTab === "selling"
|
|
? seller.SellerChatList
|
|
: buyer.BuyerChatList;
|
|
return chatList.length > 0 ? (
|
|
chatList.map((chat, index) => (
|
|
<ChatListCard
|
|
key={Number(chat.id) || index}
|
|
chat={chat}
|
|
isActive={chat?.id === chatId}
|
|
isSelling={activeTab === "selling"}
|
|
handleChatTabClick={handleChatTabClick}
|
|
/>
|
|
))
|
|
) : (
|
|
<div className="h-full flex items-center justify-center p-4">
|
|
<NoChatListFound />
|
|
</div>
|
|
);
|
|
})()}
|
|
</InfiniteScroll>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChatList;
|