From 649a9cc2d706915028897929f2f76d67d013b117 Mon Sep 17 00:00:00 2001
From: Stanleyowskiki <s.t.malinski@gmail.com>
Date: Sun, 9 Jun 2024 22:07:37 +0200
Subject: [PATCH] half game-list, half game-details view

---
 src/Games/GameDetails.js     | 85 +++++++++++++++++++++---------------
 src/Games/GameDetails.scss   | 81 +++++++++++++++++-----------------
 src/Games/GamesView.js       | 22 ++++++++++
 src/Games/GamesView.scss     | 15 +++++++
 src/forms/AddGameForm.js     | 12 +++--
 src/index.js                 |  4 +-
 src/lists/GamesList.js       | 54 +++++++++++++----------
 src/lists/GamesList.scss     | 19 ++++++++
 src/lists/List.scss          |  1 -
 src/lists/TournamentsList.js |  2 +-
 10 files changed, 189 insertions(+), 106 deletions(-)
 create mode 100644 src/Games/GamesView.js
 create mode 100644 src/Games/GamesView.scss
 create mode 100644 src/lists/GamesList.scss

diff --git a/src/Games/GameDetails.js b/src/Games/GameDetails.js
index 421d185..16c60de 100644
--- a/src/Games/GameDetails.js
+++ b/src/Games/GameDetails.js
@@ -1,20 +1,25 @@
 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);
@@ -22,10 +27,8 @@ function GameDetails() {
                 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">
diff --git a/src/Games/GameDetails.scss b/src/Games/GameDetails.scss
index 4e10d95..6cb72e5 100644
--- a/src/Games/GameDetails.scss
+++ b/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;    
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Games/GamesView.js b/src/Games/GamesView.js
new file mode 100644
index 0000000..92f6581
--- /dev/null
+++ b/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>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/Games/GamesView.scss b/src/Games/GamesView.scss
new file mode 100644
index 0000000..e802f6c
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/forms/AddGameForm.js b/src/forms/AddGameForm.js
index 039b4aa..3eca382 100644
--- a/src/forms/AddGameForm.js
+++ b/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={{
diff --git a/src/index.js b/src/index.js
index 3570061..f25b4ae 100644
--- a/src/index.js
+++ b/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",
diff --git a/src/lists/GamesList.js b/src/lists/GamesList.js
index c12f123..2dbaa47 100644
--- a/src/lists/GamesList.js
+++ b/src/lists/GamesList.js
@@ -1,53 +1,61 @@
 import './List.scss'
+import './GamesList.scss'
 import DeleteGameButton from './DeleteGameButton';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link} from 'react-router-dom';
 import { connect } from 'react-redux';
 import { login, logout } from '../User/store';
 import React, { useState, useEffect } from "react";
 import {GameService} from "../services/GameService";
-function GamesList({games, isAuthenticated, user, login, logout }) {
-
-    const navigate = useNavigate();
+import Paginator from '../elements/Paginator/Paginator';
+function GamesList({setGameId, isAuthenticated, user, login, logout }) {
     const [gamesList, setGamesList] = useState([]);
     const [message, setMessage] = useState('');
 
+    const [page, setPage] = useState(0);
+    const [maxPage, setMaxPage] = useState(0);
+
     const handleGameClick = (gameId) => {
-        navigate(`/games/details/${gameId}`);
+        setGameId(gameId);
     };
 
     useEffect(() => {
         const fetchGameData = async () => {
             try {
-                const gl = await GameService.getListOfGames(0, 10);
+                const gl = await GameService.getListOfGames(page, 10);
                 setGamesList(gl.data.data.page);
+                setMaxPage(gl.data.data.amountOfPages)
             } catch (e) {
                 setMessage('There was a problem with fetching game data.');
             }
         };
 
         fetchGameData();
-    }, []); 
+    }, [page]); 
 
     return (
-        <div className="list">
-            <h1>Games</h1>
-            <div className="menu-btns container-list">
-                <div className="item-list">
-                    {isAuthenticated && user.role === 'Admin' && (
-                        <div className="menu-btns list-element btn">
-                            <Link className="item-name add-btn color-primary-3" to="/games/add">Dodaj grę</Link>
-                        </div>
-                    )}
-                    {gamesList.map((game, index) => (
-                        <div key={index} className="menu-btns list-element btn">
-                            <button className="item-name color-primary-3 btn" onClick={() => handleGameClick(game.id)}>{game.gameFileName}</button>
-                          {isAuthenticated && user.role === 'Admin' && (
-                            <DeleteGameButton gameId={index} />
-                          )}
+        <div className="game-list-container">
+            <div className='game-list-container'>
+                <div className="list">
+                    <div className="menu-btns container-list">
+                        <div className="item-list">
+                            {isAuthenticated && user.role === 'Admin' && (
+                                <div className="menu-btns list-element btn">
+                                    <Link className="item-name add-btn color-primary-3" to="/games/add">Dodaj grę</Link>
+                                </div>
+                            )}
+                            {gamesList.map((game, index) => (
+                                <div key={index} className="menu-btns list-element btn">
+                                    <button className="item-name color-primary-3 btn" onClick={() => handleGameClick(game.id)}>{game.gameFileName}</button>
+                                    {isAuthenticated && user.role === 'Admin' && (
+                                    <DeleteGameButton gameId={index} />
+                                    )}
+                                </div>
+                            ))}
                         </div>
-                    ))}
+                    </div>
                 </div>
             </div>
+            <Paginator pageCount={maxPage} currentPage={page} handlePageClick={setPage}/>
             <p>{message}</p>
         </div>
     );
diff --git a/src/lists/GamesList.scss b/src/lists/GamesList.scss
new file mode 100644
index 0000000..598cdc8
--- /dev/null
+++ b/src/lists/GamesList.scss
@@ -0,0 +1,19 @@
+.game-list-container {
+    background-color: #181818;
+    
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 5px;
+    
+    .game-list-container {
+        
+        height: 97%;
+        padding: 5px;
+        .list {
+            overflow-y: scroll;
+        }
+    }
+    .paginator{
+        margin: auto 0;
+    }
+}
\ No newline at end of file
diff --git a/src/lists/List.scss b/src/lists/List.scss
index 0775e03..6aec78a 100644
--- a/src/lists/List.scss
+++ b/src/lists/List.scss
@@ -76,5 +76,4 @@
     ::-webkit-scrollbar-thumb:hover {
         background: #555;
     }
-
 }
\ No newline at end of file
diff --git a/src/lists/TournamentsList.js b/src/lists/TournamentsList.js
index 4c7f6ef..f0f8d7a 100644
--- a/src/lists/TournamentsList.js
+++ b/src/lists/TournamentsList.js
@@ -7,7 +7,7 @@ import React, {useState} from "react";
 import Paginator from "../elements/Paginator/Paginator"
 import TournamentFilterForm from '../forms/TournamentFilterForm';
 
-function TournamentsList({tournaments, isAuthenticated, user}) {
+function TournamentsList({isAuthenticated, user}) {
   const tournamentsPerPage = 8;
   const navigate = useNavigate();
   const [filteredTournaments, setFilteredTournaments] = useState([]);