Fixed Rerender problems

Author: Gimleux

src/components/pages/User/Profile.tsx

@@ -9,11 +9,6 @@ import {RootState} from "../../../background/redux/store";
 export default function Profile(): ReactElement {
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const user = useSelector((state: RootState) => state.user);
-    const [newUser, setNewUser] = useState<UserInformationInterface>({
-        username: "",
-        password: "",
-        passwordConfirmation: ""
-    })
     const [alertMessage, setAlertMessage] = useState<string>("Error 404: No Message found.");
     const [alertVariant, setAlertColor] = useState<"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark">("success");
     const [alertVisibility, setAlertVisibility] = useState<boolean>(false);
@@ -34,7 +29,7 @@ export default function Profile(): ReactElement {
         setIsEditing(!isEditing)
     }
 
-    const handleSubmit = () => {
+    const handleSubmit = async (newUser:UserInformationInterface) => {
         console.log("[PROFILE] handleSubmit")
         //console.log(changeUserInformation(newUser))
         changeEditMode()
@@ -65,8 +60,7 @@ export default function Profile(): ReactElement {
     function EditProfile(): ReactElement {
         return (
             <>
-                <UserInformationInput triggerAlert={handleAlertVisibility} submitFunction={handleSubmit}
-                                      newUser={newUser} setNewUser={setNewUser}/>
+                <UserInformationInput triggerAlert={handleAlertVisibility} submitFunction={handleSubmit}/>
                 <Alert variant={alertVariant} onClose={() => setAlertVisibility(false)} show={alertVisibility}
                        dismissible>
                     <p>{alertMessage}</p>

src/components/pages/User/Registration.tsx

@@ -13,11 +13,11 @@ export default function Registration(): ReactElement {
     const [alertVariant, setAlertColor] = useState<"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark">("success");
     const [alertVisibility, setAlertVisibility] = useState<boolean>(false);
 
-    const [newUser, setNewUser] = useState<UserInformationInterface>({
-        username: "",
-        password: "",
-        passwordConfirmation: ""
-    })
+    // const [newUser, setNewUser] = useState<UserInformationInterface>({
+    //     username: "",
+    //     password: "",
+    //     passwordConfirmation: ""
+    // })
 
     const registrationContainer = document.getElementById("registrationContainer")
     const logoSubmit = document.getElementById("logoSubmit")
@@ -40,7 +40,7 @@ export default function Registration(): ReactElement {
         repositionSubmitLogo()
     }, [registrationContainer, logoSubmit])
 
-    const handleSubmit = async () => {
+    const handleSubmit = async (newUser:UserInformationInterface) => {
         console.log("[REGISTRATION] handleSubmit")
         if (!newUser.username) {
             handleAlertVisibility(DEFAULT_ALERT_DURATION, "danger", "Error: Please choose an username.")
@@ -76,8 +76,7 @@ export default function Registration(): ReactElement {
             <Row>
                 <Col md={{span: 6, offset: 3}}>
                     <h1>Create new account</h1>
-                    <UserInformationInput triggerAlert={handleAlertVisibility} submitFunction={handleSubmit}
-                                          newUser={newUser} setNewUser={setNewUser}/>
+                    <UserInformationInput triggerAlert={handleAlertVisibility} submitFunction={handleSubmit}/>
                     <Alert variant={alertVariant} onClose={() => setAlertVisibility(false)} show={alertVisibility}
                            dismissible>
                         <p>{alertMessage}</p>

src/components/pages/User/UserInformationInput.tsx

@@ -24,12 +24,11 @@ export interface UserInformationInterface {
 
 type Props = {
     triggerAlert(duration: number, color: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark", message: string): void,
-    submitFunction(): void,
-    newUser: UserInformationInterface,
-    setNewUser: Dispatch<SetStateAction<UserInformationInterface>> }
+    submitFunction(newUser:UserInformationInterface): void
+}
 
 export default function UserInformationInput(props: Props): ReactElement {
-    const {triggerAlert, submitFunction, newUser, setNewUser} = props;
+    let {triggerAlert, submitFunction} = props;
     const [username, setUsername] = useState<string>("");
     const [password, setPassword] = useState<string>("");
     const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
@@ -47,12 +46,6 @@ export default function UserInformationInput(props: Props): ReactElement {
         reviewPasswordMatch()
     }, [reviewPasswordMatch])
 
-    useEffect(() => {
-        //TODO: [UserInformationInput.tsx] without submitted submitFunction triggers on site load
-            console.log("[UserInformationInput] in submit useEffect")
-            submitFunction();
-    }, [newUser])
-
     const makePasswordInputFitRules = (input: string): [string, boolean] => {
         input = deleteSpaces(input);
         if (biggerMaxStrLength(input, MAX_PASSWORD_LENGTH)) {
@@ -92,7 +85,8 @@ export default function UserInformationInput(props: Props): ReactElement {
         event.preventDefault();
         console.log("[UserInformationInput] handleSubmit")
         reviewPasswordMatch();
-        setNewUser({username: username, password: password, passwordConfirmation: passwordConfirmation})
+        let newUser = {username: username, password: password, passwordConfirmation: passwordConfirmation}
+        submitFunction(newUser)
     }
 
     return (