box-annotations 5.2.1-beta.2 → 5.2.1-beta.21

package/src/store/annotations/actions.ts

@@ -1,8 +1,9 @@
 import { createAction, createAsyncThunk } from '@reduxjs/toolkit';
-import { Annotation, NewAnnotation } from '../../@types';
+import { Annotation, NewAnnotation, Reply } from '../../@types';
 import { APICollection } from '../../api';
 import { AppThunkAPI } from '../types';
-import { getFileId, getFileVersionId, getPermissions } from '../options';
+import { getAnnotation } from './selectors';
+import { getFileId, getFileVersionId, getPermissions, isFeatureEnabled } from '../options';
 
 export const createAnnotationAction = createAsyncThunk<Annotation, NewAnnotation, AppThunkAPI>(
     'CREATE_ANNOTATION',
@@ -39,13 +40,176 @@ export const fetchAnnotationsAction = createAsyncThunk<APICollection<Annotation>
             client.destroy();
         });
 
+        const shouldFetchReplies = isFeatureEnabled({ options: getState().options }, 'isThreadedAnnotation');
+
         // Wrap the client request in a promise to allow it to be returned and cancelled
         return new Promise<APICollection<Annotation>>((resolve, reject) => {
-            client.getAnnotations(fileId, fileVersionId, permissions, resolve, reject, 1000, false);
+            client.getAnnotations(fileId, fileVersionId, permissions, resolve, reject, 1000, false, shouldFetchReplies);
+        });
+    },
+);
+
+export const createReplyAction = createAsyncThunk<
+    { annotationId: string; reply: Reply },
+    { annotationId: string; message: string },
+    AppThunkAPI
+>(
+    'CREATE_REPLY',
+    async ({ annotationId, message }, { extra, getState, signal }) => {
+        const client = extra.api.getAnnotationsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const filePermissions = getPermissions(state);
+        const annotation = getAnnotation(state, annotationId);
+        const permissions = { ...filePermissions, ...annotation?.permissions };
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        const reply = await new Promise<Reply>((resolve, reject) => {
+            client.createAnnotationReply(fileId, annotationId, permissions, message, resolve, reject);
+        });
+
+        return { annotationId, reply };
+    },
+);
+
+export const deleteAnnotationAction = createAsyncThunk<string, string, AppThunkAPI>(
+    'DELETE_ANNOTATION',
+    async (annotationId, { extra, getState, signal }) => {
+        const client = extra.api.getAnnotationsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const filePermissions = getPermissions(state);
+        const annotation = getAnnotation(state, annotationId);
+        const permissions = { ...filePermissions, ...annotation?.permissions };
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        await new Promise<void>((resolve, reject) => {
+            client.deleteAnnotation(fileId, annotationId, permissions, resolve, reject);
+        });
+
+        return annotationId;
+    },
+);
+
+export const updateAnnotationAction = createAsyncThunk<
+    Annotation,
+    { annotationId: string; payload: { message?: string; status?: string } },
+    AppThunkAPI
+>(
+    'UPDATE_ANNOTATION',
+    async ({ annotationId, payload }, { extra, getState, signal }) => {
+        const client = extra.api.getAnnotationsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const filePermissions = getPermissions(state);
+        const existingAnnotation = getAnnotation(state, annotationId);
+        const permissions = { ...filePermissions, ...existingAnnotation?.permissions };
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        return new Promise<Annotation>((resolve, reject) => {
+            client.updateAnnotation(fileId, annotationId, permissions, payload, resolve, reject);
+        });
+    },
+);
+
+export const updateReplyAction = createAsyncThunk<
+    { annotationId: string; reply: Reply },
+    { annotationId: string; replyId: string; payload: { message?: string; status?: string } },
+    AppThunkAPI
+>(
+    'UPDATE_REPLY',
+    async ({ annotationId, replyId, payload }, { extra, getState, signal }) => {
+        const client = extra.api.getThreadedCommentsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const annotation = getAnnotation(state, annotationId);
+        const reply = annotation?.replies?.find(r => r.id === replyId);
+
+        if (!reply) {
+            throw new Error(`updateReplyAction: reply ${replyId} not found on annotation ${annotationId}`);
+        }
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        const updated = await new Promise<Reply>((resolve, reject) => {
+            client.updateComment({
+                commentId: replyId,
+                errorCallback: reject,
+                fileId,
+                message: payload.message,
+                permissions: reply.permissions ?? {},
+                status: payload.status,
+                successCallback: resolve,
+            });
+        });
+
+        return { annotationId, reply: updated };
+    },
+);
+
+export const deleteReplyAction = createAsyncThunk<
+    { annotationId: string; replyId: string },
+    { annotationId: string; replyId: string },
+    AppThunkAPI
+>(
+    'DELETE_REPLY',
+    async ({ annotationId, replyId }, { extra, getState, signal }) => {
+        const client = extra.api.getThreadedCommentsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const annotation = getAnnotation(state, annotationId);
+        const reply = annotation?.replies?.find(r => r.id === replyId);
+
+        if (!reply) {
+            throw new Error(`deleteReplyAction: reply ${replyId} not found on annotation ${annotationId}`);
+        }
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
         });
+
+        await new Promise<void>((resolve, reject) => {
+            client.deleteComment({
+                commentId: replyId,
+                errorCallback: reject,
+                fileId,
+                permissions: reply.permissions ?? {},
+                successCallback: resolve,
+            });
+        });
+
+        return { annotationId, replyId };
     },
 );
 
+export type SidebarAnnotationUpdatePayload = Partial<Annotation> & { id: string };
+export type SidebarReplyMutationPayload = { annotationId: string; reply: Reply };
+export type SidebarReplyDeletePayload = { annotationId: string; replyId: string };
+
+export const applySidebarAnnotationUpdateAction = createAction<SidebarAnnotationUpdatePayload>(
+    'APPLY_SIDEBAR_ANNOTATION_UPDATE',
+);
+export const applySidebarReplyCreateAction = createAction<SidebarReplyMutationPayload>(
+    'APPLY_SIDEBAR_REPLY_CREATE',
+);
+export const applySidebarReplyDeleteAction = createAction<SidebarReplyDeletePayload>(
+    'APPLY_SIDEBAR_REPLY_DELETE',
+);
+export const applySidebarReplyUpdateAction = createAction<SidebarReplyMutationPayload>(
+    'APPLY_SIDEBAR_REPLY_UPDATE',
+);
+
 export const removeAnnotationAction = createAction<string>('REMOVE_ANNOTATION');
 export const setActiveAnnotationIdAction = createAction<string | null>('SET_ACTIVE_ANNOTATION_ID');
 export const setIsInitialized = createAction('SET_IS_INITIALIZED');

package/src/store/annotations/reducer.ts

@@ -2,19 +2,34 @@ import { createReducer, combineReducers } from '@reduxjs/toolkit';
 import { formatDrawing, isDrawing } from '../../drawing/drawingUtil';
 import { AnnotationsState } from './types';
 import {
+    applySidebarAnnotationUpdateAction,
+    applySidebarReplyCreateAction,
+    applySidebarReplyDeleteAction,
+    applySidebarReplyUpdateAction,
     createAnnotationAction,
+    createReplyAction,
+    deleteAnnotationAction,
+    deleteReplyAction,
     fetchAnnotationsAction,
     removeAnnotationAction,
     setActiveAnnotationIdAction,
     setIsInitialized,
+    updateAnnotationAction,
+    updateReplyAction,
 } from './actions';
+import { setViewModeAction } from '../options/actions';
 
 const activeAnnotationId = createReducer<AnnotationsState['activeId']>(null, builder =>
     builder
         /* Preview will set the active ID with a an event which will trigger the url change */
         .addCase(createAnnotationAction.fulfilled, () => null)
+        .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) => (state === id ? null : state))
         .addCase(removeAnnotationAction, (state, { payload: id }) => (state === id ? null : state))
-        .addCase(setActiveAnnotationIdAction, (state, { payload: annotationId }) => annotationId),
+        .addCase(setActiveAnnotationIdAction, (state, { payload: annotationId }) => annotationId)
+        .addCase(setViewModeAction, (state, { payload }) => {
+            // Clear active annotation when switching to bounding boxes mode
+            return payload === 'boundingBoxes' ? null : state;
+        }),
 );
 
 const annotationsAllIds = createReducer<AnnotationsState['allIds']>([], builder =>
@@ -22,6 +37,7 @@ const annotationsAllIds = createReducer<AnnotationsState['allIds']>([], builder
         .addCase(createAnnotationAction.fulfilled, (state, { payload: { id } }) => {
             state.push(id);
         })
+        .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) => state.filter(annotationId => annotationId !== id))
         .addCase(removeAnnotationAction, (state, { payload: id }) => state.filter(annotationId => annotationId !== id))
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(({ id }) => state.indexOf(id) === -1 && state.push(id));
@@ -33,9 +49,63 @@ const annotationsById = createReducer<AnnotationsState['byId']>({}, builder =>
         .addCase(createAnnotationAction.fulfilled, (state, { payload }) => {
             state[payload.id] = isDrawing(payload) ? formatDrawing(payload) : payload;
         })
+        .addCase(createReplyAction.fulfilled, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (annotation) {
+                annotation.replies = [...(annotation.replies ?? []), reply];
+            }
+        })
+        .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) => {
+            delete state[id];
+        })
         .addCase(removeAnnotationAction, (state, { payload: id }) => {
             delete state[id];
         })
+        .addCase(updateAnnotationAction.fulfilled, (state, { payload }) => {
+            state[payload.id] = isDrawing(payload) ? formatDrawing(payload) : payload;
+        })
+        .addCase(updateReplyAction.fulfilled, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (annotation && annotation.replies) {
+                annotation.replies = annotation.replies.map(existing =>
+                    existing.id === reply.id ? reply : existing,
+                );
+            }
+        })
+        .addCase(deleteReplyAction.fulfilled, (state, { payload: { annotationId, replyId } }) => {
+            const annotation = state[annotationId];
+            if (annotation && annotation.replies) {
+                annotation.replies = annotation.replies.filter(existing => existing.id !== replyId);
+            }
+        })
+        .addCase(applySidebarAnnotationUpdateAction, (state, { payload }) => {
+            const existing = state[payload.id];
+            if (!existing) return;
+            Object.entries(payload).forEach(([key, value]) => {
+                if (value !== undefined) {
+                    (existing as Record<string, unknown>)[key] = value;
+                }
+            });
+        })
+        .addCase(applySidebarReplyCreateAction, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (!annotation) return;
+            const replies = annotation.replies ?? [];
+            if (replies.some(existing => existing.id === reply.id)) return;
+            annotation.replies = [...replies, reply];
+        })
+        .addCase(applySidebarReplyUpdateAction, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (!annotation || !annotation.replies) return;
+            annotation.replies = annotation.replies.map(existing =>
+                existing.id === reply.id ? { ...existing, ...reply } : existing,
+            );
+        })
+        .addCase(applySidebarReplyDeleteAction, (state, { payload: { annotationId, replyId } }) => {
+            const annotation = state[annotationId];
+            if (!annotation || !annotation.replies) return;
+            annotation.replies = annotation.replies.filter(existing => existing.id !== replyId);
+        })
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(annotation => {
                 state[annotation.id] = isDrawing(annotation) ? formatDrawing(annotation) : annotation;

package/src/store/boundingBoxHighlights/actions.ts

@@ -0,0 +1,6 @@
+import { createAction } from '@reduxjs/toolkit';
+import { BoundingBox } from './types';
+
+export const setBoundingBoxHighlightsAction = createAction<BoundingBox[]>('SET_BOUNDING_BOX_HIGHLIGHTS');
+export const setSelectedBoundingBoxHighlightAction = createAction<string | null>('SET_SELECTED_BOUNDING_BOX_HIGHLIGHT');
+export const navigateBoundingBoxHighlightAction = createAction<string>('NAVIGATE_BOUNDING_BOX_HIGHLIGHT');

package/src/store/boundingBoxHighlights/index.ts

@@ -0,0 +1,4 @@
+export { default as boundingBoxHighlightsReducer } from './reducer';
+export * from './actions';
+export * from './selectors';
+export * from './types';

package/src/store/boundingBoxHighlights/reducer.ts

@@ -0,0 +1,33 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { BoundingBoxHighlightsState } from './types';
+import {
+    navigateBoundingBoxHighlightAction,
+    setBoundingBoxHighlightsAction,
+    setSelectedBoundingBoxHighlightAction,
+} from './actions';
+import { setViewModeAction } from '../options/actions';
+
+const initialState: BoundingBoxHighlightsState = {
+    boundingBoxes: [],
+    selectedId: null,
+};
+
+export default createReducer(initialState, builder => {
+    builder
+        .addCase(setBoundingBoxHighlightsAction, (state, { payload }) => {
+            state.boundingBoxes = payload;
+            state.selectedId = null;
+        })
+        .addCase(setSelectedBoundingBoxHighlightAction, (state, { payload }) => {
+            state.selectedId = payload;
+        })
+        .addCase(navigateBoundingBoxHighlightAction, (state, { payload }) => {
+            state.selectedId = payload;
+        })
+        .addCase(setViewModeAction, (state, { payload }) => {
+            // Clear selected bounding box when switching to annotations mode
+            if (payload === 'annotations') {
+                state.selectedId = null;
+            }
+        });
+});

package/src/store/boundingBoxHighlights/selectors.ts

@@ -0,0 +1,12 @@
+import { BoundingBox, BoundingBoxHighlightsState } from './types';
+
+type State = { boundingBoxHighlights: BoundingBoxHighlightsState };
+
+export const getBoundingBoxHighlights = ({ boundingBoxHighlights }: State): BoundingBox[] =>
+    boundingBoxHighlights.boundingBoxes;
+
+export const getBoundingBoxHighlightsForPage = ({ boundingBoxHighlights }: State, pageNumber: number): BoundingBox[] =>
+    boundingBoxHighlights.boundingBoxes.filter(box => box.pageNumber === pageNumber);
+
+export const getSelectedBoundingBoxHighlightId = ({ boundingBoxHighlights }: State): string | null =>
+    boundingBoxHighlights.selectedId;

package/src/store/boundingBoxHighlights/types.ts

@@ -0,0 +1,13 @@
+export interface BoundingBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    pageNumber: number;
+    id: string;
+}
+
+export interface BoundingBoxHighlightsState {
+    boundingBoxes: BoundingBox[];
+    selectedId: string | null;
+}

package/src/store/createRootReducer.ts

@@ -4,6 +4,7 @@ import { commonReducer } from './common';
 import { creatorReducer } from './creator';
 import { drawingReducer } from './drawing';
 import { highlightReducer } from './highlight';
+import { boundingBoxHighlightsReducer } from './boundingBoxHighlights';
 import { optionsReducer } from './options';
 import { usersReducer } from './users';
 
@@ -14,6 +15,7 @@ const createRootReducer = (): Reducer =>
         creator: creatorReducer,
         drawing: drawingReducer,
         highlight: highlightReducer,
+        boundingBoxHighlights: boundingBoxHighlightsReducer,
         options: optionsReducer,
         users: usersReducer,
     });

package/src/store/eventing/boundingBoxHighlightNav.ts

@@ -0,0 +1,13 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { Event } from '../../@types';
+import { getSelectedBoundingBoxHighlightId } from '../boundingBoxHighlights';
+
+const handleNavigateBoundingBoxHighlight = (_prevState: AppState, nextState: AppState): void => {
+    const highlightId = getSelectedBoundingBoxHighlightId(nextState);
+    if (highlightId) {
+        eventManager.emit(Event.BOUNDING_BOX_HIGHLIGHT_NAVIGATE, highlightId);
+    }
+};
+
+export { handleNavigateBoundingBoxHighlight };

package/src/store/eventing/create.ts

@@ -1,9 +1,9 @@
 import eventManager from '../../common/EventManager';
 import { AsyncAction, Status } from './types';
 import { AppState } from '../types';
-import { Event } from '../../@types';
+import { Annotation, Event, NewAnnotation } from '../../@types';
 
-const emitCreateEvent = (action: AsyncAction, status: Status): void => {
+const emitCreateEvent = (action: AsyncAction<NewAnnotation, Annotation>, status: Status): void => {
     const { error, meta: { arg, requestId } = {}, payload } = action;
     eventManager.emit(Event.ANNOTATION_CREATE, {
         annotation: payload || arg,
@@ -16,7 +16,7 @@ const emitCreateEvent = (action: AsyncAction, status: Status): void => {
 };
 
 const createHandler = (status: Status) => (prevState: AppState, nextState: AppState, action: AsyncAction): void =>
-    emitCreateEvent(action, status);
+    emitCreateEvent(action as AsyncAction<NewAnnotation, Annotation>, status);
 
 const handleCreateErrorEvents = createHandler(Status.ERROR);
 const handleCreatePendingEvents = createHandler(Status.PENDING);

package/src/store/eventing/delete.ts

@@ -0,0 +1,27 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+import { Event } from '../../@types';
+
+const emitDeleteEvent = (action: AsyncAction<string, string>, status: Status): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload) return;
+    const id = payload ?? arg;
+    eventManager.emit(Event.ANNOTATION_DELETE, {
+        annotation: id ? { id } : undefined,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const deleteHandler = (status: Status) => (
+    _prev: AppState,
+    _next: AppState,
+    action: AsyncAction,
+): void => emitDeleteEvent(action as AsyncAction<string, string>, status);
+
+const handleDeleteErrorEvents = deleteHandler(Status.ERROR);
+const handleDeletePendingEvents = deleteHandler(Status.PENDING);
+const handleDeleteSuccessEvents = deleteHandler(Status.SUCCESS);
+
+export { handleDeleteErrorEvents, handleDeletePendingEvents, handleDeleteSuccessEvents };

package/src/store/eventing/middleware.ts

@@ -2,33 +2,72 @@ import noop from 'lodash/noop';
 import { Action, Dispatch, Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
 import {
     createAnnotationAction,
+    createReplyAction,
+    deleteAnnotationAction,
+    deleteReplyAction,
     fetchAnnotationsAction,
     setActiveAnnotationIdAction,
     setIsInitialized,
+    updateAnnotationAction,
+    updateReplyAction,
 } from '../annotations/actions';
+import { navigateBoundingBoxHighlightAction } from '../boundingBoxHighlights/actions';
 import { EventHandlerMap } from './types';
 import { handleActiveAnnotationEvents } from './active';
 import { handleAnnotationsInitialized } from './init';
+import { handleNavigateBoundingBoxHighlight } from './boundingBoxHighlightNav';
 import { handleCreateErrorEvents, handleCreatePendingEvents, handleCreateSuccessEvents } from './create';
+import { handleDeleteErrorEvents, handleDeletePendingEvents, handleDeleteSuccessEvents } from './delete';
 import { handleFetchErrorEvents } from './fetch';
+import { handleToggleAnnotationModeAction } from './mode';
+import {
+    handleReplyCreateErrorEvents,
+    handleReplyCreatePendingEvents,
+    handleReplyCreateSuccessEvents,
+} from './replyCreate';
+import {
+    handleReplyDeleteErrorEvents,
+    handleReplyDeletePendingEvents,
+    handleReplyDeleteSuccessEvents,
+} from './replyDelete';
+import {
+    handleReplyUpdateErrorEvents,
+    handleReplyUpdatePendingEvents,
+    handleReplyUpdateSuccessEvents,
+} from './replyUpdate';
 import { handleResetCreatorAction, handleSetStagedAction } from './staged';
 import { handleSetStatusAction } from './status';
-import { handleToggleAnnotationModeAction } from './mode';
+import { handleUpdateErrorEvents, handleUpdatePendingEvents, handleUpdateSuccessEvents } from './update';
 import { resetCreatorAction, setStagedAction, setStatusAction } from '../creator';
 import { toggleAnnotationModeAction } from '../common/actions';
 
-// Array of event handlers based on redux action. To add handling for new events add an entry keyed by action
-const eventHandlers: EventHandlerMap = {
+export const eventHandlers: EventHandlerMap = {
     [createAnnotationAction.fulfilled.toString()]: handleCreateSuccessEvents,
     [createAnnotationAction.pending.toString()]: handleCreatePendingEvents,
     [createAnnotationAction.rejected.toString()]: handleCreateErrorEvents,
+    [createReplyAction.fulfilled.toString()]: handleReplyCreateSuccessEvents,
+    [createReplyAction.pending.toString()]: handleReplyCreatePendingEvents,
+    [createReplyAction.rejected.toString()]: handleReplyCreateErrorEvents,
+    [deleteAnnotationAction.fulfilled.toString()]: handleDeleteSuccessEvents,
+    [deleteAnnotationAction.pending.toString()]: handleDeletePendingEvents,
+    [deleteAnnotationAction.rejected.toString()]: handleDeleteErrorEvents,
+    [deleteReplyAction.fulfilled.toString()]: handleReplyDeleteSuccessEvents,
+    [deleteReplyAction.pending.toString()]: handleReplyDeletePendingEvents,
+    [deleteReplyAction.rejected.toString()]: handleReplyDeleteErrorEvents,
     [fetchAnnotationsAction.rejected.toString()]: handleFetchErrorEvents,
+    [navigateBoundingBoxHighlightAction.toString()]: handleNavigateBoundingBoxHighlight,
     [resetCreatorAction.toString()]: handleResetCreatorAction,
     [setActiveAnnotationIdAction.toString()]: handleActiveAnnotationEvents,
     [setIsInitialized.toString()]: handleAnnotationsInitialized,
     [setStagedAction.toString()]: handleSetStagedAction,
     [setStatusAction.toString()]: handleSetStatusAction,
     [toggleAnnotationModeAction.toString()]: handleToggleAnnotationModeAction,
+    [updateAnnotationAction.fulfilled.toString()]: handleUpdateSuccessEvents,
+    [updateAnnotationAction.pending.toString()]: handleUpdatePendingEvents,
+    [updateAnnotationAction.rejected.toString()]: handleUpdateErrorEvents,
+    [updateReplyAction.fulfilled.toString()]: handleReplyUpdateSuccessEvents,
+    [updateReplyAction.pending.toString()]: handleReplyUpdatePendingEvents,
+    [updateReplyAction.rejected.toString()]: handleReplyUpdateErrorEvents,
 };
 
 function getEventingMiddleware(handlers: EventHandlerMap = eventHandlers): Middleware {

package/src/store/eventing/replyCreate.ts

@@ -0,0 +1,34 @@
+import eventManager from '../../common/EventManager';
+import { Reply , Event } from '../../@types';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+
+type ReplyCreateArg = { annotationId: string; message: string };
+type ReplyCreatePayload = { annotationId: string; reply: Reply };
+
+const emitReplyCreateEvent = (
+    action: AsyncAction<ReplyCreateArg, ReplyCreatePayload>,
+    status: Status,
+): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload?.reply) return;
+    const annotationId = payload?.annotationId ?? arg?.annotationId;
+    eventManager.emit(Event.ANNOTATION_REPLY_CREATE, {
+        annotation: annotationId ? { id: annotationId } : undefined,
+        annotationReply: payload?.reply,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const replyCreateHandler = (status: Status) => (
+    _prev: AppState,
+    _next: AppState,
+    action: AsyncAction,
+): void => emitReplyCreateEvent(action as AsyncAction<ReplyCreateArg, ReplyCreatePayload>, status);
+
+const handleReplyCreateErrorEvents = replyCreateHandler(Status.ERROR);
+const handleReplyCreatePendingEvents = replyCreateHandler(Status.PENDING);
+const handleReplyCreateSuccessEvents = replyCreateHandler(Status.SUCCESS);
+
+export { handleReplyCreateErrorEvents, handleReplyCreatePendingEvents, handleReplyCreateSuccessEvents };

package/src/store/eventing/replyDelete.ts

@@ -0,0 +1,35 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+import { Event } from '../../@types';
+
+type ReplyDeleteArg = { annotationId: string; replyId: string };
+type ReplyDeletePayload = { annotationId: string; replyId: string };
+
+const emitReplyDeleteEvent = (
+    action: AsyncAction<ReplyDeleteArg, ReplyDeletePayload>,
+    status: Status,
+): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload) return;
+    const annotationId = payload?.annotationId ?? arg?.annotationId;
+    const replyId = payload?.replyId ?? arg?.replyId;
+    eventManager.emit(Event.ANNOTATION_REPLY_DELETE, {
+        annotation: annotationId ? { id: annotationId } : undefined,
+        annotationReply: replyId ? { id: replyId } : undefined,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const replyDeleteHandler = (status: Status) => (
+    _prev: AppState,
+    _next: AppState,
+    action: AsyncAction,
+): void => emitReplyDeleteEvent(action as AsyncAction<ReplyDeleteArg, ReplyDeletePayload>, status);
+
+const handleReplyDeleteErrorEvents = replyDeleteHandler(Status.ERROR);
+const handleReplyDeletePendingEvents = replyDeleteHandler(Status.PENDING);
+const handleReplyDeleteSuccessEvents = replyDeleteHandler(Status.SUCCESS);
+
+export { handleReplyDeleteErrorEvents, handleReplyDeletePendingEvents, handleReplyDeleteSuccessEvents };

package/src/store/eventing/replyUpdate.ts

@@ -0,0 +1,39 @@
+import eventManager from '../../common/EventManager';
+import { Reply , Event } from '../../@types';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+
+type ReplyUpdateArg = {
+    annotationId: string;
+    replyId: string;
+    payload: { message?: string; status?: string };
+};
+type ReplyUpdatePayload = { annotationId: string; reply: Reply };
+
+const emitReplyUpdateEvent = (
+    action: AsyncAction<ReplyUpdateArg, ReplyUpdatePayload>,
+    status: Status,
+): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload?.reply) return;
+    const annotationId = payload?.annotationId ?? arg?.annotationId;
+    const annotationReply = payload?.reply ?? (arg ? { id: arg.replyId } : undefined);
+    eventManager.emit(Event.ANNOTATION_REPLY_UPDATE, {
+        annotation: annotationId ? { id: annotationId } : undefined,
+        annotationReply,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const replyUpdateHandler = (status: Status) => (
+    _prev: AppState,
+    _next: AppState,
+    action: AsyncAction,
+): void => emitReplyUpdateEvent(action as AsyncAction<ReplyUpdateArg, ReplyUpdatePayload>, status);
+
+const handleReplyUpdateErrorEvents = replyUpdateHandler(Status.ERROR);
+const handleReplyUpdatePendingEvents = replyUpdateHandler(Status.PENDING);
+const handleReplyUpdateSuccessEvents = replyUpdateHandler(Status.SUCCESS);
+
+export { handleReplyUpdateErrorEvents, handleReplyUpdatePendingEvents, handleReplyUpdateSuccessEvents };

package/src/store/eventing/types.ts

@@ -1,6 +1,6 @@
 import { Action, SerializedError } from '@reduxjs/toolkit';
 import { AppState } from '../types';
-import { Annotation, NewAnnotation } from '../../@types';
+import { Annotation } from '../../@types';
 
 export enum Status {
     ERROR = 'error',
@@ -22,10 +22,10 @@ export interface ThunkMeta<M> {
     requestId: string;
 }
 
-export interface AsyncAction extends Action {
+export interface AsyncAction<TArg = unknown, TPayload = unknown> extends Action {
     error?: SerializedError;
-    meta?: ThunkMeta<NewAnnotation>;
-    payload?: Annotation;
+    meta?: ThunkMeta<TArg>;
+    payload?: TPayload;
 }
 
 export type EventHandler = (prevState: AppState, nextState: AppState, action: Action | AsyncAction) => void;