WIP: SMA-84: update modal position to fixed

backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java

@@ -6,6 +6,7 @@
 import com.sportsmatch.models.Event;
 import com.sportsmatch.services.EventService;
 import jakarta.validation.Valid;
+import org.springdoc.core.annotations.ParameterObject;
 import org.springframework.data.domain.Pageable;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
@@ -44,7 +45,7 @@ public ResponseEntity<?> deleteEvent(@PathVariable("id") Long id) {
   }
 
   @GetMapping("/upcoming-events")
-  public ResponseEntity<?> getUpcomingEvents(@RequestBody List<Long> sportsIds) {
+  public ResponseEntity<?> getUpcomingEvents(@RequestParam List<Long> sportsIds) {
     List<EventDTO> listOfEvents = eventService.getEventsBySports(sportsIds);
     return ResponseEntity.ok().body(listOfEvents);
   }
@@ -56,7 +57,7 @@ public ResponseEntity<?> getUpcomingEvents(@RequestBody List<Long> sportsIds) {
    * @return a list of finished EventHistoryDTO of the logged-in user
    */
   @GetMapping("/event-history")
-  public List<EventHistoryDTO> getEventsHistory(final Pageable pageable) {
+  public List<EventHistoryDTO> getEventsHistory(@ParameterObject final Pageable pageable) {
     return eventService.getEventsHistory(pageable);
   }
 
@@ -69,8 +70,8 @@ public List<EventHistoryDTO> getEventsHistory(final Pageable pageable) {
    * @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,
-                                        final Pageable pageable) {
+  public List<EventDTO> getNearbyEvents(@RequestParam RequestEventDTO requestEventDTO,
+                                        @ParameterObject final Pageable pageable) {
     return eventService.getNearbyEvents(requestEventDTO, pageable);
   }
 
@@ -83,4 +84,14 @@ public ResponseEntity<?> joinEvent(@PathVariable("id") Long id) {
       return ResponseEntity.badRequest().body(e.getMessage());
     }
   }
+
+  /**
+   * This endpoint returns the upcoming matches of the logged-in user.
+   *
+   * @return a list of logged-in user's upcoming EventDTOs ordered by date ascending
+   */
+  @GetMapping("/upcoming-matches")
+  public List<EventDTO> getUpcomingMatches(@ParameterObject final Pageable pageable) {
+    return eventService.getUsersUpcomingEvents(pageable);
+  }
 }

backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java

@@ -19,8 +19,6 @@ public class EventDTO {
   private LocalDateTime dateStart;
   @NotNull
   private LocalDateTime dateEnd;
-  @NotBlank
-  private String location;
   @NotNull
   private Integer minElo;
   @NotNull

backend/sportsmatch/src/main/java/com/sportsmatch/dtos/SportDTO.java

@@ -13,10 +13,12 @@ public class SportDTO {
   public String emoji;
 
   public String backgroundUImageURL;
+  public Long id;
 
-  public SportDTO(String name, String emoji, String backgroundUImageURL) {
+  public SportDTO(String name, String emoji, String backgroundUImageURL, Long id) {
     this.name = name;
     this.emoji = emoji;
     this.backgroundUImageURL = backgroundUImageURL;
+    this.id = id;
   }
 }

backend/sportsmatch/src/main/java/com/sportsmatch/mappers/SportMapper.java

@@ -18,14 +18,15 @@ public SportDTO toDTO(Sport entity) {
         .name(entity.getName())
         .emoji(entity.getEmoji())
         .backgroundUImageURL(entity.getBackgroundImageURL())
+        .id(entity.getId())
         .build();
   }
 
   public Sport toEntity(SportDTO sportDTO) {
     return Sport.builder()
-            .name(sportDTO.getName())
-            .emoji(sportDTO.getEmoji())
-            .backgroundImageURL(sportDTO.getBackgroundUImageURL())
-            .build();
+        .name(sportDTO.getName())
+        .emoji(sportDTO.getEmoji())
+        .backgroundImageURL(sportDTO.getBackgroundUImageURL())
+        .build();
   }
 }

backend/sportsmatch/src/main/java/com/sportsmatch/repositories/EventRepository.java

@@ -21,18 +21,20 @@ public interface EventRepository extends JpaRepository<Event, Long> {
   /**
    * Retrieves events filtered by user and finished status.
    *
-   * @param name     the logged user's name to filter events by
-   * @param now      the current time to filter events by
+   * @param id the logged user's id to filter events by
+   * @param now the current time to filter events by
    * @param pageable pagination information (page, size)
    * @return a list of events filtered by user and finished status
    */
   // =?1 =?2")
-  @Query("SELECT ep.event FROM EventPlayer ep WHERE ep.player.name = :name AND ep.event.dateEnd < :now")
+  @Query("SELECT ep.event FROM EventPlayer ep WHERE ep.player.id = :id AND ep.event.dateEnd < :now")
   List<Event> findEventsByUser(
-      @Param("name") String name,
-      @Param("now") LocalDateTime now,
-      Pageable pageable
-  );
+      @Param("id") Long id, @Param("now") LocalDateTime now, Pageable pageable);
+
+  @Query("SELECT ep.event FROM EventPlayer ep WHERE ep.player.id = :id AND ep.event.dateStart > :now ORDER BY ep.event.dateEnd ASC")
+  List<Event> findUpcomingEventsByUser(@Param("id") Long id, @Param("now") LocalDateTime now, Pageable pageable);
+
+
 
 
   /**

backend/sportsmatch/src/main/java/com/sportsmatch/services/EventService.java

@@ -111,8 +111,9 @@ public void deleteEventFromDatabase(Event eventById) {
    */
   public List<EventHistoryDTO> getEventsHistory(final Pageable pageable) {
     String loggedUserName = userService.getUserFromContext().getName();
+    Long loggedUserId = userService.getUserFromContext().getId();
 
-    return eventRepository.findEventsByUser(loggedUserName, LocalDateTime.now(), pageable).stream()
+    return eventRepository.findEventsByUser(loggedUserId, LocalDateTime.now(), pageable).stream()
         .map(event -> eventMapper.toDTO(event, loggedUserName, checkScoreMatch(event.getPlayers())))
         .collect(Collectors.toList());
   }
@@ -201,4 +202,18 @@ public List<EventDTO> getNearbyEvents(RequestEventDTO requestEventDTO, final Pag
 
     return events.stream().map(eventMapper::convertEventToEventDTO).collect(Collectors.toList());
   }
+
+  /**
+   * Returns the upcoming matches of the logged-in user.
+   *
+   * @return a list of logged-in user's upcoming EventDTOs ordered by date ascending
+   */
+  public List<EventDTO> getUsersUpcomingEvents(Pageable pageable) {
+    User loggedUser = userService.getUserFromContext();
+    return eventRepository
+        .findUpcomingEventsByUser(loggedUser.getId(), LocalDateTime.now(), pageable)
+        .stream()
+        .map(eventMapper::convertEventToEventDTO)
+        .collect(Collectors.toList());
+  }
 }

backend/sportsmatch/src/test/java/com/sportsmatch/services/SportServiceImpTest.java

@@ -5,7 +5,6 @@
 import com.sportsmatch.mappers.SportMapper;
 import com.sportsmatch.models.Sport;
 import com.sportsmatch.repositories.SportRepository;
-import com.sportsmatch.services.SportServiceImp;
 import org.junit.jupiter.api.Test;
 import org.junit.jupiter.api.extension.ExtendWith;
 import org.mockito.InjectMocks;
@@ -46,8 +45,8 @@ void getAllSportsShouldReturnAllSportsWhenRequired() {
     List<Sport> sports = Arrays.asList(sport1, sport2);
     Page<Sport> sportsPage = new PageImpl<>(sports, pageable, sports.size());
 
-    SportDTO sportDTO1 = new SportDTO("Football", footballEmoji, "urlFootball");
-    SportDTO sportDTO2 = new SportDTO("Basketball", basketballEmoji, "urlBasketball");
+    SportDTO sportDTO1 = new SportDTO("Football", footballEmoji, "urlFootball", 1L);
+    SportDTO sportDTO2 = new SportDTO("Basketball", basketballEmoji, "urlBasketball", 2L);
 
     when(sportMapper.toDTO(sport1)).thenReturn(sportDTO1);
     when(sportMapper.toDTO(sport2)).thenReturn(sportDTO2);

frontend/sportsmatch-app/src/components/EventHistoryItem.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { EventHistoryDTO } from '../generated/api'
 import '../styles/EventHistoryItem.css'
 import Avatar from './Avatar'
@@ -7,12 +8,44 @@ interface EventHistoryProps {
 }
 
 function EventHistoryItem({ eventHistoryDTO }: EventHistoryProps) {
+  const [eventStatus, setEventStatus] = useState<string>('')
+
+  useEffect(() => {
+    const matchResult =
+      eventHistoryDTO.userScore! > eventHistoryDTO.opponentScore!
+        ? 'VICTORY'
+        : eventHistoryDTO.userScore! == eventHistoryDTO.opponentScore!
+          ? 'DRAW'
+          : 'DEFEAT'
+    if (
+      eventHistoryDTO.status?.includes(EventHistoryDTO.status.MATCH) &&
+      !eventHistoryDTO.status?.includes(EventHistoryDTO.status.MISMATCH)
+    ) {
+      setEventStatus(matchResult)
+    } else if (
+      eventHistoryDTO.status?.includes(
+        EventHistoryDTO.status.WAITING_FOR_RATING,
+      )
+    ) {
+      const result = matchResult + ' (UNCONFIRMED)'
+      setEventStatus(result)
+    } else if (
+      eventHistoryDTO.status?.includes(EventHistoryDTO.status.MISMATCH)
+    ) {
+      setEventStatus('SCORE MISMATCH')
+    }
+  }, [
+    eventHistoryDTO.opponentScore,
+    eventHistoryDTO.status,
+    eventHistoryDTO.userScore,
+  ])
+
   return (
     <>
       <div className="container-fluid">
         <div className={'row'}>
           <div className="event-history-item">
-            <div className="match-status">VICTORY (uncorfirmed)</div>
+            <div className="match-status">{eventStatus}</div>
             <div className="user-side">
               <div className="profile">
                 <div className="user-avatar">
@@ -21,15 +54,27 @@ function EventHistoryItem({ eventHistoryDTO }: EventHistoryProps) {
                 <div className="user-name">You</div>
               </div>
               <div className="user-score score">
-                <span>{eventHistoryDTO.userScore}</span>
+                <span>
+                  {eventHistoryDTO.status?.includes(
+                    EventHistoryDTO.status.MISMATCH,
+                  )
+                    ? '?'
+                    : eventHistoryDTO.userScore}
+                </span>
               </div>
             </div>
             <div className="colon">
               <span>:</span>
             </div>
             <div className="opponent-side">
               <div className="opponent-score score">
-                <span>{eventHistoryDTO.opponentScore}</span>
+                <span>
+                  {eventHistoryDTO.status?.includes(
+                    EventHistoryDTO.status.MISMATCH,
+                  )
+                    ? '?'
+                    : eventHistoryDTO.opponentScore}
+                </span>
               </div>
               <div className="profile">
                 <div className="opponent-avatar">

frontend/sportsmatch-app/src/components/JoinEventComponent.tsx

@@ -49,7 +49,7 @@ export default function JoinEventComponent(p: JoinEventProps) {
               <p className="text-center">
                 You want to join <b>{p.event.sport}</b>
                 {' at ' +
-                  p.event.location +
+                  p.event.placeDTO?.name +
                   ' on ' +
                   date.toLocaleDateString('en', { month: 'long' }) +
                   ' ' +
@@ -90,7 +90,7 @@ export default function JoinEventComponent(p: JoinEventProps) {
               <div className="col-12">
                 <p className="join-event-message">
                   Your rank is too low/high to join <b>{p.event.sport}</b> at{' '}
-                  {p.event.location}
+                  {p.event.placeDTO?.name}
                 </p>
               </div>
             </div>

frontend/sportsmatch-app/src/components/Match.tsx

@@ -8,23 +8,42 @@ import {
   LuSettings2,
 } from 'react-icons/lu'
 import { Link } from 'react-router-dom'
+import { EventDTO } from '../generated/api/models/EventDTO'
+import { useEffect, useState } from 'react'
+import { ExSecuredEndpointService, OpenAPI, UserDTO } from '../generated/api'
 
 interface InProgressProps {
-  event: {
-    id: number
-    maxElo: number
-    minElo: number
-    dateEnd: string
-    dateStart: string
-    location: string
-    title: string
-    sport: string
-    playerOne: string
-    playerTwo?: string
-  }
+  event: EventDTO
 }
 
 function InProgress({ event }: InProgressProps) {
+  const [currentUser, setCurrentUser] = useState<UserDTO>()
+  useEffect(() => {
+    OpenAPI.TOKEN = localStorage.getItem('token')!
+    const fetchUserInfo = async () => {
+      setCurrentUser(
+        (await ExSecuredEndpointService.getUserMainPage()) as UserDTO,
+      )
+    }
+    fetchUserInfo()
+  }, [])
+
+  const eventDate = new Date(
+    parseInt(event.dateStart[0]),
+    parseInt(event.dateStart[1]),
+    parseInt(event.dateStart[2]),
+  )
+
+  const eventStartTime = () => {
+    const hour = event.dateStart[3]
+    const min = event.dateStart[4] === '0' ? '00' : event.dateStart[4]
+    return hour + ':' + (min.length === 1 ? min + '0' : min)
+  }
+  const eventEndTime = () => {
+    const hour = event.dateEnd[3]
+    const min = event.dateEnd[4] === '0' ? '00' : event.dateEnd[4]
+    return hour + ':' + (min.length === 1 ? min + '0' : min)
+  }
   return (
     <>
       <div className="container-fluid">
@@ -37,7 +56,7 @@ function InProgress({ event }: InProgressProps) {
               >
                 <LuSettings2 />
               </Link>
-              {event.playerTwo === null ? (
+              {event.player2Id === null ? (
                 <h1>
                   Matchmaking
                   <br /> in progress
@@ -51,25 +70,39 @@ function InProgress({ event }: InProgressProps) {
               <ul>
                 <li>
                   <LuSwords />{' '}
-                  {event.playerTwo === null
+                  {event.player2Id === null
                     ? 'Awaiting opponent...'
-                    : event.playerTwo}
+                    : event.player1Name === currentUser?.name
+                      ? event.player2Name
+                      : event.player1Name}
                 </li>
                 <li>
                   <LuMapPin />
-                  {event.location}
+                  {event.placeDTO?.name}
                 </li>
                 <li>
                   <LuMedal />
                   {event.minElo} - {event.maxElo}
                 </li>
                 <li>
                   <LuCalendarCheck />
-                  {event.dateStart}
+                  {eventDate.getDay() +
+                    '.' +
+                    eventDate.getMonth() +
+                    '.' +
+                    eventDate.getFullYear() +
+                    ', ' +
+                    eventStartTime()}
                 </li>
                 <li>
                   <LuCalendarX />
-                  {event.dateEnd}
+                  {eventDate.getDay() +
+                    '.' +
+                    eventDate.getMonth() +
+                    '.' +
+                    eventDate.getFullYear() +
+                    ', ' +
+                    eventEndTime()}
                 </li>
               </ul>
             </div>

frontend/sportsmatch-app/src/components/RateGameComponent.tsx

@@ -127,7 +127,7 @@ export default function RateGameComponent(p: Props) {
                   {myEvent.dateEnd[3]}:{myEvent.dateEnd[4]}
                 </span>
                 <br />
-                <span>{myEvent.location}</span>{' '}
+                <span>{myEvent.placeDTO?.name}</span>{' '}
               </>
             ) : (
               <div></div>