detailoan
unknown
plain_text
2 months ago
4.6 kB
2
Indexable
Never
import React, { useState, useEffect } from "react"; import { useParams, Link } from "react-router-dom"; import Sidebar from "../components/Sidebar"; import Navbar from "../components/Navbar"; import "./BorrowedDetail.css"; import { BASE_URL } from "../server/Endpoint"; import Footer from "../components/Footer"; const BorrowedDetail = () => { const { loanId } = useParams(); const [loanDetail, setLoanDetail] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchLoanDetail = async () => { try { const token = localStorage.getItem("token"); const response = await fetch( `${BASE_URL}api/staff-member/loans/getLoan/${loanId}`, { method: "GET", headers: { "ngrok-skip-browser-warning": "69420", Authorization: `Bearer ${token}`, }, } ); if (!response.ok) { throw new Error("Network response was not ok"); } const data = await response.json(); setLoanDetail(data); } catch (error) { setError(error.message); } finally { setLoading(false); } }; fetchLoanDetail(); }, [loanId]); if (loading) { return <div className="bd-loading">Loading...</div>; } if (error) { return <div className="bd-error">Error: {error}</div>; } return ( <div className="bd-container"> <Navbar /> <div className="bd-content"> <Sidebar /> <div className="bd-main"> <Link to="/borrowbook" className="back"> <span>Back</span> </Link> <h2>Loan Detail</h2> {loanDetail && ( <div className="bd-info"> <div className="bd-image-section"> <img src={loanDetail.copyBookCover} alt={loanDetail.copyBookTitle} /> </div> <div className="bd-content-section"> <div className="bd-book-info"> <h3>Book Information</h3> <p> <strong>Book Title: </strong> {loanDetail.copyBookTitle} </p> <p> <strong>Book ID: </strong> {loanDetail.copyBookId} </p> <p> <strong>Book Description: </strong>{" "} {loanDetail.copyBookDescription} </p> <p> <strong>Publication Year:</strong>{" "} {loanDetail.copyBookPublishYear} </p> </div> <div className="bd-member-loan"> <div className="bd-member-info"> <h3>User Information</h3> <p> <strong>User Name: </strong> {loanDetail.userFullName} </p> <p> <strong>id: </strong> {loanDetail.userId} </p> <p> <strong>Gender:</strong> {loanDetail.userGender} </p> <p> <strong>Email: </strong> {loanDetail.userEmail} </p> <p> <strong>Phone Number: </strong>{" "} {loanDetail.userPhoneNumber} </p> <p> <strong>Address: </strong> {loanDetail.userAddress} </p> </div> <div className="bd-loan-dates"> <h3>Loan Information</h3> <p> <strong>Loan Date: </strong>{" "} {new Date(loanDetail.loanDate).toLocaleDateString()} </p> <p> <strong>Return Date: </strong>{" "} {new Date(loanDetail.returnDate).toLocaleDateString()} </p> <p> <strong>Status: </strong> {loanDetail.status} </p> </div> </div> </div> </div> )} </div> </div> <Footer /> </div> ); }; export default BorrowedDetail;
Leave a Comment