From 6337befab6f3f6c79addb34b4731ebdd458e0648 Mon Sep 17 00:00:00 2001
From: bansh_dml <bansh.kumar@digimantra.com>
Date: Thu, 2 Jan 2025 09:52:40 +0530
Subject: [PATCH] Changed code according to requirements

---
 src/App.jsx                    | 31 ++++++++++++++++---------------
 src/components/UserDetails.jsx | 10 +++-------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 74c01a5..c5da47b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,43 +3,44 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import UserList from "./components/UserList";
 import UserDetails from "./components/UserDetails";
 import EditUser from "./components/EditUser";
-import './styles.css'; // Importing the CSS file
-
+import './styles.css';
+ 
+const RouteWithProps = ({ Component, props }) => {
+  return <Component {...props} />;
+};
+ 
 const App = () => {
   const [users, setUsers] = useState([]);
-
-  // Load users from localStorage on component mount
+ 
   useEffect(() => {
     const storedUsers = JSON.parse(localStorage.getItem("users")) || [];
     setUsers(storedUsers);
   }, []);
-
-  // Save users to localStorage whenever they change
+ 
   useEffect(() => {
     localStorage.setItem("users", JSON.stringify(users));
   }, [users]);
-
+ 
+  const sharedProps = { users, setUsers };
+ 
   return (
     <Router>
       <Routes>
-        {/* User List Route */}
         <Route
           path="/"
-          element={<UserList users={users} setUsers={setUsers} />}
+          element={<RouteWithProps Component={UserList} props={sharedProps} />}
         />
-        {/* User Details Route */}
         <Route
           path="/user/:id"
-          element={<UserDetails users={users} setUsers={setUsers} />}
+          element={<RouteWithProps Component={UserDetails} props={sharedProps} />}
         />
-        {/* Edit User Route */}
         <Route
           path="/edit/:id"
-          element={<EditUser users={users} setUsers={setUsers} />}
+          element={<RouteWithProps Component={EditUser} props={sharedProps} />}
         />
       </Routes>
     </Router>
   );
 };
-
-export default App;
+ 
+export default App;
\ No newline at end of file
diff --git a/src/components/UserDetails.jsx b/src/components/UserDetails.jsx
index d035c9a..7f4ec76 100644
--- a/src/components/UserDetails.jsx
+++ b/src/components/UserDetails.jsx
@@ -5,19 +5,15 @@ const UserDetails = ({ users, setUsers }) => {
   const { id } = useParams();
   const navigate = useNavigate();
 
-  const userId = parseInt(id, 10); // Ensure id is a number
+  const userId = parseInt(id, 10); 
   const user = users.find((user) => user.id === userId);
 
   const handleDelete = () => {
-    console.log("Users before deletion:", users);
-    console.log("ID to delete:", userId);
 
     const updatedUsers = users.filter((user) => user.id !== userId);
-    console.log("Users after deletion:", updatedUsers);
-
-    setUsers([...updatedUsers]); // Create a new reference
+    setUsers([...updatedUsers]); 
     alert(`User with ID ${id} deleted.`);
-    navigate("/"); // Redirect to home
+    navigate("/");
   };
 
   if (!user) {