import axios from "axios";
import React, { useMemo } from "react";
import { useState, useEffect } from "react";
import baseUrl from "../../../array/base/config";
import { useGetShareTransferRequest } from "../../../apis/ShareTransfer";
import LoadingAnimation from "../Loading/LoadingAnimation";
import { Image } from "antd";
import EmptyData from "../../../component/EmptyData/EmptyData";
/**
* Represents Share transfer history page component
* @module ShareTransfersRequest
* @return {JSX.Element}
*/
const ShareTransfers = () => {
/**
* React state that holds search input
* @type {string}
* @constant
* @memberof module:ShareTransfersRequest
* @name searchInput
* @default ""
*/
const [searchInput, setSearchInput] = useState("");
/**
* React state that holds sort by
* @type {string}
* @constant
* @memberof module:ShareTransfersRequest
* @name sortBy
* @default ""
*
*/
const [sortBy, setSortBy] = useState("");
/**
* React state that holds filter dropdown
* @type {boolean}
* @constant
* @memberof module:ShareTransfersRequest
* @name filterDropdown
* @default false
*/
const [filterDropdown, setFilterDropdown] = useState(false);
/**
* React query hook to get share transfer request
* @type {object}
* @constant
* @memberof module:ShareTransfersRequest
* @name useGetShareTransferRequest
*/
const { data: shareTransferData, isLoading: shareTransferLoading } =
useGetShareTransferRequest();
/**
* React useMemo hook to get share transfer list
* @type {Array.<object>}
* @constant shareTransferList
* @memberof module:ShareTransfersRequest
*/
const shareTransferList = useMemo(() => {
const temp = shareTransferData?.data?.data?.results || [];
if (searchInput) {
const filteredList = temp.filter((contract) =>
contract.company_name.toLowerCase().includes(searchInput.toLowerCase())
);
return filteredList.reverse();
}
switch (sortBy) {
case "AZ":
return [...temp].sort((a, b) =>
a.company_name.localeCompare(b.company_name)
);
case "ZA":
return [...temp]
.sort((a, b) => a.company_name.localeCompare(b.company_name))
.reverse();
case "OLD":
return [...temp].reverse();
case "RECENT":
return temp;
}
return temp;
}, [shareTransferData?.data, searchInput, sortBy]);
if (shareTransferLoading) {
return <LoadingAnimation />;
}
return (
<div className="sharehistory_container">
<h1 className="font-[600] text-xl ">Share transfer history</h1>
<div className="sharehistory_heading flex justify-end">
<div className="sharehistory_search">
<div className="left_sharehistory_search">
<div className="search_input">
{/* <ion-icon name="search-outline"></ion-icon> */}
<input
type="text"
placeholder="Search"
onChange={(e) => setSearchInput(e.target.value)}
/>
</div>
<div className="left_sharehistory_search">
<ion-icon name="search"></ion-icon>
</div>
</div>
<div className="right_sharehistory_search">
<div
className="sharehistory_filter_div"
onClick={() => {
setFilterDropdown(!filterDropdown);
}}
>
<p>Sort by</p>
{filterDropdown ? (
<ion-icon name="chevron-up-outline"></ion-icon>
) : (
<ion-icon name="chevron-down-outline"></ion-icon>
)}
{filterDropdown && (
<div className="sharehistory_filter_dropdown">
<p onClick={() => setSortBy("AZ")}>A - Z</p>
<p onClick={() => setSortBy("ZA")}>Z - A</p>
<p onClick={() => setSortBy("RECENT")}>Recent</p>
<p onClick={() => setSortBy("OLD")}>Oldest</p>
</div>
)}
</div>
</div>
</div>
</div>
<div className="navigation_for_mobile">
<div className="left_mobile_navigation">
<input
type="text"
placeholder="search"
onChange={(e) => setSearchInput(e.target.value)}
/>
<ion-icon name="search-outline"></ion-icon>
</div>
<div className="right_mobile_navigation">
<ul>
<li>
<ion-icon name="options"></ion-icon>
</li>
</ul>
</div>
</div>
<div className="share_history_body">
<div className="share_contract_for_desktop">
<table>
<thead>
<tr>
<th>Company</th>
<th>Share History Id</th>
<th>To Shareholder</th>
<th>Transfer Quantity</th>
<th>Transfer Status</th>
<th>Request File</th>
</tr>
</thead>
<tbody>
{!shareTransferList.length ? (
<EmptyData />
) : (
shareTransferList.map((dat, i) => {
return (
<tr key={i}>
<td className="hover:bg-gray-100">{dat?.company_name}</td>
<td className="hover:bg-gray-100">{dat?.sharehistory}</td>
<td className="hover:bg-gray-100">
{dat?.to_shareholder_name}
</td>
<td className="hover:bg-gray-100">
{dat?.transfer_quantity}
</td>
<td className="hover:bg-gray-100">
{dat?.transfer_status == "pending" ? (
<span
style={{
background: "#fda50f",
padding: "3px 5px",
borderRadius: "5px",
}}
>
Pending
</span>
) : (
<span
style={{
background: "#42f560",
padding: "3px 5px",
borderRadius: "5px",
}}
>
Completed
</span>
)}
</td>
<td>
<Image
fallback="/noimage.jpg"
src={dat?.request_letter}
height={50}
width={50}
/>
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
</div>
<div className="share_fontract_for_mobile">
{!shareTransferList.length ? (
<EmptyData />
) : (
shareTransferList.map((dat, i) => {
return (
<div className="share_fontract_for_mobile_left_col" key={i}>
<div className="share_fontract_for_mobile_left_col_col">
<b>{dat?.company_name}</b>
</div>{" "}
<div className="share_fontract_for_mobile_left_col_col">
<p>Share History Id</p>
<p>{dat?.sharehistory}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>To Shareholder</p>
<p>{dat?.to_shareholder_name}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Transfer Quantity</p>
<p>{dat?.transfer_quantity}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Transfer Status</p>
<p>
{dat?.transfer_status === "pending" ? (
<span
style={{
background: "#fda50f",
padding: "3px 5px",
borderRadius: "5px",
}}
>
Pending
</span>
) : (
<span
style={{
background: "#42f560",
padding: "3px 5px",
borderRadius: "5px",
}}
>
Completed
</span>
)}
</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Request File</p>
<p>
{" "}
<Image
fallback="/noimage.jpg"
src={dat?.request_letter}
height={50}
width={50}
/>
</p>
</div>
</div>
);
})
)}
</div>
</div>
);
};
export default ShareTransfers;
Source