edit left

my-app/package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "base-64": "^1.0.0",
         "bootstrap": "^5.2.3",
+        "history": "^5.3.0",
         "react": "^18.2.0",
         "react-bootstrap": "^2.7.0",
         "react-dom": "^18.2.0",
@@ -8707,6 +8708,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",

my-app/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "base-64": "^1.0.0",
     "bootstrap": "^5.2.3",
+    "history": "^5.3.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.0",
     "react-dom": "^18.2.0",

my-app/src/components/UserItem.js

 import React, { Component } from "react";
 import Button from "react-bootstrap/esm/Button";
-import { LinkContainer } from "react-router-bootstrap";
-import Nav from 'react-bootstrap/Nav';
-// import Button from "react-bootstrap/esm/Button";
 import Card from 'react-bootstrap/Card';
 import ListGroup from 'react-bootstrap/ListGroup';
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import DeleteUserModal from './DeleteUserModal'
+import EditUser from './EditUser'
+
 
 import * as userManagementActions from '../actions/UserManagementActions'
 
@@ -15,10 +14,17 @@ const mapStateToProps = state => {
     return state;
 }
 
-class UserItem extends Component {
+const DISPLAY = {
+    LIST: "list",
+    EDIT: "edit"
+}
 
+class UserItem extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            displayingPage: DISPLAY.LIST
+        }
 
         this.MapAllUsers = this.MapAllUsers.bind(this);
         this.handleShowDeleteModal = this.handleShowDeleteModal.bind(this);
@@ -33,9 +39,7 @@ class UserItem extends Component {
 
     handleShowEditPage(e, userID) {
         e.preventDefault();
-        const { passEditUserData } = this.props
-        passEditUserData(userID)
-        this.props.history.push('/editUserForm')
+        this.setState({ displayingPage: DISPLAY.EDIT })
     }
 
     handleClose() {
@@ -63,30 +67,33 @@ class UserItem extends Component {
 
                 let currentUserID = user.userID
 
-                return (
-                    <div key={user.userID}>
-                        <DeleteUserModal />
-
-                        <Card style={{ width: "18rem", background: '#ebebeb' }} id={itemID}>
-                            <Card.Header>{user.firstName} {user.lastName}</Card.Header>
-                            <ListGroup variant="flush">
-                                <ListGroup.Item >User ID: {user.userID}</ListGroup.Item>
-                                <ListGroup.Item >First Name: {user.firstName}</ListGroup.Item>
-                                <ListGroup.Item >Last Name: {user.lastName}</ListGroup.Item>
-                            </ListGroup>
-                            <Card.Footer style={{ display: 'flex', justifyContent: 'space-evenly' }}>
-                                <LinkContainer to="/editUserForm" id={editButtonID} onClick={(e) => this.handleShowEditPage(e, currentUserID)}>
-                                    <Nav.Link>Edit</Nav.Link>
-                                </LinkContainer>
-                                {/* <Button variant="primary" onClick={(e) => this.handleShowEditPage(e, currentUserID)}>Edit</Button> */}
-
-                                <Button variant="primary" type="submit" onClick={(e) => this.handleShowDeleteModal(e, dialogData)} id={deleteButtonID} style={{ background: '#ffc800', color: 'black', border: 'none' }}>
-                                    Delete
-                                </Button>
-                            </Card.Footer>
-                        </Card>
-                    </div>
-                )
+
+                switch (this.state.displayingPage) {
+                    case DISPLAY.LIST:
+                        return (
+                        <div key={user.userID}>
+                            <DeleteUserModal />
+                            <Card style={{ width: "18rem", background: '#ebebeb' }} id={itemID}>
+                                <Card.Header>{user.firstName} {user.lastName}</Card.Header>
+                                <ListGroup variant="flush">
+                                    <ListGroup.Item >User ID: {user.userID}</ListGroup.Item>
+                                    <ListGroup.Item >First Name: {user.firstName}</ListGroup.Item>
+                                    <ListGroup.Item >Last Name: {user.lastName}</ListGroup.Item>
+                                </ListGroup>
+                                <Card.Footer style={{ display: 'flex', justifyContent: 'space-evenly' }}>
+                                    <Button variant="primary" onClick={(e) => this.handleShowEditPage(e, currentUserID)} id={editButtonID} >Edit</Button>
+                                    <Button variant="primary" type="submit" onClick={(e) => this.handleShowDeleteModal(e, dialogData)} id={deleteButtonID} style={{ background: '#ffc800', color: 'black', border: 'none' }}>
+                                        Delete
+                                    </Button>
+                                </Card.Footer>
+                            </Card>
+                        </div>
+                        )
+                    case DISPLAY.EDIT:
+                        return (<EditUser />)
+                    default:
+                        return null
+                }
             })
             return users
         }