fix: client

Author: milljoniaer

client/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="LEARN-Hub - A recommendation system for Computer Science education activities for primary school students" />
     <meta name="theme-color" content="#3b82f6" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="LEARN-Hub" />

client/src/components/layout/UserHeader.tsx

@@ -21,7 +21,7 @@ export const UserHeader: React.FC<UserHeaderProps> = ({
 }) => {
   const { t } = useTranslation();
   const isAdmin = user?.role === "ADMIN";
-  const isGuest = user?.role === "GUEST";
+  const isGuest = !user || user.role === "GUEST";
 
   const roleDescription = isAdmin
     ? t("sidebar.adminView")

client/src/contexts/AuthContext.tsx

@@ -31,11 +31,6 @@ export interface AuthContextType {
   resetPassword: (
     email: string,
   ) => Promise<{ success: boolean; message?: string }>;
-  guestLogin: () => Promise<{
-    success: boolean;
-    message?: string;
-    user?: User;
-  }>;
   logout: () => Promise<void>;
   refreshUser: () => Promise<void>;
   updateProfile: (
@@ -125,17 +120,9 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     return await authService.resetPassword(email);
   };
 
-  const guestLogin = async () => {
-    const result = await authService.guestLogin();
-    if (result.success && result.user) {
-      setUser(result.user);
-    }
-    return result;
-  };
-
   const logout = async () => {
-    await authService.logout();
     setUser(null);
+    await authService.logout();
   };
 
   const refreshUser = async () => {
@@ -212,7 +199,6 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     requestVerificationCode,
     registerTeacher,
     resetPassword,
-    guestLogin,
     logout,
     refreshUser,
     updateProfile,

client/src/contexts/__tests__/AuthContext.test.tsx

@@ -229,33 +229,6 @@ describe("AuthContext", () => {
       expect(result.current?.isAuthenticated).toBe(true);
     });
 
-    it("should handle guest login", async () => {
-      vi.mocked(authService.isAuthenticated).mockReturnValue(false);
-      const mockUser = {
-        id: 0,
-        email: "guest@example.com",
-        role: "GUEST" as const,
-      };
-      vi.mocked(authService.guestLogin).mockResolvedValue({
-        success: true,
-        user: mockUser,
-      });
-
-      const { result } = renderHook(() => React.useContext(AuthContext), {
-        wrapper,
-      });
-
-      await waitFor(() => {
-        expect(result.current?.isLoading).toBe(false);
-      });
-
-      await act(async () => {
-        await result.current?.guestLogin();
-      });
-
-      expect(result.current?.user).toEqual(mockUser);
-      expect(result.current?.isAuthenticated).toBe(true);
-    });
 
     it("should handle verification code login", async () => {
       vi.mocked(authService.isAuthenticated).mockReturnValue(false);

client/src/main.tsx

@@ -1,11 +1,6 @@
-import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import "./i18n";
 import App from "./App.tsx";
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
+createRoot(document.getElementById("root")!).render(<App />);

client/src/pages/AccountDashboardPage.tsx

@@ -46,7 +46,7 @@ export const AccountDashboardPage: React.FC = () => {
     password: "",
   });
 
-  const isGuest = user?.role === "GUEST";
+  const isGuest = !user || user.role === "GUEST";
 
   const handleInputChange = (
     field: keyof UpdateProfileRequest,

client/src/pages/ActivityDetails.tsx

@@ -17,7 +17,6 @@ import {
 import { FavouriteButton } from "@/components/favourites/FavouriteButton";
 import { apiService } from "@/services/apiService";
 import { useAuth } from "@/hooks/useAuth";
-import type { Activity } from "@/types/activity";
 import { useTranslation } from "react-i18next";
 
 export const ActivityDetails: React.FC = () => {
@@ -28,16 +27,10 @@ export const ActivityDetails: React.FC = () => {
   const isAdmin = user?.role === "ADMIN";
   const { t } = useTranslation();
 
-  // Get activity data from navigation state or fetch from API
-  const stateActivity = location.state?.activity as Activity | undefined;
   const fromBrowser = location.state?.fromBrowser as boolean | undefined;
 
   const documentApi = useApi();
   const fetchActivity = useCallback(async () => {
-    if (stateActivity && !isAdmin) {
-      return stateActivity;
-    }
-
     if (id) {
       const fetchedActivity = await apiService.getActivity(id);
       if (!fetchedActivity) {
@@ -47,7 +40,7 @@ export const ActivityDetails: React.FC = () => {
     }
 
     throw new Error("No activity ID provided");
-  }, [stateActivity, id, isAdmin]);
+  }, [id]);
 
   const {
     data: activity,
@@ -56,7 +49,7 @@ export const ActivityDetails: React.FC = () => {
     refetch,
   } = useDataFetch({
     fetchFn: fetchActivity,
-    enabled: !!(stateActivity || id),
+    enabled: !!id,
     dependencies: [fetchActivity],
   });
 

client/src/pages/LoginPage.tsx

@@ -56,7 +56,6 @@ export const LoginPage: React.FC = () => {
     requestVerificationCode,
     registerTeacher,
     resetPassword,
-    guestLogin,
     user,
   } = useAuth();
   const navigate = useNavigate();
@@ -74,20 +73,9 @@ export const LoginPage: React.FC = () => {
 
   const handleGuestLogin = async () => {
     setIsLoading(true);
-    try {
-      const result = await guestLogin();
-      if (result.success) {
-        setMessage("Welcome! You're now browsing as a guest.");
-        setRedirectPath("/recommendations");
-        setShouldRedirect(true);
-      } else {
-        setMessage(result.message || "Failed to login as guest");
-      }
-    } catch {
-      setMessage("An unexpected error occurred");
-    } finally {
-      setIsLoading(false);
-    }
+    setMessage("Welcome! You're now browsing as a guest.");
+    navigate("/recommendations");
+    setIsLoading(false);
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -683,18 +671,16 @@ export const LoginPage: React.FC = () => {
 
           {message && (
             <Alert
-              className={`${
-                message.includes("successful")
-                  ? "border-success/20 bg-success/5"
-                  : "border-destructive/20 bg-destructive/5"
-              }`}
+              className={`${message.includes("successful")
+                ? "border-success/20 bg-success/5"
+                : "border-destructive/20 bg-destructive/5"
+                }`}
             >
               <AlertCircle
-                className={`h-4 w-4 ${
-                  message.includes("successful")
-                    ? "text-success"
-                    : "text-destructive"
-                }`}
+                className={`h-4 w-4 ${message.includes("successful")
+                  ? "text-success"
+                  : "text-destructive"
+                  }`}
               />
               <AlertDescription
                 className={

client/src/services/__tests__/authService.test.ts

@@ -104,6 +104,7 @@ describe("AuthService", () => {
 
       expect(header).toEqual({});
     });
+
   });
 
   describe("Token Validation", () => {
@@ -173,17 +174,6 @@ describe("AuthService", () => {
     });
   });
 
-  describe("Guest Login", () => {
-    it("should create guest user without API call", async () => {
-      const result = await authService.guestLogin();
-
-      expect(result.success).toBe(true);
-      expect(result.user).toBeDefined();
-      expect(result.user?.role).toBe("GUEST");
-      expect(result.user?.email).toBe("guest@example.com");
-    });
-  });
-
   describe("Token Refresh", () => {
     it("should refresh access token successfully", async () => {
       const refreshToken = createValidToken();

client/src/services/authService.ts

@@ -299,32 +299,16 @@ export class AuthService {
 
   // Logout
   async logout(): Promise<void> {
+    const headers = this.getAuthHeader();
+    this.clearTokens();
+
     try {
-      await fetch("/api/auth/logout", {
+      await fetch(this.baseURL + "/api/auth/logout", {
         method: "POST",
-        headers: this.getAuthHeader(),
+        headers,
       });
     } catch (error) {
       logger.error("Error logging out", error, "AuthService");
-    } finally {
-      this.clearTokens();
-    }
-  }
-
-  // Login as guest
-  async guestLogin(): Promise<AuthResponse> {
-    try {
-      // Create a guest user object without making any API calls
-      const guestUser: User = {
-        id: 0,
-        email: "guest@example.com",
-        role: "GUEST",
-      };
-
-      return { success: true, user: guestUser };
-    } catch (error) {
-      logger.error("Error logging in as guest", error, "AuthService");
-      return { success: false, message: "An unexpected error occurred" };
     }
   }