From ab4243f6bce4b109682f429a7e34e7cfc32c06be Mon Sep 17 00:00:00 2001
From: Spikoftw <77557266+Spikoftw@users.noreply.github.com>
Date: Wed, 26 Jun 2024 17:47:46 +0200
Subject: [PATCH] Frontend: Fixed flicker and redirection (#149)

Navigate to login page when user not logged in and added warning message

Fixes: #142
---
 frontend/src/pages/Home.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index d7e7100c..668f253a 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import '../index.css';
 import { useModal } from '../library/modal/ModalContext';
 import { useState } from 'react';
 import { useToast } from '../library/toast/toast-context';
+import { useAuth } from '../contexts/AuthContext';
 
 function JoinGameModalContent() {
     const [gameCode, setGameCode] = useState<string>('');
@@ -50,14 +51,27 @@ function JoinGameModalContent() {
         </>
     );
 }
+
 function Home() {
     const modal = useModal();
     const navigate = useNavigate();
+    const { isLoggedIn } = useAuth();
+    const { open } = useToast();
 
     const CreateGame = () => {
-        // Logic to create a game
-        console.log('Create Game');
-        navigate('/game?type=create');
+        if (isLoggedIn()) {
+            // Logic to create a game
+            console.log('Create Game');
+            navigate('/game?type=create');
+        } else {
+            open({
+                message: 'You need to log in to create a game',
+                duration: 3000,
+                position: 'top-center',
+                color: 'warning',
+            });
+            navigate('/login');
+        }
     };
 
     const JoinGame = () => {