half game-list, half game-details view

src/Games/GameDetails.js

@@ -1,31 +1,34 @@
 import { useEffect, useState } from "react";
 import {GameService} from "../services/GameService";
-import { useParams } from 'react-router-dom';
 import { format } from 'date-fns';
+import { Link } from 'react-router-dom';
 import './GameDetails.scss'
 
-function GameDetails() {
-
-    const { gameId } = useParams();
+function GameDetails({gameId}) {
     const [game, setGame] = useState('');
     const [message, setMessage] = useState('');
-    const [date,setDate] = useState([]);
+    const [date, setDate] = useState([]);
     const [file, setFile] = useState();
 
+    const [download, setDownload] = useState('');
+
     useEffect(() => {
         const fetchGameData = async () => {
             let gr
+            setMessage('');
+            if (gameId === -1) {
+                setMessage('Select game to see it\'s details.')
+                return;
+            }
             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.');
             }
@@ -40,51 +43,63 @@ function GameDetails() {
         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");
+                throw new Error("Invalid date");
             }
 
             return [format(date, 'yyyy-MM-dd'), format(date, 'HH:mm:ss')];
-          } catch (error) {
+        } catch (error) {
             console.error("Error formatting timestamp:", error);
             return ["", ""];
-          }
-      }
-    console.log(file)
+        }
+    }
+
+    const onButtonClick = () => {
+        GameService.getGameFile(game.id)
+            .then((response) => {
+                console.log(response)
+            });
+        };
+
     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 className="game-info-container-scroll">
+                <div className="game-info-container">
+                    <h1>{game.gameFileName}</h1>
+                    <div className="article-content bold-text">
+                        <p>{game.interfaceDefinition}</p>
                     </div>
-                    <div className="game-info-col">
-                        <span><p className="bold-text">players</p></span>
-                        <p>{game.numbersOfPlayer}</p>
+                    <div className="article-content">
+                        <p>{game.gameInstructions}</p>
                     </div>
-                    <div className="game-info-col">
-                        <span><p className="bold-text">available</p></span>
-                        <p>{game.isAvailableForPlay ? "Yes" : "no"}</p>
+                    <div className="game-info-table article-content">
+                        <div className="game-info-col">
+                            <p className="bold-text">modification</p>
+                            <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 className="font-bold">
+                            <button onClick={onButtonClick}>
+                                Download
+                            </button>
+                        </div>
                     </div>
                 </div>
-                <div className="font-bold">
-                    {file ? 'łuuuuuuuuuuuu': 'no file'}
-                </div>
             </div>
         </>:<>
             <div className="font-bold error-message">

src/Games/GameDetails.scss

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

src/Games/GamesView.js

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import GameList from '../lists/GamesList';
+import GameDetails from './GameDetails';
+
+import './GamesView.scss';
+
+export default function GamesView() {
+    const [gameId, setGameId] = useState(-1);
+    return (
+        <>
+            <h1>Games</h1>
+            <div className="games-container">
+                <div className="game-list-container">
+                    <GameList setGameId={setGameId}/>
+                </div>
+                <div className="game-details-container">
+                    <GameDetails gameId={gameId}/>
+                </div>
+            </div>
+        </>
+    )
+}

src/Games/GamesView.scss

@@ -0,0 +1,15 @@
+.games-container {
+    display: grid;
+    grid-template-columns: 50% 50%;    
+
+    & > div {
+        background-color: #181818;
+        width: 90%;
+        justify-self: center;
+        height: 70vh;
+        overflow: hidden;
+        padding-bottom: 5px;
+
+        border-radius: 5px;
+    }
+}

src/forms/AddGameForm.js

@@ -1,17 +1,23 @@
 import './AddGameForm.scss'
 import './Form.scss'
-import React, {useState} from "react";
+import React, {useState, useRef} from "react";
 import {GameService} from "../services/GameService";
 
-function AddGameForm({isAuthenticated, user, login, logout}) {
+function AddGameForm() {
     const [name, setName] = useState('');
     const [description, setDescription] = useState('');
     const [file, setFile] = useState('');
     const [message, setMessage] = useState(true);
 
+    const fileInput = useRef(null);
+
     const handleSubmit = async (e) => {
         e.preventDefault();
 
+        const file = fileInput.current.files[0];
+        const body = new FormData();
+        body.append('BotFile', file);
+
         try {
             console.log(name, description)
             await GameService.addGameType(10, name, description, "string", true)
@@ -47,8 +53,8 @@ function AddGameForm({isAuthenticated, user, login, logout}) {
                         <textarea
                             id="description"
                             value={description}
-                            onChange={e => setDescription(e.target.value)}
                             maxLength="200"
+                            ref={fileInput}
                         />
 
                         <p style={{

src/index.js

@@ -4,7 +4,7 @@ import './index.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {createBrowserRouter, RouterProvider,} from "react-router-dom";
-import GamesList from "./lists/GamesList";
+import GamesView from "./Games/GamesView";
 import GameDetails from "./Games/GameDetails";
 import AddGameForm from "./forms/AddGameForm";
 import RegisterForm from "./forms/RegisterForm";
@@ -42,7 +42,7 @@ const router = createBrowserRouter([
     },
     {
         path: "/games",
-        element: <GamesList games={games}/>,
+        element: <GamesView />,
     },
     {
         path: "/games/details/:gameId",