From 0058278f0cea242b14447798a52ca0dc2f61b0d4 Mon Sep 17 00:00:00 2001
From: markpernia <134836290+markpernia@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:24:25 +0200
Subject: [PATCH 1/5] SMA-83: arranged frontend url and removed test routes
 (#62)

---
 frontend/sportsmatch-app/src/App.tsx          | 34 ++++++++-----------
 .../sportsmatch-app/src/pages/NotFound.tsx    |  2 +-
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/frontend/sportsmatch-app/src/App.tsx b/frontend/sportsmatch-app/src/App.tsx
index 45e785f4..f9090e3b 100644
--- a/frontend/sportsmatch-app/src/App.tsx
+++ b/frontend/sportsmatch-app/src/App.tsx
@@ -1,12 +1,10 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import './App.css'
 import Home from './pages/Home'
-import Test from './pages/Test'
 import Login from './pages/Login'
 import Signup from './pages/Signup'
 import Wrapper from './pages/AppWrapper'
 import { AllSportsList } from './pages/AllSportsList'
-import UserPage from './pages/UserPage'
 import Index from './pages/Index'
 import PrivateRoute from './components/PrivateRoute'
 import NotFound from './pages/NotFound'
@@ -20,32 +18,30 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route
-          path="/user/:id/ratings"
-          element={<Wrapper child={<UserRating />} />}
-        />
+        {/* public routes */}
         <Route path="/login" element={<Wrapper child={<Login />} />} />
         <Route path="/signup" element={<Wrapper child={<Signup />} />} />
         <Route
-          path="/allSports"
+          path="/"
+          element={
+            <Wrapper child={<Index />} acitvateCheckRatingModal={true} />
+          }
+        />
+        <Route
+          path="/all-sports"
           element={<Wrapper child={<AllSportsList />} />}
         />
+        <Route path="/*" element={<NotFound />}></Route>
+
+        {/* private routes */}
         <Route element={<PrivateRoute />}>
+          <Route path="/app" element={<Wrapper child={<Home />} />} />
+          <Route path="/user-info" element={<Wrapper child={<UserInfo />} />} />
           <Route
-            path="/index"
-            element={
-              <Wrapper child={<Index />} acitvateCheckRatingModal={true} />
-            }
+            path="/user/:id/ratings"
+            element={<Wrapper child={<UserRating />} />}
           />
-          <Route path="/user" element={<UserPage />}></Route>
-          <Route path="/user-info" element={<Wrapper child={<UserInfo />} />} />
         </Route>
-        <Route path="/test" element={<Test />}>
-          <Route index element={<Test />} />
-          <Route path=":testId" element={<Test />} />
-        </Route>
-        <Route path="/" element={<Wrapper child={<Home />} />} />
-        <Route path="/*" element={<NotFound />}></Route>
       </Routes>
     </BrowserRouter>
   )
diff --git a/frontend/sportsmatch-app/src/pages/NotFound.tsx b/frontend/sportsmatch-app/src/pages/NotFound.tsx
index ba68904e..7624187d 100644
--- a/frontend/sportsmatch-app/src/pages/NotFound.tsx
+++ b/frontend/sportsmatch-app/src/pages/NotFound.tsx
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom'
 import '../styles/Sport.css'
 
 export default function NotFound() {
-  const mainPageURL = '/mainpage'
+  const mainPageURL = '/'
   const navigate = useNavigate()
 
   return (

From 0b3c8616d4034c44d4681488e7d4aba31e6b340f Mon Sep 17 00:00:00 2001
From: markpernia <134836290+markpernia@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:24:56 +0200
Subject: [PATCH 2/5] Sma 85 make the let s play button on index page work
 (#63)

---
 frontend/sportsmatch-app/src/pages/Index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx
index 98fcb692..c124236e 100644
--- a/frontend/sportsmatch-app/src/pages/Index.tsx
+++ b/frontend/sportsmatch-app/src/pages/Index.tsx
@@ -109,6 +109,10 @@ export default function MainPage() {
     fetchUsersRank()
   })
 
+  const handleLetsPlay = () => {
+    navigate('/app')
+  }
+
   return (
     <>
       <div className="container-fluid">
@@ -118,7 +122,7 @@ export default function MainPage() {
               <h2>Find, Match, Play Now!</h2>
               <p>Your Next Challenge Awaits.</p>
               <label htmlFor="play-btn"></label>
-              <button>Let’s play!</button>
+              <button onClick={handleLetsPlay}>Let’s play!</button>
             </div>
           </div>
         </div>

From f91bfdfb7187b0484616ea71481378edc0adcc9e Mon Sep 17 00:00:00 2001
From: MatejFrnka <mat.frnka@gmail.com>
Date: Fri, 12 Apr 2024 18:02:23 +0200
Subject: [PATCH 3/5] SMA-89-Remove-String-location-from-EventDTO (#65)

---
 .../main/java/com/sportsmatch/dtos/EventDTO.java |  2 --
 .../src/components/JoinEventComponent.tsx        |  4 ++--
 .../src/components/RateGameComponent.tsx         |  2 +-
 .../src/components/SportEvent.test.tsx           | 16 +++++++++++-----
 .../src/components/SportEvent.tsx                |  2 +-
 .../src/generated/api/models/EventDTO.ts         |  3 ++-
 .../api/services/EventsControllerService.ts      |  7 +++++--
 frontend/sportsmatch-app/src/pages/Index.tsx     |  8 +++++---
 8 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java b/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java
index c04f925f..7309ddb0 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/EventDTO.java
+++ b/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
diff --git a/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx b/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx
index b657be82..b7b6f2ad 100644
--- a/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx
+++ b/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>
diff --git a/frontend/sportsmatch-app/src/components/RateGameComponent.tsx b/frontend/sportsmatch-app/src/components/RateGameComponent.tsx
index c84a053c..d39dff63 100644
--- a/frontend/sportsmatch-app/src/components/RateGameComponent.tsx
+++ b/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>
diff --git a/frontend/sportsmatch-app/src/components/SportEvent.test.tsx b/frontend/sportsmatch-app/src/components/SportEvent.test.tsx
index 6ee734b9..45987ec5 100644
--- a/frontend/sportsmatch-app/src/components/SportEvent.test.tsx
+++ b/frontend/sportsmatch-app/src/components/SportEvent.test.tsx
@@ -1,18 +1,24 @@
 import { render, screen } from '@testing-library/react'
 import SportEvent from './SportEvent'
+import { EventDTO } from '../generated/api'
 
 describe('SportEvent', async () => {
-  const mockEvent = {
+  const mockEvent: EventDTO = {
     id: 1,
     maxElo: 2000,
     minElo: 1800,
     dateEnd: '2024-01-27',
     dateStart: '2024-01-26',
-    location: 'Test Location',
+    placeDTO: {
+      name: 'Test Location',
+      address: 'address',
+      latitude: 51,
+      longitude: 30,
+    },
     title: 'Test Event',
     sport: 'Test Sport',
-    playerOne: 'Player One',
-    playerTwo: 'Player Two',
+    player1Name: 'Player One',
+    player2Name: 'Player Two',
   }
   it('renders the component with correct data', () => {
     render(<SportEvent event={mockEvent} />)
@@ -34,7 +40,7 @@ describe('SportEvent', async () => {
   })
 
   it('renders the component without playerTwo when it is not provided', () => {
-    const { playerTwo, ...mockEventWithoutPlayerTwo } = mockEvent
+    const { player2Id, ...mockEventWithoutPlayerTwo } = mockEvent
 
     render(<SportEvent event={mockEventWithoutPlayerTwo} />)
 
diff --git a/frontend/sportsmatch-app/src/components/SportEvent.tsx b/frontend/sportsmatch-app/src/components/SportEvent.tsx
index 9a638e6f..f7ea2d43 100644
--- a/frontend/sportsmatch-app/src/components/SportEvent.tsx
+++ b/frontend/sportsmatch-app/src/components/SportEvent.tsx
@@ -26,7 +26,7 @@ function SportEvent({ event }: { event: EventDTO }) {
             <div className="col left">
               <ul>
                 <li data-testid="luMapPin">
-                  <LuMapPin /> {event.location}
+                  <LuMapPin /> {event.placeDTO?.name}
                 </li>
                 <li data-testid="luMedal">
                   <LuMedal /> {event.minElo} - {event.maxElo}
diff --git a/frontend/sportsmatch-app/src/generated/api/models/EventDTO.ts b/frontend/sportsmatch-app/src/generated/api/models/EventDTO.ts
index 5f61ccd0..9b43b821 100644
--- a/frontend/sportsmatch-app/src/generated/api/models/EventDTO.ts
+++ b/frontend/sportsmatch-app/src/generated/api/models/EventDTO.ts
@@ -2,11 +2,11 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { PlaceDTO } from './PlaceDTO';
 export type EventDTO = {
     id?: number;
     dateStart: string;
     dateEnd: string;
-    location: string;
     minElo: number;
     maxElo: number;
     title: string;
@@ -15,5 +15,6 @@ export type EventDTO = {
     sport: string;
     player1Name?: string;
     player2Name?: string;
+    placeDTO?: PlaceDTO;
 };
 
diff --git a/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts b/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts
index ba66473e..99cc3069 100644
--- a/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts
+++ b/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts
@@ -91,17 +91,20 @@ export class EventsControllerService {
     }
     /**
      * @param requestEventDto
-     * @returns any OK
+     * @param pageable
+     * @returns EventDTO OK
      * @throws ApiError
      */
     public static getNearbyEvents(
         requestEventDto: RequestEventDTO,
-    ): CancelablePromise<Record<string, any>> {
+        pageable: Pageable,
+    ): CancelablePromise<Array<EventDTO>> {
         return __request(OpenAPI, {
             method: 'GET',
             url: '/api/v1/event/nearby',
             query: {
                 'requestEventDTO': requestEventDto,
+                'pageable': pageable,
             },
         });
     }
diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx
index c124236e..1bb7f56d 100644
--- a/frontend/sportsmatch-app/src/pages/Index.tsx
+++ b/frontend/sportsmatch-app/src/pages/Index.tsx
@@ -57,9 +57,11 @@ export default function MainPage() {
         const requestEventDTO: RequestEventDTO = {
           sportsName: selectedSports,
         }
-        const response =
-          await EventsControllerService.getNearbyEvents(requestEventDTO)
-        if (!Array.isArray(response) && response.length === 0) {
+        const response = await EventsControllerService.getNearbyEvents(
+          requestEventDTO,
+          {},
+        )
+        if (!Array.isArray(response)) {
           throw new Error('Failed to fetch event data')
         }
         const data: EventDTO[] = response as EventDTO[]

From 6984f618f37c77352e5136807283c9162f11f99a Mon Sep 17 00:00:00 2001
From: MatejFrnka <mat.frnka@gmail.com>
Date: Fri, 12 Apr 2024 18:02:51 +0200
Subject: [PATCH 4/5] Sma 90 endpoint api v1 event upcoming events returns 403
 no matter what (#67)

---
 .../java/com/sportsmatch/controllers/EventsController.java    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java b/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java
index fec05a1f..718493ef 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java
+++ b/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java
@@ -44,7 +44,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);
   }
@@ -69,7 +69,7 @@ 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,
+  public List<EventDTO> getNearbyEvents(@RequestParam RequestEventDTO requestEventDTO,
                                         final Pageable pageable) {
     return eventService.getNearbyEvents(requestEventDTO, pageable);
   }

From 4e1eff038712800b9b96c2d3df01caa72f430d19 Mon Sep 17 00:00:00 2001
From: Ivana Machacikova <131284389+ivamach@users.noreply.github.com>
Date: Fri, 12 Apr 2024 18:04:42 +0200
Subject: [PATCH 5/5] SMA-74: make history view and upcoming match work with
 the backend (#66)

---
 .../controllers/EventsController.java         | 13 ++-
 .../java/com/sportsmatch/dtos/SportDTO.java   |  4 +-
 .../com/sportsmatch/mappers/SportMapper.java  |  9 +-
 .../repositories/EventRepository.java         | 16 +--
 .../sportsmatch/services/EventService.java    | 17 +++-
 .../services/SportServiceImpTest.java         |  5 +-
 .../src/components/EventHistoryItem.tsx       | 51 +++++++++-
 .../sportsmatch-app/src/components/Match.tsx  | 69 +++++++++----
 .../src/generated/api/models/SportDTO.ts      |  1 +
 .../api/services/EventsControllerService.ts   | 22 ++++-
 frontend/sportsmatch-app/src/pages/Home.tsx   | 97 +++++++++++++++----
 .../src/styles/EventHistoryItem.css           |  2 +
 frontend/sportsmatch-app/src/styles/Match.css |  6 +-
 .../sportsmatch-app/src/styles/UserPage.css   |  4 -
 14 files changed, 249 insertions(+), 67 deletions(-)

diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java b/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java
index 718493ef..0bf39aca 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java
+++ b/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;
@@ -56,7 +57,7 @@ public ResponseEntity<?> getUpcomingEvents(@RequestParam 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);
   }
 
@@ -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);
+  }
 }
diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/SportDTO.java b/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/SportDTO.java
index a073448a..c00266f4 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/dtos/SportDTO.java
+++ b/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;
   }
 }
diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/mappers/SportMapper.java b/backend/sportsmatch/src/main/java/com/sportsmatch/mappers/SportMapper.java
index b14e50fe..1191d986 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/mappers/SportMapper.java
+++ b/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();
   }
 }
diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/repositories/EventRepository.java b/backend/sportsmatch/src/main/java/com/sportsmatch/repositories/EventRepository.java
index 2219ad85..7f6f89d2 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/repositories/EventRepository.java
+++ b/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);
+
+
 
 
   /**
diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/services/EventService.java b/backend/sportsmatch/src/main/java/com/sportsmatch/services/EventService.java
index 9c5f90b2..42ec53dc 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/services/EventService.java
+++ b/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());
+  }
 }
diff --git a/backend/sportsmatch/src/test/java/com/sportsmatch/services/SportServiceImpTest.java b/backend/sportsmatch/src/test/java/com/sportsmatch/services/SportServiceImpTest.java
index 6ac04b25..509d9dca 100644
--- a/backend/sportsmatch/src/test/java/com/sportsmatch/services/SportServiceImpTest.java
+++ b/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);
diff --git a/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx b/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
index 5f008a5e..342c5689 100644
--- a/frontend/sportsmatch-app/src/components/EventHistoryItem.tsx
+++ b/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,7 +54,13 @@ 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">
@@ -29,7 +68,13 @@ function EventHistoryItem({ eventHistoryDTO }: EventHistoryProps) {
             </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">
diff --git a/frontend/sportsmatch-app/src/components/Match.tsx b/frontend/sportsmatch-app/src/components/Match.tsx
index 4e55baf2..9a821fe5 100644
--- a/frontend/sportsmatch-app/src/components/Match.tsx
+++ b/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,13 +70,15 @@ 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 />
@@ -65,11 +86,23 @@ function InProgress({ event }: InProgressProps) {
                 </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>
diff --git a/frontend/sportsmatch-app/src/generated/api/models/SportDTO.ts b/frontend/sportsmatch-app/src/generated/api/models/SportDTO.ts
index 6f1929a0..c6658c6b 100644
--- a/frontend/sportsmatch-app/src/generated/api/models/SportDTO.ts
+++ b/frontend/sportsmatch-app/src/generated/api/models/SportDTO.ts
@@ -6,5 +6,6 @@ export type SportDTO = {
     name?: string;
     emoji?: string;
     backgroundUImageURL?: string;
+    id?: number;
 };
 
diff --git a/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts b/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts
index 99cc3069..bb4b26f0 100644
--- a/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts
+++ b/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts
@@ -73,6 +73,16 @@ export class EventsControllerService {
             },
         });
     }
+    /**
+     * @returns EventDTO OK
+     * @throws ApiError
+     */
+    public static getUpcomingMatches(): CancelablePromise<Array<EventDTO>> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/v1/event/upcoming-matches',
+        });
+    }
     /**
      * @param sportsIds
      * @returns any OK
@@ -109,18 +119,24 @@ export class EventsControllerService {
         });
     }
     /**
-     * @param pageable
+     * @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 EventHistoryDTO OK
      * @throws ApiError
      */
     public static getEventsHistory(
-        pageable: Pageable,
+        page?: number,
+        size: number = 20,
+        sort?: Array<string>,
     ): CancelablePromise<Array<EventHistoryDTO>> {
         return __request(OpenAPI, {
             method: 'GET',
             url: '/api/v1/event/event-history',
             query: {
-                'pageable': pageable,
+                'page': page,
+                'size': size,
+                'sort': sort,
             },
         });
     }
diff --git a/frontend/sportsmatch-app/src/pages/Home.tsx b/frontend/sportsmatch-app/src/pages/Home.tsx
index 5a9a17d0..bcd5206b 100644
--- a/frontend/sportsmatch-app/src/pages/Home.tsx
+++ b/frontend/sportsmatch-app/src/pages/Home.tsx
@@ -1,31 +1,86 @@
 import Match from '../components/Match'
-import SportEvent from '../components/SportEvent'
 import EventHistoryItem from '../components/EventHistoryItem'
+import { useEffect, useState } from 'react'
+import {
+  EventDTO,
+  EventHistoryDTO,
+  EventsControllerService,
+  OpenAPI,
+} from '../generated/api'
+import { Link } from 'react-router-dom'
+import '../styles/UserPage.css'
 
 function Home() {
-  const sampleEvent = {
-    id: 1,
-    maxElo: 2000,
-    minElo: 1200,
-    dateEnd: '2024-05-02',
-    dateStart: '2024-05-01',
-    location: 'Prague, Stadium A',
-    title: 'Badminton match',
-    sport: 'Badminton',
-    playerOne: 'johndoe87',
-    playerTwo: 'jess_ward',
-  }
-  const sampleHistoryDTO = {
-    userScore: 1,
-    opponentScore: 2,
-    opponent: { name: 'Opponent' },
-  }
+  const [eventsHistory, setEventsHistory] = useState<EventHistoryDTO[]>([])
+  const [upcomingMatch, setUpcomingMatch] = useState<EventDTO[]>([])
+
+  useEffect(() => {
+    OpenAPI.TOKEN = localStorage.getItem('token')!
+    const fetchUpcomingMatch = async () => {
+      setUpcomingMatch(await EventsControllerService.getUpcomingMatches())
+    }
+    fetchUpcomingMatch()
+  }, [])
+
+  useEffect(() => {
+    OpenAPI.TOKEN = localStorage.getItem('token')!
+    const fetchEvents = async () => {
+      const response = await EventsControllerService.getEventsHistory(0, 3, [
+        'event.dateEnd,desc',
+      ])
+      if (response && response.length > 0) {
+        setEventsHistory(response)
+      }
+    }
+    fetchEvents()
+  }, [])
 
   return (
     <>
-      <Match event={sampleEvent} />
-      <SportEvent event={sampleEvent} />
-      <EventHistoryItem eventHistoryDTO={sampleHistoryDTO} />
+      <div className="container-sm">
+        <div className="user-page">
+          {upcomingMatch.length === 0 ? <hr /> : <></>}
+          <div className="row">
+            {upcomingMatch.length === 0 ? (
+              <div className="match-wrapper">
+                <div className="col">
+                  <p>No upcoming match</p>
+                  <Link to="#">Find or Host a Match</Link>
+                </div>
+              </div>
+            ) : (
+              <Match event={upcomingMatch[0]} />
+            )}
+          </div>
+          <div className="view-wrapper">
+            {upcomingMatch.length === 0 ? <hr /> : <></>}
+            <div className="row">
+              <div className="col">
+                <p>History</p>
+              </div>
+              <div className="col view">
+                <Link to="#">View all</Link>
+              </div>
+            </div>
+          </div>
+          <div className="history-wrapper">
+            <div className="row">
+              <div className="col">
+                {upcomingMatch.length === 0 ? (
+                  <p>No match history</p>
+                ) : (
+                  eventsHistory.map((e, index) => (
+                    <EventHistoryItem key={index} eventHistoryDTO={e} />
+                  ))
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="nearby-wrapper">
+            <p>Nearby</p>
+          </div>
+        </div>
+      </div>
     </>
   )
 }
diff --git a/frontend/sportsmatch-app/src/styles/EventHistoryItem.css b/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
index bd451d3f..6a0f2ad0 100644
--- a/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
+++ b/frontend/sportsmatch-app/src/styles/EventHistoryItem.css
@@ -26,6 +26,8 @@
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
     border: 2px solid var(--sm-secondary-orange);
     border-radius: 10px;
+    margin-top: 4px;
+    margin-bottom: 4px;
 }
 
 .user-side {
diff --git a/frontend/sportsmatch-app/src/styles/Match.css b/frontend/sportsmatch-app/src/styles/Match.css
index b4abb4e8..968d7383 100644
--- a/frontend/sportsmatch-app/src/styles/Match.css
+++ b/frontend/sportsmatch-app/src/styles/Match.css
@@ -12,7 +12,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 0.563em;
+  padding: 0.563em;  
 }
 
 .match .col ul {
@@ -22,6 +22,10 @@
   color: #fff;
 }
 
+.match li{
+  color: #fff;
+}
+
 .match .col svg {
   margin-right: 0.5em;
 }
diff --git a/frontend/sportsmatch-app/src/styles/UserPage.css b/frontend/sportsmatch-app/src/styles/UserPage.css
index a8056cc3..bd6cd07f 100644
--- a/frontend/sportsmatch-app/src/styles/UserPage.css
+++ b/frontend/sportsmatch-app/src/styles/UserPage.css
@@ -1,7 +1,3 @@
-.user-page {
-  margin-top: 64px;
-}
-
 .user-page a {
   font-size: 1em;
   color: var(--sm-orange);