Merge pull request 'After first code review' (#2) from dev into main

Reviewed-on: #2

README.md

@@ -1,3 +1,70 @@
-# Assigment4
+# Getting Started with Create React App
 
-Random User Directory
+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)

src/App.css

@@ -4,6 +4,7 @@ body {
   background-color: #f4f7fc;
   margin: 0;
   padding: 0;
+  line-height: 1.6;
 }
 
 .App {
@@ -16,6 +17,7 @@ body {
   padding: 40px 20px;
   color: white;
   border-bottom: 4px solid #0056b3;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
 .App-header h1 {
@@ -50,9 +52,10 @@ body {
 
 .search-filter-container input:focus,
 .search-filter-container select:focus,
-.sort-options select:focus{
+.sort-options select:focus {
   border-color: #007bff;
   outline: none;
+  background-color: #e9f5ff;
 }
 
 /* User Grid Styles */
@@ -109,11 +112,12 @@ body {
   border-radius: 25px;
   font-weight: bold;
   display: inline-block;
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 .view-details-btn:hover {
   background-color: #0056b3;
+  transform: translateY(-2px);
 }
 
 /* Pagination Styles */
@@ -198,9 +202,9 @@ body {
 }
 
 /* Back to User List Button */
-.back-btn ,.export-btn{
+.back-btn,
+.export-btn {
   display: inline-block;
-  
   margin-top: 30px;
   text-decoration: none;
   background-color: #4CAF50;
@@ -209,42 +213,44 @@ body {
   border-radius: 30px;
   font-size: 16px;
   text-align: center;
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease, transform 0.2s ease;
   border-width: 0;
 }
 
-.back-btn:hover,.export-btn:hover {
+.back-btn:hover,
+.export-btn:hover {
   background-color: #45a049;
+  transform: translateY(-2px);
 }
 
-
-.view-detail
-{
-   background-color: #007bff;
-   width: 120px;
-   margin-left: 50px; 
-   padding: 8px 20px;
-   border-radius: 40px;
+/* 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
-{
+
+.view-detail:hover {
   color: #fdfbfb;
   background-color: #0056b3;
+  transform: translateY(-2px);
 }
 
-.hero-section button{
+.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
-{
+
+.hero-section button:hover {
   color: #fdfbfb;
   background-color: #0056b3;
   transform: translateY(-3px);
 }
-
-

src/App.js

@@ -1,26 +1,33 @@
 // src/App.js
 import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+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 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>
+        <Header/>
         
         <Routes>
           <Route path="/" element={<div>Landing Page</div>} />
           <Route path="/home" element={<Home />} />
-          <Route path="/user-details" element={<UserDetails />} />
+          <Route path="/user-details/:username" element={<UserDetails />} />
         </Routes>
       </div>
     </Router>

src/Home.js

@@ -14,18 +14,27 @@ function Home() {
   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 [error, setError] = useState(null); // State to hold error messages
   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
-      });
+    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
@@ -35,10 +44,10 @@ function Home() {
     // 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())
+        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())
       );
     }
 
@@ -51,7 +60,7 @@ function Home() {
     if (selectedAgeRange) {
       const [minAge, maxAge] = selectedAgeRange.split('-').map(Number);
       filtered = filtered.filter(user => {
-        const userAge = new Date().getFullYear() - new Date(user.dob.date).getFullYear();
+        const userAge = new Date().getFullYear() - new Date(user.dob?.date).getFullYear();
         return userAge >= minAge && userAge <= maxAge;
       });
     }
@@ -62,27 +71,21 @@ function Home() {
     }
 
     // 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;
-        }
-      });
-    }
+// 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
@@ -106,12 +109,12 @@ function Home() {
 
   // Function to handle clicking on More Info
   const handleMoreInfo = (user) => {
-    setUserDetail(user);
-    navigate(`/user-details`);
+    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}
@@ -163,5 +166,4 @@ function Home() {
     </div>
   );
 }
-
 export default Home;

src/UserCard.js

@@ -1,14 +1,14 @@
-// src/UserCard.js
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const UserCard = ({ user }) => {
   const navigate = useNavigate();
-  console.log('usersss', user)
+  console.log('usersss', user);
 
   const onClickHandler = () => {
-    navigate(`/user-details`, { state: user});
-  }
+    // Navigate to UserDetails with username in the URL
+    navigate(`/user-details/${user.login.username}`, { state: user });
+  };
 
   return (
     <div className="user-card" key={user.email}>
@@ -16,8 +16,7 @@ const UserCard = ({ user }) => {
       <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()}>
+        <p className='view-detail' onClick={onClickHandler}>
           View Details 
         </p>
       </div>

src/UserDetail.js

@@ -1,50 +1,43 @@
 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
+import { useLocation, Link } from 'react-router-dom';  
+import './App.css';  
 
 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;
+  const userLocation = user.location || {};
+  const userName = user.name || {};
 
-  // 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
+        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'
       ]
     ];
 
-    // 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.setAttribute('download', `${userName.first || 'User'}_${userName.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);
@@ -52,30 +45,26 @@ const UserDetails = () => {
 
   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" />
+      <h2>{userName.first || 'Unknown'} {userName.last || 'User'}</h2>
+      <img src={user.picture?.large} alt={userName.first || 'User'} 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>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> {user.location.street.number} {user.location.street.name}, {user.location.city}, {user.location.state}, {user.location.country} - {user.location.postcode}
+          <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()}</div>
-        <div><strong>Nationality:</strong> {user.nat}</div>
-        <div><strong>Timezone:</strong> {user.location.timezone.description}</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> {user.location.coordinates.latitude}, {user.location.coordinates.longitude}
+          <strong>Coordinates:</strong> {`${userLocation.coordinates?.latitude || 'N/A'}, ${userLocation.coordinates?.longitude || 'N/A'}`}
         </div>
-        <div><strong>Username:</strong> {user.login.username}</div>
+        <div><strong>Username:</strong> {user.login?.username || 'N/A'}</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>
   );