Refactor TournamentsList and adapt to API changes

still to be tested before merging!

src/forms/TournamentFilterForm.js

@@ -0,0 +1,136 @@
+import React, {forwardRef, useEffect, useImperativeHandle, useState} from 'react';
+import {TournamentService} from "../services/TournamentService";
+import './TournamentFilterForm.scss';
+
+const TournamentFilterForm = forwardRef(function TournamentFilterForm({
+                                               currentPage,
+                                               tournamentsPerPage,
+                                               setFilteredTournaments,
+                                               setPageCount,
+                                               setMessage
+                                             }, ref) {
+  const [tournamentTitle, setTournamentTitle] = useState('');
+  const [minPlayOutDate, setMinPlayOutDate] = useState(new Date(0));
+  const [maxPlayOutDate, setMaxPlayOutDate] = useState(new Date());
+  const [creator, setCreator] = useState('');
+  const [userParticipation, setUserParticipation] = useState('');
+
+  const filterTournaments = async (e) => {
+    if (e) {
+      e.preventDefault()
+    }
+    const body = constructObject();
+    TournamentService.getFilteredTournaments(currentPage, tournamentsPerPage, body)
+      .then((response) => {
+        setFilteredTournaments(response.data.data.page);
+        setPageCount(response.data.data.amountOfPages);
+      }).catch((error) => {
+      setMessage('Error loading tournaments');
+    });
+  }
+
+  useEffect(() => {
+    filterTournaments();
+  }, [currentPage]);
+
+  useImperativeHandle(ref, () => ({
+    filterTournaments
+  }));
+
+  const constructObject = () => {
+    const data = {
+      tournamentTitle,
+      minPlayOutDate,
+      maxPlayOutDate,
+      creator,
+      userParticipation
+    };
+
+    Object.keys(data).forEach(key => {
+      if (data[key] === undefined) {
+        data[key] = '';
+      }
+    });
+
+    return data;
+  }
+
+  const handleClearClick = (selectedObject) => {
+    setUserParticipation('');
+    setCreator('');
+    setMaxPlayOutDate(new Date());
+    setMinPlayOutDate(new Date(0));
+    setTournamentTitle('');
+  };
+
+  return (
+    <div className="tournaments-form-container">
+      <form onSubmit={filterTournaments}>
+        <h2>Filter tournaments</h2>
+        <div className="tournaments-form">
+          <div className="tournaments-form-wrapper">
+            <label htmlFor="title">Title</label>
+            <input
+              type="text"
+              id="title"
+              value={tournamentTitle}
+              onChange={(e) => setTournamentTitle(e.target.value)}
+              placeholder="Enter tournament title"
+              maxLength="30"
+            />
+          </div>
+          <div className="tournaments-form-wrapper">
+            <label htmlFor="minDate">From date</label>
+            <input
+              type="date"
+              id="minDate"
+              value={minPlayOutDate}
+              onChange={(e) => setMinPlayOutDate(e.target.value)}
+              placeholder="Enter from date"
+              maxLength="30"
+            />
+          </div>
+          <div className="tournaments-form-wrapper">
+            <label htmlFor="maxDate">To date</label>
+            <input
+              type="date"
+              id="maxDate"
+              value={maxPlayOutDate}
+              onChange={(e) => setMaxPlayOutDate(e.target.value)}
+              placeholder="Enter to date"
+              maxLength="30"
+            />
+          </div>
+          <div className="tournaments-form-wrapper">
+            <label htmlFor="creator">Creator</label>
+            <input
+              type="text"
+              id="creator"
+              value={creator}
+              onChange={(e) => setCreator(e.target.value)}
+              placeholder="Enter creator username"
+              maxLength="30"
+            />
+          </div>
+          <div className="tournaments-form-wrapper">
+            <label htmlFor="partcipating">Partcipating user</label>
+            <input
+              type="text"
+              id="partcipating"
+              value={userParticipation}
+              onChange={(e) => setUserParticipation(e.target.value)}
+              placeholder="Enter username of partcipating user"
+              maxLength="30"
+            />
+          </div>
+          <div className="tournaments-form-button-container">
+            <button type="submit" className="submit">Filter</button>
+            <button onClick={handleClearClick}>Clear</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+})
+
+export default TournamentFilterForm

src/forms/TournamentFilterForm.scss

@@ -0,0 +1,37 @@
+.tournaments-form-container {
+    margin-top: 25px;
+    h2 {
+        margin: 20px 0;
+        text-align: center;
+        overflow-wrap: break-word;
+    }
+    .tournaments-form {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        .tournaments-form-wrapper {
+            max-width: 100%;
+        }
+        .tournaments-form-button-container {
+            display: flex;
+            flex-grow: 1;
+            margin-top: 10px;
+        }
+        div {
+            padding: 0 20px;
+            label {
+                margin-right: 20px;
+                overflow-wrap: break-word;
+            }
+        }
+    }
+    border: 2px solid #393a39;
+    margin-bottom: 20px;
+    padding: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+
+    @media (max-width: 768px) {
+        font-size: 0.8rem;
+        width: 100%;
+    }
+}

src/lists/TournamentList.scss

@@ -65,31 +65,7 @@
                 margin-right: 0px;
             }
         }
-        .tournaments-form-container{
-            margin-top: 25px;
-            h2{margin:20px 0;text-align: center;overflow-wrap: break-word;}
-            .tournaments-form{
-                display: flex;
-                flex-wrap: wrap;
-                flex-direction: row;
-                .tournaments-form-wrapper{
-                    max-width: 100%;
-                }
-                .tournaments-form-button-container{
-                    display: flex;
-                    flex-grow: 1;
-                    margin-top: 10px;
-                }
-                div{
-                    padding: 0 20px;
-                    label{
-                        margin-right: 20px;
-                        overflow-wrap: break-word;
-                    }
-                }
-            }
-        }
-        .tournaments-content, .tournaments-form-container{
+        .tournaments-content {
             border: 2px solid #393a39;
             margin-bottom: 20px;
             padding: 10px;