Assigment4/src/UserDetail.js
Mihir-Singh-Chouhan a42c9f5875 First
2025-01-03 10:48:20 +05:30

85 lines
3.3 KiB
JavaScript

import React from 'react';
import { useLocation, Link } from 'react-router-dom'; // useLocation to access state passed through the router
import './App.css'; // Import the CSS for styling
const UserDetails = () => {
// Use useLocation to access the user data passed from UserCard
const location = useLocation();
if (!location.state) {
return <p>No user data available!</p>;
}
const user = location.state;
// Function to export user data to CSV
const exportToCSV = () => {
// Create a CSV string with the user details
const userData = [
['First Name', 'Last Name', 'Email', 'Phone', 'Cell', 'Address', 'Date of Birth', 'Nationality', 'Timezone', 'Coordinates', 'Username'],
[
user.name.first,
user.name.last,
user.email,
user.phone,
user.cell,
`${user.location.street.number} ${user.location.street.name}, ${user.location.city}, ${user.location.state}, ${user.location.country} - ${user.location.postcode}`,
new Date(user.dob.date).toLocaleDateString(),
user.nat,
user.location.timezone.description,
`${user.location.coordinates.latitude}, ${user.location.coordinates.longitude}`,
user.login.username
]
];
// Convert to CSV format
const csvContent = userData.map(row => row.join(',')).join('\n');
// Create a Blob from the CSV data
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
// Create a link to download the CSV file
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', `${user.name.first}_${user.name.last}_details.csv`);
link.style.visibility = 'hidden';
// Append the link to the document body and trigger the download
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
return (
<div className="user-details">
<h2>{user.name.first} {user.name.last}</h2>
<img src={user.picture.large} alt={user.name.first} className="user-image" />
{/* Display user details */}
<div className="user-info">
<div><strong>Email:</strong> {user.email}</div>
<div><strong>Phone:</strong> {user.phone}</div>
<div><strong>Cell:</strong> {user.cell}</div>
<div>
<strong>Location:</strong> {user.location.street.number} {user.location.street.name}, {user.location.city}, {user.location.state}, {user.location.country} - {user.location.postcode}
</div>
<div><strong>Date of Birth:</strong> {new Date(user.dob.date).toLocaleDateString()}</div>
<div><strong>Nationality:</strong> {user.nat}</div>
<div><strong>Timezone:</strong> {user.location.timezone.description}</div>
<div>
<strong>Coordinates:</strong> {user.location.coordinates.latitude}, {user.location.coordinates.longitude}
</div>
<div><strong>Username:</strong> {user.login.username}</div>
</div>
{/* Link to go back to the user list */}
<Link to="/home" className="back-btn">Back to User List</Link>
{/* Export Button to download user data as CSV */}
<button onClick={exportToCSV} className="export-btn">Export to CSV</button>
</div>
);
};
export default UserDetails;