Merge branch 'feature/lobby-ui'

src/App.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Header from "./components/views/Header";
 import AppRouter from "./components/routing/routers/AppRouter";
 
 /**
@@ -11,7 +10,7 @@ import AppRouter from "./components/routing/routers/AppRouter";
 const App = () => {
   return (
     <div>
-      <Header height="100" />
+
       <AppRouter />
     </div>
   );

src/components/routing/routeProtectors/GameGuard.js → src/components/routing/routeProtectors/LobbyGuard.js

@@ -6,12 +6,12 @@ import PropTypes from "prop-types";
  * routeProtectors interfaces can tell the router whether or not it should allow navigation to a requested route.
  * They are functional components. Based on the props passed, a route gets rendered.
  * In this case, if the user is authenticated (i.e., a token is stored in the local storage)
- * <Outlet /> is rendered --> The content inside the <GameGuard> in the App.js file, i.e. the user is able to access the main app.
+ * <Outlet /> is rendered --> The content inside the <LobbyGuard> in the App.js file, i.e. the user is able to access the main app.
  * If the user isn't authenticated, the components redirects to the /login screen
  * @Guard
  * @param props
  */
-export const GameGuard = () => {
+export const LobbyGuard = () => {
   if (localStorage.getItem("token")) {
 
     return <Outlet />;
@@ -20,6 +20,6 @@ export const GameGuard = () => {
   return <Navigate to="/login" replace />;
 };
 
-GameGuard.propTypes = {
+LobbyGuard.propTypes = {
   children: PropTypes.node
 };

src/components/routing/routeProtectors/LoginGuard.js

@@ -13,7 +13,7 @@ export const LoginGuard = () => {
     return <Outlet />;
   }
 
-  return <Navigate to="/game" replace />;
+  return <Navigate to="/lobby" replace />;
 };
 
 LoginGuard.propTypes = {

src/components/routing/routers/AppRouter.js

@@ -1,7 +1,7 @@
 import React from "react";
 import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
-import {GameGuard} from "../routeProtectors/GameGuard";
-import GameRouter from "./GameRouter";
+import {LobbyGuard} from "../routeProtectors/LobbyGuard";
+import LobbyRouter from "./LobbyRouter";
 import {LoginGuard} from "../routeProtectors/LoginGuard";
 import Register from "../../views/Register";
 import Login from "../../views/Login";
@@ -11,19 +11,19 @@ import EditProfile from "../../views/Editprofile";
 /**
  * Main router of your application.
  * In the following class, different routes are rendered. In our case, there is a Login Route with matches the path "/login"
- * and another Router that matches the route "/game".
+ * and another Router that matches the route "/lobby".
  * The main difference between these two routes is the following:
  * /login renders another component without any sub-route
- * /game renders a Router that contains other sub-routes that render in turn other react components
+ * /lobby renders a Router that contains other sub-routes that render in turn other react components
  * Documentation about routing in React: https://reactrouter.com/en/main/start/tutorial 
  */
 const AppRouter = () => {
   return (
     <BrowserRouter>
       <Routes>
 
-        <Route path="/game/*" element={<GameGuard />}>
-          <Route path="/game/*" element={<GameRouter base="/game"/>} />
+        <Route path="/lobby/*" element={<LobbyGuard />}>
+          <Route path="/lobby/*" element={<LobbyRouter base="/lobby"/>} />
         </Route>
 
         <Route path="/login" element={<LoginGuard />}>
@@ -35,20 +35,18 @@ const AppRouter = () => {
         </Route>
 
         {/* guard to user profile page */}
-        <Route path="/user/:id" element={<GameGuard />}>
+        <Route path="/user/:id" element={<LobbyGuard />}>
           <Route index element={<Profile />} />
         </Route>
 
         {/*no guard for now*/}
-        <Route path="/rooms/:id" element={<Gameroom />} />
-
-
-        <Route path="/editprofile" element={<GameGuard />}>
+
+        <Route path="/editprofile" element={<LobbyGuard />}>
           <Route index element={<EditProfile />} />
         </Route>
 
         <Route path="/" element={
-          <Navigate to="/game" replace />
+          <Navigate to="/lobby" replace />
         }/>
 
       </Routes>

src/components/routing/routers/GameRouter.js → src/components/routing/routers/LobbyRouter.js

@@ -1,16 +1,16 @@
 import React from "react";
 import {Navigate, Route, Routes} from "react-router-dom";
-import Game from "../../views/Game";
+import Lobby from "../../views/Lobby";
 import PropTypes from "prop-types";
 
-const GameRouter = () => {
+const LobbyRouter = () => {
   return (
     <div style={{display: "flex", flexDirection: "column"}}>
       <Routes>
 
-        <Route path="" element={<Game />} />
+        <Route path="" element={<Lobby />} />
 
-        <Route path="dashboard" element={<Game />} />
+        <Route path="dashboard" element={<Lobby />} />
 
         <Route path="*" element={<Navigate to="dashboard" replace />} />
 
@@ -23,8 +23,8 @@ const GameRouter = () => {
 * Don't forget to export your component!
  */
 
-GameRouter.propTypes = {
+LobbyRouter.propTypes = {
   base: PropTypes.string
 }
 
-export default GameRouter;
+export default LobbyRouter;