add sse for user re-fetch

Author: xcodeassociated

package.json

@@ -9,7 +9,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prod": "serve -s dist",
-    "test": "vitest",
+    "test": "vitest --run",
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "generate:graphql": "graphql-codegen --config codegen.ts"
@@ -47,21 +47,21 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "^5.0.7",
+    "@graphql-codegen/client-preset": "^4.5.1",
+    "@graphql-codegen/typescript-operations": "^4.3.1",
+    "@graphql-codegen/typescript-react-apollo": "^4.3.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
+    "@types/keycloak-js": "^3.4.1",
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.13",
     "@types/react-dom": "^18.3.1",
-    "@types/keycloak-js": "^3.4.1",
     "@types/react-i18next": "^8.1.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/redux-persist": "^4.3.1",
-    "@graphql-codegen/cli": "^5.0.7",
-    "@graphql-codegen/client-preset": "^4.5.1",
-    "@graphql-codegen/typescript-operations": "^4.3.1",
-    "@graphql-codegen/typescript-react-apollo": "^4.3.3",
     "@typescript-eslint/eslint-plugin": "^8.18.2",
     "@typescript-eslint/parser": "^8.18.2",
     "@vitejs/plugin-react-swc": "^3.7.2",
@@ -75,14 +75,14 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "jsdom": "^25.0.1",
+    "msw": "^2.7.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",
     "vite": "^5.4.11",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.8",
-    "msw": "^2.7.0"
+    "vitest": "^2.1.8"
   }
 }

src/pages/users/Users.test.tsx

@@ -1,4 +1,4 @@
-import { beforeAll, afterAll, afterEach, describe, expect, it } from 'vitest'
+import { beforeAll, afterAll, afterEach, describe, expect, it, vitest } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import React, { act } from 'react'
 import { BrowserRouter } from 'react-router-dom'
@@ -43,6 +43,7 @@ const mockedUsers = [
     ],
   },
 ]
+
 export const handlers = [
   http.get(import.meta.env.VITE_APP_BACKEND_URL + '/coroutine/users', () => {
     return HttpResponse.json(mockedUsers)
@@ -60,6 +61,17 @@ server.events.on('request:start', ({ request }) => {
 
 describe('user component tests', () => {
   beforeAll(() => {
+    ;(global as any).EventSource = vitest.fn().mockImplementation((url: string) => ({
+      url,
+      readyState: 1,
+      addEventListener: vitest.fn(),
+      removeEventListener: vitest.fn(),
+      close: vitest.fn(),
+      dispatchEvent: vitest.fn(),
+      onopen: null,
+      onmessage: null,
+      onerror: null,
+    }))
     server.listen()
     act(() => store.dispatch(usersApi.util.resetApiState()))
   })
@@ -70,6 +82,7 @@ describe('user component tests', () => {
   })
 
   afterAll(() => {
+    delete (global as any).EventSource
     server.close()
   })
 

src/pages/users/Users.tsx

@@ -12,6 +12,7 @@ import { useUserColumns } from '@/pages/users/hooks/useColumns'
 import { LoadingScreenMemo } from '@/components/app/loading-screen'
 import { usersApi } from '@/pages/users/api/usersApi.ts'
 import { useSearchParams } from 'react-router-dom'
+import { useSimpleSSE } from '@/pages/users/hooks/useSseUsers.tsx'
 
 type UsersSearchParams = {
   page: number
@@ -96,12 +97,45 @@ export const Users: React.FC<UsersProps> = (/* props: UsersProps */) => {
     )
   }, [pagination, sorting])
 
+  const { connectionStatus, lastMessage } = useSimpleSSE(import.meta.env.VITE_APP_BACKEND_URL + '/update/user', {
+    onUpdate: (message) => {
+      console.log('User update received:', message)
+      console.log('Refetching users...')
+      users.refetch()
+    },
+    onConnect: () => {
+      console.log('Connected to SSE stream')
+    },
+    onError: (error) => {
+      console.error('SSE error:', error)
+    },
+  })
+
   if (users.isLoading) {
     return <LoadingScreenMemo />
   }
 
+  if (users.isError) {
+    return (
+      <>
+        {/* todo: refactor by creating a custom control component */}
+        <div className="sse-bar">
+          <span className={`status ${connectionStatus}`}>Status: {connectionStatus} </span>
+          {lastMessage && <span>Last update: {lastMessage.content}</span>}
+        </div>
+        <div>Error</div>
+      </>
+    )
+  }
+
   return (
     <>
+      {/* todo: refactor by creating a custom control component */}
+      <div className="sse-bar">
+        <span className={`status ${connectionStatus}`}>Status: {connectionStatus} </span>
+        {lastMessage && <span>Last update: {lastMessage.content}</span>}
+      </div>
+
       <Card>
         <CardHeader>
           <CardTitle>{t(`users.t1`, { ns: ['main'] })}</CardTitle>

src/pages/users/hooks/useRolesGraphql.tsx

@@ -14,32 +14,28 @@ export const useRolesGraphql = () => {
   })
 
   useEffect(() => {
-    if (!roles) {
+    if (!roles && !loading && !error && data) {
       getRoles()
     }
-  }, [data, loading, error])
-
-  const getRoles = () => {
-    if (error) {
-      console.error(`apollo error: ` + error.message)
-    }
 
-    if (loading) {
-      // ...
+    return () => {
+      setRoles(undefined)
     }
+  }, [data, loading, error])
 
-    if (data) {
-      const permissions: Role[] | undefined = data.getAllPermissions?.map((e) => {
-        return {
-          _id: e?.id,
-          name: e?.name,
-        } as Role
-      })
-      setRoles([...permissions!])
-    }
+  const getRoles = () => {
+    const permissions: Role[] | undefined = data?.getAllPermissions?.map((e) => {
+      return {
+        _id: e?.id,
+        name: e?.name,
+      } as Role
+    })
+    setRoles([...permissions!])
   }
 
   return {
     roles,
+    loading,
+    error,
   }
 }

src/pages/users/hooks/useSseUsers.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState, useRef } from 'react'
+
+interface SseMessage {
+  from: string
+  to: string
+  content: string
+}
+
+interface SSEOptions {
+  onUpdate?: (message: SseMessage) => void
+  onConnect?: () => void
+  onError?: (error: Event) => void
+  autoReconnect?: boolean
+  maxRetries?: number
+}
+
+export const useSimpleSSE = (url: string, options: SSEOptions = {}) => {
+  const [connectionStatus, setConnectionStatus] = useState<'connecting' | 'connected' | 'disconnected'>('connecting')
+  const [lastMessage, setLastMessage] = useState<SseMessage | null>(null)
+  const [retryCount, setRetryCount] = useState(0)
+
+  const eventSourceRef = useRef<EventSource | null>(null)
+  const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const optionsRef = useRef(options)
+  const retryCountRef = useRef(0)
+  const maxAttempts = optionsRef.current.maxRetries || 5
+
+  // Update options ref
+  useEffect(() => {
+    optionsRef.current = options
+  }, [options])
+
+  // Update ref whenever state changes
+  useEffect(() => {
+    retryCountRef.current = retryCount
+  }, [retryCount])
+
+  const connect = () => {
+    // Clear any existing retry timeout
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current)
+    }
+
+    // Close existing connection
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close()
+      eventSourceRef.current = null
+    }
+
+    if (retryCountRef.current < maxAttempts) {
+      eventSourceRef.current = new EventSource(url)
+
+      eventSourceRef.current.onopen = () => {
+        setConnectionStatus('connected')
+        setRetryCount(0) // Reset retry count on successful connection
+        optionsRef.current.onConnect?.()
+      }
+
+      eventSourceRef.current.addEventListener('connected', (event) => {
+        const message: SseMessage = JSON.parse(event.data)
+        setLastMessage(message)
+      })
+
+      eventSourceRef.current.addEventListener('update', (event) => {
+        const message: SseMessage = JSON.parse(event.data)
+        setLastMessage(message)
+        optionsRef.current.onUpdate?.(message)
+      })
+
+      eventSourceRef.current.addEventListener('heartbeat', () => {})
+
+      eventSourceRef.current.onerror = (event) => {
+        setConnectionStatus('disconnected')
+        optionsRef.current.onError?.(event)
+
+        // Auto-reconnect logic
+        if (optionsRef.current.autoReconnect !== false) {
+          console.error('SSE error:', event)
+
+          const delay = Math.min(1000 * Math.pow(2, retryCount), 30000)
+          console.warn(`Reconnecting in ${delay}ms (attempt ${retryCountRef.current + 1})`)
+          setRetryCount((prev) => prev + 1)
+
+          retryTimeoutRef.current = setTimeout(() => {
+            connect()
+          }, delay)
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    setConnectionStatus('connecting')
+    connect()
+
+    return () => {
+      if (retryTimeoutRef.current) {
+        clearTimeout(retryTimeoutRef.current)
+      }
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close()
+        eventSourceRef.current = null
+      }
+      setConnectionStatus('disconnected')
+    }
+  }, [url]) // Only reconnect when URL
+
+  return {
+    connectionStatus,
+    lastMessage,
+    retryCount,
+    maxAttempts,
+    reconnect: connect,
+  }
+}