feat(backoffice-v2 and workflows-service): implement websocket in bac…

…koffice-v2 & workflows-service

installed react-use-websocket package for implementing websockets in backoffice-v2, connect to
websocket and wait for update messages instead of polling. if disconnected start polling again.
workflows-service send api calls to websocket server to send update messages to all clients

BREAKING CHANGE: backoffice-v2 connects to websocket and if fails keep polling in order to present
updated data

feat #534

apps/backoffice-v2/package.json

@@ -86,6 +86,7 @@
     "react-image-crop": "^10.0.9",
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.11.2",
+    "react-use-websocket": "^4.3.1",
     "react-zoom-pan-pinch": "^3.0.8",
     "tailwind-merge": "^1.10.0",
     "tailwindcss-animate": "^1.0.5",

apps/backoffice-v2/src/common/components/organisms/Header/Header.Navbar.tsx

@@ -6,6 +6,8 @@ import { TRoutes } from '../../../../Router/types';
 import { CheckSquare } from 'lucide-react';
 import { useSearchParamsByEntity } from '../../../hooks/useSearchParamsByEntity/useSearchParamsByEntity';
 import { useSelectEntityFilterOnMount } from '../../../../domains/entities/hooks/useSelectEntityFilterOnMount/useSelectEntityFilterOnMount';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
+import { queryClient } from '../../../../lib/react-query/query-client';
 
 /**
  * @description A nav element which wraps {@link NavItem} components of the app's routes. Supports nested routes.
@@ -15,7 +17,12 @@ import { useSelectEntityFilterOnMount } from '../../../../domains/entities/hooks
  * @constructor
  */
 export const Navbar: FunctionComponent = () => {
-  const { data: filters } = useFiltersQuery();
+  const { readyState } = useWebSocket('ws://localhost:3500/?testParams=55', {
+    share: true,
+    shouldReconnect: () => true,
+  });
+
+  const { data: filters } = useFiltersQuery(readyState === ReadyState.OPEN);
   const [searchParams] = useSearchParamsByEntity();
   const navItems = [
     // {
@@ -26,7 +33,7 @@ export const Navbar: FunctionComponent = () => {
     // },
   ] satisfies TRoutes;
 
-  useSelectEntityFilterOnMount();
+  useSelectEntityFilterOnMount(readyState === ReadyState.OPEN);
 
   return (
     <nav>

apps/backoffice-v2/src/domains/auth/components/AuthenticatedLayout/AuthenticatedLayout.layout.tsx

@@ -1,11 +1,16 @@
 import { Header } from '../../../../common/components/organisms/Header';
 import { FunctionComponentWithChildren } from '../../../../common/types';
 import { useSelectEntityFilterOnMount } from '../../../entities/hooks/useSelectEntityFilterOnMount/useSelectEntityFilterOnMount';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
 
 export const AuthenticatedLayout: FunctionComponentWithChildren = ({ children }) => {
+  const { readyState } = useWebSocket('ws://localhost:3500/?testParams=55', {
+    share: true,
+    shouldReconnect: () => true,
+  });
   // Should only be uncommented once `useAuthRedirects` is no longer in use in `AuthProvider`
   // useAuthenticatedLayout();
-  useSelectEntityFilterOnMount();
+  useSelectEntityFilterOnMount(readyState == ReadyState.OPEN);
 
   return (
     <div className="drawer-mobile drawer">

apps/backoffice-v2/src/domains/entities/hooks/useSelectEntityFilterOnMount/useSelectEntityFilterOnMount.tsx

@@ -3,8 +3,8 @@ import { useEffect } from 'react';
 import { useSearchParamsByEntity } from '../../../../common/hooks/useSearchParamsByEntity/useSearchParamsByEntity';
 import { useNavigate, useParams } from 'react-router-dom';
 
-export const useSelectEntityFilterOnMount = () => {
-  const { data: filters } = useFiltersQuery();
+export const useSelectEntityFilterOnMount = (websocketConnectionIsOpen: boolean) => {
+  const { data: filters } = useFiltersQuery(websocketConnectionIsOpen);
   const { locale } = useParams();
   const [{ entity, filterId }, setSearchParams] = useSearchParamsByEntity();
   const navigate = useNavigate();

apps/backoffice-v2/src/domains/entities/hooks/useSelectEntityOnMount/useSelectEntityOnMount.tsx

@@ -8,10 +8,18 @@ import { useSearchParamsByEntity } from '../../../../common/hooks/useSearchParam
 /**
  * @description Sets the selected end user to the first end user in the array on mount if no user is currently selected. Returns the select end user handler.
  */
-export const useSelectEntityOnMount = () => {
+export const useSelectEntityOnMount = (websocketConnectionIsOpen: boolean) => {
   const { entityId } = useParams();
   const [{ filterId, filter, sortBy, sortDir, page, pageSize }] = useSearchParamsByEntity();
-  const { data } = useWorkflowsQuery({ filterId, filter, sortBy, sortDir, page, pageSize });
+  const { data } = useWorkflowsQuery({
+    filterId,
+    filter,
+    sortBy,
+    sortDir,
+    page,
+    pageSize,
+    websocketConnectionIsOpen,
+  });
   const { data: workflows } = data || { data: [] };
   const onSelectEntity = useSelectEntity();
   const entity = useFilterEntity();

apps/backoffice-v2/src/domains/filters/hooks/queries/useFiltersQuery/useFiltersQuery.tsx

@@ -1,10 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { filtersQueryKeys } from '../../../query-keys';
 
-export const useFiltersQuery = () => {
+export const useFiltersQuery = (websocketConnectionIsOpen: boolean) => {
   return useQuery({
     ...filtersQueryKeys.list(),
     staleTime: 1_000_000,
-    refetchInterval: 1_000_000,
+    refetchInterval: () => (websocketConnectionIsOpen ? false : 1_000_000),
   });
 };

apps/backoffice-v2/src/domains/storage/hooks/queries/useStorageFilesQuery/useStorageFilesQuery.tsx

@@ -3,7 +3,10 @@ import { isString } from '../../../../../common/utils/is-string/is-string';
 import { storageQueryKeys } from '../../../query-keys';
 import { useIsAuthenticated } from '../../../../auth/context/AuthProvider/hooks/useIsAuthenticated/useIsAuthenticated';
 
-export const useStorageFilesQuery = (fileIds: Array<string>) => {
+export const useStorageFilesQuery = (
+  fileIds: Array<string>,
+  websocketConnectionIsOpen: boolean,
+) => {
   const isAuthenticated = useIsAuthenticated();
 
   return useQueries({
@@ -12,7 +15,7 @@ export const useStorageFilesQuery = (fileIds: Array<string>) => {
         ...storageQueryKeys.fileById(fileId),
         enabled: isString(fileId) && !!fileId?.length && isAuthenticated,
         staleTime: 100_000,
-        refetchInterval: 100_000,
+        refetchInterval: () => (websocketConnectionIsOpen ? false : 100_000),
       })) ?? [],
   });
 };

apps/backoffice-v2/src/domains/workflows/hooks/queries/useWorkflowQuery/useWorkflowQuery.tsx

@@ -4,13 +4,16 @@ import { workflowsQueryKeys } from '../../../query-keys';
 export const useWorkflowQuery = ({
   workflowId,
   filterId,
+  websocketConnectionIsOpen,
 }: {
   workflowId: string;
   filterId: string;
+  websocketConnectionIsOpen: boolean;
 }) => {
   return useQuery({
     ...workflowsQueryKeys.byId({ workflowId, filterId }),
     enabled: !!filterId && !!workflowId,
-    staleTime: 10_000,
+    staleTime: 100_000,
+    refetchInterval: () => (websocketConnectionIsOpen ? false : 10_000),
   });
 };

apps/backoffice-v2/src/domains/workflows/hooks/queries/useWorkflowsQuery/useWorkflowsQuery.tsx

@@ -9,13 +9,15 @@ export const useWorkflowsQuery = ({
   sortDir,
   page,
   pageSize,
+  websocketConnectionIsOpen,
   filter,
 }: {
   filterId: string;
   sortBy: string;
   sortDir: string;
   page: number;
   pageSize: number;
+  websocketConnectionIsOpen: boolean;
   filter: Record<string, unknown>;
 }) => {
   const isAuthenticated = useIsAuthenticated();
@@ -24,5 +26,6 @@ export const useWorkflowsQuery = ({
     ...workflowsQueryKeys.list({ filterId, filter, sortBy, sortDir, page, pageSize }),
     enabled: !!filterId && isAuthenticated && !!sortBy && !!sortDir && !!page && !!pageSize,
     staleTime: 100_000,
+    refetchInterval: () => (websocketConnectionIsOpen ? false : 100_000),
   });
 };

apps/backoffice-v2/src/pages/Entities/Entities.page.tsx

@@ -5,8 +5,14 @@ import { useEntities } from './hooks/useEntities/useEntities';
 import { Case } from '../Entity/components/Case/Case';
 import { MotionScrollArea } from '../../common/components/molecules/MotionScrollArea/MotionScrollArea';
 import { FunctionComponent } from 'react';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
 
 export const Entities: FunctionComponent = () => {
+  const { readyState } = useWebSocket('ws://localhost:3500/?testParams=55', {
+    share: true,
+    shouldReconnect: () => true,
+  });
+
   const {
     onPaginate,
     onSearch,
@@ -20,7 +26,7 @@ export const Entities: FunctionComponent = () => {
     totalPages,
     skeletonEntities,
     entity,
-  } = useEntities();
+  } = useEntities(readyState === ReadyState.OPEN);
 
   return (
     <>

apps/backoffice-v2/src/pages/Entities/hooks/useEntities/useEntities.tsx

@@ -5,8 +5,9 @@ import { useFilterEntity } from '../../../../domains/entities/hooks/useFilterEnt
 import { useSelectEntityOnMount } from '../../../../domains/entities/hooks/useSelectEntityOnMount/useSelectEntityOnMount';
 import { useWorkflowsQuery } from '../../../../domains/workflows/hooks/queries/useWorkflowsQuery/useWorkflowsQuery';
 import { useSearchParamsByEntity } from '../../../../common/hooks/useSearchParamsByEntity/useSearchParamsByEntity';
+import useWebSocket from 'react-use-websocket';
 
-export const useEntities = () => {
+export const useEntities = (websocketConnectionIsOpen: boolean) => {
   const [{ filterId, filter, sortBy, sortDir, page, pageSize }, setSearchParams] =
     useSearchParamsByEntity();
   const { data, isLoading } = useWorkflowsQuery({
@@ -15,6 +16,7 @@ export const useEntities = () => {
     sortBy,
     sortDir,
     page,
+    websocketConnectionIsOpen,
     pageSize,
   });
   const {
@@ -83,7 +85,7 @@ export const useEntities = () => {
   );
   const skeletonEntities = createArrayOfNumbers(3);
 
-  useSelectEntityOnMount();
+  useSelectEntityOnMount(websocketConnectionIsOpen);
 
   return {
     onPaginate,

apps/backoffice-v2/src/pages/Entity/Entity.page.tsx

@@ -3,9 +3,17 @@ import { useEntity } from './hooks/useEntity/useEntity';
 import { ctw } from '../../common/utils/ctw/ctw';
 import { Card } from '../../common/components/atoms/Card/Card';
 import { CardContent } from '../../common/components/atoms/Card/Card.Content';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
 
 export const Entity = () => {
-  const { workflow, selectedEntity, tasks, cells, isLoading } = useEntity();
+  const { readyState } = useWebSocket('ws://localhost:3500/?testParams=55', {
+    share: true,
+    shouldReconnect: () => true,
+  });
+
+  const { workflow, selectedEntity, tasks, cells, isLoading } = useEntity(
+    readyState === ReadyState.OPEN,
+  );
 
   // Selected entity
   return (

apps/backoffice-v2/src/pages/Entity/components/CallToAction/CallToAction.tsx

@@ -14,8 +14,14 @@ import { SelectValue } from '../../../../common/components/atoms/Select/Select.V
 import { Input } from '../../../../common/components/atoms/Input/Input';
 import { DialogTrigger } from '../../../../common/components/organisms/Dialog/Dialog.Trigger';
 import { useCallToActionLogic } from './hooks/useCallToActionLogic/useCallToActionLogic';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
 
 export const CallToAction: FunctionComponent<ICallToActionProps> = ({ value, data }) => {
+  const { readyState } = useWebSocket('ws://localhost:3500/?testParams=55', {
+    share: true,
+    shouldReconnect: () => true,
+  });
+
   const {
     onMutateUpdateWorkflowById,
     isLoadingUpdateWorkflowById,
@@ -26,7 +32,7 @@ export const CallToAction: FunctionComponent<ICallToActionProps> = ({ value, dat
     reasons,
     reason,
     onReasonChange,
-  } = useCallToActionLogic();
+  } = useCallToActionLogic(readyState === ReadyState.OPEN);
 
   return value === 'Reject' ? (
     <Dialog>

apps/backoffice-v2/src/pages/Entity/components/CallToAction/hooks/useCallToActionLogic/useCallToActionLogic.tsx

@@ -7,10 +7,14 @@ import { useUpdateWorkflowByIdMutation } from '../../../../../../domains/workflo
 import toast from 'react-hot-toast';
 import { useCallback, useState } from 'react';
 
-export const useCallToActionLogic = () => {
+export const useCallToActionLogic = (websocketConnectionIsOpen: boolean) => {
   const { entityId } = useParams();
   const filterId = useFilterId();
-  const { data: workflow } = useWorkflowQuery({ workflowId: entityId, filterId });
+  const { data: workflow } = useWorkflowQuery({
+    workflowId: entityId,
+    filterId,
+    websocketConnectionIsOpen,
+  });
   const { data: session } = useAuthenticatedUserQuery();
   const caseState = useCaseState(session?.user, workflow);
   const { mutate: mutateUpdateWorkflowById, isLoading: isLoadingUpdateWorkflowById } =

apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx

@@ -30,6 +30,7 @@ import { SelectItem } from '../../../../common/components/atoms/Select/Select.It
 import { SelectContent } from '../../../../common/components/atoms/Select/Select.Content';
 import { SelectTrigger } from '../../../../common/components/atoms/Select/Select.Trigger';
 import { SelectValue } from '../../../../common/components/atoms/Select/Select.Value';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
 
 /**
  * @description To be used by {@link Case}. Displays the entity's full name, avatar, and handles the reject/approve mutation.
@@ -49,6 +50,10 @@ export const Actions: FunctionComponent<IActionsProps> = ({
   fullName,
   showResolutionButtons = true,
 }) => {
+  const { readyState } = useWebSocket('ws://localhost:3500/?testParams=55', {
+    share: true,
+    shouldReconnect: () => true,
+  });
   const {
     onMutateApproveEntity,
     onMutateRejectEntity,
@@ -71,7 +76,11 @@ export const Actions: FunctionComponent<IActionsProps> = ({
     isActionButtonDisabled,
     onTriggerAssignToMe,
     isAssignedToMe,
-  } = useActions({ workflowId: id, fullName });
+  } = useActions({
+    workflowId: id,
+    fullName,
+    websocketConnectionIsOpen: readyState === ReadyState.OPEN,
+  });
 
   return (
     <div className={`sticky top-0 z-50 col-span-2 bg-base-100 px-4 pt-4`}>
@@ -112,7 +121,7 @@ export const Actions: FunctionComponent<IActionsProps> = ({
           </h2>
         </div>
         {showResolutionButtons && (
-          <div className={`flex items-center space-x-6 pe-[3.35rem]`}>
+          <div className={`pe-[3.35rem] flex items-center space-x-6`}>
             <Button
               className={ctw({
                 // loading: debouncedIsLoadingRejectEntity,

apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useActions/interfaces.ts

@@ -1,4 +1,5 @@
 export interface IUseActions {
   workflowId: string;
   fullName: string;
+  websocketConnectionIsOpen: boolean;
 }

apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useActions/useActions.tsx

@@ -24,10 +24,10 @@ export const ResubmissionReason = {
   FACE_IS_NOT_MATCHING: 'FACE_IS_NOT_MATCHING',
 } as const;
 
-export const useActions = ({ workflowId, fullName }: IUseActions) => {
+export const useActions = ({ workflowId, fullName, websocketConnectionIsOpen }: IUseActions) => {
   const onSelectNextEntity = useSelectNextEntity();
   const filterId = useFilterId();
-  const { data: workflow } = useWorkflowQuery({ workflowId, filterId });
+  const { data: workflow } = useWorkflowQuery({ workflowId, filterId, websocketConnectionIsOpen });
   const { mutate: mutateApproveEntity, isLoading: isLoadingApproveEntity } =
     useApproveEntityMutation({
       workflowId: workflowId,

apps/backoffice-v2/src/pages/Entity/components/Details/Details.tsx

@@ -6,11 +6,21 @@ import { useParams } from 'react-router-dom';
 import { IDetailsProps } from './interfaces';
 import { useWorkflowQuery } from '../../../../domains/workflows/hooks/queries/useWorkflowQuery/useWorkflowQuery';
 import { useFilterId } from '../../../../common/hooks/useFilterId/useFilterId';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
 
 export const Details: FunctionComponent<IDetailsProps> = ({ id, value }) => {
+  const { readyState } = useWebSocket('ws://localhost:3500/?testParams=55', {
+    share: true,
+    shouldReconnect: () => true,
+  });
+
   const { entityId } = useParams();
   const filterId = useFilterId();
-  const { data: workflow } = useWorkflowQuery({ workflowId: entityId, filterId });
+  const { data: workflow } = useWorkflowQuery({
+    workflowId: entityId,
+    filterId,
+    websocketConnectionIsOpen: readyState === ReadyState.OPEN,
+  });
 
   if (!value.data?.length) return;
 

apps/backoffice-v2/src/pages/Entity/hooks/useEntity/useEntity.tsx

@@ -17,15 +17,20 @@ import {
 import { getDocumentsByCountry } from '@ballerine/common';
 import { getAddressDeep } from './utils/get-address-deep/get-address-deep';
 
-export const useEntity = () => {
+export const useEntity = (websocketConnectionIsOpen: boolean) => {
   const { entityId } = useParams();
   const filterId = useFilterId();
 
-  const { data: workflow, isLoading } = useWorkflowQuery({ workflowId: entityId, filterId });
+  const { data: workflow, isLoading } = useWorkflowQuery({
+    workflowId: entityId,
+    filterId,
+    websocketConnectionIsOpen,
+  });
   const docsData = useStorageFilesQuery(
     workflow.context.documents?.flatMap(({ pages }) =>
       pages?.map(({ ballerineFileId }) => ballerineFileId),
     ),
+    websocketConnectionIsOpen,
   );
 
   const results = [];