From 438c728924aae145355a7541b71ffdb30b177b3a Mon Sep 17 00:00:00 2001 From: Jordan Date: Wed, 22 May 2024 23:28:20 +0200 Subject: [PATCH] Refactor TournamentsList and adapt to API changes still to be tested before merging! --- src/forms/TournamentFilterForm.js | 136 +++++++++++++++ src/forms/TournamentFilterForm.scss | 37 ++++ src/lists/TournamentList.scss | 26 +-- src/lists/TournamentsList.js | 256 +++++++++------------------- src/services/TournamentService.js | 10 +- 5 files changed, 256 insertions(+), 209 deletions(-) create mode 100644 src/forms/TournamentFilterForm.js create mode 100644 src/forms/TournamentFilterForm.scss diff --git a/src/forms/TournamentFilterForm.js b/src/forms/TournamentFilterForm.js new file mode 100644 index 0000000..0336f26 --- /dev/null +++ b/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 ( +
+
+

Filter tournaments

+
+
+ + setTournamentTitle(e.target.value)} + placeholder="Enter tournament title" + maxLength="30" + /> +
+
+ + setMinPlayOutDate(e.target.value)} + placeholder="Enter from date" + maxLength="30" + /> +
+
+ + setMaxPlayOutDate(e.target.value)} + placeholder="Enter to date" + maxLength="30" + /> +
+
+ + setCreator(e.target.value)} + placeholder="Enter creator username" + maxLength="30" + /> +
+
+ + setUserParticipation(e.target.value)} + placeholder="Enter username of partcipating user" + maxLength="30" + /> +
+
+ + +
+
+
+
+ ) +}) + +export default TournamentFilterForm \ No newline at end of file diff --git a/src/forms/TournamentFilterForm.scss b/src/forms/TournamentFilterForm.scss new file mode 100644 index 0000000..7672451 --- /dev/null +++ b/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%; + } +} diff --git a/src/lists/TournamentList.scss b/src/lists/TournamentList.scss index 00e6dcc..1a4230a 100644 --- a/src/lists/TournamentList.scss +++ b/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; diff --git a/src/lists/TournamentsList.js b/src/lists/TournamentsList.js index b160f29..1e6f43b 100644 --- a/src/lists/TournamentsList.js +++ b/src/lists/TournamentsList.js @@ -3,195 +3,93 @@ import DeleteTournamentButton from './DeleteTournamentButton'; import TournamentNav from '../Tournaments/TournamentNav'; import UserButtons from '../User/UserButtons'; import {Link, useNavigate} from 'react-router-dom'; -import { connect } from 'react-redux'; -import { TournamentService } from "../services/TournamentService"; -import React, { useState, useEffect } from "react"; +import {connect} from 'react-redux'; +import React, {useState, useEffect} from "react"; import Paginator from "../elements/Paginator/Paginator" +import TournamentFilterForm from '../forms/TournamentFilterForm'; -function TournamentsList({ tournaments, isAuthenticated, user}) { - const tournamentsPerPage = 3; - const navigate = useNavigate(); - const [filteredTournaments, setFilteredTournaments] = useState([]); - const [tournamentTitle, setTournamentTitle] = useState(''); - const [minPlayOutDate, setMinPlayOutDate] = useState(''); - const [maxPlayOutDate, setMaxPlayOutDate] = useState(''); - const [creator, setCreator] = useState(''); - const [userParticipation, setUserParticipation] = useState(''); - const [message, setMessage] = useState(''); - const [pageCount, setPageCount] = useState(''); - const [currentPage, setCurrentPage] = useState(0); - - useEffect(() => { - filterTournaments(); - }, [currentPage]); +function TournamentsList({tournaments, isAuthenticated, user}) { + const tournamentsPerPage = 3; + const navigate = useNavigate(); + const [filteredTournaments, setFilteredTournaments] = useState([]); + const [message, setMessage] = useState(''); + const [pageCount, setPageCount] = useState(''); + const [currentPage, setCurrentPage] = useState(0); + const tournamentFilterFormRef = React.useRef(); - const handleDeleteSuccess = () => { - filterTournaments(); - }; + const handleTournamentClick = (tournamentId) => { + navigate(`/tournaments/details/${tournamentId}`); + }; - 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'); - }); - } + const handlePageClick = (selectedObject) => { + setCurrentPage(selectedObject.selected); + }; - const handleTournamentClick = (tournamentId) => { - navigate(`/tournaments/details/${tournamentId}`); - }; + const handleDeleteSuccess = () => { + tournamentFilterFormRef.current.filterTournaments(); + }; - const constructObject = () => { - const data = { - tournamentTitle, - minPlayOutDate, - maxPlayOutDate, - creator, - userParticipation - }; + const TournamentItem = ({tournament}) => ( +
handleTournamentClick(tournament.id)}> +
{tournament.tournamentTitle}
+
{tournament.author}
+
{tournament.tournamentsDate}
+
{tournament.status}
+ {isAuthenticated && user.role === "Admin" ? + + : <>} +
+ ); - Object.keys(data).forEach(key => { - if (data[key] === undefined || data[key] === '') { - delete data[key]; - } - }); - - return data; - }; - const handlePageClick = (selectedObject) => { - setCurrentPage(selectedObject.selected); - }; - const handleClearClick = (selectedObject) => { - setUserParticipation(''); - setCreator(''); - setMaxPlayOutDate(''); - setMinPlayOutDate(''); - setTournamentTitle(''); - }; - - const TournamentItem = ({ tournament }) => ( -
handleTournamentClick(tournament.id)}> -
{tournament.tournamentTitle}
-
{tournament.author}
-
{tournament.tournamentsDate}
-
{tournament.status}
- {isAuthenticated && user.role === "Admin"? - - :<>} -
- ); - - return ( -
- - -
- {isAuthenticated && ( - - - - )} -
-
-

Filter tournaments

-
-
- - setTournamentTitle(e.target.value)} - placeholder="Enter tournament title" - maxLength="30" - /> -
-
- - setMinPlayOutDate(e.target.value)} - placeholder="Enter from date" - maxLength="30" - /> -
-
- - setMaxPlayOutDate(e.target.value)} - placeholder="Enter to date" - maxLength="30" - /> -
-
- - setCreator(e.target.value)} - placeholder="Enter creator username" - maxLength="30" - /> -
-
- - setUserParticipation(e.target.value)} - placeholder="Enter username of partcipating user" - maxLength="30" - /> -
-
- - -
-
-
-
- {filteredTournaments.length > 0 ? -
-

Tournaments

-
- Name - Author - Date - Status - {isAuthenticated && user.role === "Admin"? - Delete - :<>} -
-
- {filteredTournaments.map(tournament => ( -
- -
- ))} -
-
- :<>There are no tournaments for given filters} - + return ( +
+ + + +
+ {isAuthenticated && ( + + + + )} + {filteredTournaments.length > 0 ? +
+

Tournaments

+
+ Name + Author + Date + Status + {isAuthenticated && user.role === "Admin" ? + Delete + : <>} +
+
+ {filteredTournaments.map(tournament => ( +
+
-

{message}

-
- ); + ))} +
+
+ : <>There are no tournaments for given filters} + +
+

{message}

+
+ ); } const mapStateToProps = (state) => ({ - isAuthenticated: state.isAuthenticated, - user: state.user, + isAuthenticated: state.isAuthenticated, + user: state.user, }); -export default connect(mapStateToProps)(TournamentsList); +export default connect(mapStateToProps)(TournamentsList); \ No newline at end of file diff --git a/src/services/TournamentService.js b/src/services/TournamentService.js index ce4e423..01e0f82 100644 --- a/src/services/TournamentService.js +++ b/src/services/TournamentService.js @@ -3,11 +3,11 @@ import {Api} from './Api' export const TournamentService = { getFilteredTournaments: async function (page, pageSize, {tournamentTitle, minPlayOutDate, maxPlayOutDate, creator, userParticipation}) { const body = {}; - if (tournamentTitle) body["tournamentTitle"] = tournamentTitle; - if (minPlayOutDate) body["minPlayOutDate"] = minPlayOutDate; - if (maxPlayOutDate) body.maxPlayOutDate = maxPlayOutDate; - if (creator) body.creator = creator; - if (userParticipation) body.userParticipation = userParticipation; + body["tournamentTitle"] = tournamentTitle; + body["minPlayOutDate"] = minPlayOutDate; + body.maxPlayOutDate = maxPlayOutDate; + body.creator = creator; + body.userParticipation = userParticipation; return await Api.req(() => {return Api.post(`Tournament/getFiltered?PageNumber=${page}&PageSize=${pageSize}`, body)}) }, getListOfTournaments: async function (page, pageSize) {