box-annotations 5.2.1-beta.6 → 5.2.1-beta.8

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,9 +40,83 @@ 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);
         });
     },
 );

package/src/store/annotations/reducer.ts

@@ -3,10 +3,13 @@ import { formatDrawing, isDrawing } from '../../drawing/drawingUtil';
 import { AnnotationsState } from './types';
 import {
     createAnnotationAction,
+    createReplyAction,
+    deleteAnnotationAction,
     fetchAnnotationsAction,
     removeAnnotationAction,
     setActiveAnnotationIdAction,
     setIsInitialized,
+    updateAnnotationAction,
 } from './actions';
 import { setViewModeAction } from '../options/actions';
 
@@ -14,6 +17,7 @@ const activeAnnotationId = createReducer<AnnotationsState['activeId']>(null, bui
     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(setViewModeAction, (state, { payload }) => {
@@ -27,6 +31,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));
@@ -38,9 +43,21 @@ 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(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(annotation => {
                 state[annotation.id] = isDrawing(annotation) ? formatDrawing(annotation) : annotation;

package/src/store/options/reducer.ts

@@ -9,7 +9,8 @@ import {
     setViewModeAction,
 } from './actions';
 
-export const initialState = {
+export const initialState: OptionsState = {
+    apiHost: '',
     features: {},
     fileId: null,
     fileVersionId: null,
@@ -17,6 +18,7 @@ export const initialState = {
     permissions: {},
     rotation: 0,
     scale: 1,
+    token: '',
     viewMode: 'annotations' as ViewMode,
 };
 

package/src/store/options/selectors.ts

@@ -6,6 +6,7 @@ import { ViewMode } from './types';
 
 type State = Pick<AppState, 'options'>;
 
+export const getApiHost = (state: State): string => state.options.apiHost;
 export const getFeatures = (state: State): Features => state.options.features;
 export const getViewMode = (state: State): ViewMode => state.options.viewMode;
 export const getFileId = (state: State): string | null => state.options.fileId;
@@ -14,5 +15,6 @@ export const getIsCurrentFileVersion = (state: State): boolean => state.options.
 export const getPermissions = (state: State): Permissions => state.options.permissions;
 export const getRotation = (state: State): number => state.options.rotation;
 export const getScale = (state: State): number => state.options.scale;
+export const getToken = (state: State): string => state.options.token;
 export const isFeatureEnabled = (state: State, featurename: string): boolean =>
     getProp(getFeatures(state), featurename, false);

package/src/store/options/types.ts

@@ -5,6 +5,7 @@ import { Permissions } from '../../@types';
 export type ViewMode = 'annotations' | 'boundingBoxes';
 
 export type OptionsState = {
+    apiHost: string;
     features: Features;
     fileId: string | null;
     fileVersionId: string | null;
@@ -12,5 +13,6 @@ export type OptionsState = {
     permissions: Permissions;
     rotation: number;
     scale: number;
+    token: string;
     viewMode: ViewMode;
 };

package/src/components/Popups/PopupReplyV2.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-/**
- * Placeholder for the threaded annotation reply popup (V2).
- * Replaces PopupReply when the isThreadedAnnotation feature flag is enabled.
- * Currently renders an empty container — props will be wired up when V2 is implemented.
- */
-export default function PopupReplyV2(): JSX.Element {
-    return <div data-testid="popup-reply-v2" />;
-}