Done Project

package.json

@@ -3,11 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,24 +1,22 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+
+// Importing Components
+import Home from "./components/Home";
+import ViewUser from "./components/ViewUsers";
+import AddUser from "./components/AddUser";
+import UpdateUser from "./components/UpdateUser";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />}></Route>
+        <Route path="/view-users" element={<ViewUser />}></Route>
+        <Route path="/add-users" element={<AddUser />}></Route>
+        <Route path="/update-users/:id" element={<UpdateUser />}></Route>
+      </Routes>
+    </Router>
   );
 }
 

src/app/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit'
+import userSlice from "./../users/userSlice"
+
+export const store = configureStore({
+  reducer: {
+    user: userSlice
+  },
+})

src/components/AddUser.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { addUser } from "./../users/userSlice";
+
+function AddUser() {
+  const [name, setname] = useState("");
+  const [address, setaddress] = useState("");
+
+  const users = useSelector((state) => state.user.user);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const id = users.length;
+  return (
+    <>
+      <h5>User Name</h5>
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => {
+          setname(e.target.value);
+        }}
+      />
+
+      <h5>User Address</h5>
+      <input
+        type="text"
+        value={address}
+        onChange={(e) => {
+          setaddress(e.target.value);
+        }}
+      />
+      <br />
+      <br />
+      <button
+        onClick={() => {
+          dispatch(addUser({ id, name, address }));
+          navigate("/view-users");
+        }}
+      >
+        Add User
+      </button>
+    </>
+  );
+}
+
+export default AddUser;

src/components/Home.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+
+function Home() {
+  const users = useSelector((state) => state.user.user);
+  console.log(users);
+  return (
+    <>
+      <h1>Heliverse Task 1</h1>
+      <h4>Number of Users : {users.length}</h4>
+      <Link to="/view-users">
+        <button>View Users</button>
+      </Link>
+    </>
+  );
+}
+
+export default Home;

src/components/UpdateUser.js

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";
+import { editUser } from "./../users/userSlice";
+
+function UpdateUser() {
+  const [name, setname] = useState("");
+  const [address, setaddress] = useState("");
+
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  let { id } = useParams();
+
+  return (
+    <>
+      <h5>User Name</h5>
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => {
+          setname(e.target.value);
+        }}
+      />
+
+      <h5>User Address</h5>
+      <input
+        type="text"
+        value={address}
+        onChange={(e) => {
+          setaddress(e.target.value);
+        }}
+      />
+      <br />
+      <br />
+      <button
+        onClick={() => {
+          dispatch(editUser({ id, name, address }));
+          navigate("/view-users");
+        }}
+      >
+        Update User
+      </button>
+    </>
+  );
+}
+
+export default UpdateUser;

src/components/ViewUsers.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import { removeUser } from "./../users/userSlice";
+
+function ViewUser() {
+  const users = useSelector((state) => state.user.user);
+  const dispatch = useDispatch();
+
+  return (
+    <>
+      <h1>My Users</h1>
+      <h4>Number of Users : {users.length}</h4>
+      <Link to="/add-users">
+        <button>Add New Users</button>
+      </Link>
+      <br />
+      {/* Mapping the Users  */}
+      <div>
+        <span>
+          <b>ID &nbsp;</b>
+          <b>Name &nbsp;</b>
+          <b>Address &nbsp;</b>
+          <b>Operations &nbsp;</b>
+        </span>
+        {users.map((item, index) => {
+          return (
+            <div
+              key={item.id}
+              style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}
+            >
+              <p>{item.id}</p>
+              <p>{item.name}</p>
+              <p>{item.address}</p>
+              <div>
+                <Link to={"/update-users/" + index}>
+                  <button>Update</button>
+                </Link>
+                <button onClick={() => dispatch(removeUser(index))}>
+                  Delete
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+export default ViewUser;

src/index.js

@@ -1,13 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { store } from "./app/store";
+import { Provider } from "react-redux";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );
 

src/users/userSlice.js

@@ -0,0 +1,37 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  user: [
+    {
+      id: 0,
+      name: "Anmol Garg",
+      address: "Saraswati Nagar",
+    },
+    {
+      id: 1,
+      name: "Amandeep Singh",
+      address: "Station",
+    },
+  ],
+};
+
+export const userSlice = createSlice({
+  name: "users",
+  initialState,
+  reducers: {
+    addUser: (state, action) => {
+      state.user.push(action.payload);
+    },
+    removeUser: (state, action) => {
+      state.user.splice(action.payload, 1);
+    },
+    editUser: (state, action) => {
+      state.user[action.payload.id] = action.payload;
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { addUser, removeUser, editUser } = userSlice.actions;
+
+export default userSlice.reducer;