import React, { useState, useMemo } from "react";
import LoadingAnimation from "../Loading/LoadingAnimation";
import { NavLink } from "react-router-dom";
import { Worker } from "@react-pdf-viewer/core";
import { Viewer } from "@react-pdf-viewer/core";
import "@react-pdf-viewer/core/lib/styles/index.css";
import { useGetDocuments } from "../../../apis/Documents";
import { Select } from "antd";
const companies = [
{
label: "All",
value: "",
},
{
label: "RKD Holdings Limited",
value: "RKD Holdings Limited",
},
{
label: "Tourism Investement Fund Limited",
value: "Tourism Investement Fund Limited",
},
{
label: "Bandipur Cable Car & Tourism Limited",
value: "Bandipur Cable Car & Tourism Limited",
},
{
label: "Panchase Cable Car and Tours Limited",
value: "Panchase Cable Car and Tours Limited",
},
{
label: "Bizbazar Limited",
value: "Bizbazar Limited",
},
];
/**
* Represents a Document page component
* @module Documents
* @returns {JSX.Element}
*/
const Documents = () => {
/**
* React state that stores search input
* @memberof module:Documents
* @type {string }
* @default ""
*
*/
const [searchInput, setSearchInput] = useState("");
/**
* React state that stores company name
* @memberof module:Documents
* @type {string }
* @default ""
*
*/
const [company, setCompany] = useState("");
/**
* React state that stores grid view
* @memberof module:Documents
* @type {boolean }
* @default true
*
*/
const [gridView, setGridVied] = useState(true);
/**
* React query hook for getting document data
* @name useGetDocuments
* @memberof module:Documents
* */
const { data: documentsData, isLoading } = useGetDocuments();
/**
* React memo hook for memoizing documents data
* @memberof module:Documents
* @name documents
* @type {*[]}
*/
const documents = useMemo(() => {
let temp = documentsData?.data?.data?.results || [];
temp = [...temp].reverse();
// Search with name
if (searchInput) {
const filteredList = temp.filter((item) =>
item.document_type.toLowerCase().includes(searchInput.toLowerCase())
);
temp = filteredList;
}
//handle company select
if (company) {
const filteredList = temp.filter((item) => {
let companies = item?.company || [];
let isCompanyExist = companies.some((el) => el.name === company);
if (isCompanyExist) {
return true;
}
return false;
});
temp = filteredList;
}
return temp;
}, [documentsData?.data, searchInput, company]);
if (isLoading) {
return <LoadingAnimation />;
}
/**
* Function to get file extension
* @memberof module:Documents
* @function getFileExtension
* @param fileName
* @returns {void|any|null}
*/
const getFileExtension = (fileName) => {
if (fileName && fileName.includes(".")) {
return fileName.split(".").pop();
}
return null;
};
return (
<div className="document_container">
<div className="documents_heading">
<h2 className="main-title">Documents</h2>
<div className="document_search gap-2 flex-wrap justify-end">
<div className="single_selector ">
<div className="selector_label text-center">Company</div>
<Select
style={{
width: 300,
}}
defaultValue="All"
className="report_company_selector parent_select "
onChange={(value) => setCompany(value)}
options={companies}
/>
</div>{" "}
<div className="left_document_search">
<div className="right_document_search_input">
<ion-icon name="search-outline"></ion-icon>
<input
type="text"
placeholder="Search"
onChange={(e) => setSearchInput(e.target.value)}
/>
</div>
<div className="left_document_search">
<ion-icon name="search"></ion-icon>
</div>
</div>
<div className="right_document_search">
<div className="right_document_grid_list_view">
<ul>
{gridView ? (
<li
onClick={() => setGridVied(!gridView)}
style={{
background: "#53BF8A",
borderRadius: ".2rem",
color: "#ffffff",
}}
>
<ion-icon name="grid-outline"></ion-icon>
</li>
) : (
<li onClick={() => setGridVied(!gridView)}>
<ion-icon name="grid-outline"></ion-icon>
</li>
)}
{gridView ? (
<li onClick={() => setGridVied(!gridView)}>
<ion-icon name="list-outline"></ion-icon>
</li>
) : (
<li
onClick={() => setGridVied(!gridView)}
style={{
background: "#53BF8A",
borderRadius: ".2rem",
color: "#ffffff",
}}
>
<ion-icon name="list-outline"></ion-icon>
</li>
)}
</ul>
</div>
</div>
</div>
</div>
<div className="navigation_for_mobile">
<div className="left_mobile_navigation">
<input type="text" placeholder="search" />
<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="document_body">
{!documents.length ? (
<div className="empty_document_container">
<div className="document_logo">
<ion-icon name="document-text-outline"></ion-icon>
<h3>No documents added yet</h3>
<div className="add_new_document">
<p>
Stay updated with essential documents. Secure your access now.
</p>
</div>
</div>
</div>
) : (
<div className="documents_div">
{gridView ? (
<div className="documents_divfor_grid_view">
{documents.map((dat, i) => {
const fileExtension = getFileExtension(dat?.document_file);
return (
<div className="individual_document_card" key={i}>
<NavLink to={`/dashboard/documents/${dat.id}`}>
<div className="document_wrapper"></div>
</NavLink>
<div className="document_card_body">
<div className="document_thumbnail">
{fileExtension === "pdf" ? (
<>
<Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
<Viewer fileUrl={dat?.document_file} />
</Worker>
</>
) : (
<>
<img
src={dat?.document_file}
height={200}
alt="Document"
/>
</>
)}
</div>
</div>
<div className="document_card_footer">
<div className="document_card_footer_content">
{/* <small>
{dat?.created_bs}
{" "}
B.S
</small> */}
{dat?.document_type === "CITIZENSHIP_CERTIFICATE" ? (
<h3>Citizenship Certificate</h3>
) : dat?.document_type === "DRIVING_LICENSE" ? (
<h3>Driving License</h3>
) : dat?.document_type === "NATIONAL_ID" ? (
<h3>National ID</h3>
) : dat?.document_type === "VOTER_ID" ? (
<h3>Voter ID</h3>
) : dat?.document_type === "PASSPORT" ? (
<h3>Passport</h3>
) : dat?.document_type === "OTHER" ? (
<h3>Other</h3>
) : (
<></>
)}
</div>
</div>
</div>
);
})}
</div>
) : (
<div className="documents_divfor_list_view">
{documents.map((dat, i) => {
return (
<div className="individual_list_document" key={i}>
<div className="left_individual_list">
<h3>
{dat?.document_type === "CITIZENSHIP_CERTIFICATE" ? (
<p>Citizenship Certificate</p>
) : dat?.document_type === "DRIVING_LICENSE" ? (
<p>Driving License</p>
) : dat?.document_type === "NATIONAL_ID" ? (
<p>National ID</p>
) : dat?.document_type === "PASSPORT" ? (
<p>Passport</p>
) : dat?.document_type === "OTHER" ? (
<p>Other</p>
) : (
<></>
)}
</h3>
<div className="document_tags">
<p>Created: {dat?.created_bs} Bs</p>
<p>Doc no: {dat?.document_number}</p>
</div>
</div>
<div className="right_individual_list">
<NavLink to={`/dashboard/documents/${dat.id}`}>
<div className="readmore_list_view">
<p>View more</p>
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</NavLink>
</div>
</div>
);
})}
</div>
)}
</div>
)}
</div>
</div>
);
};
export default Documents;
Source