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]
darksplice · Sep 26, 2024 · 81646b7 · 81646b7
1 parent 71c3715
commit 81646b7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git 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
@@ -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>
   );