feat(annotation-thread): introduce useAnnotationThread and handle useAnnotatorEvents (#3097)

* feat(annotation-thread): handle events in AnnotationThreadContent

* feat(annotation-thread): handle events in AnnotationThreadContent

Author: wpiesiak

src/elements/content-sidebar/activity-feed/annotation-thread/AnnotationThread.js

@@ -28,7 +28,7 @@ type Props = {
     className: string,
     clientName: string,
     currentUser: User,
-    eventEmitter?: EventEmitter,
+    eventEmitter: EventEmitter,
     file: BoxItem,
     handleCancel: () => void,
     language?: string,
@@ -46,6 +46,7 @@ const AnnotationThread = ({
     className = '',
     clientName,
     currentUser,
+    eventEmitter,
     file,
     handleCancel,
     language,
@@ -102,6 +103,7 @@ const AnnotationThread = ({
                         api={api}
                         annotationId={annotationId}
                         currentUser={currentUser}
+                        eventEmitter={eventEmitter}
                         file={file}
                         getAvatarUrl={getAvatarUrl}
                         getMentionWithQuery={getMentionWithQuery}

src/elements/content-sidebar/activity-feed/annotation-thread/AnnotationThreadContent.js

@@ -1,22 +1,23 @@
 // @flow
 import React from 'react';
+import type EventEmitter from 'events';
+import useAnnotationThread from './useAnnotationThread';
 import ActivityError from '../common/activity-error';
 import ActivityThread from '../activity-feed/ActivityThread';
 import AnnotationActivity from '../annotations';
 import API from '../../../../api/APIFactory';
 import LoadingIndicator from '../../../../components/loading-indicator/LoadingIndicator';
-import useAnnotationAPI from './useAnnotationAPI';
 
 import type { BoxItem, SelectorItems, User } from '../../../../common/types/core';
 import type { ErrorContextProps } from '../../../../common/types/api';
-import type { BoxCommentPermission, FeedItemStatus } from '../../../../common/types/feed';
 
 import './AnnotationThreadContent.scss';
 
 type Props = {
     annotationId: string,
     api: API,
     currentUser: User,
+    eventEmitter: EventEmitter,
     file: BoxItem,
     getAvatarUrl: string => Promise<?string>,
     getMentionWithQuery: (searchStr: string) => void,
@@ -27,6 +28,7 @@ const AnnotationThreadContent = ({
     annotationId,
     api,
     currentUser,
+    eventEmitter,
     file,
     getAvatarUrl,
     getMentionWithQuery,
@@ -40,31 +42,18 @@ const AnnotationThreadContent = ({
         replies,
         isLoading,
         error,
-        handleEdit,
-        handleStatusChange,
-        handleDelete,
-        handleCreateReply,
-        handleDeleteReply,
-        handleEditReply,
-    } = useAnnotationAPI({
+        annotationActions: { handleAnnotationStatusChange, handleAnnotationDelete, handleAnnotationEdit },
+        repliesActions: { handleReplyEdit, handleReplyCreate, handleReplyDelete },
+    } = useAnnotationThread({
         api,
         annotationId,
         currentUser,
+        eventEmitter,
         fileId,
         filePermissions: permissions,
         errorCallback: onError,
     });
 
-    const onReplyEditHandler = (
-        id: string,
-        text: string,
-        status?: FeedItemStatus,
-        hasMention?: boolean,
-        replyPermissions: BoxCommentPermission,
-    ) => {
-        handleEditReply(id, text, status, replyPermissions);
-    };
-
     return (
         <ActivityThread
             hasReplies
@@ -73,9 +62,9 @@ const AnnotationThreadContent = ({
             isAlwaysExpanded
             isRepliesLoading={isLoading}
             mentionSelectorContacts={mentionSelectorContacts}
-            onReplyCreate={handleCreateReply}
-            onReplyDelete={handleDeleteReply}
-            onReplyEdit={onReplyEditHandler}
+            onReplyCreate={handleReplyCreate}
+            onReplyDelete={handleReplyDelete}
+            onReplyEdit={handleReplyEdit}
             replies={replies}
             repliesTotalCount={replies.length}
         >
@@ -93,9 +82,9 @@ const AnnotationThreadContent = ({
                     item={annotation}
                     getMentionWithQuery={getMentionWithQuery}
                     mentionSelectorContacts={mentionSelectorContacts}
-                    onEdit={handleEdit}
-                    onDelete={handleDelete}
-                    onStatusChange={handleStatusChange}
+                    onEdit={handleAnnotationEdit}
+                    onDelete={handleAnnotationDelete}
+                    onStatusChange={handleAnnotationStatusChange}
                 />
             )}
         </ActivityThread>

src/elements/content-sidebar/activity-feed/annotation-thread/__tests__/AnnotationThreadContent.test.js

@@ -13,18 +13,22 @@ let mockedError;
 let mockedIsLoading = false;
 
 jest.mock('react-intl', () => jest.requireActual('react-intl'));
-jest.mock('../useAnnotationAPI', () => {
+jest.mock('../useAnnotationThread', () => {
     return jest.fn(() => ({
         annotation: mockedAnnotation,
+        annotationActions: {
+            handleDelete: jest.fn(),
+            handleEdit: jest.fn(),
+            handleResolve: jest.fn(),
+        },
         error: mockedError,
         isLoading: mockedIsLoading,
-        handleDelete: jest.fn(),
-        handleEdit: jest.fn(),
-        handleResolve: jest.fn(),
         replies: [],
-        handleCreateReply: jest.fn(),
-        handleEditReply: jest.fn(),
-        handleDeleteReply: jest.fn(),
+        repliesActions: {
+            handleCreateReply: jest.fn(),
+            handleEditReply: jest.fn(),
+            handleDeleteReply: jest.fn(),
+        },
     }));
 });
 
@@ -38,6 +42,7 @@ describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThr
                 getAnnotation: jest.fn(),
             }),
         },
+        eventEmitter: {},
         file: {
             id: 'fileId',
             permissions: {

src/elements/content-sidebar/activity-feed/annotation-thread/__tests__/useAnnotationAPI.test.js

@@ -10,8 +10,6 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotattionAPI', () => {
         updateAnnotation = jest.fn(),
         deleteAnnotation = jest.fn(),
         createAnnotationReply = jest.fn,
-        deleteComment = jest.fn(),
-        updateComment = jest.fn(),
     }) => {
         const getAnnotationsAPI = () => ({
             createAnnotationReply,
@@ -20,14 +18,8 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotattionAPI', () => {
             deleteAnnotation,
         });
 
-        const getThreadedCommentsAPI = () => ({
-            deleteComment,
-            updateComment,
-        });
-
         return {
             getAnnotationsAPI,
-            getThreadedCommentsAPI,
         };
     };
 
@@ -38,7 +30,6 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotattionAPI', () => {
         renderHook(() =>
             useAnnotationAPI({
                 api: getApi({}),
-                currentUser: {},
                 fileId: 'fileId',
                 filePermissions,
                 annotationId: annotation.id,
@@ -47,80 +38,80 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotattionAPI', () => {
             }),
         );
 
-    test('Should return correct default values', () => {
-        const { result } = getHook();
-
-        expect(result.current.annotation).toEqual(undefined);
-        expect(result.current.isLoading).toEqual(true);
-        expect(result.current.error).toEqual(undefined);
-        expect(result.current.replies).toEqual([]);
-    });
-
-    test('Should call fetch annotation on mount', () => {
-        const { replies, ...normalizedAnnotation } = annotation;
-        const mockGetAnnotation = jest.fn((fileId, annotationId, permissions, successCallback) => {
-            successCallback(annotation);
-        });
+    test('should call api function on handleFetch with correct arguments', () => {
+        const mockSuccessCallback = jest.fn();
+        const mockGetAnnotation = jest.fn();
         const api = getApi({ getAnnotation: mockGetAnnotation });
 
         const { result } = getHook({ api });
 
+        act(() => {
+            result.current.handleFetch({ annotationId: annotation.id, successCallback: mockSuccessCallback });
+        });
+
         expect(mockGetAnnotation).toBeCalledWith(
             'fileId',
             annotation.id,
             { can_annotate: true, can_view_annotations: true },
-            expect.any(Function),
-            expect.any(Function),
+            mockSuccessCallback,
+            errorCallback,
             true,
         );
-
-        expect(result.current.isLoading).toEqual(false);
-        expect(result.current.error).toEqual(undefined);
-        expect(result.current.annotation).toEqual(normalizedAnnotation);
-        expect(result.current.replies).toEqual(replies);
     });
 
-    test('should call api function on handleEdit with correct arguments and set pending state', () => {
+    test('should call api function on handleEdit with correct arguments', () => {
+        const mockSuccessCallback = jest.fn();
         const mockUpdateAnnotation = jest.fn();
         const api = getApi({ updateAnnotation: mockUpdateAnnotation });
         const { result } = getHook({ api });
 
         act(() => {
-            result.current.handleEdit(annotation.id, 'new text', { can_edit: true });
+            result.current.handleEdit({
+                id: annotation.id,
+                permissions: { can_edit: true },
+                successCallback: mockSuccessCallback,
+                text: 'new text',
+            });
         });
 
         expect(mockUpdateAnnotation).toBeCalledWith(
             'fileId',
             annotation.id,
             { can_edit: true },
             { message: 'new text' },
-            expect.any(Function),
-            expect.any(Function),
+            mockSuccessCallback,
+            errorCallback,
         );
-        expect(result.current.annotation.isPending).toEqual(true);
     });
 
     test('should call api function on handleStatusChange with correct arguments', () => {
+        const mockSuccessCallback = jest.fn();
         const mockUpdateAnnotation = jest.fn();
         const api = getApi({ updateAnnotation: mockUpdateAnnotation });
         const { result } = getHook({ api });
 
         act(() => {
-            result.current.handleStatusChange(annotation.id, 'resolved', { can_resolve: true });
+            result.current.handleStatusChange({
+                id: annotation.id,
+                permissions: { can_resolve: true },
+                status: 'resolved',
+                successCallback: mockSuccessCallback,
+            });
         });
 
         expect(mockUpdateAnnotation).toBeCalledWith(
             'fileId',
             annotation.id,
             { can_resolve: true },
             { status: 'resolved' },
-            expect.any(Function),
-            expect.any(Function),
+            mockSuccessCallback,
+            errorCallback,
         );
-        expect(result.current.annotation.isPending).toEqual(true);
     });
 
     test('should call api function on handleDelete with correct arguments', () => {
+        const mockSuccessCallback = jest.fn();
+
         const mockDeleteAnnotation = jest.fn();
         const api = getApi({ deleteAnnotation: mockDeleteAnnotation });
         const { result } = getHook({ api });
@@ -129,74 +120,16 @@ describe('src/elements/content-sidebar/activity-feed/useAnnotattionAPI', () => {
             result.current.handleDelete({
                 id: annotation.id,
                 permissions: { can_delete: true },
+                successCallback: mockSuccessCallback,
             });
         });
 
         expect(mockDeleteAnnotation).toBeCalledWith(
             'fileId',
             annotation.id,
             { can_delete: true },
-            expect.any(Function),
-            expect.any(Function),
+            mockSuccessCallback,
+            errorCallback,
         );
-        expect(result.current.annotation.isPending).toEqual(true);
-    });
-
-    test('should call api function on handleDeleteReply and set correct values on successCallback', () => {
-        const mockDeleteComment = jest.fn(({ successCallback }) => {
-            successCallback();
-        });
-        const api = getApi({ deleteComment: mockDeleteComment });
-        const { id, permissions } = annotation.replies[0];
-        const { result } = getHook({ api });
-
-        act(() => {
-            result.current.handleDeleteReply({ id, permissions });
-        });
-        expect(result.current.replies.length).toEqual(0);
-    });
-
-    test('should call api function on handleEditReply and set correct values on successCallback', () => {
-        const message = 'New message';
-        const updatedReply = { ...annotation.replies[0], message };
-        const mockUpdateComment = jest.fn(({ successCallback }) => {
-            successCallback(updatedReply);
-        });
-        const mockGetAnnotation = jest.fn((fileId, annotationId, permissions, successCallback) => {
-            successCallback(annotation);
-        });
-        const api = getApi({ updateComment: mockUpdateComment, getAnnotation: mockGetAnnotation });
-        const { id, permissions } = annotation.replies[0];
-
-        const { result } = getHook({ api });
-
-        act(() => {
-            result.current.handleEditReply(id, message, undefined, false, permissions);
-        });
-
-        expect(result.current.replies[0].isPending).toEqual(false);
-        expect(result.current.replies[0].message).toEqual(message);
-    });
-
-    test('should call api function on handleCreateReply and set correct values on successCallback', () => {
-        const message = 'New message';
-        const newReply = { ...annotation.replies[0], message, id: 'reply_new' };
-        const mockCreateAnnotationReply = jest.fn((fileId, annotationId, permissions, newMessage, successCallback) => {
-            successCallback(newReply);
-        });
-        const mockGetAnnotation = jest.fn((fileId, annotationId, permissions, successCallback) => {
-            successCallback(annotation);
-        });
-        const api = getApi({ createAnnotationReply: mockCreateAnnotationReply, getAnnotation: mockGetAnnotation });
-
-        const { result } = getHook({ api });
-
-        act(() => {
-            result.current.handleCreateReply(message);
-        });
-
-        const createdReply = result.current.replies[1];
-        expect(createdReply.isPending).toEqual(false);
-        expect(createdReply.message).toEqual(message);
     });
 });