feat(annotation-thread): annotation thread related hooks refactoring (#3192)

* feat(annotation-thread): annotation thread related 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

@@ -70,24 +70,27 @@ const AnnotationThread = ({
         token,
     });
 
-    const { id: fileId, permissions = {} } = file;
-
     const {
         annotation,
         replies,
         isLoading,
         error,
-        annotationActions: { handleAnnotationDelete, handleAnnotationEdit, handleAnnotationStatusChange },
-        annotationEvents: { handleAnnotationCreateEnd: handleAnnotationCreateEndEvent, handleAnnotationCreateStart },
+        annotationActions: {
+            handleAnnotationCreate,
+            handleAnnotationDelete,
+            handleAnnotationEdit,
+            handleAnnotationStatusChange,
+        },
         repliesActions: { handleReplyEdit, handleReplyCreate, handleReplyDelete },
     } = useAnnotationThread({
         api,
         annotationId,
         currentUser,
-        fileId,
-        filePermissions: permissions,
         errorCallback: onError,
         eventEmitter,
+        file,
+        onAnnotationCreate,
+        target,
     });
 
     const getAvatarUrl = async (userId: string): Promise<?string> =>
@@ -106,27 +109,18 @@ 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}>
                 {!annotationId ? (
                     <AnnotationThreadCreate
-                        api={api}
                         currentUser={currentUser}
-                        file={file}
                         getAvatarUrl={getAvatarUrl}
                         getMentionWithQuery={getMentionWithQuery}
-                        handleCancel={handleCancel}
+                        isPending={isLoading}
                         mentionSelectorContacts={mentionSelectorContacts}
-                        onAnnotationCreateEnd={handleAnnotationCreateEnd}
-                        onAnnotationCreateStart={handleAnnotationCreateStart}
-                        onError={onError}
-                        target={target}
+                        onFormCancel={handleCancel}
+                        onFormSubmit={handleAnnotationCreate}
                     />
                 ) : (
                     <AnnotationThreadContent

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

@@ -1,6 +1,5 @@
 // @flow
 import React from 'react';
-import type { MessageDescriptor } from 'react-intl';
 import ActivityError from '../common/activity-error';
 import ActivityThread from '../activity-feed/ActivityThread';
 import AnnotationActivity from '../annotations';
@@ -15,16 +14,14 @@ import type {
 } from '../../../../common/types/feed';
 import type { SelectorItems, User } from '../../../../common/types/core';
 import type { GetProfileUrlCallback } from '../../../common/flowTypes';
+import type { AnnotationThreadError } from './types';
 
 import './AnnotationThreadContent.scss';
 
 type Props = {
     annotation?: Annotation,
     currentUser: User,
-    error?: {
-        message: MessageDescriptor,
-        title: MessageDescriptor,
-    },
+    error?: AnnotationThreadError,
     getAvatarUrl: string => Promise<?string>,
     getMentionWithQuery: (searchStr: string) => void,
     getUserProfileUrl?: GetProfileUrlCallback,

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

@@ -1,90 +1,48 @@
 // @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';
-
-import type { Annotation, Target } from '../../../../common/types/annotations';
-import type { BoxItem, SelectorItems, User } from '../../../../common/types/core';
-import type { ErrorContextProps } from '../../../../common/types/api';
+import type { SelectorItems, User } from '../../../../common/types/core';
 
 import './AnnotationThreadCreate.scss';
 
 type Props = {
-    api: API,
     currentUser: User,
-    file: BoxItem,
     getAvatarUrl: string => Promise<?string>,
     getMentionWithQuery: (searchStr: string) => void,
-    handleCancel: () => void,
+    isPending: boolean,
     mentionSelectorContacts: SelectorItems<>,
-    onAnnotationCreateEnd: (annotation: Object, requestId: string) => void,
-    onAnnotationCreateStart: (annotation: Object, requestId: string) => void,
-    target: Target,
-} & ErrorContextProps;
+    onFormCancel: () => void,
+    onFormSubmit: (text: string) => void,
+};
 
 const AnnotationThreadCreate = ({
-    api,
     currentUser,
-    file,
     getAvatarUrl,
     getMentionWithQuery,
-    handleCancel,
+    isPending,
     mentionSelectorContacts,
-    onAnnotationCreateEnd,
-    onAnnotationCreateStart,
-    onError,
-    target,
+    onFormCancel,
+    onFormSubmit,
 }: Props) => {
-    const [isPending, setIsPending] = React.useState(false);
-
-    const handleCreate = (text: string): void => {
-        const { id, permissions = {}, file_version = {} } = file;
-        setIsPending(true);
-        if (!currentUser) {
-            throw getBadUserError();
-        }
-
-        const requestId = uniqueId('annotation_');
-
-        const successCallback = (annotation: Annotation) => {
-            onAnnotationCreateEnd(annotation, requestId);
-        };
-
-        const payload = {
-            description: { message: text },
-            target,
-        };
-
-        onAnnotationCreateStart(payload, requestId);
-
-        api.getAnnotationsAPI(false).createAnnotation(
-            id,
-            file_version.id,
-            payload,
-            permissions,
-            successCallback,
-            onError,
-        );
+    const handleSubmit = ({ text }) => {
+        onFormSubmit(text);
     };
 
     return (
         <div
-            data-testid="annotation-create"
             className={classNames('AnnotationThreadCreate', { 'is-pending': isPending })}
+            data-testid="annotation-create"
         >
             <CommentForm
                 className="AnnotationThreadCreate-editor"
-                user={currentUser}
-                entityId={file.id}
-                onSubmit={handleCreate}
-                getMentionWithQuery={getMentionWithQuery}
-                mentionSelectorContacts={mentionSelectorContacts}
+                createComment={handleSubmit}
                 getAvatarUrl={getAvatarUrl}
+                getMentionWithQuery={getMentionWithQuery}
                 isOpen
-                onCancel={handleCancel}
+                mentionSelectorContacts={mentionSelectorContacts}
+                onCancel={onFormCancel}
+                user={currentUser}
             />
         </div>
     );

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

@@ -0,0 +1,22 @@
+import { annotation as mockAnnotation } from '../../../../../__mocks__/annotations';
+
+export default () => ({
+    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(),
+    },
+});

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

@@ -3,38 +3,17 @@ 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(),
-        },
-    }));
-});
+jest.mock('../useAnnotationThread');
 
 describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThread', () => {
     const file = {
         id: 'fileId',
+        file_version: { id: '123' },
         permissions: {
             can_view_annotations: true,
             can_annotate: true,

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

@@ -3,9 +3,7 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import AnnotationThreadCreate from '../AnnotationThreadCreate';
-import { annotation as mockAnnotation } from '../../../../../__mocks__/annotations';
 
-jest.mock('lodash/uniqueId', () => () => 'uniqueId');
 jest.mock('react-intl', () => jest.requireActual('react-intl'));
 jest.mock('../../comment-form', () => props => {
     return (
@@ -15,7 +13,7 @@ jest.mock('../../comment-form', () => props => {
                     <button type="button" onClick={props.onCancel}>
                         Cancel
                     </button>
-                    <button type="button" onClick={() => props.onSubmit('example message')}>
+                    <button type="button" onClick={() => props.createComment({ text: 'example message' })}>
                         Post
                     </button>
                 </div>
@@ -25,33 +23,17 @@ jest.mock('../../comment-form', () => props => {
 });
 
 describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThreadCreate', () => {
-    const getApiProp = annotationsAPIProps => ({
-        getAnnotationsAPI: () => ({
-            createAnnotation: jest.fn(),
-            ...annotationsAPIProps,
-        }),
-    });
-
     const getDefaultProps = () => ({
         currentUser: { id: 'user_id' },
-        file: {
-            id: 'file_id',
-            file_version: { id: 'file_version' },
-            permissions: { can_annotate: true },
-        },
-        target: {
-            location: { type: 'page', value: 1 },
-            type: 'point',
-            x: 12,
-            y: 10,
-        },
+        onFormCancel: jest.fn(),
+        onFormSubmit: jest.fn(),
     });
 
     const IntlWrapper = ({ children }: { children?: React.ReactNode }) => {
         return <IntlProvider locale="en">{children}</IntlProvider>;
     };
-    const getWrapper = (props, annotationsAPIProps = {}) =>
-        render(<AnnotationThreadCreate api={getApiProp(annotationsAPIProps)} {...getDefaultProps()} {...props} />, {
+    const getWrapper = props =>
+        render(<AnnotationThreadCreate {...getDefaultProps()} {...props} />, {
             wrapper: IntlWrapper,
         });
 
@@ -62,51 +44,29 @@ describe('elements/content-sidebar/activity-feed/annotation-thread/AnnotationThr
         expect(container.getElementsByClassName('AnnotationThreadCreate-is-pending')).toHaveLength(0);
     });
 
+    test('Should render correctly with pending state', () => {
+        const { getByTestId } = getWrapper({ isPending: true });
+
+        expect(getByTestId('annotation-create')).toHaveClass('is-pending');
+    });
+
     test('Should handle create', () => {
-        const createAnnotation = jest.fn((fileId, fileVersionId, payload, filePermissions, successCallback) => {
-            successCallback(mockAnnotation);
-        });
-        const onAnnotationCreateStart = jest.fn();
-        const onAnnotationCreateEnd = jest.fn();
-        const onError = jest.fn();
-        const target = { x: 1, y: 1 };
+        const onFormSubmit = jest.fn();
 
-        const { getByText, getByTestId } = getWrapper(
-            { onAnnotationCreateEnd, onAnnotationCreateStart, onError, target },
-            { createAnnotation },
-        );
+        const { getByText } = getWrapper({ onFormSubmit });
 
         fireEvent.click(getByText('Post'));
 
-        expect(onAnnotationCreateStart).toBeCalledWith(
-            {
-                description: { message: 'example message' },
-                target,
-            },
-            'uniqueId',
-        );
-        expect(createAnnotation).toBeCalledWith(
-            'file_id',
-            'file_version',
-            {
-                description: { message: 'example message' },
-                target,
-            },
-            { can_annotate: true },
-            expect.any(Function),
-            onError,
-        );
-        expect(onAnnotationCreateEnd).toBeCalledWith(mockAnnotation, 'uniqueId');
-        expect(getByTestId('annotation-create')).toHaveClass('is-pending');
+        expect(onFormSubmit).toBeCalledWith('example message');
     });
 
     test('Should call handleCancel on cancel', () => {
-        const handleCancel = jest.fn();
+        const onFormCancel = jest.fn();
 
-        const { getByText } = getWrapper({ handleCancel });
+        const { getByText } = getWrapper({ onFormCancel });
 
         fireEvent.click(getByText('Cancel'));
 
-        expect(handleCancel).toBeCalled();
+        expect(onFormCancel).toBeCalled();
     });
 });