Added EditFunctionality in Profile.tsx

Yet unfixed elements:
- change of username only changes displayed name, not credentials
- no pw change

Author: Gimleux

src/background/api/userInformations.ts renamed to src/background/api/userInformation.ts

@@ -7,12 +7,11 @@ import store from "../redux/store";
 import {updateUser} from "../redux/actions/user";
 
 export const changeUserInformation = (userWithNewInformation: any): Promise<UserState> => {
-    console.log("[userInformations] changeUserInformations: user: ", userWithNewInformation);
-    return new Promise<any>((resolve, reject) => {
-        return Axios.put<any>(`${hostname}${userPath}/${userWithNewInformation.userId}/edit`, userWithNewInformation)
+    return new Promise((resolve, reject) => {
+        return Axios.put(`${hostname}${userPath}/${userWithNewInformation.userId}/edit`, userWithNewInformation)
             .then((response: AxiosResponse<UserState>) => {
-                console.log("answer: ", response.data)
-                store.dispatch(updateUser(response.data));
+                store.dispatch(updateUser(JSON.parse(response.config.data)));
+                resolve(response.data)
             })
             .catch((error) => {
                 console.log(error);

src/background/redux/actions/userTypes.tsx

@@ -2,6 +2,7 @@ export const ADD_USER = "ADD_USER";
 export const UPDATE_USER = "UPDATE_USER";
 
 export interface UserState {
+  //TODO: how is it called id here but the object in the store has "userId"?
   id: number | null;
   username: string | null;
   groups: number[];

src/components/pages/User/Profile.tsx

@@ -3,6 +3,8 @@ import {Alert, Button, Container, Row} from "react-bootstrap";
 import UserInformationInput, {UserInformationInterface} from "./UserInformationInput";
 import {useSelector} from "react-redux";
 import {RootState} from "../../../background/redux/store";
+import {DEFAULT_ALERT_DURATION} from "../../../background/constants";
+import {changeUserInformation} from "../../../background/api/userInformation";
 
 
 export default function Profile(): ReactElement {
@@ -30,8 +32,25 @@ export default function Profile(): ReactElement {
 
     const handleSubmit = async (newUser: UserInformationInterface) => {
         console.log("[PROFILE] handleSubmit")
-        //console.log(changeUserInformation(newUser))
-        changeEditMode()
+
+        if (!newUser.username) {
+            handleAlertVisibility(DEFAULT_ALERT_DURATION, "danger", "Error: Please choose an username.")
+            // } else if (newUser.password !== newUser.passwordConfirmation) {
+            //     handleAlertVisibility(DEFAULT_ALERT_DURATION, "danger", "Error: Password and password confirmation must match.")
+            // } else if (newUser.password.match(/\d/) == null || newUser.password.match(/[a-z]/) == null || newUser.password.match(/[A-Z]/) == null || notMinStrLength(newUser.password, MIN_PASSWORD_LENGTH)) {
+            //     handleAlertVisibility(DEFAULT_ALERT_DURATION, "danger", "Error: Please pay attention to the notes below the input fields.")
+        } else {
+            // console.log("Hello there ", {...user, username: newUser.username})
+            // console.log("General Kenobi ", newUser)
+            await changeUserInformation({...user, username: newUser.username})
+                .then(res => {
+                    changeEditMode()
+                    handleAlertVisibility(DEFAULT_ALERT_DURATION, "success", "Worked: " + (res));
+                })
+                .catch(err => {
+                    handleAlertVisibility(DEFAULT_ALERT_DURATION, "danger", "Error: " + (err.outputMessage ? err.outputMessage : (err.httpStatus + " " + err.httpMessage)))
+                })
+        }
     }
 
     /*function EditProfile(): ReactElement {
@@ -82,7 +101,7 @@ export default function Profile(): ReactElement {
                     <dt>Username</dt>
                     <dd>{user.username}</dd>
                     <dt>Groups</dt>
-                    <dd>{user.groups.map((value: number) => {
+                    <dd>{user.groups?.map((value: number) => {
                         return value + " "
                     })}
                     </dd>
@@ -98,12 +117,14 @@ export default function Profile(): ReactElement {
                     <h1 className="mr-1 h4">
                         My Profile
                     </h1>
-                    {isEditing ? <></> : <Button onClick={changeEditMode}
-                                                 disabled={isEditing}>{isEditing ? "Editing" : "Edit Information"}</Button>}
+                    <Button
+                        onClick={changeEditMode}
+                    >
+                        {isEditing ? "Cancel" : "Edit"}
+                    </Button>
                 </Row>
             </Container>
             {isEditing ? <EditProfile/> : <DisplayProfile/>}
-
         </Container>
     );
 }

src/components/pages/User/UserInformationInput.tsx

@@ -13,13 +13,13 @@ export interface UserInformationInterface {
     passwordConfirmation?: string
 }
 
-type Props = {
+type UserInformationInputProps = {
     triggerAlert(duration: number, color: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark", message: string): void,
     submitFunction(newUser: UserInformationInterface): void,
     presets?: UserInformationInterface
 }
 
-export default function UserInformationInput(props: Props): ReactElement {
+export default function UserInformationInput(props: UserInformationInputProps): ReactElement {
     let {triggerAlert, submitFunction, presets} = props;
     const [username, setUsername] = useState<string>(presets?.username??"");
     const [password, setPassword] = useState<string>(presets?.password??"");