User Bar (#38)

Co-authored-by: Mikołaj Burdzy <[email protected]>

package.json

@@ -20,7 +20,7 @@
     "sass": "^1.69.5",
     "web-vitals": "^2.1.4"
   },
-  "proxy": "http://localhost:8080/",
+  "proxy": "http://10.242.93.198:8080/",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

src/App.js

@@ -1,10 +1,13 @@
 import './App.scss'
 import User from "./User/User";
 import {Link} from "react-router-dom";
+import UserButtons from './User/UserButtons';
 
 function App() {
     return (
         <div className="app">
+            <UserButtons/>
+
             <div className="title">
                 <h1>Bot-Wars</h1>
                 <div className="login-btns">

src/Tournaments/TournamentNav.js

@@ -8,16 +8,6 @@ import { connect } from 'react-redux';
 function TournamentNav({ isAuthenticated }) {
     return (
         <>
-            <div className="user-info-strip">
-                <div className="userData">
-                    <Link to="/">  <span className="username">Username</span> </Link>
-                    <span className="score">1234</span>
-                </div>
-                <div className="icons">
-                    {/* <i className="icon-settings"></i> */}
-                    <span className="score">set</span>
-                </div>
-            </div>
             <nav className="tournament-nav">
                 <NavLink exact className="menu-btn" activeClassName="active" to="/tournaments/home">
                     <button className="btn">Tournaments</button>

src/Tournaments/TournamentsLeaderboard.js

@@ -1,13 +1,14 @@
 import TournamentNav from './TournamentNav';
 import { connect } from 'react-redux';
+import UserButtons from "../User/UserButtons";
+import Leaderboard from "./leaderboard";
 
 function TournamentsLeaderboard({ tournaments, isAuthenticated }) {
     return (
         <div className="tournaments-container">
-
-            <TournamentNav /> 
-
-            <h1>Leaderboard</h1>            
+            <UserButtons></UserButtons>
+            <TournamentNav />
+            <Leaderboard></Leaderboard>
         </div>
     );
 }

src/User/UserButtons.js

@@ -0,0 +1,47 @@
+import '../App.scss'
+import './UserButtons.scss';
+import logoutIcon from '../resources/logout.svg';
+import userIcon from '../resources/user.svg';
+import settingsIcon from '../resources/settings.svg';
+import { connect } from 'react-redux';
+import { login, logout } from './actions';
+import {Link} from "react-router-dom";
+
+function UserButtons({ isAuthenticated, user, login, logout }) {
+    //takie chwilowe bo nie ma jak z bakcu pobrać loginu i elo bo oba są querowane po player_id którego nie mamy, issue do omówienia na spotkaniu
+    const huj = '{'
+    const huj1 = '}'
+    return (
+        <>
+        {isAuthenticated ? (
+        <div className="user-bar">
+          <div>{huj}Login{huj1} {huj}Elo{huj1}</div>
+          <div className="user-buttons-container">
+            <Link to="/settings">
+                <img className="user-button setting-button" src={settingsIcon} alt="S"></img>
+            </Link>
+            <Link to="/player/1">
+                <img className="user-button" src={userIcon} alt="U"></img>
+            </Link>
+            <Link to="/">
+                <img className="user-button" src={logoutIcon} alt="U" onClick={logout}></img>
+            </Link>
+          </div>
+        </div>
+        ) : (
+        <>
+
+        </>
+        )}
+        </>
+    );
+  }
+
+const mapStateToProps = (state) => ({
+    isAuthenticated: state.isAuthenticated,
+    user: state.user,
+  });
+
+const mapDispatchToProps = {login,logout,};
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserButtons);

src/User/UserButtons.scss

@@ -0,0 +1,34 @@
+.user-bar{
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 3px solid #24da00;
+    width: 100vw;
+    margin-left: -15px;
+    padding: 10px 25px 15px 20px;
+    align-items: center;
+
+    .user-buttons-container{
+        display: flex;
+        justify-content: flex-end;
+        a{    display: flex;
+            align-items: center;}
+
+        .user-button{
+            width: 65px;
+            height: 65px;
+            padding: 6px;
+            margin-right: 10px;
+            border-radius: 50%;
+            border: 2px solid #24da00;
+            text-align: center;
+        }
+        .setting-button{
+            padding:0;
+        }
+    }
+}
+@media (max-width:578px) {
+    .user-bar{flex-direction: column;
+    gap: 20px;
+    }
+}

src/lists/TournamentsList.js

@@ -1,18 +1,15 @@
 import './TournamentList.scss';
 import DeleteTournamentButton from './DeleteTournamentButton';
 import TournamentNav from '../Tournaments/TournamentNav';
-import { useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+import UserButtons from '../User/UserButtons';
+import {Link, useNavigate} from 'react-router-dom';
 import { connect } from 'react-redux';
 import { TournamentService } from "../services/TournamentService";
 import React, { useState, useEffect } from "react";
 
-
-
 function TournamentsList({ tournaments, isAuthenticated }) {
     const navigate = useNavigate();
     const currentDate = new Date();
-
     const [tournamentList, setTournamentList] = useState([]);
     const [message, setMessage] = useState('');
 
@@ -54,37 +51,28 @@ function TournamentsList({ tournaments, isAuthenticated }) {
 
     return (
         <div className="tournaments-container">
-
+            <UserButtons/>
             <TournamentNav/>
-
-
             <div className="tournaments-box">
                 <h1>Upcoming Tournaments</h1>
-
                 {isAuthenticated && (
                         <Link className="menu-btn" activeClassName="active" to="/tournaments/add">
-
                             <button className="btn">Add Your Tournament</button>
-
                         </Link>
-
                     )}
-
                 <div className="tournament-headers">
                     <span className="header-detail">Name</span>
                     <span className="header-detail">Author</span>
                     <span className="header-detail">Date</span>
                     <span className="header-detail">Action</span>
                 </div>
-
                 <div className="tournaments-content">
                     {upcomingTournaments.map(tournament => (
                         <div>
                         <TournamentItem key={tournament.id} tournament={tournament} />
                         <DeleteTournamentButton key={tournament.id} />
                         </div>
                     ))}
-
                     {upcomingTournaments.map(tournament => (
                         <TournamentItem key={tournament.id} tournament={tournament} />
                     ))}
@@ -96,16 +84,12 @@ function TournamentsList({ tournaments, isAuthenticated }) {
                     <span className="header-detail">Date</span>
                     <span className="header-detail">Action</span>
                 </div>
-
-
-
                 <div className="tournaments-content">
                     {pastTournaments.map(tournament => (
                         <TournamentItem key={tournament.id} tournament={tournament} />
                     ))}
                 </div>
             </div>
-
             <p>{message}</p>
         </div>
     );