close to end

my-app/src/App.js

@@ -7,7 +7,6 @@ import UserManagement from './components/UserManagement';
 import CreateNewUserForm from './components/CreateNewUser';
 import { connect } from 'react-redux';
 import { Routes, Route, Navigate } from 'react-router-dom';
-import EditUser from './components/EditUser';
 
 
 const mapStateToProps = state => {
@@ -25,7 +24,6 @@ class App extends Component {
           <Route path="/" element={<PrivatePage />}></Route>
           <Route exact path="/userManagement" element={<UserManagement />}></Route>
           <Route path='/createNewUserForm' element={<CreateNewUserForm />}></Route>
-          <Route path='/editUserForm' element={<EditUser />}></Route>
           <Route path='*' element={<Navigate to="/" />}></Route>
         </Routes>
     } else {

my-app/src/actions/UserManagementActions.js

@@ -78,16 +78,14 @@ export function getCreateNewUserErrorAction(error) {
 export function getEditUserSuccessAction(editUserData) {
     console.log("GetEditUserSuccessAction")
     return {
-        type: EDIT_USER_SUCCESS,
-        editUserData: editUserData
+        type: EDIT_USER_SUCCESS
     }
 }
 
-export function getEditUserErrorAction(editUserData) {
+export function getEditUserErrorAction() {
     console.log("GetEditUserSuccessAction")
     return {
-        type: EDIT_USER_ERROR,
-        editUserData: editUserData
+        type: EDIT_USER_ERROR
     }
 }
 
@@ -116,16 +114,21 @@ export function displayUsers(token) {
     }
 }
 
-export function editingUserWithID(userID, token) {
+export function editUserWithID(updateData, userID, token) {
     console.log("editing user")
 
     return dispatch => {
         dispatch(getEditUserSuccessAction());
-        getOneUser(userID, token)
+        updateUser(updateData, userID, token)
             .then(user => {
                 console.log(user)
                 const action = getEditUserSuccessAction(user)
                 dispatch(action);
+                getAllUsers(token)
+                    .then(users => {
+                        const action = getAllUsersAction(users)
+                        dispatch(action)
+                    })
             },
                 error => {
                     dispatch(getEditUserErrorAction(error));
@@ -279,3 +282,28 @@ export function deleteUser(userID, token) {
         })
 }
 
+
+export function updateUser(updateData, userID, token) {
+    console.log("updating user with id: " + userID)
+    console.log(userID)
+    console.log(updateData)
+    const requestOptions = {
+        method: 'PUT',
+        headers: {
+            'Authorization': token,
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(updateData)
+    }
+
+    return fetch(`https://localhost/api/users/${userID}`, requestOptions)
+        .then(response => {
+            console.log(response)
+            return response.json().then(body => {
+                if (response.status === 200) {
+                    console.log(body)
+                    return body
+                }
+            })
+        })
+}

my-app/src/components/CreateNewUser.js

 import React, { Component } from "react";
 import Form from 'react-bootstrap/Form';
 import Nav from 'react-bootstrap/Nav';
+import Button from "react-bootstrap/esm/Button";
 
 import { connect } from "react-redux";
 import { LinkContainer } from "react-router-bootstrap";
@@ -40,11 +41,12 @@ class CreateNewUserForm extends Component {
         console.log(JSON.stringify(this.state))
     }
 
-    handleSubmit(e) {
+    async handleSubmit(e) {
         e.preventDefault();
         const { createNewUserAction } = this.props;
-        createNewUserAction(this.state, this.props.accessToken)
         console.log("user sollte angelegt werden")
+        this.props.goBack()
+        await createNewUserAction(this.state, this.props.accessToken)
     }
 
     render() {
@@ -77,14 +79,9 @@ class CreateNewUserForm extends Component {
                     <Form.Group className="mb-3">
                         <Form.Check id="CreateUserComponentEditIsAdministrator" name="isAdministrator" type="checkbox" label="Administrator-Rechte" onChange={this.handleChange} />
                     </Form.Group>
-                    <LinkContainer id="CreateUserComponentCreateUserButton" to="/userManagement">
-                        <Nav.Link id="CreateUserComponentCreateUserButton" >
-                            {/* <Button id="CreateUserComponentCreateUserButton" variant="primary" type="submit" onClick={this.handleSubmit}>
-                                Anlegen
-                            </Button> */}
-                            Anlegen
-                        </Nav.Link>
-                    </LinkContainer>
+                    <Button id="CreateUserComponentCreateUserButton" variant="primary" type="submit" onClick={this.handleSubmit}>
+                        Anlegen
+                    </Button>
                 </Form>
             </div >
         )

my-app/src/components/EditUser.js

 import React, { Component } from "react";
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+
+import * as userManagementActions from '../actions/UserManagementActions'
+
+const mapStateToProps = state => {
+    return state;
+}
 
 class EditUser extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            userID: '',
+            firstName: '',
+            lastName: '',
+            password: '',
+            isAdministrator: this.props.editUser.isAdministrator
+        }
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(e) {
+        const { name, value } = e.target;
+        if (name === 'isAdministrator') {
+            if (e.target.checked) {
+                this.setState({ [name]: true })
+            } else {
+                this.setState({ [name]: false })
+            }
+        } else {
+            this.setState({ [name]: value })
+        }
+        console.log(JSON.stringify(this.state))
+    }
+
+    handleSubmit(e) {
+        e.preventDefault()
+        const { editUserWithIDAction } = this.props
+        editUserWithIDAction(this.state, this.props.editUser.userID, this.props.accessToken)
+    }
+
+
+
     render() {
         return (
             <div id="UserManagementPageEditComponent" style={{ display: 'flex', justifyContent: 'center', textAlign: 'left' }}>
                 <Form style={{ width: '60rem' }}>
                     <Form.Group className="mb-3">
                         <Form.Label>User-ID</Form.Label>
-                        <Form.Control id="EditUserComponentEditUserID" type="text" disabled="true" />
+                        <Form.Control name="userID" id="EditUserComponentEditUserID" type="text" disabled={true} defaultValue={this.props.editUser.userID} />
                         <Form.Text className="text-muted">
                             Die User-ID kann nicht geändert werden.
                         </Form.Text>
@@ -17,32 +61,40 @@ class EditUser extends Component {
 
                     <Form.Group className="mb-3">
                         <Form.Label>Vorname</Form.Label>
-                        <Form.Control id="EditUserComponentEditFirstName" type="text" placeholder="Bitte Vornamen eingeben" />
+                        <Form.Control name="firstName" id="EditUserComponentEditFirstName" type="text" placeholder="Bitte Vornamen eingeben" defaultValue={this.props.editUser.firstName} onChange={this.handleChange} />
                     </Form.Group>
 
                     <Form.Group className="mb-3">
                         <Form.Label>Nachname</Form.Label>
-                        <Form.Control id="EditUserComponentEditLastName" type="text" placeholder="Bitte Nachnamen eingeben" />
+                        <Form.Control name="lastName" id="EditUserComponentEditLastName" type="text" placeholder="Bitte Nachnamen eingeben" defaultValue={this.props.editUser.lastName} onChange={this.handleChange} />
                     </Form.Group>
 
-                    <Form.Group className="mb-3" controlId="formBasicPassword">
+                    <Form.Group className="mb-3">
                         <Form.Label>Passwort</Form.Label>
-                        <Form.Control id="EditUserComponentEditPassword" type="password" placeholder="Bitte Passwort eingeben" />
+                        <Form.Control name="password" id="EditUserComponentEditPassword" type="password" placeholder="Passwort" onChange={this.handleChange} />
                         <Form.Text className="text-muted">
                             Wenn das Passwort gesetzt wird, wird es im Backend geändert!
                         </Form.Text>
                     </Form.Group>
 
-                    <Form.Group className="mb-3" controlId="formBasicCheckbox">
-                        <Form.Check id="EditUserComponentEditIsAdministrator" type="checkbox" label="Administrator-Rechte" style={{color: '#0eb30e'}} />
+                    <Form.Group className="mb-3">
+                        <Form.Check name="isAdministrator" id="EditUserComponentEditIsAdministrator" type="checkbox" label="Administrator-Rechte" style={{ color: '#0eb30e' }} defaultChecked={this.props.editUser.isAdministrator} />
                     </Form.Group>
-                    <Button id="OpenUserManagementPageListComponentButton" variant="primary" type="submit">
+                    <Button id="OpenUserManagementPageListComponentButton" variant="primary" type="submit" onClick={this.handleSubmit}>
                         Speichern
                     </Button>
+                    <Button id="backToList" variant="primary" type="submit" onClick={this.props.goBack}>
+                        User-Liste
+                    </Button>
                 </Form>
             </div >
         )
     }
 }
 
-export default EditUser
\ No newline at end of file
+const mapDispatchToProps = dispatch => bindActionCreators({
+    editUserWithIDAction: userManagementActions.editUserWithID
+}, dispatch)
+
+const ConnectedEditUser = connect(mapStateToProps, mapDispatchToProps)(EditUser)
+export default ConnectedEditUser
\ No newline at end of file

my-app/src/components/UserItem.js

@@ -6,6 +6,9 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import DeleteUserModal from './DeleteUserModal'
 import EditUser from './EditUser'
+import CreateNewUser from './CreateNewUser'
+import { LinkContainer } from "react-router-bootstrap";
+import Nav from 'react-bootstrap/Nav';
 
 
 import * as userManagementActions from '../actions/UserManagementActions'
@@ -16,7 +19,8 @@ const mapStateToProps = state => {
 
 const DISPLAY = {
     LIST: "list",
-    EDIT: "edit"
+    EDIT: "edit",
+    CREATE: "create"
 }
 
 class UserItem extends Component {
@@ -29,6 +33,8 @@ class UserItem extends Component {
         this.MapAllUsers = this.MapAllUsers.bind(this);
         this.handleShowDeleteModal = this.handleShowDeleteModal.bind(this);
         this.handleClose = this.handleClose.bind(this);
+        this.handleSwitchToList = this.handleSwitchToList.bind(this);
+        this.handleShowCreatePage = this.handleShowCreatePage.bind(this);
     }
 
     handleShowDeleteModal(e, dialogModalData) {
@@ -37,16 +43,25 @@ class UserItem extends Component {
         showDeleteUserModalAction(dialogModalData)
     }
 
-    handleShowEditPage(e, userID) {
+    handleShowEditPage(e) {
         e.preventDefault();
         this.setState({ displayingPage: DISPLAY.EDIT })
     }
 
+    handleShowCreatePage(e) {
+        e.preventDefault();
+        this.setState({ displayingPage: DISPLAY.CREATE })
+    }
+
     handleClose() {
         const { hideDeleteUserModalAction } = this.props;
         hideDeleteUserModalAction();
     }
 
+    handleSwitchToList(e) {
+        this.setState({ displayingPage: DISPLAY.LIST })
+    }
+
     MapAllUsers() {
         const allUsers = this.props.userList
         if (allUsers) {
@@ -71,26 +86,28 @@ class UserItem extends Component {
                 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>
+                            <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 />)
+                        return (<EditUser goBack={this.handleSwitchToList} editUser={user} />)
+                    case DISPLAY.CREATE:
+                        return (<CreateNewUser goBack={this.handleSwitchToList} />)
                     default:
                         return null
                 }
@@ -101,7 +118,10 @@ class UserItem extends Component {
 
     render() {
         return (
-            <div>
+            <div >
+                <Button onClick={this.handleShowCreatePage}>
+                    <img alt="Add-User-Button" src="https://cdn.icon-icons.com/icons2/933/PNG/512/round-add-button_icon-icons.com_72595.png" style={{ width: '2rem' }}></img>
+                </Button>
                 {this.MapAllUsers()}
             </div>
         )
@@ -110,8 +130,7 @@ class UserItem extends Component {
 
 const mapDispatchToProps = dispatch => bindActionCreators({
     showDeleteUserModalAction: userManagementActions.getShowDeleteUserModalAction,
-    hideDeleteUserModalAction: userManagementActions.getHideDeleteUserModalAction,
-    passEditUserData: userManagementActions.editingUserWithID
+    hideDeleteUserModalAction: userManagementActions.getHideDeleteUserModalAction
 }, dispatch)
 
 const ConnectedUserItems = connect(mapStateToProps, mapDispatchToProps)(UserItem)

my-app/src/components/UserManagement.js

 import React, { Component } from "react";
 import UserItem from "./UserItem";
-import { LinkContainer } from "react-router-bootstrap";
-import Nav from 'react-bootstrap/Nav';
+
 
 class UserManagement extends Component {
     render() {
         return (
             <div>
                 <div id="userManagementPage" style={{ height: '50vw', backgroundColor: '#2b3648', padding: '10rem', display: 'flex', justifyContent: 'center' }}>
-                    <LinkContainer to="/createNewUserForm" id="UserManagementPageCreateComponent">
-                        <Nav.Link><img alt="Add-User-Button" src="https://cdn.icon-icons.com/icons2/933/PNG/512/round-add-button_icon-icons.com_72595.png" style={{ width: '2rem' }}></img></Nav.Link>
-                    </LinkContainer>
+                    
                     <UserItem />
                 </div>
             </div>