SMA-: 33 implement match history item

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

@@ -1,6 +1,7 @@
 package com.sportsmatch.controllers;
 
 import com.sportsmatch.dtos.EventDTO;
+import com.sportsmatch.dtos.EventHistoryDTO;
 import com.sportsmatch.models.Event;
 import com.sportsmatch.services.EventService;
 import jakarta.validation.Valid;
@@ -45,4 +46,11 @@ public ResponseEntity<?> getUpcomingEvents(@RequestBody List<Long> sportsIds) {
     List<EventDTO> listOfEvents = eventService.getEventsBySports(sportsIds);
     return ResponseEntity.ok().body(listOfEvents);
   }
+
+  // todo this is placeholder for frontend - it doesn't do anything yet
+  @GetMapping("/event-history")
+  public EventHistoryDTO getEventsHistory() {
+    EventHistoryDTO eventHistoryDTO = new EventHistoryDTO();
+    return eventHistoryDTO;
+  }
 }

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

@@ -0,0 +1,17 @@
+package com.sportsmatch.dtos;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class EventHistoryDTO {
+
+  private Integer userScore;
+  private Integer opponentScore;
+  private UserDTO opponent;
+}

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

@@ -0,0 +1,15 @@
+package com.sportsmatch.dtos;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class UserDTO {
+
+  private String name;
+}

frontend/sportsmatch-app/src/App.css

@@ -1,3 +1,7 @@
+body{
+  font-family: 'Inter', sans-serif;
+}
+
 .App {
   text-align: center;
 }

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

@@ -0,0 +1,11 @@
+import '../styles/Avatar.css'
+
+interface AvatarProps {
+  src: string
+}
+
+const Avatar: React.FC<AvatarProps> = ({ src }) => (
+  <div className="avatar" style={{ backgroundImage: `url(${src}` }}></div>
+)
+
+export default Avatar

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

@@ -0,0 +1,48 @@
+import { EventHistoryDTO } from '../generated/api'
+import '../styles/EventHistoryItem.css'
+import Avatar from './Avatar'
+
+interface EventHistoryProps {
+  eventHistoryDTO: EventHistoryDTO
+}
+
+function EventHistoryItem({ eventHistoryDTO }: EventHistoryProps) {
+  return (
+    <>
+      <div className="container-sm">
+        <div className="event-history-item">
+          <div className="match-status">VICTORY (uncorfirmed)</div>
+          <div className="user-side">
+            <div className="profile">
+              <div className="user-avatar">
+                <Avatar src="pictures/michael-dam-mEZ3PoFGs_k-unsplash.jpg" />
+              </div>
+              <div className="user-name">You</div>
+            </div>
+            <div className="user-score score">
+              <span>{eventHistoryDTO.userScore}</span>
+            </div>
+          </div>
+          <div className="colon">
+            <span>:</span>
+          </div>
+          <div className="opponent-side">
+            <div className="opponent-score score">
+              <span>{eventHistoryDTO.opponentScore}</span>
+            </div>
+            <div className="profile">
+              <div className="opponent-avatar">
+                <Avatar src="pictures/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg" />
+              </div>
+              <div className="opponent-name">
+                {eventHistoryDTO.opponent?.name}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default EventHistoryItem

frontend/sportsmatch-app/src/generated/api/index.ts

@@ -9,8 +9,13 @@ export type { OpenAPIConfig } from './core/OpenAPI';
 
 export type { AuthRequestDTO } from './models/AuthRequestDTO';
 export type { EventDTO } from './models/EventDTO';
+export type { EventHistoryDTO } from './models/EventHistoryDTO';
+export type { Pageable } from './models/Pageable';
+export type { SportDTO } from './models/SportDTO';
+export type { UserDTO } from './models/UserDTO';
 
 export { EventsControllerService } from './services/EventsControllerService';
 export { ExSecuredEndpointService } from './services/ExSecuredEndpointService';
 export { LoginService } from './services/LoginService';
 export { RegisterService } from './services/RegisterService';
+export { SportControllerService } from './services/SportControllerService';

frontend/sportsmatch-app/src/generated/api/models/EventHistoryDTO.ts

@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { UserDTO } from './UserDTO';
+export type EventHistoryDTO = {
+    userScore?: number;
+    opponentScore?: number;
+    opponent?: UserDTO;
+};
+

frontend/sportsmatch-app/src/generated/api/models/Pageable.ts

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type Pageable = {
+    page?: number;
+    size?: number;
+    sort?: Array<string>;
+};
+

frontend/sportsmatch-app/src/generated/api/models/SportDTO.ts

@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type SportDTO = {
+    name?: string;
+};
+

frontend/sportsmatch-app/src/generated/api/models/UserDTO.ts

@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type UserDTO = {
+    name?: string;
+};
+

frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts

@@ -3,6 +3,7 @@
 /* tslint:disable */
 /* eslint-disable */
 import type { EventDTO } from '../models/EventDTO';
+import type { EventHistoryDTO } from '../models/EventHistoryDTO';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
@@ -70,4 +71,14 @@ export class EventsControllerService {
             },
         });
     }
+    /**
+     * @returns EventHistoryDTO OK
+     * @throws ApiError
+     */
+    public static getEventsHistory(): CancelablePromise<EventHistoryDTO> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/v1/event/event-history',
+        });
+    }
 }

frontend/sportsmatch-app/src/generated/api/services/SportControllerService.ts

@@ -0,0 +1,27 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { Pageable } from '../models/Pageable';
+import type { SportDTO } from '../models/SportDTO';
+import type { CancelablePromise } from '../core/CancelablePromise';
+import { OpenAPI } from '../core/OpenAPI';
+import { request as __request } from '../core/request';
+export class SportControllerService {
+    /**
+     * @param pageable
+     * @returns SportDTO OK
+     * @throws ApiError
+     */
+    public static getSports(
+        pageable: Pageable,
+    ): CancelablePromise<Array<SportDTO>> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/v1/sports/all',
+            query: {
+                'pageable': pageable,
+            },
+        });
+    }
+}

frontend/sportsmatch-app/src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import Match from '../components/Match'
 import SportEvent from '../components/SportEvent'
+import EventHistoryItem from '../components/EventHistoryItem'
 
 function Home() {
   const sampleEvent = {
@@ -14,11 +15,17 @@ function Home() {
     playerOne: 'johndoe87',
     playerTwo: 'jess_ward',
   }
+  const sampleHistoryDTO = {
+    userScore: 1,
+    opponentScore: 2,
+    opponent: { name: 'Opponent' },
+  }
 
   return (
     <>
       <Match event={sampleEvent} />
       <SportEvent event={sampleEvent} />
+      <EventHistoryItem eventHistoryDTO={sampleHistoryDTO} />
     </>
   )
 }

frontend/sportsmatch-app/src/styles/Avatar.css

@@ -0,0 +1,9 @@
+.avatar {
+    width: 100%;
+    height: 100%;
+    border: 2px solid #FC4C02;
+    border-radius: 50%;
+    background-size: cover;
+    background-position: center center;
+    object-fit: cover;
+}

frontend/sportsmatch-app/src/styles/EventHistoryItem.css

@@ -0,0 +1,107 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
+
+
+.colon {
+    display: grid;
+    color: #FC4C02;
+    font-weight: bold;
+    font-size: 16px;
+    text-align: center;
+    grid-column: 2;
+    padding: 9px 9px 0 9px;
+    height: 41px;
+}
+
+.colon span {
+    margin: auto;
+}
+
+.event-history-item {
+    display: grid;
+    grid-template-columns: 8fr 0.5fr 8fr;
+    min-width: 361px;
+    min-height: 106px;
+    margin: 16px;
+    font-size: 10px;
+    background-color: #F7F7F7;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
+    border: 2px solid #FC4C02;
+    border-radius: 10px;
+}
+
+.user-side {
+    grid-column: 1;
+    display: grid;
+    grid-template-columns: 3fr 1fr 1fr;
+    padding: 9px 9px 0 9px;
+    text-align: center;
+    grid-template-rows: 2fr 1fr;
+}
+
+.opponent-side {
+    grid-column: 3;
+    display: grid;
+    grid-template-columns: 1fr 1fr 3fr;
+    padding: 9px 9px 0 9px;
+    text-align: center;
+    grid-template-rows: 2fr 1fr;
+}
+
+.score {
+    height: 35px;
+    color: #FC4C02;
+    font-weight: bold;
+    font-size: 16px;
+    grid-row: 1;
+    display: grid;
+}
+
+.score span {
+    margin: auto 0;
+}
+
+.user-score {
+    grid-column: 3;
+    text-align: right;
+}
+
+.opponent-score {
+    grid-column: 1;
+    text-align: left;
+}
+
+.profile {
+    grid-column: 2;
+    color: #FC4C02;
+    margin: auto;
+}
+.user-name {
+    grid-row: 2;
+}
+
+.opponent-name {
+    grid-row: 2;
+}
+
+.user-avatar {
+    width: 35px;
+    height: 35px;
+    grid-row: 1;
+}
+
+.opponent-avatar {
+    width: 35px;
+    height: 35px;
+    grid-row: 1;
+    margin: auto;
+}
+
+.match-status {
+    color: #FC4C02;
+    font-weight: bold;
+    font-size: 12px;;
+    position: relative;
+    padding: 4px 4px 8px 8px;
+    letter-spacing: 10%;
+}
+