feat(api): Add file collaborators fetch action (#479)

Mingze · web-flow · commit 8e1d707ffbeb · 2020-05-07T23:13:34.000Z
* feat(api): Add file collaborators fetch action

* feat(api): Address comments and add tests

* feat(api): Address comments
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,6 +7,7 @@ module.exports = {
         'flowtype/no-types-missing-file-annotation': 'off', // Allows types in TS files
         'import/no-extraneous-dependencies': ['error', { devDependencies: ['scripts/**/*.js', '**/*-test.[j|t]s*'] }],
         'import/no-unresolved': 'off', // Allows JS files to import TS files
+        'import/prefer-default-export': 'off',
         'prefer-destructuring': ['error', { object: true, array: false }],
     },
     overrides: [
diff --git a/src/@types/index.ts b/src/@types/index.ts
@@ -6,3 +6,4 @@ export * from './events';
 export * from './i18n';
 export * from './model';
 export * from './new';
+export * from './users';
diff --git a/src/@types/users.ts b/src/@types/users.ts
@@ -0,0 +1,20 @@
+export type Collaborator = {
+    id: string;
+    item?: UserMini | GroupMini;
+    name: string;
+};
+
+export type UserMini = {
+    avatar_url?: string;
+    email?: string;
+    id: string;
+    login?: string;
+    name: string;
+    type: 'user';
+};
+
+export type GroupMini = {
+    id: string;
+    name: string;
+    type: 'group';
+};
diff --git a/src/api/APIFactory.ts b/src/api/APIFactory.ts
@@ -1,6 +1,7 @@
 import Annotations from 'box-ui-elements/es/api/Annotations';
+import FileCollaborators from 'box-ui-elements/es/api/FileCollaborators';
 import { DEFAULT_HOSTNAME_API } from 'box-ui-elements/es/constants';
-import { AnnotationsAPI, APIOptions } from './types';
+import { AnnotationsAPI, CollaboratorsAPI, APIOptions } from './types';
 
 export default class APIFactory {
     options: APIOptions;
@@ -16,4 +17,8 @@ export default class APIFactory {
     getAnnotationsAPI(): AnnotationsAPI {
         return new Annotations(this.options);
     }
+
+    getCollaboratorsAPI(): CollaboratorsAPI {
+        return new FileCollaborators(this.options);
+    }
 }
diff --git a/src/api/types.ts b/src/api/types.ts
@@ -1,9 +1,10 @@
-import { Annotation, NewAnnotation, Token } from '../@types';
+import { Annotation, Collaborator, NewAnnotation, Token } from '../@types';
 
 export type APICollection<R> = {
     entries: R[];
     limit: number;
     next_marker: string | null;
+    previous_marker: string | null;
 };
 
 export type APIError = {
@@ -42,3 +43,19 @@ export interface AnnotationsAPI {
 
     destroy(): void;
 }
+
+export interface CollaboratorsAPI {
+    getFileCollaborators(
+        fileId: string | null,
+        successCallback: (result: APICollection<Collaborator>) => void,
+        errorCallback: (error: APIError) => void,
+        requestData?: {
+            filter_term?: string;
+            include_groups?: boolean;
+            include_uploader_collabs?: boolean;
+        },
+        limit?: number,
+    ): Promise<void>;
+
+    destroy(): void;
+}
diff --git a/src/common/BaseAnnotator.ts b/src/common/BaseAnnotator.ts
@@ -94,6 +94,8 @@ export default class BaseAnnotator {
         // Redux dispatch method signature doesn't seem to like async actions
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.store.dispatch<any>(store.fetchAnnotationsAction());
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.store.dispatch<any>(store.fetchCollaboratorsAction());
     }
 
     // Called by box-content-preview
diff --git a/src/common/__tests__/BaseAnnotator-test.ts b/src/common/__tests__/BaseAnnotator-test.ts
@@ -11,6 +11,7 @@ jest.mock('../../api');
 jest.mock('../../store', () => ({
     createStore: jest.fn(() => ({ dispatch: jest.fn() })),
     fetchAnnotationsAction: jest.fn(),
+    fetchCollaboratorsAction: jest.fn(),
     setActiveAnnotationIdAction: jest.fn(),
     setVisibilityAction: jest.fn(),
     toggleAnnotationModeAction: jest.fn(),
diff --git a/src/components/Popups/ReplyField/ReplyField.tsx b/src/components/Popups/ReplyField/ReplyField.tsx
@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { getActiveMentionForEditorState } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector';
 import { ContentState, Editor, EditorState, SelectionState } from 'draft-js';
 import PopupList from './PopupList';
+import { Collaborator } from '../../../@types';
 import { VirtualElement } from '../Popper';
 import './ReplyField.scss';
 
@@ -16,6 +17,7 @@ export type Mention = {
 
 export type Props = {
     className?: string;
+    collaborators: Collaborator[];
     cursorPosition: number;
     isDisabled?: boolean;
     onChange: (text?: string) => void;
diff --git a/src/components/Popups/ReplyField/ReplyFieldContainer.tsx b/src/components/Popups/ReplyField/ReplyFieldContainer.tsx
@@ -1,12 +1,15 @@
 import { connect } from 'react-redux';
-import { AppState, getCreatorCursor, setCursorAction } from '../../../store';
+import { AppState, getCollaborators, getCreatorCursor, setCursorAction } from '../../../store';
 import ReplyField from './ReplyField';
+import { Collaborator } from '../../../@types';
 
 export type Props = {
+    collaborators: Collaborator[];
     cursorPosition: number;
 };
 
 export const mapStateToProps = (state: AppState): Props => ({
+    collaborators: getCollaborators(state),
     cursorPosition: getCreatorCursor(state),
 });
 
diff --git a/src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx b/src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx
@@ -20,6 +20,7 @@ jest.mock('box-ui-elements/es/components/form-elements/draft-js-mention-selector
 describe('components/Popups/ReplyField', () => {
     const defaults: Props = {
         className: 'ba-Popup-field',
+        collaborators: [],
         cursorPosition: 0,
         isDisabled: false,
         onChange: jest.fn(),
diff --git a/src/region/regionUtil.ts b/src/region/regionUtil.ts
@@ -1,6 +1,5 @@
 import { Rect } from '../@types';
 
-// eslint-disable-next-line import/prefer-default-export
 export function scaleShape(shape: Rect, scale = 1, invert = false): Rect {
     const { height, width, x, y, ...rest } = shape;
     const ratio = invert ? 1 / scale : scale;
diff --git a/src/store/createRootReducer.ts b/src/store/createRootReducer.ts
@@ -3,13 +3,15 @@ import { annotationsReducer } from './annotations';
 import { commonReducer } from './common';
 import { creatorReducer } from './creator';
 import { optionsReducer } from './options';
+import { usersReducer } from './users';
 
 const createRootReducer = (): Reducer =>
     combineReducers({
         annotations: annotationsReducer,
         common: commonReducer,
         creator: creatorReducer,
         options: optionsReducer,
+        users: usersReducer,
     });
 
 export default createRootReducer;
diff --git a/src/store/eventing/active.ts b/src/store/eventing/active.ts
@@ -12,5 +12,4 @@ const handleActiveAnnotationEvents = (prevState: AppState, nextState: AppState):
     }
 };
 
-// eslint-disable-next-line import/prefer-default-export
 export { handleActiveAnnotationEvents };
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -1,7 +1,8 @@
 export { default as createRootReducer } from './createRootReducer';
 export { default as createStore } from './createStore';
 
-export * from './common';
 export * from './annotations';
+export * from './common';
 export * from './creator';
 export * from './types';
+export * from './users';
diff --git a/src/store/types.ts b/src/store/types.ts
@@ -5,12 +5,14 @@ import { AnnotationsState } from './annotations';
 import { CommonState } from './common';
 import { CreatorState } from './creator';
 import { OptionsState } from './options';
+import { UsersState } from './users';
 
 export type AppState = {
     annotations: AnnotationsState;
     creator: CreatorState;
     common: CommonState;
     options: OptionsState;
+    users: UsersState;
 };
 
 export type AppStore = Store<AppState>;
diff --git a/src/store/users/__mocks__/usersState.ts b/src/store/users/__mocks__/usersState.ts
@@ -0,0 +1,3 @@
+export default {
+    collaborators: [],
+};
diff --git a/src/store/users/__tests__/reducer-test.ts b/src/store/users/__tests__/reducer-test.ts
@@ -0,0 +1,28 @@
+import reducer from '../reducer';
+import state from '../__mocks__/usersState';
+import { fetchCollaboratorsAction } from '../actions';
+
+describe('store/users/reducer', () => {
+    describe('fetchCollaboratorsAction', () => {
+        test('should set state when fulfilled', () => {
+            const collaborators = [{ id: '1234567890', name: 'Test User' }];
+
+            const newState = reducer(
+                state,
+                fetchCollaboratorsAction.fulfilled(
+                    { entries: collaborators, limit: 10, next_marker: null, previous_marker: null },
+                    'fulfilled',
+                    undefined,
+                ),
+            );
+
+            expect(newState.collaborators).toEqual(collaborators);
+        });
+
+        test('should set state when rejected', () => {
+            const newState = reducer(state, fetchCollaboratorsAction.rejected);
+
+            expect(newState.collaborators).toEqual([]);
+        });
+    });
+});
diff --git a/src/store/users/__tests__/selectors-test.ts b/src/store/users/__tests__/selectors-test.ts
@@ -0,0 +1,12 @@
+import usersState from '../__mocks__/usersState';
+import { getCollaborators } from '../selectors';
+
+describe('store/users/selectors', () => {
+    const state = { users: usersState };
+
+    describe('getCollaborators', () => {
+        test('should return the initial collaborators', () => {
+            expect(getCollaborators(state)).toEqual([]);
+        });
+    });
+});
diff --git a/src/store/users/actions.ts b/src/store/users/actions.ts
@@ -0,0 +1,28 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { APICollection } from '../../api';
+import { AppThunkAPI } from '../types';
+import { Collaborator } from '../../@types';
+import { getFileId } from '../options';
+
+export const fetchCollaboratorsAction = createAsyncThunk<APICollection<Collaborator>, undefined, AppThunkAPI>(
+    'FETCH_COLLABORATORS',
+    async (arg, { extra, getState, signal }) => {
+        // Create a new client for each request
+        const client = extra.api.getCollaboratorsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+
+        // Destroy the client if action's abort method is invoked
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        // Wrap the client request in a promise to allow it to be returned and cancelled
+        return new Promise<APICollection<Collaborator>>((resolve, reject) => {
+            client.getFileCollaborators(fileId, resolve, reject, {
+                include_groups: false, // eslint-disable-line @typescript-eslint/camelcase
+                include_uploader_collabs: false, // eslint-disable-line @typescript-eslint/camelcase
+            });
+        });
+    },
+);
diff --git a/src/store/users/index.ts b/src/store/users/index.ts
@@ -0,0 +1,4 @@
+export { default as usersReducer } from './reducer';
+export * from './actions';
+export * from './selectors';
+export * from './types';
diff --git a/src/store/users/reducer.ts b/src/store/users/reducer.ts
@@ -0,0 +1,17 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { fetchCollaboratorsAction } from './actions';
+import { UsersState } from './types';
+
+export const initialState = {
+    collaborators: [],
+};
+
+export default createReducer<UsersState>(initialState, builder =>
+    builder
+        .addCase(fetchCollaboratorsAction.fulfilled, (state, { payload }) => {
+            state.collaborators = payload.entries;
+        })
+        .addCase(fetchCollaboratorsAction.rejected, state => {
+            state.collaborators = [];
+        }),
+);
diff --git a/src/store/users/selectors.ts b/src/store/users/selectors.ts
@@ -0,0 +1,6 @@
+import { AppState } from '../types';
+import { Collaborator } from '../../@types';
+
+type State = Pick<AppState, 'users'>;
+
+export const getCollaborators = (state: State): Collaborator[] => state.users.collaborators;
diff --git a/src/store/users/types.ts b/src/store/users/types.ts
@@ -0,0 +1,5 @@
+import { Collaborator } from '../../@types';
+
+export type UsersState = {
+    collaborators: Collaborator[];
+};

Original file line number	Diff line number	Diff line change
`@@ -94,6 +94,8 @@ export default class BaseAnnotator {`
`94`	`94`	`// Redux dispatch method signature doesn't seem to like async actions`
`95`	`95`	`// eslint-disable-next-line @typescript-eslint/no-explicit-any`
`96`	`96`	`this.store.dispatch<any>(store.fetchAnnotationsAction());`
	`97`	`+ // eslint-disable-next-line @typescript-eslint/no-explicit-any`
	`98`	`+ this.store.dispatch<any>(store.fetchCollaboratorsAction());`
`97`	`99`	`}`
`98`	`100`
`99`	`101`	`// Called by box-content-preview`