From 81646b75f4cb73d421499607e8635b07b1f9a1aa Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 26 Sep 2024 04:10:34 +0000
Subject: [PATCH] Fix undefined username error

Resolved runtime errors related to accessing the 'username' property of an undefined object in the Header component. Added checks to ensure the user object is defined before attempting to access its properties.
[skip gpt_engineer]
---
 src/App.jsx               | 38 ++++++++++++++++----------------------
 src/components/Header.jsx | 24 +++++++++++++++++-------
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5c1b29d..5d7653c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -39,30 +39,24 @@ const App = () => {
       <TooltipProvider>
         <Toaster />
         <BrowserRouter>
-          {user ? (
-            <div className="flex h-screen bg-[#1a1b2e]">
-              <Sidebar />
-              <div className="flex flex-col flex-1">
-                <Header user={user} />
-                <div className="flex-1 overflow-auto">
-                  <Routes>
-                    <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
-                    <Route path="/crash" element={<ProtectedRoute><Crash /></ProtectedRoute>} />
-                    <Route path="/towers" element={<ProtectedRoute><Towers /></ProtectedRoute>} />
-                    <Route path="/mines" element={<ProtectedRoute><Mines /></ProtectedRoute>} />
-                    <Route path="/plinko" element={<ProtectedRoute><Plinko /></ProtectedRoute>} />
-                    <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
-                  </Routes>
-                </div>
+          <div className="flex h-screen bg-[#1a1b2e]">
+            {user && <Sidebar />}
+            <div className="flex flex-col flex-1">
+              <Header user={user} />
+              <div className="flex-1 overflow-auto">
+                <Routes>
+                  <Route path="/login" element={<Login />} />
+                  <Route path="/signup" element={<Signup />} />
+                  <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+                  <Route path="/crash" element={<ProtectedRoute><Crash /></ProtectedRoute>} />
+                  <Route path="/towers" element={<ProtectedRoute><Towers /></ProtectedRoute>} />
+                  <Route path="/mines" element={<ProtectedRoute><Mines /></ProtectedRoute>} />
+                  <Route path="/plinko" element={<ProtectedRoute><Plinko /></ProtectedRoute>} />
+                  <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
+                </Routes>
               </div>
             </div>
-          ) : (
-            <Routes>
-              <Route path="/login" element={<Login />} />
-              <Route path="/signup" element={<Signup />} />
-              <Route path="*" element={<Login />} />
-            </Routes>
-          )}
+          </div>
         </BrowserRouter>
       </TooltipProvider>
     </QueryClientProvider>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index b618190..dca52b4 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -19,13 +19,23 @@ const Header = ({ user }) => {
         <Link to="/settings" className="text-white mr-4 hover:text-blue-400">
           <SettingsIcon size={24} />
         </Link>
-        <span className="text-white mr-4">Welcome, {user.username}!</span>
-        <span className="text-green-400 mr-4">
-          ${typeof user.balance === 'number' ? user.balance.toFixed(2) : '0.00'} FreakPay
-        </span>
-        <Button onClick={handleLogout} variant="ghost" className="text-white hover:text-red-400">
-          <LogOutIcon size={24} />
-        </Button>
+        {user ? (
+          <>
+            <span className="text-white mr-4">Welcome, {user.username}!</span>
+            <span className="text-green-400 mr-4">
+              ${typeof user.balance === 'number' ? user.balance.toFixed(2) : '0.00'} FreakPay
+            </span>
+            <Button onClick={handleLogout} variant="ghost" className="text-white hover:text-red-400">
+              <LogOutIcon size={24} />
+            </Button>
+          </>
+        ) : (
+          <Link to="/login">
+            <Button variant="ghost" className="text-white hover:text-blue-400">
+              Login
+            </Button>
+          </Link>
+        )}
       </div>
     </header>
   );