Added redux stuff for edit user

Author: Gimleux

src/background/api/userInformations.ts

@@ -0,0 +1,23 @@
+import Axios, { AxiosResponse } from "axios";
+
+import { hostname, userPath } from "./api";
+
+import { UserState } from "../redux/actions/userTypes";
+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)
+            .then((response: AxiosResponse<UserState>) => {
+                console.log("answer: ", response.data)
+                store.dispatch(updateUser(response.data));
+            })
+            .catch((error) => {
+                console.log(error);
+                reject(error);
+            });
+    })
+
+};

src/background/redux/actions/user.tsx

@@ -1,6 +1,11 @@
-import {ADD_USER, AddUser, UserState} from "./userTypes";
+import {ADD_USER, AddUser, UPDATE_USER, UpdateUser, UserState} from "./userTypes";
 
 export const addUser = (content: UserState):AddUser => ({
     type: ADD_USER,
     payload: content
 });
+
+export const updateUser = (content: UserState):UpdateUser => ({
+    type: UPDATE_USER,
+    payload: content
+})

src/background/redux/actions/userTypes.tsx

@@ -1,4 +1,5 @@
 export const ADD_USER = "ADD_USER";
+export const UPDATE_USER = "UPDATE_USER";
 
 export interface UserState {
   id: number | null;
@@ -11,4 +12,9 @@ export interface AddUser {
   payload: UserState;
 }
 
-export type UserActionTypes = AddUser;
+export interface UpdateUser {
+  type: typeof UPDATE_USER;
+  payload: UserState;
+}
+
+export type UserActionTypes = AddUser | UpdateUser;

src/background/redux/reducers/user.tsx

@@ -1,18 +1,23 @@
-import { ADD_USER, UserActionTypes, UserState } from "../actions/userTypes";
+import {ADD_USER, UPDATE_USER, UserActionTypes, UserState} from "../actions/userTypes";
 
 const initialState: UserState = {
-  groups: [],
-  id: null,
-  username: null
+    groups: [],
+    id: null,
+    username: null
 };
 
 export default function users(state = initialState, action: UserActionTypes) {
-  switch (action.type) {
-    case ADD_USER: {
-      console.log("[Redux] adding user");
-      return action.payload;
+    switch (action.type) {
+        case ADD_USER: {
+            console.log("[Redux] adding user");
+            return action.payload;
+        }
+        case UPDATE_USER: {
+            console.log("[Redux] updating user");
+            return action.payload;
+        }
+
+        default:
+            return state;
     }
-    default:
-      return state;
-  }
 }

src/components/Router/Router.tsx

@@ -3,9 +3,9 @@ import {Redirect, Route, Switch} from "react-router-dom";
 import Health from "../pages/Health";
 import Error404 from "../pages/errors/Error404";
 import Login from "../basicElements/Login";
-import Registration from "../pages/Registration";
+import Registration from "../pages/User/Registration";
 import FileSystem, {filesBaseUrl} from "../pages/filesytem/Filesystem";
-import Profile from "../pages/profile/Profile";
+import Profile from "../pages/User/Profile";
 
 export default function Router(): ReactElement {
 

src/components/pages/User/Profile.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { BrowserRouter } from "react-router-dom";
+import "../../../style/custom.scss";
+import Profile from "./Profile";
+import { Provider } from "react-redux";
+import store from "../../../background/redux/store";
+import { hostname } from "../../../background/api/api";
+import MockAdapter from "axios-mock-adapter";
+import axios from "axios";
+
+// const mock = new MockAdapter(axios);
+// const API_REQUEST = hostname;// + filesystemPath + "/contents";
+
+storiesOf("Profile", module)
+    .add("default", () =>
+        <Provider store={store}>
+            <BrowserRouter>
+                <Profile />
+            </BrowserRouter>
+        </Provider>
+    )

src/components/pages/profile/Profile.tsx renamed to src/components/pages/User/Profile.tsx

@@ -1,24 +1,62 @@
-import React, {ReactElement, useState} from "react";
+import React, {ChangeEvent, ReactElement, useState} from "react";
 import {Button, Container, Form, Row} from "react-bootstrap";
 import {useSelector} from "react-redux";
 import {RootState} from "../../../background/redux/store";
+import {changeUserInformation} from "../../../background/api/userInformations";
+import {notMinStrLength} from "../../../background/methods/checkInput";
 
 
 export default function Profile(): ReactElement {
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const user = useSelector((state: RootState) => state.user);
 
+    /*const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+        event.preventDefault();
+        let value: [string, boolean] | string = makePasswordInputFitRules(event.target.value);
+        if (!value[1]) {
+            value = password;
+        } else {
+            value = value[0]
+        }
+        setPasswordInformationLength(!notMinStrLength(value, MIN_PASSWORD_LENGTH));
+        setPasswordInformationLowercase(value.match(/[a-z]/) !== null);
+        setPasswordInformationUppercase(value.match(/[A-Z]/) !== null);
+        setPasswordInformationNumber(value.match(/\d/) !== null);
+        setPassword(value)
+    }
+
+    const handlePasswordConfirmationChange = async (event: ChangeEvent<HTMLInputElement>) => {
+        event.preventDefault();
+        let value: [string, boolean] | string = makePasswordInputFitRules(event.target.value);
+        if (!value[1]) {
+            value = passwordConfirmation;
+        } else {
+            value = value[0]
+        }
+        setPasswordConfirmation(value);
+    }*/
+
     function handleEditModeChange(): void {
-        console.log("[PROFILE] hi")
-        setIsEditing(!isEditing)
+        if (isEditing) {
+            let newUser = JSON.parse(JSON.stringify(user))
+            let usernameInput = document.getElementById("editProfileForm-Username")
+            if (usernameInput) {
+                console.log((usernameInput as HTMLInputElement).value)
+                newUser.username = (usernameInput as HTMLInputElement).value
+                console.log(changeUserInformation(newUser))
+            }
+        } else {
+            console.log("[PROFILE] changedEditMode")
+            setIsEditing(!isEditing)
+        }
     }
 
     function EditProfile(): ReactElement {
         return (
             <Form>
-                <Form.Group controlId="editProfileForm.Username">
+                <Form.Group controlId="editProfileForm-Username">
                     <Form.Label>Your Username</Form.Label>
-                    <Form.Control type="text" placeholder="Enter username" value={user.username ?? ""}/>
+                    <Form.Control type="text" placeholder="Enter username" defaultValue={user.username ?? ""}/>
                     <Form.Text>
                         Your username will be visible to anyone using this system.
                     </Form.Text>
@@ -45,7 +83,7 @@ export default function Profile(): ReactElement {
                     <dt>Username</dt>
                     <dd>{user.username}</dd>
                     <dt>Groups</dt>
-                    <dd>{user.groups.map((value: number, index: number, array: number[]) => {
+                    <dd>{user.groups.map((value: number) => {
                         return value + " "
                     })}
                     </dd>

src/components/pages/Registration.stories.tsx renamed to src/components/pages/User/Registration.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {storiesOf} from "@storybook/react";
 import Registration from "./Registration";
 import {BrowserRouter} from "react-router-dom";
-import '../../style/custom.scss';
+import '../../../style/custom.scss';
 
 storiesOf("Registration", module)
     .add("default", () =>

src/components/pages/Registration.tsx renamed to src/components/pages/User/Registration.tsx

@@ -1,14 +1,14 @@
 import React, {ChangeEvent, FormEvent, ReactElement, useCallback, useEffect, useState} from "react";
 import {Container, Row, Col, Form, FormGroup, Button, Alert} from "react-bootstrap";
-import {deleteSpaces} from "../../background/methods/strings";
-import {biggerMaxStrLength, notMinStrLength} from "../../background/methods/checkInput";
-import info_svg from "../../assets/images/icons/material.io/info-24px.svg";
-import check_svg from "../../assets/images/icons/material.io/check_circle-24px.svg";
-import error_svg from "../../assets/images/icons/material.io/error-24px.svg";
-import fileFighter from "../../assets/images/logos/adventurer-run.gif";
-import {registerNewUser} from "../../background/api/registration";
-import {getWindowSize, getWindowSize_Interface} from "../../background/methods/windowSize";
-import {getStyleValue} from "../../background/methods/style";
+import {deleteSpaces} from "../../../background/methods/strings";
+import {biggerMaxStrLength, notMinStrLength} from "../../../background/methods/checkInput";
+import info_svg from "../../../assets/images/icons/material.io/info-24px.svg";
+import check_svg from "../../../assets/images/icons/material.io/check_circle-24px.svg";
+import error_svg from "../../../assets/images/icons/material.io/error-24px.svg";
+import fileFighter from "../../../assets/images/logos/adventurer-run.gif";
+import {registerNewUser} from "../../../background/api/registration";
+import {getWindowSize, getWindowSize_Interface} from "../../../background/methods/windowSize";
+import {getStyleValue} from "../../../background/methods/style";
 
 export default function Registration(): ReactElement {
     const MIN_PASSWORD_LENGTH = 8;