socket.io: close/open opened projectMonths when someone else makes a …

…change so that it is refreshed
itenium-be · Jan 14, 2025 · abfcdef · abfcdef
1 parent 1f3e9a1
commit abfcdef
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 35 deletions.
diff --git a/frontend/src/actions/projectActions.ts b/frontend/src/actions/projectActions.ts
@@ -14,6 +14,8 @@ import {FullProjectMonthModel} from '../components/project/models/FullProjectMon
 import { socketService } from '../components/socketio/SocketService';
 import { EntityEventPayload } from '../components/socketio/EntityEventPayload';
 import { SocketEventTypes } from '../components/socketio/SocketEventTypes';
+import { store } from '../store';
+import moment from 'moment';
 
 export function saveProject(project: IProjectModel, navigate?: any, after: 'to-list' | 'to-details' = 'to-list') {
   return (dispatch: Dispatch) => {
@@ -281,6 +283,30 @@ export function handleProjectMonthSocketEvents(eventType: SocketEventTypes, even
             type: ACTION_TYPES.PROJECTS_MONTH_UPDATE,
             projectMonth: eventPayload.entity,
           });
+
+          // HACK: Open/Close the month so that it is refreshed
+          const storeState = store.getState();
+          const projectMonth = eventPayload.entity as ProjectMonthModel;
+          const monthKey = moment(projectMonth.month).format('YYYY-MM');
+          if (storeState.app.filters.projectMonths.openMonths[monthKey]) {
+            dispatch({
+              type: ACTION_TYPES.APP_FILTER_OPEN_MONTHS_UPDATED,
+              payload: {
+                month: monthKey,
+                opened: false,
+              },
+            });
+
+            setTimeout(() => {
+              dispatch({
+                type: ACTION_TYPES.APP_FILTER_OPEN_MONTHS_UPDATED,
+                payload: {
+                  month: monthKey,
+                  opened: true,
+                },
+              });
+            });
+          }
         }
         break;
       case SocketEventTypes.EntityDeleted:

diff --git a/frontend/src/components/project/project-month-list/ProjectMonthsLists.tsx b/frontend/src/components/project/project-month-list/ProjectMonthsLists.tsx
@@ -5,12 +5,9 @@ import {Features} from '../../controls/feature/feature-models';
 import {useDocumentTitle} from '../../hooks/useDocumentTitle';
 import { OpenOrClosedProjectMonthsList } from './OpenOrClosedProjectMonthsList';
 import { ProjectMonthsListToolbar } from './ProjectMonthsListToolbar';
-import useEntityChangedToast from '../../hooks/useEntityChangedToast';
-
 
 import './project-month-list.scss';
 
-
 /** The monthly invoicing tables including the top searchbar */
 export const ProjectMonthsLists = () => {
   useDocumentTitle('projectMonthsList');
@@ -21,8 +18,6 @@ export const ProjectMonthsLists = () => {
     .filter((month, index, arr) => arr.indexOf(month) === index)
     .sort((a, b) => b.localeCompare(a));
 
-    useEntityChangedToast(null, 'projects_month');
-
   return (
     <Container className={`list list-${Features.projectMonths}`}>
       <ProjectMonthsListToolbar />

diff --git a/frontend/src/components/socketio/SocketService.ts b/frontend/src/components/socketio/SocketService.ts
@@ -77,25 +77,8 @@ function createSocketService() {
   }
 
   function toastEntityChanged(eventType: SocketEventTypes, eventPayload: EntityEventPayload) {
-    let operation: string | undefined;
-
-    switch (eventType) {
-      case SocketEventTypes.EntityCreated:
-        operation = "entityCreated";
-        break;
-      case SocketEventTypes.EntityUpdated:
-        operation = "entityUpdated";
-        break;
-      case SocketEventTypes.EntityDeleted:
-        operation = "entityDeleted";
-        break;
-      default:
-        throw new Error(`${eventType} not supported.`);
-    }
-
-    // TODO nicolas debounce toasts
     toast.info(
-      t(`socketio.operation.${operation}`, {
+      t(`socketio.operation.${eventType}`, {
         entityType: t(`socketio.entities.${eventPayload.entityType}`),
         user: eventPayload.sourceUserEmail,
       }),
@@ -113,8 +96,8 @@ function createSocketService() {
   ) {
     var unsubscriptions: (() => void)[] = [];
 
-    function registerHandlerForEventType(eventType: SocketEventTypes) {
-      var handleEvent = (msg: EntityEventPayload) => {
+    function registerHandlerForToastEventType(eventType: SocketEventTypes) {
+      const handleEvent = (msg: EntityEventPayload) => {
         if (msg.sourceSocketId === socketId) {
           console.log("Socket.io: Event ignored => sourceSocketId is equal to current socket id.");
           return;
@@ -134,9 +117,9 @@ function createSocketService() {
       unsubscriptions.push(() => socket.off(eventType, handleEvent));
     }
 
-    registerHandlerForEventType(SocketEventTypes.EntityCreated);
-    registerHandlerForEventType(SocketEventTypes.EntityUpdated);
-    registerHandlerForEventType(SocketEventTypes.EntityDeleted);
+    registerHandlerForToastEventType(SocketEventTypes.EntityCreated);
+    registerHandlerForToastEventType(SocketEventTypes.EntityUpdated);
+    registerHandlerForToastEventType(SocketEventTypes.EntityDeleted);
 
     return () => {
       unsubscriptions.forEach(fn => fn());

diff --git a/frontend/src/trans.en.ts b/frontend/src/trans.en.ts
@@ -689,9 +689,9 @@ export const trans = {
       users: 'User',
     },
     operation: {
-      entityCreated: '{entityType} has been created by {user}',
-      entityUpdated: '{entityType} has been updated by {user}',
-      entityDeleted: '{entityType} has been deleted by {user}'
+      ENTITY_CREATED: '{entityType} has been created by {user}',
+      ENTITY_UPDATED: '{entityType} has been updated by {user}',
+      ENTITY_DELETED: '{entityType} has been deleted by {user}'
     }
   }
 };
diff --git a/frontend/src/trans.nl.ts b/frontend/src/trans.nl.ts
@@ -474,7 +474,7 @@ export const trans = {
       rateType: 'Eenheid',
       ref: 'Referentie',
       advancedInvoicing: 'Specifieke facturatiedetails instellen',
-    },    
+    },
     endCustomer: {
       clientId: 'Eindklant',
       contact: 'Contact',
@@ -689,9 +689,9 @@ export const trans = {
       users: 'Gebruiker',
     },
     operation: {
-      entityCreated: '{entityType} werd aangemaakt door {user}',
-      entityUpdated: '{entityType} werd aangepast door {user}',
-      entityDeleted: '{entityType} werd verwijderd door {user}'
+      ENTITY_CREATED: '{entityType} werd aangemaakt door {user}',
+      ENTITY_UPDATED: '{entityType} werd aangepast door {user}',
+      ENTITY_DELETED: '{entityType} werd verwijderd door {user}'
     }
   }
 };