Game details page created

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-.idea/
+.idea/
+.build/

package.json

@@ -7,11 +7,12 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.5",
+    "date-fns": "^3.6.0",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-paginate": "^8.2.0",
     "react-image-picker-editor": "^1.3.3",
+    "react-paginate": "^8.2.0",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.18.0",
     "react-scripts": "^5.0.1",

src/Games/GameDetails.js

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import {GameService} from "../services/GameService";
+import { useParams } from 'react-router-dom';
+import { format } from 'date-fns';
+import './GameDetails.scss'
+
+function GameDetails() {
+
+    const { gameId } = useParams();
+    const [game, setGame] = useState('');
+    const [message, setMessage] = useState('');
+    const [date,setDate] = useState([]);
+    const [file, setFile] = useState();
+
+    useEffect(() => {
+        const fetchGameData = async () => {
+            let gr
+            try {
+                gr = await GameService.getGame(gameId);
+                setGame(gr.data.data);
+            } catch (e) {
+                setMessage('There was a problem with fetching match data.');
+            }
+            try {
+                console.log(game.gameFileName)
+                const date = formatTimestamp(gr.data.data.lastModification);
+                setDate(date);
+                console.log()
+            } catch (e) {
+                console.log('There was a problem with fetching date.');
+            }
+            try {
+                const gf = await GameService.getGameFile(gr.data.data.fileId);
+                setFile(gf.data.data);
+            } catch (e) {
+                console.log('There was a problem with fetching files.');
+            }
+        };
+
+        fetchGameData();
+    },[gameId, game.gameFileName]);
+
+    function formatTimestamp(timestamp) {
+        try {
+            const normalizedTimestamp = timestamp.replace(/\.\d{3,}/, match => match.slice(0, 4));
+            const date = new Date(normalizedTimestamp);
+
+            if (isNaN(date.getTime())) {
+              throw new Error("Invalid date");
+            }
+
+            return [format(date, 'yyyy-MM-dd'), format(date, 'HH:mm:ss')];
+          } catch (error) {
+            console.error("Error formatting timestamp:", error);
+            return ["", ""];
+          }
+      }
+    console.log(file)
+    return (
+        message.length === 0 ?
+        <>
+            <div className="game-info-container">
+                <h1>{game.gameFileName}</h1>
+                <div className="article-content bold-text">
+                    <p>{game.interfaceDefinition}</p>
+                </div>
+                <div className="article-content">
+                    <p>{game.gameInstructions}</p>
+                </div>
+                <div className="game-info-table article-content">
+                    <div className="game-info-col">
+                        <span><p className="bold-text">modification</p></span>
+                        <p>{date[0]}</p>
+                        <p>{date[1]}</p>
+                    </div>
+                    <div className="game-info-col">
+                        <span><p className="bold-text">players</p></span>
+                        <p>{game.numbersOfPlayer}</p>
+                    </div>
+                    <div className="game-info-col">
+                        <span><p className="bold-text">available</p></span>
+                        <p>{game.isAvailableForPlay ? "Yes" : "no"}</p>
+                    </div>
+                </div>
+                <div className="font-bold">
+                    {file ? 'łuuuuuuuuuuuu': 'no file'}
+                </div>
+            </div>
+        </>:<>
+            <div className="font-bold error-message">
+                <p>{message}</p>
+            </div>
+        </>
+    );
+}
+
+export default GameDetails;
+
+
+

src/Games/GameDetails.scss

@@ -0,0 +1,47 @@
+.game-info-container{
+    margin:auto;
+    max-width: 80%;
+
+    .game-info-table{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        height: 100%;
+        justify-content: space-between;
+    }
+
+    .article-content{
+        border: 3px solid black;
+        padding: 1.5% 5%;
+        margin: 20px;
+    }
+
+    .bold-text{
+        font-weight: bold;
+        font-size: 0.9em;
+        font-family: Arial, Helvetica, sans-serif;
+        text-shadow: none;
+        letter-spacing: 1px;
+        color: rgb(57, 185, 31);
+    }
+
+    .game-info-col{
+        span > p{ 
+            margin-bottom: 30px;
+        }
+        p{
+            text-align: center;
+        }
+    }
+
+}
+
+.error-message{
+    display:flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+     padding-top: 23% ;
+    margin-top:auto;
+    margin-bottom:auto;
+}

src/Tournaments/TournamentNav.js

@@ -1,6 +1,6 @@
 import './TournamentNav.scss';
 import React from "react";
-import { NavLink, Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { login, logout } from '../User/store';
 import { connect } from 'react-redux';
 

src/User/ProfileView/ProfileView.css

@@ -1,4 +1,3 @@
-
 .main-container {
     display: grid;
     grid-template-columns: 20% 80%;
@@ -103,4 +102,4 @@ p {
 button {
     width: 100%;
     padding: 10px;
-}
+}