user-authentification, hook

Author: lens161

modules/dcache-view-2/package-lock.json

@@ -17,8 +17,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@testing-library/react": "^16.3.3",
     "@types/node": "^24.13.3",
-    "@types/react": "^19.2.18",
+    "@types/react": "^19.3.0",
     "@types/react-dom": "^19.2.7",
     "@vitejs/plugin-react": "^6.1.1",
     "eslint": "^10.10.0",

modules/dcache-view-2/package.json

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import type { User } from '../workers/types.ts';
+
+export function useAuth(): { user: User | null, error: Error | null } {
+    const [user, setUser] = useState<User | null>(null);
+    const [error, setError] = useState<Error |null>(null);
+
+    useEffect(() => {
+        const worker = new Worker(
+            new URL('../workers/user-authentification.ts', import.meta.url),
+            {type: 'module'}
+        );
+
+        worker.onmessage = (e: MessageEvent<User>) => {
+            setUser(e.data);
+            worker.terminate();
+        };
+
+        worker.onerror = (e) => {
+            console.warn(e);
+            setError(new Error(e.message))
+            worker.terminate();
+        };
+        return () => worker.terminate();
+    }, []);
+
+    return { user, error };
+}

modules/dcache-view-2/src/hooks/useAuth.ts

@@ -0,0 +1,36 @@
+import { test, expect, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useAuth } from '../../hooks/useAuth';
+import type { User } from "../../workers/types.ts";
+
+const authenticatedUser: User = {
+    status: "AUTHENTICATED",
+    uid: null,
+    gids: null,
+    roles: null,
+    unassertedRoles: null,
+    home: null,
+    root: null,
+    username: null,
+    email: null,
+}
+
+vi.stubGlobal('Worker', class {
+    onmessage: ((e: MessageEvent) => void) | null = null;
+    constructor() {
+        setTimeout(() => {
+        this.onmessage?.({ data: authenticatedUser } as MessageEvent);
+        }, 0);
+    }
+    terminate() {}
+});
+
+test('returns user when authenticated', async () => {
+    const { result } = renderHook(() => useAuth());
+
+    expect(result.current?.user).toBeNull(); // initial state
+
+    await waitFor(() => {
+        expect(result.current?.user?.status).toBe('AUTHENTICATED');
+    });
+});

modules/dcache-view-2/src/test/hooks/useAuth.test.ts

@@ -1,6 +1,6 @@
 import { describe, test, expect, vi, beforeEach } from 'vitest';
-import { getUser, sendUser } from '../../workers/authentification';
-import type { User } from '../../workers/types';
+import { getUser, sendUser } from '../../workers/user-authentification.ts';
+import type { User } from '../../workers/types.ts';
 
 const authenticatedUser: User = {
     status: 'AUTHENTICATED',

modules/dcache-view-2/src/test/workers/authentification.test.ts

@@ -1,4 +1,4 @@
-import type { WorkerMessageData, WorkerResponse } from "./types";
+import type { WorkerMessageData, WorkerResponse } from "./types.ts";
 
 export function buildRequest(e: MessageEvent<WorkerMessageData>): Request {
     const headers = new Headers({
@@ -34,10 +34,8 @@ export async function processResponse(response: Response, e: MessageEvent<Worker
     }
 }
 
-self.addEventListener('message', (e: MessageEvent<WorkerMessageData>) => {
-
+self.onmessage = (e: MessageEvent<WorkerMessageData>) => {
     fetch(buildRequest(e))
         .then(response => processResponse(response, e))
         .then(data => self.postMessage(data));
-
-}, false);
+};

modules/dcache-view-2/src/workers/download.ts

@@ -1,15 +1,13 @@
 import type { User } from './types.ts'
 
 export async function getUser(response: Response): Promise<User> {
-    console.log("IS USER RESOURCE STILL CALLED ");
     if (response.status !== 200) {
         throw new Error(`Looks like there was a problem. Status Code: ${response.status}`);
     }
     return response.json();
 }
 
 export function sendUser(user: User) {
-    console.log("AUTHENTICATED user resource: ");
     if (user.status === "AUTHENTICATED") {
         self.postMessage(user);
     }
@@ -27,4 +25,6 @@ export function authenticate() {
     fetch('/api/v1/user', init)
         .then(response => getUser(response))
         .then(user => sendUser(user));
-}
+}
+
+authenticate()