Compare commits
1 commit
main
...
Devlopment
| Author | SHA1 | Date | |
|---|---|---|---|
|
a42c9f5875 |
71
README.md
71
README.md
|
|
@ -1,70 +1,3 @@
|
|||
# Getting Started with Create React App
|
||||
# Assigment4
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
Random User Directory
|
||||
506
src/App.css
506
src/App.css
|
|
@ -1,256 +1,250 @@
|
|||
/* Global Styles */
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f4f7fc;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
padding: 40px 20px;
|
||||
color: white;
|
||||
border-bottom: 4px solid #0056b3;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.App-header h1 {
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: 2px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Search and Filter Section */
|
||||
.search-filter-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin: 30px 0;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.search-filter-container input,
|
||||
.search-filter-container select,
|
||||
.sort-options select {
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
width: 200px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-filter-container input:focus,
|
||||
.search-filter-container select:focus,
|
||||
.sort-options select:focus {
|
||||
border-color: #007bff;
|
||||
outline: none;
|
||||
background-color: #e9f5ff;
|
||||
}
|
||||
|
||||
/* User Grid Styles */
|
||||
.user-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 0 20px;
|
||||
margin-top: 30px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.user-card img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-info h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #333;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.user-info p {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* View Details Button */
|
||||
.view-details-btn {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.view-details-btn:hover {
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Pagination Styles */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.pagination button:hover {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.pagination button.active {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pagination button:disabled {
|
||||
background-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* User Details Page Styles */
|
||||
.user-details {
|
||||
max-width: 900px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
top: 160px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-details h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.user-image {
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.user-info div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.user-info strong {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Back to User List Button */
|
||||
.back-btn,
|
||||
.export-btn {
|
||||
display: inline-block;
|
||||
margin-top: 30px;
|
||||
text-decoration: none;
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
padding: 12px 20px;
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.back-btn:hover,
|
||||
.export-btn:hover {
|
||||
background-color: #45a049;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Enhanced Buttons */
|
||||
.view-detail {
|
||||
background-color: #007bff;
|
||||
width: 120px;
|
||||
margin-left: 50px;
|
||||
padding: 8px 20px;
|
||||
border-radius: 40px;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.view-detail:hover {
|
||||
color: #fdfbfb;
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.hero-section button {
|
||||
background-color: #6aabf1;
|
||||
width: 120px;
|
||||
margin-left: 50px;
|
||||
padding: 8px 20px;
|
||||
border-radius: 40px;
|
||||
border-width: 0;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.hero-section button:hover {
|
||||
color: #fdfbfb;
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
/* Global Styles */
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f4f7fc;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
padding: 40px 20px;
|
||||
color: white;
|
||||
border-bottom: 4px solid #0056b3;
|
||||
}
|
||||
|
||||
.App-header h1 {
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: 2px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Search and Filter Section */
|
||||
.search-filter-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin: 30px 0;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.search-filter-container input,
|
||||
.search-filter-container select,
|
||||
.sort-options select {
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
width: 200px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-filter-container input:focus,
|
||||
.search-filter-container select:focus,
|
||||
.sort-options select:focus{
|
||||
border-color: #007bff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* User Grid Styles */
|
||||
.user-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 0 20px;
|
||||
margin-top: 30px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.user-card img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-info h3 {
|
||||
font-size: 1.2rem;
|
||||
color: #333;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.user-info p {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* View Details Button */
|
||||
.view-details-btn {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.view-details-btn:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Pagination Styles */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.pagination button:hover {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.pagination button.active {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pagination button:disabled {
|
||||
background-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* User Details Page Styles */
|
||||
.user-details {
|
||||
max-width: 900px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
top: 160px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-details h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.user-image {
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.user-info div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.user-info strong {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Back to User List Button */
|
||||
.back-btn ,.export-btn{
|
||||
display: inline-block;
|
||||
|
||||
margin-top: 30px;
|
||||
text-decoration: none;
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
padding: 12px 20px;
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.back-btn:hover,.export-btn:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
|
||||
.view-detail
|
||||
{
|
||||
background-color: #007bff;
|
||||
width: 120px;
|
||||
margin-left: 50px;
|
||||
padding: 8px 20px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.view-detail:hover
|
||||
{
|
||||
color: #fdfbfb;
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.hero-section button{
|
||||
background-color: #6aabf1;
|
||||
width: 120px;
|
||||
margin-left: 50px;
|
||||
padding: 8px 20px;
|
||||
border-radius: 40px;
|
||||
border-width: 0;
|
||||
}
|
||||
.hero-section button:hover
|
||||
{
|
||||
color: #fdfbfb;
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
67
src/App.js
67
src/App.js
|
|
@ -1,37 +1,30 @@
|
|||
// src/App.js
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route,useNavigate } from 'react-router-dom';
|
||||
import './App.css';
|
||||
import Home from './Home'; // Import the Home component
|
||||
import UserDetails from './UserDetail';
|
||||
|
||||
const Header = () =>{
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<header className="App-header">
|
||||
<h1>Random Users</h1>
|
||||
<p>Explore a diverse set of random users from all over the world!</p>
|
||||
<div className="hero-section">
|
||||
<button onClick={() => navigate('/home')}>View Users</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<div className="App">
|
||||
<Header/>
|
||||
|
||||
<Routes>
|
||||
<Route path="/" element={<div>Landing Page</div>} />
|
||||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/user-details/:username" element={<UserDetails />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
// src/App.js
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import './App.css';
|
||||
import Home from './Home'; // Import the Home component
|
||||
import UserDetails from './UserDetail';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<h1>Random Users</h1>
|
||||
<p>Explore a diverse set of random users from all over the world!</p>
|
||||
<div className="hero-section">
|
||||
<button onClick={() => window.location.href = '/home'}>View Users</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Routes>
|
||||
<Route path="/" element={<div>Landing Page</div>} />
|
||||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/user-details" element={<UserDetails />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
336
src/Home.js
336
src/Home.js
|
|
@ -1,169 +1,167 @@
|
|||
// src/Home.js
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import UserCard from './UserCard';
|
||||
import SearchFilter from './SearchFilter';
|
||||
|
||||
function Home() {
|
||||
const [data, setData] = useState([]);
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedGender, setSelectedGender] = useState('');
|
||||
const [selectedAgeRange, setSelectedAgeRange] = useState('');
|
||||
const [selectedNationality, setSelectedNationality] = useState('');
|
||||
const [sortBy, setSortBy] = useState('name'); // Default sort by name
|
||||
const [sortOrder, setSortOrder] = useState('asc'); // Default sort order: ascending
|
||||
const [error, setError] = useState(null); // State to hold error messages
|
||||
const usersPerPage = 12;
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Fetch data from the API
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await fetch('https://randomuser.me/api/?results=200');
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const result = await response.json();
|
||||
setData(result.results);
|
||||
setFilteredData(result.results); // Set initial filtered data as the full list
|
||||
} catch (error) {
|
||||
setError(error.message); // Set the error message
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Filter users based on search query and selected filters
|
||||
useEffect(() => {
|
||||
let filtered = data;
|
||||
|
||||
// Search by name, email, or location
|
||||
if (searchQuery) {
|
||||
filtered = filtered.filter(user =>
|
||||
user.name?.first?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
user.name?.last?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
user.email?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
`${user.location?.city} ${user.location?.country}`.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
// Filter by gender
|
||||
if (selectedGender) {
|
||||
filtered = filtered.filter(user => user.gender === selectedGender);
|
||||
}
|
||||
|
||||
// Filter by age range
|
||||
if (selectedAgeRange) {
|
||||
const [minAge, maxAge] = selectedAgeRange.split('-').map(Number);
|
||||
filtered = filtered.filter(user => {
|
||||
const userAge = new Date().getFullYear() - new Date(user.dob?.date).getFullYear();
|
||||
return userAge >= minAge && userAge <= maxAge;
|
||||
});
|
||||
}
|
||||
|
||||
// Filter by nationality
|
||||
if (selectedNationality) {
|
||||
filtered = filtered.filter(user => user.nat === selectedNationality);
|
||||
}
|
||||
|
||||
// Sorting logic
|
||||
// Sorting logic
|
||||
if (sortBy === 'name') {
|
||||
filtered = filtered.sort((personA, personB) => {
|
||||
const fullNameA = `${personA.name?.first} ${personA.name?.last}`.toLowerCase();
|
||||
const fullNameB = `${personB.name?.first} ${personB.name?.last}`.toLowerCase();
|
||||
return sortOrder === 'asc' ? fullNameA.localeCompare(fullNameB) : fullNameB.localeCompare(fullNameA);
|
||||
});
|
||||
} else if (sortBy === 'age') {
|
||||
filtered = filtered.sort((personA, personB) => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
const ageA = currentYear - new Date(personA.dob?.date).getFullYear();
|
||||
const ageB = currentYear - new Date(personB.dob?.date).getFullYear();
|
||||
return sortOrder === 'asc' ? ageA - ageB : ageB - ageA;
|
||||
});
|
||||
}
|
||||
|
||||
setFilteredData(filtered);
|
||||
setCurrentPage(1); // Reset to first page whenever filters or sorting change
|
||||
}, [searchQuery, selectedGender, selectedAgeRange, selectedNationality, sortBy, sortOrder, data]);
|
||||
|
||||
// Pagination logic
|
||||
const indexOfLastUser = currentPage * usersPerPage;
|
||||
const currentUsers = filteredData.slice(indexOfLastUser - usersPerPage, indexOfLastUser);
|
||||
const totalPages = Math.ceil(filteredData.length / usersPerPage);
|
||||
|
||||
const pageNumbers = [];
|
||||
const maxPageRange = 2;
|
||||
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
if (i <= 2 || i > totalPages - 2 || (i >= currentPage - maxPageRange && i <= currentPage + maxPageRange)) {
|
||||
pageNumbers.push(i);
|
||||
} else if (pageNumbers[pageNumbers.length - 1] !== '...') {
|
||||
pageNumbers.push('...');
|
||||
}
|
||||
}
|
||||
|
||||
// Function to handle clicking on More Info
|
||||
const handleMoreInfo = (user) => {
|
||||
navigate(`/user-details`,{state:{user}});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="Home">
|
||||
{error && <div className="error">Error: {error}</div>} {/* Display error message if exists */}
|
||||
<SearchFilter
|
||||
searchQuery={searchQuery}
|
||||
setSearchQuery={setSearchQuery}
|
||||
selectedGender={selectedGender}
|
||||
setSelectedGender={setSelectedGender}
|
||||
selectedAgeRange={selectedAgeRange}
|
||||
setSelectedAgeRange={setSelectedAgeRange}
|
||||
selectedNationality={selectedNationality}
|
||||
setSelectedNationality={setSelectedNationality}
|
||||
/>
|
||||
|
||||
{/* Sort Options UI */}
|
||||
<div className="sort-options">
|
||||
<select onChange={(e) => setSortBy(e.target.value)} value={sortBy}>
|
||||
<option value="name">Sort by Name</option>
|
||||
<option value="age">Sort by Age</option>
|
||||
</select>
|
||||
<select onChange={(e) => setSortOrder(e.target.value)} value={sortOrder}>
|
||||
<option value="asc">Ascending</option>
|
||||
<option value="desc">Descending</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{filteredData.length > 0 ? (
|
||||
<>
|
||||
<div className="user-grid">
|
||||
{currentUsers.map(user => (
|
||||
<UserCard key={user.email} user={user} handleMoreInfo={handleMoreInfo} />
|
||||
))}
|
||||
</div>
|
||||
<div className="pagination">
|
||||
<button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} disabled={currentPage === 1}>Prev</button>
|
||||
{pageNumbers.map((number, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => number !== '...' && setCurrentPage(number)}
|
||||
className={currentPage === number ? 'active' : ''}
|
||||
disabled={number === '...'}
|
||||
>
|
||||
{number}
|
||||
</button>
|
||||
))}
|
||||
<button onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} disabled={currentPage === totalPages}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Home;
|
||||
// src/Home.js
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import UserCard from './UserCard';
|
||||
import SearchFilter from './SearchFilter';
|
||||
|
||||
function Home() {
|
||||
const [data, setData] = useState([]);
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedGender, setSelectedGender] = useState('');
|
||||
const [selectedAgeRange, setSelectedAgeRange] = useState('');
|
||||
const [selectedNationality, setSelectedNationality] = useState('');
|
||||
const [sortBy, setSortBy] = useState('name'); // Default sort by name
|
||||
const [sortOrder, setSortOrder] = useState('asc'); // Default sort order: ascending
|
||||
const [setUserDetail] = useState(null);
|
||||
const usersPerPage = 12;
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Fetch data from the API
|
||||
useEffect(() => {
|
||||
fetch('https://randomuser.me/api/?results=200')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setData(data.results);
|
||||
setFilteredData(data.results); // Set initial filtered data as the full list
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Filter users based on search query and selected filters
|
||||
useEffect(() => {
|
||||
let filtered = data;
|
||||
|
||||
// Search by name, email, or location
|
||||
if (searchQuery) {
|
||||
filtered = filtered.filter(user =>
|
||||
user.name.first.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
user.name.last.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
user.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
`${user.location.city} ${user.location.country}`.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
// Filter by gender
|
||||
if (selectedGender) {
|
||||
filtered = filtered.filter(user => user.gender === selectedGender);
|
||||
}
|
||||
|
||||
// Filter by age range
|
||||
if (selectedAgeRange) {
|
||||
const [minAge, maxAge] = selectedAgeRange.split('-').map(Number);
|
||||
filtered = filtered.filter(user => {
|
||||
const userAge = new Date().getFullYear() - new Date(user.dob.date).getFullYear();
|
||||
return userAge >= minAge && userAge <= maxAge;
|
||||
});
|
||||
}
|
||||
|
||||
// Filter by nationality
|
||||
if (selectedNationality) {
|
||||
filtered = filtered.filter(user => user.nat === selectedNationality);
|
||||
}
|
||||
|
||||
// Sorting logic
|
||||
if (sortBy === 'name') {
|
||||
filtered = filtered.sort((a, b) => {
|
||||
const nameA = `${a.name.first} ${a.name.last}`.toLowerCase();
|
||||
const nameB = `${b.name.first} ${b.name.last}`.toLowerCase();
|
||||
if (sortOrder === 'asc') {
|
||||
return nameA.localeCompare(nameB);
|
||||
} else {
|
||||
return nameB.localeCompare(nameA);
|
||||
}
|
||||
});
|
||||
} else if (sortBy === 'age') {
|
||||
filtered = filtered.sort((a, b) => {
|
||||
const ageA = new Date().getFullYear() - new Date(a.dob.date).getFullYear();
|
||||
const ageB = new Date().getFullYear() - new Date(b.dob.date).getFullYear();
|
||||
if (sortOrder === 'asc') {
|
||||
return ageA - ageB;
|
||||
} else {
|
||||
return ageB - ageA;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setFilteredData(filtered);
|
||||
setCurrentPage(1); // Reset to first page whenever filters or sorting change
|
||||
}, [searchQuery, selectedGender, selectedAgeRange, selectedNationality, sortBy, sortOrder, data]);
|
||||
|
||||
// Pagination logic
|
||||
const indexOfLastUser = currentPage * usersPerPage;
|
||||
const currentUsers = filteredData.slice(indexOfLastUser - usersPerPage, indexOfLastUser);
|
||||
const totalPages = Math.ceil(filteredData.length / usersPerPage);
|
||||
|
||||
const pageNumbers = [];
|
||||
const maxPageRange = 2;
|
||||
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
if (i <= 2 || i > totalPages - 2 || (i >= currentPage - maxPageRange && i <= currentPage + maxPageRange)) {
|
||||
pageNumbers.push(i);
|
||||
} else if (pageNumbers[pageNumbers.length - 1] !== '...') {
|
||||
pageNumbers.push('...');
|
||||
}
|
||||
}
|
||||
|
||||
// Function to handle clicking on More Info
|
||||
const handleMoreInfo = (user) => {
|
||||
setUserDetail(user);
|
||||
navigate(`/user-details`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="Home">
|
||||
<SearchFilter
|
||||
searchQuery={searchQuery}
|
||||
setSearchQuery={setSearchQuery}
|
||||
selectedGender={selectedGender}
|
||||
setSelectedGender={setSelectedGender}
|
||||
selectedAgeRange={selectedAgeRange}
|
||||
setSelectedAgeRange={setSelectedAgeRange}
|
||||
selectedNationality={selectedNationality}
|
||||
setSelectedNationality={setSelectedNationality}
|
||||
/>
|
||||
|
||||
{/* Sort Options UI */}
|
||||
<div className="sort-options">
|
||||
<select onChange={(e) => setSortBy(e.target.value)} value={sortBy}>
|
||||
<option value="name">Sort by Name</option>
|
||||
<option value="age">Sort by Age</option>
|
||||
</select>
|
||||
<select onChange={(e) => setSortOrder(e.target.value)} value={sortOrder}>
|
||||
<option value="asc">Ascending</option>
|
||||
<option value="desc">Descending</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{filteredData.length > 0 ? (
|
||||
<>
|
||||
<div className="user-grid">
|
||||
{currentUsers.map(user => (
|
||||
<UserCard key={user.email} user={user} handleMoreInfo={handleMoreInfo} />
|
||||
))}
|
||||
</div>
|
||||
<div className="pagination">
|
||||
<button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} disabled={currentPage === 1}>Prev</button>
|
||||
{pageNumbers.map((number, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => number !== '...' && setCurrentPage(number)}
|
||||
className={currentPage === number ? 'active' : ''}
|
||||
disabled={number === '...'}
|
||||
>
|
||||
{number}
|
||||
</button>
|
||||
))}
|
||||
<button onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} disabled={currentPage === totalPages}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,37 @@
|
|||
// src/SearchFilter.js
|
||||
import React from 'react';
|
||||
|
||||
const SearchFilter = ({ searchQuery, setSearchQuery, selectedGender, setSelectedGender, selectedAgeRange, setSelectedAgeRange, selectedNationality, setSelectedNationality }) => {
|
||||
return (
|
||||
<div className="search-filter-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name, email, or location"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<select value={selectedGender} onChange={(e) => setSelectedGender(e.target.value)}>
|
||||
<option value="">All Genders</option>
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
</select>
|
||||
<select value={selectedAgeRange} onChange={(e) => setSelectedAgeRange(e.target.value)}>
|
||||
<option value="">All Ages</option>
|
||||
<option value="18-30">18-30</option>
|
||||
<option value="31-45">31-45</option>
|
||||
<option value="46-60">46-60</option>
|
||||
<option value="61+">61+</option>
|
||||
</select>
|
||||
<select value={selectedNationality} onChange={(e) => setSelectedNationality(e.target.value)}>
|
||||
<option value="">All Nationalities</option>
|
||||
<option value="US">US</option>
|
||||
<option value="GB">GB</option>
|
||||
<option value="IN">IN</option>
|
||||
<option value="CA">CA</option>
|
||||
{/* Add more nationality options as needed */}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchFilter;
|
||||
// src/SearchFilter.js
|
||||
import React from 'react';
|
||||
|
||||
const SearchFilter = ({ searchQuery, setSearchQuery, selectedGender, setSelectedGender, selectedAgeRange, setSelectedAgeRange, selectedNationality, setSelectedNationality }) => {
|
||||
return (
|
||||
<div className="search-filter-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name, email, or location"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<select value={selectedGender} onChange={(e) => setSelectedGender(e.target.value)}>
|
||||
<option value="">All Genders</option>
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
</select>
|
||||
<select value={selectedAgeRange} onChange={(e) => setSelectedAgeRange(e.target.value)}>
|
||||
<option value="">All Ages</option>
|
||||
<option value="18-30">18-30</option>
|
||||
<option value="31-45">31-45</option>
|
||||
<option value="46-60">46-60</option>
|
||||
<option value="61+">61+</option>
|
||||
</select>
|
||||
<select value={selectedNationality} onChange={(e) => setSelectedNationality(e.target.value)}>
|
||||
<option value="">All Nationalities</option>
|
||||
<option value="US">US</option>
|
||||
<option value="GB">GB</option>
|
||||
<option value="IN">IN</option>
|
||||
<option value="CA">CA</option>
|
||||
{/* Add more nationality options as needed */}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchFilter;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const UserCard = ({ user }) => {
|
||||
const navigate = useNavigate();
|
||||
console.log('usersss', user);
|
||||
|
||||
const onClickHandler = () => {
|
||||
// Navigate to UserDetails with username in the URL
|
||||
navigate(`/user-details/${user.login.username}`, { state: user });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="user-card" key={user.email}>
|
||||
<img src={user.picture.medium} alt={user.name.first} />
|
||||
<div className="user-info">
|
||||
<h3>{user.name.first} {user.name.last}</h3>
|
||||
<p>{user.email}</p>
|
||||
<p className='view-detail' onClick={onClickHandler}>
|
||||
View Details
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserCard;
|
||||
// src/UserCard.js
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const UserCard = ({ user }) => {
|
||||
const navigate = useNavigate();
|
||||
console.log('usersss', user)
|
||||
|
||||
const onClickHandler = () => {
|
||||
navigate(`/user-details`, { state: user});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="user-card" key={user.email}>
|
||||
<img src={user.picture.medium} alt={user.name.first} />
|
||||
<div className="user-info">
|
||||
<h3>{user.name.first} {user.name.last}</h3>
|
||||
<p>{user.email}</p>
|
||||
{/* Link to the UserDetails page, passing the user data via state */}
|
||||
<p className='view-detail' onClick={() => onClickHandler()}>
|
||||
View Details
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserCard;
|
||||
|
|
|
|||
|
|
@ -1,73 +1,84 @@
|
|||
import React from 'react';
|
||||
import { useLocation, Link } from 'react-router-dom';
|
||||
import './App.css';
|
||||
|
||||
const UserDetails = () => {
|
||||
const location = useLocation();
|
||||
if (!location.state) {
|
||||
return <p>No user data available!</p>;
|
||||
}
|
||||
|
||||
const user = location.state;
|
||||
const userLocation = user.location || {};
|
||||
const userName = user.name || {};
|
||||
|
||||
const exportToCSV = () => {
|
||||
const userData = [
|
||||
['First Name', 'Last Name', 'Email', 'Phone', 'Cell', 'Address', 'Date of Birth', 'Nationality', 'Timezone', 'Coordinates', 'Username'],
|
||||
[
|
||||
userName.first || 'N/A',
|
||||
userName.last || 'N/A',
|
||||
user.email || 'N/A',
|
||||
user.phone || 'N/A',
|
||||
user.cell || 'N/A',
|
||||
`${userLocation.street?.number || ''} ${userLocation.street?.name || ''}, ${userLocation.city || 'N/A'}, ${userLocation.state || 'N/A'}, ${userLocation.country || 'N/A'} - ${userLocation.postcode || 'N/A'}`,
|
||||
new Date(user.dob?.date).toLocaleDateString('en-US') || 'N/A',
|
||||
user.nat || 'N/A',
|
||||
userLocation.timezone?.description || 'N/A',
|
||||
`${userLocation.coordinates?.latitude || 'N/A'}, ${userLocation.coordinates?.longitude || 'N/A'}`,
|
||||
user.login?.username || 'N/A'
|
||||
]
|
||||
];
|
||||
|
||||
const csvContent = userData.map(row => row.join(',')).join('\n');
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
const url = URL.createObjectURL(blob);
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', `${userName.first || 'User'}_${userName.last || 'Details'}.csv`);
|
||||
link.style.visibility = 'hidden';
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="user-details">
|
||||
<h2>{userName.first || 'Unknown'} {userName.last || 'User'}</h2>
|
||||
<img src={user.picture?.large} alt={userName.first || 'User'} className="user-image" />
|
||||
|
||||
<div className="user-info">
|
||||
<div><strong>Email:</strong> {user.email || 'N/A'}</div>
|
||||
<div><strong>Phone:</strong> {user.phone || 'N/A'}</div>
|
||||
<div><strong>Cell:</strong> {user.cell || 'N/A'}</div>
|
||||
<div>
|
||||
<strong>Location:</strong> {`${userLocation.street?.number || ''} ${userLocation.street?.name || ''}, ${userLocation.city || 'N/A'}, ${userLocation.state || 'N/A'}, ${userLocation.country || 'N/A'} - ${userLocation.postcode || 'N/A'}`}
|
||||
</div>
|
||||
<div><strong>Date of Birth:</strong> {new Date(user.dob?.date).toLocaleDateString('en-US') || 'N/A'}</div>
|
||||
<div><strong>Nationality:</strong> {user.nat || 'N/A'}</div>
|
||||
<div><strong>Timezone:</strong> {userLocation.timezone?.description || 'N/A'}</div>
|
||||
<div>
|
||||
<strong>Coordinates:</strong> {`${userLocation.coordinates?.latitude || 'N/A'}, ${userLocation.coordinates?.longitude || 'N/A'}`}
|
||||
</div>
|
||||
<div><strong>Username:</strong> {user.login?.username || 'N/A'}</div>
|
||||
</div>
|
||||
|
||||
<Link to="/home" className="back-btn">Back to User List</Link>
|
||||
<button onClick={exportToCSV} className="export-btn">Export to CSV</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserDetails;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
22
src/index.js
22
src/index.js
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Loading…
Reference in a new issue