Skip to content

Commit

Permalink
Merge branch 'develop' into SMA-36_Implement_the_host_event_page
Browse files Browse the repository at this point in the history
  • Loading branch information
MatejFrnka authored Apr 15, 2024
2 parents ce21629 + d645db6 commit 66104b5
Show file tree
Hide file tree
Showing 11 changed files with 87 additions and 114 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,17 @@ public class SecurityConfig {

@Value("${app.sportsmingle.frontend.url}")
private String frontendUrl;

private static final String[] WHITE_LIST_URL = {
"/api/v1/auth/**", "/h2-console/**", "/v3/api-docs", "/v3/api-docs/**", "/swagger-ui/**", "/swagger-ui.html", "/api/v1/places/search", "/api/v1/event/nearby"
"/api/v1/auth/**",
"/h2-console/**",
"/v3/api-docs",
"/v3/api-docs/**",
"/swagger-ui/**",
"/swagger-ui.html",
"/api/v1/places/search",
"/api/v1/event/nearby",
"/api/v1/sports/all"
};
private final JwtAuthFilter jwtAuthFilter;
private final AuthenticationProvider authenticationProvider;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,17 +62,18 @@ public List<EventHistoryDTO> getEventsHistory(@ParameterObject final Pageable pa
return eventService.getEventsHistory(pageable);
}


/**
* This endpoint returns list of Events sorted by distance from the given location. User can filter by sports.
* This endpoint returns list of Events sorted by distance from the given location. User can
* filter by sports.
*
* @param requestEventDTO it contains longitude and latitude and a list of sports for filter if given
* @param pageable it contains the page and size for pagination
* @param requestEventDTO it contains longitude and latitude and a list of sports for filter if
* given
* @param pageable it contains the page and size for pagination
* @return a list of Events sorted by distance from the given location. User can filter by sports.
*/
@GetMapping("/nearby")
public List<EventDTO> getNearbyEvents(@RequestBody RequestEventDTO requestEventDTO,
@ParameterObject final Pageable pageable) {
public List<EventDTO> getNearbyEvents(
@ParameterObject RequestEventDTO requestEventDTO, @ParameterObject final Pageable pageable) {
return eventService.getNearbyEvents(requestEventDTO, pageable);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@
@AllArgsConstructor
public class Event {

@Id
@GeneratedValue
private Long id;
@Id @GeneratedValue private Long id;

@Column(name = "date_start")
private LocalDateTime dateStart;
Expand All @@ -34,6 +32,7 @@ public class Event {

private String title;

@Column(name = "is_rank_updated")
private Boolean isRanksUpdated = false;

@OneToMany(cascade = CascadeType.ALL, mappedBy = "event")
Expand All @@ -42,8 +41,7 @@ public class Event {
@OneToMany(cascade = CascadeType.ALL, mappedBy = "event")
private Set<UserEventRating> ratings = new HashSet<>();

@ManyToOne
private Sport sport;
@ManyToOne private Sport sport;

@ManyToOne
@JoinColumn(name = "place_id")
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ List<Event> findEventsByUser(
* @return list of events filtered by sport names if given, and order by distance from the user's given location
*/
@Query(nativeQuery = true, value =
"SELECT e.id, e.date_start, e.date_end, e.min_elo, e.max_elo, e.title, e.sport_id, e.place_id "
"SELECT e.id, e.date_start, e.date_end, e.min_elo, e.max_elo, e.title, e.is_rank_updated, e.sport_id, e.place_id "
+ "FROM events e "
+ "JOIN sports s ON e.sport_id = s.id "
+ "JOIN places p ON e.place_id = p.id "
Expand Down
93 changes: 21 additions & 72 deletions frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useState } from 'react'
import '../styles/NewUserComponent.css'
import { useNavigate } from 'react-router-dom'
import { SportControllerService, SportDTO } from '../generated/api'

function SportsButtonComponent({
onSportSelectionChange,
Expand Down Expand Up @@ -40,82 +41,30 @@ function SportsButtonComponent({
navigate('/allsports', { state: { selectedButtonSports } })
}

const [sports, setSports] = useState<SportDTO[]>([])

useEffect(() => {
const fetchSports = async () => {
setSports((await SportControllerService.getSports(0, 5)) as SportDTO[])
}
fetchSports()
}, [])

return (
<div className="wrapper">
<p>Select your sports</p>
<div className="sports-container">
<label>
<input
type="checkbox"
className="sports-checkbox"
checked={selectedButtonSports.includes('Tennis')}
onChange={() => handleCheckboxChange('Tennis')}
/>
<span className="sports-button">🥎 Tennis</span>
</label>
<label>
<input
type="checkbox"
className="sports-checkbox"
checked={selectedButtonSports.includes('Gym')}
onChange={() => handleCheckboxChange('Gym')}
/>
<span className="sports-button">🏋 Gym</span>
</label>
<label>
<input
type="checkbox"
className="sports-checkbox"
checked={selectedButtonSports.includes('Golf')}
onChange={() => handleCheckboxChange('Golf')}
/>
<span className="sports-button">🏌🏽 Golf</span>
</label>
<label>
<input
type="checkbox"
className="sports-checkbox"
checked={selectedButtonSports.includes('Bowling')}
onChange={() => handleCheckboxChange('Bowling')}
/>
<span className="sports-button">🎳 Bowling</span>
</label>
<label>
<input
type="checkbox"
className="sports-checkbox"
checked={selectedButtonSports.includes('Running')}
onChange={() => handleCheckboxChange('Running')}
/>
<span className="sports-button">🏃 Running</span>
</label>
<label>
<input
type="checkbox"
className="sports-checkbox"
checked={selectedButtonSports.includes('Bicycle')}
onChange={() => handleCheckboxChange('Bicycle')}
/>
<span className="sports-button">🚴‍♀️ Bicycle</span>
</label>
<label>
<input
type="checkbox"
className="sports-checkbox"
checked={selectedButtonSports.includes('Boxing')}
onChange={() => handleCheckboxChange('Boxing')}
/>
<span className="sports-button">🥊 Boxing</span>
</label>
<label>
<input
type="checkbox"
className="sports-checkbox"
checked={selectedButtonSports.includes('Ping pong')}
onChange={() => handleCheckboxChange('Ping pong')}
/>
<span className="sports-button">🏓 Ping pong</span>
</label>
{sports.map((s, index) => (
<label key={index}>
<input
type="checkbox"
className="sports-checkbox"
checked={selectedButtonSports.includes(s.name!)}
onChange={() => handleCheckboxChange(s.name!)}
/>
<span className="sports-button">{s.emoji + ' ' + s.name}</span>
</label>
))}
<label>
<input
className="more-sports-button"
Expand Down
1 change: 0 additions & 1 deletion frontend/sportsmatch-app/src/generated/api/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export { EventHistoryDTO } from './models/EventHistoryDTO';
export type { HostEventDTO } from './models/HostEventDTO';
export type { PlaceDTO } from './models/PlaceDTO';
export type { RatingDTO } from './models/RatingDTO';
export type { RequestEventDTO } from './models/RequestEventDTO';
export type { SportDTO } from './models/SportDTO';
export type { UserDTO } from './models/UserDTO';
export type { UserInfoDTO } from './models/UserInfoDTO';
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
/* eslint-disable */
import type { EventDTO } from '../models/EventDTO';
import type { EventHistoryDTO } from '../models/EventHistoryDTO';
import type { RequestEventDTO } from '../models/RequestEventDTO';
import type { HostEventDTO } from '../models/HostEventDTO';
import type { CancelablePromise } from '../core/CancelablePromise';
import { OpenAPI } from '../core/OpenAPI';
import { request as __request } from '../core/request';
Expand Down Expand Up @@ -112,15 +110,19 @@ export class EventsControllerService {
});
}
/**
* @param requestEventDto
* @param sportsName
* @param longitude
* @param latitude
* @param page Zero-based page index (0..N)
* @param size The size of the page to be returned
* @param sort Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported.
* @returns EventDTO OK
* @throws ApiError
*/
public static getNearbyEvents(
requestEventDto: RequestEventDTO,
sportsName?: Array<string>,
longitude?: number,
latitude?: number,
page?: number,
size: number = 20,
sort?: Array<string>,
Expand All @@ -129,7 +131,9 @@ export class EventsControllerService {
method: 'GET',
url: '/api/v1/event/nearby',
query: {
'requestEventDTO': requestEventDto,
'sportsName': sportsName,
'longitude': longitude,
'latitude': latitude,
'page': page,
'size': size,
'sort': sort,
Expand Down
38 changes: 28 additions & 10 deletions frontend/sportsmatch-app/src/pages/Index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
EventsControllerService,
ExSecuredEndpointService,
OpenAPI,
RequestEventDTO,
SportDTO,
} from '../generated/api'
import useModal from '../hooks/UseModal'
Expand All @@ -29,6 +28,8 @@ export default function MainPage() {
const location = useLocation()
const navigate = useNavigate()
const { isOpen, toggle } = useModal()
const [page, setPage] = useState<number>(0)
const size = 5

// handle sports name selected from sportButtoncomponent
const handleSportSelectionChange = (selectedButtonSports: string[]) => {
Expand All @@ -52,31 +53,36 @@ export default function MainPage() {

useEffect(() => {
const fetchData = async () => {
OpenAPI.TOKEN = localStorage.getItem('token')!
try {
const requestEventDTO: RequestEventDTO = {
sportsName: selectedSports,
}
const response = await EventsControllerService.getNearbyEvents(
requestEventDTO,
selectedSports,
0,
20,
undefined,
0,
page,
size,
)
if (!Array.isArray(response)) {
throw new Error('Failed to fetch event data')
}
const data: EventDTO[] = response as EventDTO[]
// set filtered events based on api response
console.log(data)
setFilteredEvent(data)
if (page === 0) {
setFilteredEvent(data as EventDTO[])
} else {
setFilteredEvent((previousPage) => [
...previousPage,
...(data as EventDTO[]),
])
}
//setFilteredEvent(data as EventDTO[])
} catch (error) {
console.error(error as ApiError)
}
}
// call the method
fetchData()
}, [selectedSports])
}, [selectedSports, page])

// handle join event pop up after cliking on the event
const handleEventSelection = (e: EventDTO) => {
Expand Down Expand Up @@ -117,6 +123,11 @@ export default function MainPage() {
navigate('/app')
}

const loadMore = () => {
const nextPage = page + 1
setPage(nextPage)
}

return (
<>
<div className="container-fluid">
Expand Down Expand Up @@ -183,6 +194,13 @@ export default function MainPage() {
</div>
</div>
</div>
{filteredEvent.length > 0 && (
<div className="row load-btn">
<div className="col">
<button onClick={loadMore}>Load More Events</button>
</div>
</div>
)}
</div>
</>
)
Expand Down
5 changes: 4 additions & 1 deletion frontend/sportsmatch-app/src/styles/JoinEvent.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
}


.join-event-wrapper {
.join-event-wrapper {
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 5%;
padding-right: 5%;
color: var(--sm-orange);
Expand Down
6 changes: 4 additions & 2 deletions frontend/sportsmatch-app/src/styles/Modal.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.modal-overlay {
z-index: 9999;
position: absolute;
position: fixed;
top: 0;
left: 0;
width: 100vw;
Expand All @@ -12,7 +12,9 @@
}

.modal-box {
display: block;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
width: 90%;
height: 75%;
Expand Down

0 comments on commit 66104b5

Please sign in to comment.