some frontend

frontend/src/App.js

@@ -3,6 +3,7 @@ import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
 import NavbarComponent from "./components/NavbarComponent";
 import CreateUserComponent from "./components/CreateUserComponent";
 import Home from "./components/Home";
+import CreateTeamComponent from "./components/CreateTeamComponent";
 
 const App = () => {
     return (
@@ -11,6 +12,8 @@ const App = () => {
             <Routes>
                 <Route exact path='/' element={<Home/>}/>
                 <Route path='/user-creation' element={<CreateUserComponent/>}/>
+                <Route path='/user-creation' element={<CreateUserComponent/>}/>
+                <Route path='/team-creation' element={<CreateTeamComponent/>}/>
             </Routes>
         </Router>
     )

frontend/src/components/CreateTeamComponent.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 
 const useInput = (initialValue) => {
     const [value, setValue] = useState(initialValue);
@@ -36,93 +36,169 @@ const useKeys = (init) => {
 
         return [keys, add, remove];
     }
+}
 
-    const User = ({validation, setValidation, dataToSend: data, position, onRemove}) => {
+const User = ({validation, setValidation, dataToSend: data, position, onRemove}) => {
 
+    const roles = ['', 'DEVELOPER', 'LEAD'];
+    const [selectedRole, setSelectedRole] = useState('');
+    let [errors, setErrors] = useState([]);
 
-        const roles = ['', 'DEVELOPER', 'LEAD'];
-        const [selectedRole, setSelectedRole] = useState('');
-        let [errors, setErrors] = useState([]);
+    const {
+        value: username,
+        touched: touchedUsername,
+        setTouched: setTouchedUsername,
+        bind: bindUsername,
+        reset: resetUsername
+    } = useInput('');
+    const {
+        value: password,
+        touched: touchedPassword,
+        setTouched: setTouchedPassword,
+        bind: bindPassword,
+        reset: resetPassword
+    } = useInput('');
 
-        const {
-            value: username,
-            touched: touchedUsername,
-            setTouched: setTouchedUsername,
-            bind: bindUsername,
-            reset: resetUsername
-        } = useInput('');
-        const {
-            value: password,
-            touched: touchedPassword,
-            setTouched: setTouchedPassword,
-            bind: bindPassword,
-            reset: resetPassword
-        } = useInput('');
+    useEffect(() => {
+        let errorMessages = [];
 
-        useEffect(() => {
-            let errorMessages = [];
+        if (username.length < 4) {
+            errorMessages.push('username have wrong format');
+            data[position].username = '';
+        } else {
+            data[position].username = '';
+        }
 
-            if (username.length < 4) {
-                errorMessages.push('username have wrong format');
-                data[position].username = '';
-            } else {
-                data[position].username = '';
-            }
+        if (password.length < 4) {
+            errorMessages.push('password have wrong format');
+        } else {
+            data[position].password = '';
+        }
 
-            if (password.length < 4) {
-                errorMessages.push('password have wrong format');
-            } else {
-                data[position].password = '';
-            }
+        setValidation({...validation, [position]: errorMessages.length === 0});
 
-            setValidation({...validation, [position]: errorMessages.length === 0});
+        setErrors(errorMessages);
 
-            setErrors(errorMessages);
-
-            return (
-                <div className="container">
-                    <div className="header"><h2>Create user</h2></div>
-                    <div className="row">
-                        <div className="col-8 mt-5">
-                            <form onSubmit={handleSubmit}>
-                                <div className="form-group">
-                                    <label>Username:</label>
-                                    <input
-                                        type="text"
-                                        className="form-control"
-                                        {...bindUsername}
-                                    />
-                                </div>
-                                <div className="form-group">
-                                    <label>Password:</label>
-                                    <input
-                                        type="text"
-                                        className="form-control"
-                                        {...bindPassword}
-                                    />
-                                </div>
-                                <div className="form-group">
-                                    {
-                                        SelectGroup({
-                                            items: roles,
-                                            handleItemsChange: handleRolesChange,
-                                            groupName: 'Roles'
-                                        })
-                                    }
-                                </div>
-                                <div className="form-group">
-                                    <button onClick={() => onRemove(position)} className="mb-3">Remove</button>
-                                    {
-                                        <div className="text-danger">
-                                            {errors.map(err => <h6 key={err}>{err}</h6>)}
-                                        </div>
-                                    }
-                                </div>
-                            </form>
-                        </div>
-                    </div>
+        return (
+            <div>
+                <div className="header"><h4>New user</h4></div>
+                <div className="form-group">
+                    <label>Username:</label>
+                    <input
+                        type="text"
+                        className="form-control"
+                        {...bindUsername}
+                    />
                 </div>
-            )
-        })
+                <div className="form-group">
+                    <label>Password:</label>
+                    <input
+                        type="text"
+                        className="form-control"
+                        {...bindPassword}
+                    />
+                </div>
+                <div className="form-group">
+                    {
+                        SelectGroup({
+                            items: roles,
+                            handleItemsChange: handleRolesChange,
+                            groupName: 'Roles'
+                        })
+                    }
+                </div>
+                <div className="form-group">
+                    <button onClick={() => onRemove(position)} className="mb-3">Remove</button>
+                    {
+                        <div className="text-danger">
+                            {errors.map(err => <h6 key={err}>{err}</h6>)}
+                        </div>
+                    }
+                </div>
+            </div>
+        )
+    })
+}
+
+const CreateTeamComponent = () => {
+
+    const [keys, add, remove] = useKeys(2);
+
+    const dataToSend = useRef(keys.reduce((acc, value) => {
+        acc[value] = false;
+        return acc;
+    }, {}));
+
+    const [validation, setValidation] = useState(keys.reduce((acc, value) => {
+        acc[value] = false;
+        return acc;
+    }, {}))
+
+    let users = keys
+        .filter(key => key in dataToSend.current)
+        .map(key => (
+            <User
+                key={key}
+                validation={validation}
+                setValidation={setValidation}
+                dataToSend={dataToSend}
+                position={key}
+                onRemove={remove}
+            />
+        ))
+
+    const send = () => {
+        console.log(dataToSend.current);
     }
-}
+
+    useEffect(() => {
+        setValidation(keys.reduce((acc, value) => {
+            acc[value] = value in validation ? validation[value] : false;
+            return acc;
+        }, {}))
+
+        dataToSend.current = keys.reduce((acc, value) => {
+            acc[value] = value in dataToSend.current ? dataToSend.current[value] : {
+                username: '',
+                password: '',
+                role: ''
+            }
+        })
+
+        users = keys.map(key => (
+            <User
+                key={key}
+                validation={validation}
+                setValidation={setValidation}
+                dataToSend={dataToSend.current}
+                position={key}
+                onRemove={remove}
+            />
+        ))
+
+    }, [keys])
+
+    return (
+        <div className="container">
+            <div className="header"><h2>Create team</h2></div>
+            <div className="row">
+                <div className="col-8 mt-5">
+                    <form onSubmit={handleSubmit}>
+                        <div>
+                            {users}
+                            <button onClick={add} className="btn btn-primary mr-2">Add</button>
+                            <button
+                                disabled={Object.entries(validation).length === 0 || !Object.entries(validation).map(e => e[1]).every(x => x)}
+                                onClick={send}
+                                className="btn btn-secondary">
+                                Send
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default CreateTeamComponent;

frontend/src/components/CreateUserComponent.js

@@ -58,10 +58,6 @@ const CreateUserComponent = () => {
     const roles = ['', 'DEVELOPER', 'LEAD'];
     const [selectedRole, setSelectedRole] = useState('');
 
-    const teams = ['', 'Team 1', 'Team 2', 'Team 3'];  // TODO implement fetching of teams
-    const [selectedTeam, setSelectedTeam] = useState('');
-
-
     const [error, setError] = useState({
         userName: false,
         password: false,
@@ -107,7 +103,6 @@ const CreateUserComponent = () => {
         setTouchedUsername(false);
         setTouchedPassword(false);
         setTouchedPasswordConfirmation(false);
-        setTouchedPasswordConfirmation(false);
     }
 
     const handleTeamsChange = (event) => {
@@ -127,13 +122,16 @@ const CreateUserComponent = () => {
             axios
                 .get(url)
                 .then((response) => setData(response.data))
-                .catch((error) => setError(error))
+                .catch((err) => setAxiosError(err))
                 .finally(() => setLoaded(true))
         }, []);
-        return [data, error, loaded];
+        return [data, axiosError, loaded];
     }
 
-    const teamsFromApi = useAxiosGet("http://localhost:8080/teams");
+    const teamsFromApi = useAxiosGet("http://localhost:8080/teams/");
+
+    const teams = ['', 'Team 1', 'Team 2', 'Team 3'];  // TODO implement fetching of teams
+    const [selectedTeam, setSelectedTeam] = useState('');
 
     return (
         <div className="container">
@@ -206,6 +204,11 @@ const CreateUserComponent = () => {
                         <div className="form-group">
                             <button disabled={!isValid()} type="submit">Send</button>
                         </div>
+                        <div>
+                            {
+                                teamsFromApi.map(team => team.toString())
+                            }
+                        </div>
                     </form>
                 </div>
             </div>

frontend/src/eeee.js

@@ -0,0 +1,163 @@
+import React, {useEffect, useRef, useState} from "react";
+
+/*
+    Funkcja zarzadza generowaniem kluczy
+    Kazde dodanie lub usuniecie klucza z tablicy spowoduje przerenderowanie komponentow i
+    wygenerowanie formularza z kolejnymi kontaktami
+*/
+
+const useKeys = (init) => {
+    // Generowanie tablicy kluczy
+    let [keys, setKeys] = useState(Array(init).fill(0).map((value, pos) => pos + 1));
+
+    const add = () => setKeys(keys.concat(keys.length + 1))
+
+    const remove = (key) => {
+        let newKeys = [...keys];
+        let index = newKeys.indexOf(key);
+        if (index !== -1) {
+            newKeys.splice(index, 1);
+        }
+        setKeys(newKeys);
+    }
+
+    return [keys, add, remove];
+}
+
+const Contact = ({validation, setValidation, dataToSend: data, position, onRemove}) => {
+    let [name, setName] = useState('');
+    let [email, setEmail] = useState('');
+    let [errors, setErrors] = useState([]);
+
+    // useEffect wykorzystamy do walidaowania
+    useEffect(() => {
+        let errorMessages = [];
+
+        // Walidacja pola name
+
+        if (!name || name.length < 3) {
+            errorMessages.push('Name is not correct');
+            data[position].name = '';
+        } else {
+            data[position].name = name;
+        }
+
+        // Walidacja pola email
+        if (!email || email.length < 3) {
+            errorMessages.push('Email is not correct');
+        } else {
+            data[position].email = email;
+        }
+
+        // wysylamy info do stanu komponentu nadrzednego
+        setValidation({...validation, [position]: errorMessages.length === 0})
+
+        // Tutaj zmieniamy stan errors, zeby przechwycic bledy, ktore przytrafily sie do konkretnego
+        // walidowanego kontaktu
+        setErrors(errorMessages);
+
+    }, [name, email]);
+
+    return (
+        <div className="border p-2 my-3">
+            <div className="form-group">
+                <label>Name</label>
+                <input
+                    value={name}
+                    onChange={e => setName(e.target.value)}
+                    className="form-control"
+                />
+            </div>
+            <div className="form-group">
+                <label>Email</label>
+                <input
+                    value={email}
+                    onChange={e => setEmail(e.target.value)}
+                    className="form-control"
+                />
+            </div>
+            <div className="form-group">
+                <button onClick={() => onRemove(position)} className="mb-3">Remove</button>
+                {
+                    <div className="text-danger">
+                        {errors.map(err => <h6 key={err}>{err}</h6>)}
+                    </div>
+                }
+            </div>
+        </div>
+    );
+}
+
+const SixthComponentDynamicForm = () => {
+
+    // TODO Zrobic opis do tego
+
+    const [keys, add, remove] = useKeys(2);
+
+    // Przygotowanie stanu, ktory nie bedzie powodowal renderowania, a bedzie
+    // przechowywal dane z pol name oraz email dla kazdego wygenerowanego komponentu Contact
+    const dataToSend = useRef(keys.reduce((acc, value) => {
+        acc[value] = {};
+        return acc;
+    }, {}));
+
+    const [validation, setValidation] = useState(keys.reduce((accum, value) => {
+        accum[value] = false;
+        return accum;
+    }, {}))
+
+    let contacts = keys
+        .filter(key => key in dataToSend.current)
+        .map(key => (
+            <Contact
+                key={key}
+                validation={validation}
+                setValidation={setValidation}
+                dataToSend={dataToSend.current}
+                position={key}
+                onRemove={remove}
+            />
+        ))
+
+    const send = () => {
+        console.log(dataToSend.current);
+    }
+
+    useEffect(() => {
+        setValidation(keys.reduce((accum, value) => {
+            accum[value] = value in validation ? validation[value] : false;
+            return accum;
+        }, {}))
+
+        dataToSend.current = keys.reduce((accum, value) => {
+            accum[value] = value in dataToSend.current ? dataToSend.current[value] : {name: '', email: ''}
+            return accum;
+        }, {})
+
+        contacts = keys.map(key => (
+            <Contact
+                key={key}
+                validation={validation}
+                setValidation={setValidation}
+                dataToSend={dataToSend.current}
+                position={key}
+                onRemove={remove}
+            />
+        ))
+    }, [keys])
+
+    return (
+        <div>
+            {contacts}
+            <button onClick={add} className="btn btn-primary mr-2">Add</button>
+            <button
+                disabled={Object.entries(validation).length === 0 || !Object.entries(validation).map(e => e[1]).every(x => x)}
+                onClick={send}
+                className="btn btn-secondary"
+            >Send
+            </button>
+        </div>
+    );
+}
+
+export default SixthComponentDynamicForm;