From 59297886deead61616fd80b91f6930299dfdd2ff Mon Sep 17 00:00:00 2001 From: ivamach Date: Mon, 22 Apr 2024 19:51:35 +0200 Subject: [PATCH 1/4] SMA-106: refactored and added logged-out user handling --- .../src/components/JoinEventComponent.tsx | 62 ++++++++++++++++++- 1 file changed, 59 insertions(+), 3 deletions(-) diff --git a/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx b/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx index 68940b86..7af01b34 100644 --- a/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx +++ b/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx @@ -1,13 +1,16 @@ +import { useEffect, useState } from 'react' import { OpenAPI, EventsControllerService, ApiError, EventDTO, + ExSecuredEndpointService, + UserDTO, } from '../generated/api' import '../styles/JoinEvent.css' +import { Link } from 'react-router-dom' interface JoinEventProps { - isInRank: boolean // a boolean to check if user's rank meets the event's requirement event: EventDTO toggle: () => void } @@ -24,6 +27,39 @@ export default function JoinEventComponent(p: JoinEventProps) { } } + const [userIsInRank, setUserIsInRank] = useState(false) + const [currentUser, setCurrentUser] = useState({}) + + // retrieving users rank + useEffect(() => { + if (localStorage.getItem('token')) { + const fetchUsersRank = async () => { + OpenAPI.TOKEN = localStorage.getItem('token')! + try { + const response = await ExSecuredEndpointService.getUserMainPage() + if (response) { + setCurrentUser(response as UserDTO) + } + } catch (error) { + console.error(error as ApiError) + } + } + fetchUsersRank() + } + }, []) + + // checking user's rank + useEffect(() => { + if ( + currentUser.elo! >= p.event.minElo && + currentUser.elo! <= p.event.maxElo + ) { + setUserIsInRank(true) + } else { + setUserIsInRank(false) + } + }, [currentUser, p.event.minElo, p.event.maxElo]) + const getDateAndTime = (type: string) => { const dateStart: string[] = p.event.dateStart.split(' ') if (type === 'date') { @@ -37,7 +73,7 @@ export default function JoinEventComponent(p: JoinEventProps) { return ( <> - {p.isInRank ? ( + {userIsInRank ? (
@@ -80,7 +116,7 @@ export default function JoinEventComponent(p: JoinEventProps) {
- ) : ( + ) : currentUser.name ? (
@@ -103,6 +139,26 @@ export default function JoinEventComponent(p: JoinEventProps) {
+ ) : ( +
+
+
+

Hang On a Sec!

+
+
+
+ Please login to join +
+
+
+
+
+ +
+
+
)} ) From 6758239a1a1c9f4fe63a0e29c8a0be3ddfff0300 Mon Sep 17 00:00:00 2001 From: ivamach Date: Mon, 22 Apr 2024 19:52:21 +0200 Subject: [PATCH 2/4] SMA-106: updated after JoinEventComponent refactoring --- frontend/sportsmatch-app/src/pages/Index.tsx | 37 ++------------------ 1 file changed, 2 insertions(+), 35 deletions(-) diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx index 0edc45d2..21035610 100644 --- a/frontend/sportsmatch-app/src/pages/Index.tsx +++ b/frontend/sportsmatch-app/src/pages/Index.tsx @@ -5,13 +5,7 @@ import { SearchBar } from '../components/SearchBar' import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import '../styles/Index.css' -import { - ApiError, - EventDTO, - EventsControllerService, - ExSecuredEndpointService, - OpenAPI, -} from '../generated/api' +import { ApiError, EventDTO, EventsControllerService } from '../generated/api' import useModal from '../hooks/UseModal' import Modal from '../components/Modal' import JoinEventComponent from '../components/JoinEventComponent' @@ -22,8 +16,6 @@ export default function MainPage() { const [selectedSports, setSelectedSports] = useState([]) const [clearFilters, setClearFilters] = useState(false) const [selectedEvent, setSelectedEvent] = useState() - const [usersRank, setUsersRank] = useState(0) - const [userIsInRank, setUserIsInRank] = useState(false) const navigate = useNavigate() const { isOpen, toggle } = useModal() const [page, setPage] = useState(0) @@ -86,30 +78,9 @@ export default function MainPage() { toggle() } setSelectedEvent(e) - if (usersRank >= e.minElo && usersRank <= e.maxElo) { - setUserIsInRank(true) - } else { - setUserIsInRank(false) - } toggle() } - // retrieving users rank - useEffect(() => { - const fetchUsersRank = async () => { - OpenAPI.TOKEN = localStorage.getItem('token')! - try { - const response = await ExSecuredEndpointService.getUserMainPage() - if (response) { - setUsersRank(response.elo) - } - } catch (error) { - console.error(error as ApiError) - } - } - fetchUsersRank() - }) - const handleLetsPlay = () => { navigate('/app') } @@ -161,11 +132,7 @@ export default function MainPage() { - +
From 74995df66fca552d92acc6f559b419b9693677b7 Mon Sep 17 00:00:00 2001 From: ivamach Date: Mon, 22 Apr 2024 20:01:06 +0200 Subject: [PATCH 3/4] SMA-106: updated HostEventComponent --- .../src/components/HostEventComponent.tsx | 32 +------------------ 1 file changed, 1 insertion(+), 31 deletions(-) diff --git a/frontend/sportsmatch-app/src/components/HostEventComponent.tsx b/frontend/sportsmatch-app/src/components/HostEventComponent.tsx index 65da1f7d..81717ac2 100644 --- a/frontend/sportsmatch-app/src/components/HostEventComponent.tsx +++ b/frontend/sportsmatch-app/src/components/HostEventComponent.tsx @@ -9,8 +9,6 @@ import { HostEventDTO, EventDTO, ApiError, - OpenAPI, - ExSecuredEndpointService, } from '../generated/api' import DatePicker from 'react-datepicker' import 'react-datepicker/dist/react-datepicker.css' @@ -44,8 +42,6 @@ function HostEventComponent() { const [nearbyEvents, setNearbyEvents] = useState([]) const [selectedEvent, setSelectedEvent] = useState() const { isOpen, toggle } = useModal() - const [usersRank, setUsersRank] = useState(0) - const [userIsInRank, setUserIsInRank] = useState(false) const [searchQuery, setSearchQuery] = useState('') // no implementation yet console.log(searchQuery) @@ -136,35 +132,13 @@ function HostEventComponent() { // handle join event pop up after cliking on the event const handleEventSelection = (e: EventDTO) => { - window.scrollTo(0, 0) if (isOpen) { toggle() } setSelectedEvent(e) - if (usersRank >= e.minElo && usersRank <= e.maxElo) { - setUserIsInRank(true) - } else { - setUserIsInRank(false) - } toggle() } - // retrieving users rank - useEffect(() => { - const fetchUsersRank = async () => { - OpenAPI.TOKEN = localStorage.getItem('token')! - try { - const response = await ExSecuredEndpointService.getUserMainPage() - if (response) { - setUsersRank(response.elo) - } - } catch (error) { - console.error(error as ApiError) - } - } - fetchUsersRank() - }) - return ( <>
@@ -295,11 +269,7 @@ function HostEventComponent() {
- +
From 4a1ac2a295e2146067fc89d48b10ccd0d19be4fa Mon Sep 17 00:00:00 2001 From: ivamach Date: Mon, 22 Apr 2024 20:12:38 +0200 Subject: [PATCH 4/4] SMA-106: fixed dependency array in useEffect --- frontend/sportsmatch-app/src/components/HostEventComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/sportsmatch-app/src/components/HostEventComponent.tsx b/frontend/sportsmatch-app/src/components/HostEventComponent.tsx index 81717ac2..0fc55b1b 100644 --- a/frontend/sportsmatch-app/src/components/HostEventComponent.tsx +++ b/frontend/sportsmatch-app/src/components/HostEventComponent.tsx @@ -128,7 +128,7 @@ function HostEventComponent() { } } fetchData() - }, [nearbyEvents]) + }, []) // handle join event pop up after cliking on the event const handleEventSelection = (e: EventDTO) => {