classify web

components/PagesComponent/Chat/ChatList.jsx

@@ -0,0 +1,119 @@
+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;