Changes done according to PR

src/App.jsx

@@ -3,44 +3,18 @@ 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';
+import "./styles.css";
- 
+
-const RouteWithProps = ({ Component, props }) => {
-  return <Component {...props} />;
-};
- 
 const App = () => {
-  const [users, setUsers] = useState([]);
- 
-  useEffect(() => {
-    const storedUsers = JSON.parse(localStorage.getItem("users")) || [];
-    setUsers(storedUsers);
-  }, []);
- 
-  useEffect(() => {
-    localStorage.setItem("users", JSON.stringify(users));
-  }, [users]);
- 
-  const sharedProps = { users, setUsers };
- 
   return (
     <Router>
       <Routes>
-        <Route
+        <Route path="/" element={<UserList />} />
-          path="/"
+        <Route path="/user/:id" element={<UserDetails />} />
-          element={<RouteWithProps Component={UserList} props={sharedProps} />}
+        <Route path="/edit/:id" element={<EditUser />} />
-        />
-        <Route
-          path="/user/:id"
-          element={<RouteWithProps Component={UserDetails} props={sharedProps} />}
-        />
-        <Route
-          path="/edit/:id"
-          element={<RouteWithProps Component={EditUser} props={sharedProps} />}
-        />
       </Routes>
     </Router>
   );
 };
- 
+
-export default App;
+export default App;

src/components/EditUser.jsx

@@ -1,11 +1,18 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { useForm, Controller } from "react-hook-form";
 
-const EditUser = ({ users, setUsers }) => {
+const EditUser = () => {
   const { id } = useParams();
   const navigate = useNavigate();
 
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const storedUsers = JSON.parse(localStorage.getItem("users")) || [];
+    setUsers(storedUsers);
+  }, []);
+
   const {
     control,
     handleSubmit,
@@ -21,32 +28,35 @@ const EditUser = ({ users, setUsers }) => {
   });
 
   useEffect(() => {
-    if (id !== "new") {
+    if (id && id !== "new") {
       const existingUser = users.find((user) => user.id === parseInt(id));
       if (existingUser) {
-        reset(existingUser); // Populate form with the existing user data
+        reset(existingUser); 
       }
     }
   }, [id, users, reset]);
 
   const onSubmit = (data) => {
+    let updatedUsers;
     if (id === "new") {
-      const newUser = { ...data, id: users.length + 1 }; // Generate a new ID
+      const newUser = { ...data, id: users.length + 1 }; 
-      setUsers([...users, newUser]);
+      updatedUsers = [...users, newUser];
       alert("User added successfully!");
     } else {
-      setUsers(
+      updatedUsers = users.map((user) =>
-        users.map((user) =>
+        user.id === parseInt(id) ? { ...data, id: user.id } : user
-          user.id === parseInt(id) ? { ...data, id: user.id } : user
-        )
       );
       alert("User updated successfully!");
     }
+    setUsers(updatedUsers);
+    localStorage.setItem("users", JSON.stringify(updatedUsers)); 
     navigate("/");
   };
 
   const handleDelete = () => {
-    setUsers(users.filter((user) => user.id !== parseInt(id)));
+    const updatedUsers = users.filter((user) => user.id !== parseInt(id));
+    setUsers(updatedUsers);
+    localStorage.setItem("users", JSON.stringify(updatedUsers)); 
     alert(`User with ID ${id} deleted.`);
     navigate("/");
   };
@@ -63,10 +73,7 @@ const EditUser = ({ users, setUsers }) => {
             control={control}
             rules={{ required: "Name is required." }}
             render={({ field }) => (
-              <input
+              <input {...field} className={errors.name ? "error-input" : ""} />
-                {...field}
-                className={errors.name ? "error-input" : ""}
-              />
             )}
           />
           {errors.name && <span>{errors.name.message}</span>}
@@ -84,10 +91,7 @@ const EditUser = ({ users, setUsers }) => {
               },
             }}
             render={({ field }) => (
-              <input
+              <input {...field} className={errors.email ? "error-input" : ""} />
-                {...field}
-                className={errors.email ? "error-input" : ""}
-              />
             )}
           />
           {errors.email && <span>{errors.email.message}</span>}
@@ -105,10 +109,7 @@ const EditUser = ({ users, setUsers }) => {
               },
             }}
             render={({ field }) => (
-              <input
+              <input {...field} className={errors.phone ? "error-input" : ""} />
-                {...field}
-                className={errors.phone ? "error-input" : ""}
-              />
             )}
           />
           {errors.phone && <span>{errors.phone.message}</span>}
@@ -120,7 +121,8 @@ const EditUser = ({ users, setUsers }) => {
             control={control}
             rules={{
               pattern: {
-                value: /^(https?:\/\/)?([\w\d\-_]+\.)+[\w\d\-_]+(\/[\w\d\-_.?&=]*)*\/?$/,
+                value:
+                  /^(https?:\/\/)?([\w\d\-_]+\.)+[\w\d\-_]+(\/[\w\d\-_.?&=]*)*\/?$/,
                 message: "Invalid website URL.",
               },
             }}

src/components/UserDetails.jsx

@@ -1,19 +1,29 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 
-const UserDetails = ({ users, setUsers }) => {
+const UserDetails = () => {
   const { id } = useParams();
   const navigate = useNavigate();
 
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const storedUsers = JSON.parse(localStorage.getItem("users")) || [];
+    setUsers(storedUsers);
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("users", JSON.stringify(users));
+  }, [users]);
+
   const userId = parseInt(id, 10); 
   const user = users.find((user) => user.id === userId);
 
   const handleDelete = () => {
-
     const updatedUsers = users.filter((user) => user.id !== userId);
-    setUsers([...updatedUsers]); 
+    setUsers(updatedUsers);
     alert(`User with ID ${id} deleted.`);
-    navigate("/");
+    navigate("/"); 
   };
 
   if (!user) {

src/components/UserList.jsx

@@ -2,22 +2,20 @@ import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
 
-const UserList = ({ users, setUsers }) => {
+const UserList = () => {
+  const [users, setUsers] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
-  const usersPerPage = 5; // Number of users to display per page
+  const usersPerPage = 5; 
-
   useEffect(() => {
-    if (users.length === 0) {
+    const storedUsers = JSON.parse(localStorage.getItem("users")) || [];
-      axios
+    setUsers(storedUsers);
-        .get("https://jsonplaceholder.typicode.com/users")
+  }, []);
-        .then((response) => setUsers(response.data))
-        .catch((error) => console.error("Error fetching users:", error));
-    }
-  }, [users, setUsers]);
 
   const handleDelete = (id) => {
-    setUsers(users.filter((user) => user.id !== id));
+    const updatedUsers = users.filter((user) => user.id !== id);
+    setUsers(updatedUsers);
+    localStorage.setItem("users", JSON.stringify(updatedUsers)); 
     alert(`User with ID ${id} deleted.`);
   };
 
@@ -27,7 +25,6 @@ const UserList = ({ users, setUsers }) => {
       user.email.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  // Calculate pagination details
   const indexOfLastUser = currentPage * usersPerPage;
   const indexOfFirstUser = indexOfLastUser - usersPerPage;
   const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);