import React, { useMemo, useState } from "react";
import "../Sharehistory/sharehistory.css";
import { NavLink } from "react-router-dom";
import { useGetShareHistoryList } from "../../../apis/ShareHistory";
import LoadingAnimation from "../Loading/LoadingAnimation";
import EmptyData from "../../../component/EmptyData/EmptyData";
/**
* Represents the share history page component
* @module ShareHistory
* @return {JSX.Element} Returns the share history page component as JSX.Element
*/
const ShareHistory = () => {
/**
* React state for storing state of filter dropdown
* @constant {boolean} filterDropdown
* @memberof module:ShareHistory
* @default false
*/
const [filterDropdown, setFilterDropdown] = useState(false);
/**
* React state for storing state of search input
* @constant {string} searchInput
* @memberof module:ShareHistory
* @default ""
*/
const [searchInput, setSearchInput] = useState("");
/**
* React state for storing state of sort by
* @constant {string} sortBy
* @memberof module:ShareHistory
* @default ""
*/
const [sortBy, setSortBy] = useState("");
/**
* React query hook for getting share history list
* @memberof module:ShareHistory
* @name useGetShareHistoryList
*/
const { data: shareHistoryData, isLoading: shareHistoryLoading } =
useGetShareHistoryList();
// Getting share history list
/**
* React memo hook for getting share history list
* @memberof module:ShareHistory
* @name shareHistoryList
* @type {object[]}
*/
const shareHistoryList = useMemo(() => {
const temp = shareHistoryData?.data?.data?.results || [];
if (searchInput) {
const filteredList = temp.filter((contract) =>
contract.share_company.toLowerCase().includes(searchInput.toLowerCase())
);
return filteredList.reverse();
}
switch (sortBy) {
case "AZ":
return [...temp].sort((a, b) =>
a.share_company.localeCompare(b.share_company)
);
case "ZA":
return [...temp]
.sort((a, b) => a.share_company.localeCompare(b.share_company))
.reverse();
case "OLD":
return [...temp].reverse();
case "RECENT":
return temp;
}
return temp;
}, [shareHistoryData?.data, searchInput, sortBy]);
if (shareHistoryLoading) {
return <LoadingAnimation />;
}
return (
<div className="sharehistory_container">
<h1 className="font-[600] text-xl ">Share 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 with share company"
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 with share company"
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 className="sharehistory_table">
<thead>
<tr>
<th>Share company</th>
<th>S.No. From</th>
<th>S.No. To</th>
<th>Registration</th>
<th>Total Kitta</th>
<th>Total Amount</th>
<th>Transfer</th>
<th>Certificate</th>
<th>Type</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{!shareHistoryList.length ? (
<EmptyData />
) : (
shareHistoryList.map((dat, i) => {
return (
<tr key={i}>
<td>{dat?.share_company}</td>
<td>{dat?.sequence_number_from}</td>
<td>{dat?.sequence_number_to}</td>
<td>
{dat?.share_details?.share_registration_status ===
"COMPLETED" ? (
<p className="completed">Completed</p>
) : dat?.share_details?.share_registration_status ===
"IN_PROGRESS" ? (
<p className="Pending">Pending</p>
) : (
<></>
)}
</td>
<td>{dat?.total_available_kitta}</td>
<td>Rs {dat?.share_details?.total_amount}</td>
<td>
{dat?.share_type === "BONUS" ? (
<NavLink to={`/dashboard/sharetransfer/${dat?.id}`}>
<div className="sharehistory_icon">
<ion-icon name="shuffle-outline"></ion-icon>
</div>
</NavLink>
) : (
""
)}
</td>
<td>
<NavLink
to={`/view_certificate/${dat?.id}`}
target="_blank"
>
<div className="sharehistory_icon">
<ion-icon name="eye"></ion-icon>
</div>
</NavLink>
</td>
<td>
{String(dat?.share_type)
.toLowerCase()
.charAt(0)
.toUpperCase() +
String(dat?.share_type).slice(1).toLowerCase()}
</td>
<td>
{dat?.share_details?.payment_status == "PAID" ? (
<p className="paid">Paid</p>
) : (
<p className="Pending">Pending</p>
)}
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
<div className="share_fontract_for_mobile">
{!shareHistoryList.length ? (
<EmptyData />
) : (
shareHistoryList.map((dat, i) => {
return (
<div className="share_fontract_for_mobile_left_col" key={i}>
<div className="share_fontract_for_mobile_left_col_col">
<p>Share company</p>
<p>{dat?.share_company}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>S.No. From</p>
<p>{dat?.sequence_number_from}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>S.No. To</p>
<p>{dat?.sequence_number_to}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Registration</p>
<p>
{dat?.share_details?.share_registration_status ===
"COMPLETED" ? (
<p className="completed">Completed</p>
) : dat?.share_details?.share_registration_status ===
"IN_PROGRESS" ? (
<p className="Pending">Pending</p>
) : (
<></>
)}
</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Total Kitta</p>
<p>{dat?.total_available_kitta}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Total Amount</p>
<p>Rs {dat?.share_details?.total_amount}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Transfer</p>
<p>
{dat?.share_type === "BONUS" && (
<NavLink to={`/dashboard/sharetransfer/${dat?.id}`}>
<td className="sharehistory_icon">
<ion-icon name="shuffle-outline"></ion-icon>
</td>
</NavLink>
)}
</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Certificate</p>
<p>
<NavLink
to={`/view_certificate/${dat?.id}`}
target="_blank"
>
<td className="sharehistory_icon">
<ion-icon name="eye"></ion-icon>
</td>
</NavLink>
</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Type</p>
<p>{dat?.share_type}</p>
</div>
<div className="share_fontract_for_mobile_left_col_col">
<p>Status</p>
<p>
{dat?.share_details?.payment_status == "PAID" ? (
<p className="paid">Paid</p>
) : (
<p className="Pending">Pending</p>
)}
</p>
</div>
</div>
);
})
)}
</div>
</div>
</div>
);
};
export default ShareHistory;
Source