3743 - Update table with event listeners

src/client/pages/AdminLinks/AdminLinks.tsx

@@ -4,12 +4,13 @@ import { useTranslation } from 'react-i18next'
 import { ApiEndPoint } from 'meta/api/endpoint'
 
 import { useAppDispatch } from 'client/store'
-import { LinksActions, useIsVerificationInProgress } from 'client/store/ui/links'
+import { LinksActions, useIsVerificationInProgress, useLinksChangeListener } from 'client/store/ui/links'
 import { useSectionRouteParams } from 'client/hooks/useRouteParams'
 import Button from 'client/components/Buttons/Button'
 import TablePaginated from 'client/components/TablePaginated'
 
 import { useColumns } from './hooks/useColumns'
+import { useListenLinksVerificationEvents } from './hooks/useListenLinksVerificationEvents'
 
 const AdminLinks: React.FC = () => {
   const columns = useColumns()
@@ -23,6 +24,9 @@ const AdminLinks: React.FC = () => {
 
   const verifyLinksInProgress = useIsVerificationInProgress(assessmentName, cycleName)
 
+  useLinksChangeListener()
+  useListenLinksVerificationEvents()
+
   useEffect(() => {
     dispatch(LinksActions.getIsVerificationInProgress({ assessmentName, cycleName }))
   }, [assessmentName, cycleName, dispatch])

src/client/pages/AdminLinks/hooks/useListenLinksVerificationEvents.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react'
+
+import { WorkerListener } from 'bullmq'
+
+import { ApiEndPoint } from 'meta/api/endpoint'
+import { Sockets } from 'meta/socket'
+
+import { useAppDispatch } from 'client/store'
+import { LinksActions } from 'client/store/ui/links'
+import { TablePaginatedActions, useTablePaginatedOrderBy, useTablePaginatedPage } from 'client/store/ui/tablePaginated'
+import { useSectionRouteParams } from 'client/hooks/useRouteParams'
+import { SocketClient } from 'client/service/socket'
+
+export const useListenLinksVerificationEvents = (): void => {
+  const dispatch = useAppDispatch()
+  const { assessmentName, cycleName } = useSectionRouteParams()
+
+  const linksVerificationEvent = Sockets.getLinksVerificationEvent({ assessmentName, cycleName })
+
+  const path = ApiEndPoint.CycleData.Links.many()
+  const page = useTablePaginatedPage(path)
+  const orderBy = useTablePaginatedOrderBy(path)
+
+  useEffect(() => {
+    const listener = (args: [{ event: keyof WorkerListener }]): void => {
+      const [{ event }] = args
+      if (event === 'active') {
+        dispatch(
+          LinksActions.setIsVerificationInProgress({ assessmentName, cycleName, isVerificationInProgress: true })
+        )
+      } else if (event === 'completed' || event === 'failed') {
+        dispatch(
+          LinksActions.setIsVerificationInProgress({ assessmentName, cycleName, isVerificationInProgress: false })
+        )
+        const getDataProps = { assessmentName, cycleName, limit: 30, orderBy, page, path }
+        dispatch(TablePaginatedActions.getData(getDataProps))
+      }
+    }
+
+    SocketClient.on(linksVerificationEvent, listener)
+    return () => {
+      SocketClient.off(linksVerificationEvent, listener)
+    }
+  }, [assessmentName, cycleName, dispatch, linksVerificationEvent, orderBy, page, path])
+}