feat(annotation-thread): use of event emitter and hooks refactoring (#3184)

* feat(annotation-thread): use of event emitter and hooks refactoring

* feat(annotation-thread): use of event emitter and hooks refactoring

Author: kkuliczkowski-box

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

@@ -11,6 +11,7 @@ import { IntlProvider } from 'react-intl';
 import type EventEmitter from 'events';
 import AnnotationThreadContent from './AnnotationThreadContent';
 import AnnotationThreadCreate from './AnnotationThreadCreate';
+import useAnnotationThread from './useAnnotationThread';
 import API from '../../../../api/APIFactory';
 import { DEFAULT_COLLAB_DEBOUNCE, DEFAULT_HOSTNAME_API } from '../../../../constants';
 
@@ -59,6 +60,8 @@ const AnnotationThread = ({
     target,
     token,
 }: Props) => {
+    const [mentionSelectorContacts, setMentionSelectorContacts] = React.useState<SelectorItems<>>([]);
+
     const api = new API({
         apiHost,
         cache,
@@ -67,7 +70,25 @@ const AnnotationThread = ({
         token,
     });
 
-    const [mentionSelectorContacts, setMentionSelectorContacts] = React.useState([]);
+    const { id: fileId, permissions = {} } = file;
+
+    const {
+        annotation,
+        replies,
+        isLoading,
+        error,
+        annotationActions: { handleAnnotationDelete, handleAnnotationEdit, handleAnnotationStatusChange },
+        annotationEvents: { handleAnnotationCreateEnd: handleAnnotationCreateEndEvent, handleAnnotationCreateStart },
+        repliesActions: { handleReplyEdit, handleReplyCreate, handleReplyDelete },
+    } = useAnnotationThread({
+        api,
+        annotationId,
+        currentUser,
+        fileId,
+        filePermissions: permissions,
+        errorCallback: onError,
+        eventEmitter,
+    });
 
     const getAvatarUrl = async (userId: string): Promise<?string> =>
         api.getUsersAPI(false).getAvatarUrlWithAccessToken(userId, file.id);
@@ -85,6 +106,11 @@ const AnnotationThread = ({
         );
     }, DEFAULT_COLLAB_DEBOUNCE);
 
+    const handleAnnotationCreateEnd = (newAnnotation: Object, requestId: string) => {
+        handleAnnotationCreateEndEvent(newAnnotation, requestId);
+        onAnnotationCreate(newAnnotation);
+    };
+
     return (
         <div className={classNames('AnnotationThread', className)} data-testid="annotation-thread">
             <IntlProvider locale={language} messages={messages}>
@@ -97,22 +123,28 @@ const AnnotationThread = ({
                         getMentionWithQuery={getMentionWithQuery}
                         handleCancel={handleCancel}
                         mentionSelectorContacts={mentionSelectorContacts}
-                        onAnnotationCreate={onAnnotationCreate}
+                        onAnnotationCreateEnd={handleAnnotationCreateEnd}
+                        onAnnotationCreateStart={handleAnnotationCreateStart}
                         onError={onError}
                         target={target}
                     />
                 ) : (
                     <AnnotationThreadContent
-                        api={api}
-                        annotationId={annotationId}
+                        annotation={annotation}
                         currentUser={currentUser}
-                        eventEmitter={eventEmitter}
-                        file={file}
+                        error={error}
                         getAvatarUrl={getAvatarUrl}
                         getMentionWithQuery={getMentionWithQuery}
                         getUserProfileUrl={getUserProfileUrl}
+                        isLoading={isLoading}
                         mentionSelectorContacts={mentionSelectorContacts}
-                        onError={onError}
+                        onAnnotationDelete={handleAnnotationDelete}
+                        onAnnotationEdit={handleAnnotationEdit}
+                        onAnnotationStatusChange={handleAnnotationStatusChange}
+                        onReplyCreate={handleReplyCreate}
+                        onReplyDelete={handleReplyDelete}
+                        onReplyEdit={handleReplyEdit}
+                        replies={replies}
                     />
                 )}
             </IntlProvider>

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

@@ -1,62 +1,69 @@
 // @flow
 import React from 'react';
-import type EventEmitter from 'events';
-import useAnnotationThread from './useAnnotationThread';
+import type { MessageDescriptor } from 'react-intl';
 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 type { BoxItem, SelectorItems, User } from '../../../../common/types/core';
-import type { ErrorContextProps } from '../../../../common/types/api';
+import type {
+    Annotation,
+    AnnotationPermission,
+    BoxCommentPermission,
+    Comment,
+    FeedItemStatus,
+} from '../../../../common/types/feed';
+import type { SelectorItems, User } from '../../../../common/types/core';
 import type { GetProfileUrlCallback } from '../../../common/flowTypes';
 
 import './AnnotationThreadContent.scss';
 
 type Props = {
-    annotationId: string,
-    api: API,
+    annotation?: Annotation,
     currentUser: User,
-    eventEmitter: EventEmitter,
-    file: BoxItem,
+    error?: {
+        message: MessageDescriptor,
+        title: MessageDescriptor,
+    },
     getAvatarUrl: string => Promise<?string>,
     getMentionWithQuery: (searchStr: string) => void,
     getUserProfileUrl?: GetProfileUrlCallback,
+    isLoading: boolean,
     mentionSelectorContacts: SelectorItems<>,
-} & ErrorContextProps;
+    onAnnotationDelete?: ({ id: string, permissions: AnnotationPermission }) => any,
+    onAnnotationEdit?: (id: string, text: string, permissions: AnnotationPermission) => void,
+    onAnnotationStatusChange?: (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => void,
+    onReplyCreate?: (text: string) => void,
+    onReplyDelete?: ({ id: string, permissions: BoxCommentPermission }) => void,
+    onReplyEdit?: (
+        id: string,
+        text: string,
+        status?: FeedItemStatus,
+        hasMention?: boolean,
+        permissions: BoxCommentPermission,
+        onSuccess: ?Function,
+        onError: ?Function,
+    ) => void,
+    replies?: Array<Comment>,
+};
 
 const AnnotationThreadContent = ({
-    annotationId,
-    api,
+    annotation,
     currentUser,
-    eventEmitter,
-    file,
+    error,
     getAvatarUrl,
     getMentionWithQuery,
     getUserProfileUrl,
+    isLoading,
     mentionSelectorContacts,
-    onError,
+    onAnnotationDelete,
+    onAnnotationEdit,
+    onAnnotationStatusChange,
+    onReplyCreate,
+    onReplyDelete,
+    onReplyEdit,
+    replies = [],
 }: Props) => {
-    const { id: fileId, permissions = {} } = file;
-
-    const {
-        annotation,
-        replies,
-        isLoading,
-        error,
-        annotationActions: { handleAnnotationStatusChange, handleAnnotationDelete, handleAnnotationEdit },
-        repliesActions: { handleReplyEdit, handleReplyCreate, handleReplyDelete },
-    } = useAnnotationThread({
-        api,
-        annotationId,
-        currentUser,
-        eventEmitter,
-        fileId,
-        filePermissions: permissions,
-        errorCallback: onError,
-    });
-
     return (
         <>
             {error && <ActivityError {...error} />}
@@ -67,30 +74,30 @@ const AnnotationThreadContent = ({
             )}
             {annotation && (
                 <ActivityThread
-                    hasReplies
                     getAvatarUrl={getAvatarUrl}
                     getMentionWithQuery={getMentionWithQuery}
                     getUserProfileUrl={getUserProfileUrl}
+                    hasReplies
                     isAlwaysExpanded
                     isRepliesLoading={isLoading}
                     mentionSelectorContacts={mentionSelectorContacts}
-                    onReplyCreate={handleReplyCreate}
-                    onReplyDelete={handleReplyDelete}
-                    onReplyEdit={handleReplyEdit}
+                    onReplyCreate={onReplyCreate}
+                    onReplyDelete={onReplyDelete}
+                    onReplyEdit={onReplyEdit}
                     replies={replies}
                     repliesTotalCount={replies.length}
                 >
                     <AnnotationActivity
-                        getAvatarUrl={getAvatarUrl}
                         currentUser={currentUser}
-                        isCurrentVersion
-                        item={annotation}
+                        getAvatarUrl={getAvatarUrl}
                         getMentionWithQuery={getMentionWithQuery}
                         getUserProfileUrl={getUserProfileUrl}
+                        isCurrentVersion
+                        item={annotation}
                         mentionSelectorContacts={mentionSelectorContacts}
-                        onEdit={handleAnnotationEdit}
-                        onDelete={handleAnnotationDelete}
-                        onStatusChange={handleAnnotationStatusChange}
+                        onDelete={onAnnotationDelete}
+                        onEdit={onAnnotationEdit}
+                        onStatusChange={onAnnotationStatusChange}
                     />
                 </ActivityThread>
             )}

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

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import classNames from 'classnames';
+import uniqueId from 'lodash/uniqueId';
 import API from '../../../../api/APIFactory';
 import CommentForm from '../comment-form';
 import { getBadUserError } from '../../../../utils/error';
@@ -19,19 +20,21 @@ type Props = {
     getMentionWithQuery: (searchStr: string) => void,
     handleCancel: () => void,
     mentionSelectorContacts: SelectorItems<>,
-    onAnnotationCreate: (annotation: Annotation) => void,
+    onAnnotationCreateEnd: (annotation: Object, requestId: string) => void,
+    onAnnotationCreateStart: (annotation: Object, requestId: string) => void,
     target: Target,
 } & ErrorContextProps;
 
 const AnnotationThreadCreate = ({
     api,
     currentUser,
+    file,
     getAvatarUrl,
     getMentionWithQuery,
-    file,
     handleCancel,
     mentionSelectorContacts,
-    onAnnotationCreate,
+    onAnnotationCreateEnd,
+    onAnnotationCreateStart,
     onError,
     target,
 }: Props) => {
@@ -44,15 +47,19 @@ const AnnotationThreadCreate = ({
             throw getBadUserError();
         }
 
+        const requestId = uniqueId('annotation_');
+
         const successCallback = (annotation: Annotation) => {
-            onAnnotationCreate(annotation);
+            onAnnotationCreateEnd(annotation, requestId);
         };
 
         const payload = {
             description: { message: text },
             target,
         };
 
+        onAnnotationCreateStart(payload, requestId);
+
         api.getAnnotationsAPI(false).createAnnotation(
             id,
             file_version.id,

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

@@ -3,16 +3,48 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 import AnnotationThread from '../AnnotationThread';
+import { annotation as mockAnnotation } from '../../../../../__mocks__/annotations';
 
 jest.mock('react-intl', () => jest.requireActual('react-intl'));
 jest.mock('../AnnotationThreadContent', () => () => <div data-testid="annotation-content" />);
 jest.mock('../AnnotationThreadCreate', () => () => <div data-testid="annotation-create" />);
 
+jest.mock('../useAnnotationThread', () => {
+    return jest.fn(() => ({
+        annotation: mockAnnotation,
+        annotationActions: {
+            handleDelete: jest.fn(),
+            handleEdit: jest.fn(),
+            handleResolve: jest.fn(),
+        },
+        annotationEvents: {
+            handleAnnotationCreateStart: jest.fn(),
+            handleAnnotationCreateEnd: jest.fn(),
+        },
+        error: {},
+        isLoading: false,
+        replies: [],
+        repliesActions: {
+            handleCreateReply: jest.fn(),
+            handleEditReply: jest.fn(),
+            handleDeleteReply: jest.fn(),
+        },
+    }));
+});
+
 describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThread', () => {
+    const file = {
+        id: 'fileId',
+        permissions: {
+            can_view_annotations: true,
+            can_annotate: true,
+        },
+    };
+
     const IntlWrapper = ({ children }: { children?: React.ReactNode }) => {
         return <IntlProvider locale="en">{children}</IntlProvider>;
     };
-    const getWrapper = props => render(<AnnotationThread {...props} />, { wrapper: IntlWrapper });
+    const getWrapper = props => render(<AnnotationThread file={file} {...props} />, { wrapper: IntlWrapper });
 
     test('should render AnnotationThreadCreate if annotationId is undefined', async () => {
         const { queryByTestId } = getWrapper();