Tournaments list with filtering form

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .idea/
 .build/
+build/

src/App.js

@@ -4,17 +4,10 @@ import Home from './Home';
 import { useState } from 'react';
 
 function App() {
-    const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const [isCollapsed, setIsCollapsed] = useState(false);
-
-
-    const toggleUserBar = () => {
-        setIsCollapsed(!isCollapsed);
-    };
+    const [isAuthenticated] = useState(false);
 
     return (
         <div className="app">
-
             <Navbar isAuthenticated={isAuthenticated} user={null} />
                     {/* tutaj przesyla uzytkownika */}
 

src/Home.js

@@ -54,7 +54,7 @@ function Home({ isAuthenticated }) {
             </div>
             <div ref={getStartedRef} className="content">
             <div className="content-box big-component">
-                    <h2>Language Bot support</h2>
+                    <h2>Bot Language support</h2>
                     <div className="language-box-container">
                         <div className="python-logo language-box">
                             <img className="language-logo" src={pythonLogo} alt="Python Logo" />

src/Tournaments/TournamentNav.scss

@@ -39,7 +39,7 @@
 .tournament-nav {
     width: 100%;
     display: flex;
-    justify-content: left;
+    justify-content: center;
     margin: 10px 0.5em;
     padding: 10px;
     font-size: 1.5em;

src/User/ProfileView/ProfileGameList.js

@@ -20,7 +20,7 @@ export default function ProfileGameList({ user }) {
         }).catch((error) => {
             console.log(error);
         });
-    }, [user.id]);
+    }, [user.id, games]);
 
     const handleGameElementClick = (gameId) => {
         return () => navigate(`/games/details/${gameId}`);

src/User/ProfileView/ProfileInfoTable.js

@@ -16,7 +16,7 @@ function RatingTable({user}) {
         }).catch((error) => {
             console.log(error);
         });
-    }, [user.id]);
+    }, [user, user.id, history]);
 
     var ticksize = 20;
     const chart = 
@@ -53,7 +53,7 @@ function ProfileInfoTable({ state, user }) {
     const [content, setContent] = useState(null);
     useEffect(() => {
         setContent(changeState(state, user));
-    }, [state]);
+    }, [state, user]);
 
     return (<>
         <div className="user-info-table">

src/User/ProfileView/ProfileView.js

@@ -31,7 +31,7 @@ function ProfileView() {
         }).catch((error) => {
             console.log(error);
         });
-    }, [name]);
+    }, [name, user]);
 
     useEffect(() => {
         UserService.getImageForPlayer(user.id).then((data) => {

src/about.js

@@ -128,8 +128,8 @@ function About() {
                     </div>
                     <div className="description">
                         <img src={scrumPhoto} alt="Scrum Master" className="team-photo" />
-                        <h2>Scam Master</h2>
-                        <p>Stanisław Maliński, our Scam Master, facilitates our agile processes, ensures effective communication, and removes any obstacles that may hinder the team's progress.</p>
+                        <h2>Scum Master</h2>
+                        <p>Stanisław Maliński, our Scum Master, facilitates our agile processes, ensures effective communication, and removes any obstacles that may hinder the team's progress.</p>
                     </div>
                 </div>
 

src/elements/Paginator/Paginator.js

@@ -1,14 +1,15 @@
 import ReactPaginate from 'react-paginate';
 import "./Paginator.scss";
 
-export default function Paginator({ pageCount, handlePageClick }) {
+export default function Paginator({ pageCount, currentPage, handlePageClick }) {
     return (
         <ReactPaginate
             className='paginator'
             previousLabel={'≪'}
             nextLabel={'≫'}
             breakLabel={'...'}
             pageCount={pageCount}
+            forcePage={currentPage}
             marginPagesDisplayed={2}
             pageRangeDisplayed={2   }
             onPageChange={handlePageClick}

src/forms/LoginForm.js

@@ -2,8 +2,6 @@ import './AddGameForm.scss'
 import './Form.scss'
 import React, { useState } from "react";
 import {UserService} from "../services/UserService";
-import { connect } from 'react-redux';
-import { login, logout } from '../User/store';
 
 function RegisterForm() {
     const [email, setEmail] = useState('');

src/forms/TournamentFilterForm.js

@@ -0,0 +1,140 @@
+import React, {forwardRef, useEffect, useImperativeHandle, useState} from 'react';
+import {TournamentService} from "../services/TournamentService";
+import './TournamentFilterForm.scss';
+
+const TournamentFilterForm = forwardRef(function TournamentFilterForm({
+                                               currentPage,
+                                               setCurrentPage,
+                                               tournamentsPerPage,
+                                               setFilteredTournaments,
+                                               setPageCount,
+                                               setMessage
+                                             }, ref) {
+  const [tournamentTitle, setTournamentTitle] = useState('');
+  const [minPlayOutDate, setMinPlayOutDate] = useState(new Date(0));
+  const [maxPlayOutDate, setMaxPlayOutDate] = useState(new Date(new Date().setFullYear(new Date().getFullYear() + 10)));
+  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) => {
+        setPageCount(response.data.data.amountOfPages);
+        setFilteredTournaments(response.data.data.page);
+        if (response.data.data.amountOfPages < currentPage) {
+          setCurrentPage(0);
+        }
+      }).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(new Date(new Date().setFullYear(new Date().getFullYear() + 10))));
+    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">Participant</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,38 @@
+.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;
+            justify-content: space-evenly;
+        }
+        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/index.scss

@@ -62,6 +62,8 @@ button {
   display: inline-block;
   font-size: 20px;
   cursor: pointer;
+  padding: 5px;
+  width: 40%;
 
   transition: all 0.5s ease-out;
 }
@@ -82,3 +84,12 @@ div {
   z-index: -1;
 }
 
+.btn {
+  a {
+    color: rgb(57 185 31);
+    text-decoration: none;
+    text-align: center;
+    margin: 8px;
+  }
+}
+

src/lists/DeleteTournamentButton.js

@@ -2,21 +2,19 @@ import React from 'react';
 import {TournamentService} from "../services/TournamentService";
 
 
-class DeleteTournamentButton extends React.Component {
-  handleClick = async (tournamentId) => {
+function DeleteTournamentButton({tournamentId,onDeleteSuccess}) {
+  const handleClick = async (event, tournamentId) => {
+    event.stopPropagation();
     try {
-      console.log('usuwamy gre o id: ' + tournamentId)
-      const response = await TournamentService.deleteTournament(tournamentId);
-      console.log(response)
+      await TournamentService.deleteTournament(tournamentId);
+      onDeleteSuccess();
     } catch (e) {
         console.log(e);
     }
   };
+  return (
+      <div className="del-btn color-primary-3" onClick={(e) => handleClick(e, tournamentId)}>Delete</div>    );
 
-  render() {
-    return (
-        <div className="del-btn color-primary-3" onClick={() => this.handleClick(this.props.tournamentId)}>Delete</div>    );
-  }
 }
 
 export default DeleteTournamentButton;

src/lists/TournamentList.scss

@@ -26,7 +26,7 @@
         background-color: #242424;
 
         h1 {
-            text-align: left;
+            text-align: center;
             margin: 0.5em 0.25em; 
             padding-top: 0.7em;
             font-size: 0.8em;
@@ -41,7 +41,6 @@
             border-bottom: 2px solid #393a39;
             font-family: Arial, Helvetica, sans-serif;
         }
-
         .header-detail {
             flex: 1;
             text-align: center;
@@ -63,7 +62,6 @@
                 margin-right: 0px;
             }
         }
-
         .tournaments-content {
             border: 2px solid #393a39;
             margin-bottom: 20px;
@@ -116,5 +114,11 @@
     @media (max-width: 768px) {
         font-size: 0.8rem; 
         width: 100%;
+        .tournament-wrapper{
+            overflow-x: scroll;
+            .tournaments-content{
+                width:700px;
+            }
+        }
     }
 }