85 lines
3.3 KiB
JavaScript
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;
|