MHP 3099 -- Convert Celebrate Feed to GraphQL & Add Polling

src/actions/__tests__/reportComments.ts

@@ -14,6 +14,7 @@ import { celebrateCommentsSelector } from '../../selectors/celebrateComments';
 import { trackActionWithoutData } from '../analytics';
 import { ACTIONS } from '../../constants';
 import { formatApiDate } from '../../utils/common';
+import { CelebrateComment } from '../../reducers/celebrateComments';
 
 jest.mock('../api');
 jest.mock('../../selectors/celebrateComments');
@@ -40,7 +41,13 @@ beforeEach(() => {
 });
 
 describe('report comments', () => {
-  const item = { id: 'comment1' };
+  const item: CelebrateComment = {
+    id: 'comment1',
+    person: {},
+    created_at: '2019-04-11T13:51:49.888',
+    updated_at: '2019-04-11T13:51:49.888',
+    content: '',
+  };
 
   it('should callApi for report', async () => {
     const response = await store.dispatch<any>(reportComment(orgId, item));

src/components/CelebrateCommentBox/__tests__/CelebrateCommentBox.tsx

@@ -7,16 +7,31 @@ import {
   resetCelebrateEditingComment,
   updateCelebrateComment,
 } from '../../../actions/celebrateComments';
-import { celebrationItemSelector } from '../../../selectors/celebration';
 import { celebrateCommentsCommentSelector } from '../../../selectors/celebrateComments';
+import { GetCelebrateFeed_community_celebrationItems_nodes } from '../../../containers/CelebrateFeed/__generated__/GetCelebrateFeed';
 
 import CelebrateCommentBox from '..';
 
-jest.mock('../../../selectors/celebration');
 jest.mock('../../../selectors/celebrateComments');
 jest.mock('../../../actions/celebrateComments');
 
-const event = { text: 'some celebrate item', organization: { id: 'orgId' } };
+const event: GetCelebrateFeed_community_celebrationItems_nodes = {
+  __typename: 'CommunityCelebrationItem',
+  id: '1',
+  adjectiveAttributeName: null,
+  adjectiveAttributeValue: null,
+  celebrateableId: '1',
+  celebrateableType: '',
+  changedAttributeName: '',
+  changedAttributeValue: '',
+  commentsCount: 0,
+  liked: true,
+  likesCount: 1,
+  objectDescription: null,
+  subjectPerson: null,
+  subjectPersonName: null,
+};
+
 const createCelebrateCommentResult = { type: 'created comment' };
 const updateCelebrateCommentResult = { type: 'update comment' };
 const resetCelebrateEditingCommentResult = { type: 'reset editing' };
@@ -27,7 +42,6 @@ const editingComment = {
 };
 const onAddComplete = jest.fn();
 const initialState = {
-  organizations: [],
   celebrateComments: {
     editingCommentId: null,
   },
@@ -49,7 +63,6 @@ beforeEach(() => {
   (resetCelebrateEditingComment as jest.Mock).mockReturnValue(
     resetCelebrateEditingCommentResult,
   );
-  ((celebrationItemSelector as unknown) as jest.Mock).mockReturnValue(event);
 });
 
 it('renders correctly', () => {

src/components/CelebrateCommentBox/index.tsx

@@ -9,15 +9,14 @@ import {
   resetCelebrateEditingComment,
   updateCelebrateComment,
 } from '../../actions/celebrateComments';
-import { celebrationItemSelector } from '../../selectors/celebration';
 import { celebrateCommentsCommentSelector } from '../../selectors/celebrateComments';
-import { OrganizationsState } from '../../reducers/organizations';
 import { CelebrateCommentsState } from '../../reducers/celebrateComments';
+import { GetCelebrateFeed_community_celebrationItems_nodes } from '../../containers/CelebrateFeed/__generated__/GetCelebrateFeed';
 
 import styles from './styles';
 
 interface CelebrateCommentBoxProps {
-  event: object;
+  event: GetCelebrateFeed_community_celebrationItems_nodes;
   editingComment?: object;
   onAddComplete?: () => void;
   dispatch: ThunkDispatch<{}, {}, AnyAction>;
@@ -61,24 +60,16 @@ const CelebrateCommentBox = ({
 };
 const mapStateToProps = (
   {
-    organizations,
     celebrateComments,
   }: {
-    organizations: OrganizationsState;
     celebrateComments: CelebrateCommentsState;
   },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  { event }: any,
+  { event }: { event: GetCelebrateFeed_community_celebrationItems_nodes },
 ) => ({
   editingComment: celebrateCommentsCommentSelector(
     { celebrateComments },
     { eventId: event.id, commentId: celebrateComments.editingCommentId },
   ),
-  event:
-    celebrationItemSelector(
-      { organizations },
-      { eventId: event.id, organizationId: event.organization.id },
-    ) || event,
 });
 
 export default connect(mapStateToProps)(CelebrateCommentBox);

src/components/CelebrateItem/__tests__/CelebrateItem.tsx

@@ -11,21 +11,27 @@ import { renderWithContext } from '../../../../testUtils';
 import { CELEBRATEABLE_TYPES, GLOBAL_COMMUNITY_ID } from '../../../constants';
 import { CELEBRATE_DETAIL_SCREEN } from '../../../containers/CelebrateDetailScreen';
 import { CELEBRATE_EDIT_STORY_SCREEN } from '../../../containers/Groups/EditStoryScreen';
+import { Organization } from '../../../reducers/organizations';
+import {
+  GetCelebrateFeed_community_celebrationItems_nodes,
+  GetCelebrateFeed_community_celebrationItems_nodes_subjectPerson,
+} from '../../../containers/CelebrateFeed/__generated__/GetCelebrateFeed';
 
-import CelebrateItem, { Event, DELETE_STORY, REPORT_STORY } from '..';
+import CelebrateItem, { DELETE_STORY, REPORT_STORY } from '..';
 
 jest.mock('../../../actions/analytics');
 jest.mock('../../../actions/navigation');
 
 const myId = '123';
-const subjectPerson = {
+const subjectPerson: GetCelebrateFeed_community_celebrationItems_nodes_subjectPerson = {
+  __typename: 'Person',
   id: '234',
-  first_name: 'John',
-  last_name: 'Smith',
-  full_name: 'John Smith',
+  firstName: 'John',
+  lastName: 'Smith',
 };
-const globalOrg = { id: GLOBAL_COMMUNITY_ID };
-const organization = { id: '3' };
+const subjectPersonName = `${subjectPerson.firstName} ${subjectPerson.lastName}`;
+const globalOrg: Organization = { id: GLOBAL_COMMUNITY_ID };
+const organization: Organization = { id: '3' };
 
 const date = '2019-08-21T12:00:00.000';
 MockDate.set('2019-08-21 12:00:00', 300);
@@ -36,19 +42,25 @@ let onClearNotification = jest.fn();
 const trackActionResult = { type: 'tracked plain action' };
 const navigatePushResult = { type: 'navigate push' };
 
-const event: Event = {
+const baseEvent: GetCelebrateFeed_community_celebrationItems_nodes = {
+  __typename: 'CommunityCelebrationItem',
   id: '222',
-  changed_attribute_value: date,
-  subject_person: subjectPerson,
-  subject_person_name: subjectPerson.full_name,
-  celebrateable_id: '2',
-  celebrateable_type: CELEBRATEABLE_TYPES.completedStep,
-  organization,
-  object_description: 'Celebration',
+  adjectiveAttributeName: null,
+  adjectiveAttributeValue: null,
+  changedAttributeName: 'created_at',
+  changedAttributeValue: date,
+  commentsCount: 0,
+  liked: false,
+  likesCount: 1,
+  subjectPerson: subjectPerson,
+  subjectPersonName,
+  celebrateableId: '2',
+  celebrateableType: CELEBRATEABLE_TYPES.completedStep,
+  objectDescription: 'Celebration',
 };
-const storyEvent: Event = {
-  ...event,
-  celebrateable_type: CELEBRATEABLE_TYPES.story,
+const storyEvent: GetCelebrateFeed_community_celebrationItems_nodes = {
+  ...baseEvent,
+  celebrateableType: CELEBRATEABLE_TYPES.story,
 };
 
 const initialState = { auth: { person: { id: myId } } };
@@ -64,9 +76,10 @@ describe('global community', () => {
   it('renders correctly', () => {
     renderWithContext(
       <CelebrateItem
-        event={event}
+        event={baseEvent}
         onRefresh={onRefresh}
         organization={globalOrg}
+        namePressable={false}
       />,
       { initialState },
     ).snapshot();
@@ -75,9 +88,10 @@ describe('global community', () => {
   it('renders with clear notification button correctly', () => {
     renderWithContext(
       <CelebrateItem
-        event={event}
+        event={baseEvent}
         onRefresh={onRefresh}
         organization={globalOrg}
+        namePressable={false}
         onClearNotification={onClearNotification}
       />,
       { initialState },
@@ -90,6 +104,7 @@ describe('global community', () => {
         event={storyEvent}
         onRefresh={onRefresh}
         organization={globalOrg}
+        namePressable={false}
       />,
       { initialState },
     ).snapshot();
@@ -100,9 +115,10 @@ describe('Community', () => {
   it('renders correctly', () => {
     renderWithContext(
       <CelebrateItem
-        event={event}
+        event={baseEvent}
         onRefresh={onRefresh}
         organization={organization}
+        namePressable={false}
       />,
       { initialState },
     ).snapshot();
@@ -111,10 +127,11 @@ describe('Community', () => {
   it('renders with clear notification button correctly', () => {
     renderWithContext(
       <CelebrateItem
-        event={event}
+        event={baseEvent}
         onRefresh={onRefresh}
         organization={organization}
         onClearNotification={onClearNotification}
+        namePressable={false}
       />,
       { initialState },
     ).snapshot();
@@ -126,6 +143,7 @@ describe('Community', () => {
         event={storyEvent}
         onRefresh={onRefresh}
         organization={organization}
+        namePressable={false}
       />,
       { initialState },
     ).snapshot();
@@ -135,7 +153,7 @@ describe('Community', () => {
 it('renders with name pressable correctly', () => {
   renderWithContext(
     <CelebrateItem
-      event={event}
+      event={baseEvent}
       onRefresh={onRefresh}
       organization={organization}
       namePressable={true}
@@ -148,9 +166,10 @@ describe('press card', () => {
   it('not pressable in global community', () => {
     const { getByTestId } = renderWithContext(
       <CelebrateItem
-        event={event}
+        event={baseEvent}
         onRefresh={onRefresh}
         organization={globalOrg}
+        namePressable={false}
       />,
       { initialState },
     );
@@ -163,26 +182,28 @@ describe('press card', () => {
   it('navigates to celebrate detail screen', () => {
     const { getByTestId } = renderWithContext(
       <CelebrateItem
-        event={event}
+        event={baseEvent}
         onRefresh={onRefresh}
         organization={organization}
+        namePressable={false}
       />,
       { initialState },
     );
 
     fireEvent.press(getByTestId('CelebrateItemPressable'));
 
     expect(navigatePush).toHaveBeenCalledWith(CELEBRATE_DETAIL_SCREEN, {
-      event,
+      event: baseEvent,
+      orgId: organization.id,
     });
   });
 });
 
 describe('long-press card', () => {
   describe('story written by me', () => {
-    const myStoryEvent = {
+    const myStoryEvent: GetCelebrateFeed_community_celebrationItems_nodes = {
       ...storyEvent,
-      subject_person: { ...subjectPerson, id: myId },
+      subjectPerson: { ...subjectPerson, id: myId },
     };
 
     it('navigates to edit story screen', () => {
@@ -194,6 +215,7 @@ describe('long-press card', () => {
           event={myStoryEvent}
           onRefresh={onRefresh}
           organization={organization}
+          namePressable={false}
         />,
         { initialState },
       );
@@ -219,6 +241,7 @@ describe('long-press card', () => {
           event={myStoryEvent}
           onRefresh={onRefresh}
           organization={organization}
+          namePressable={false}
         />,
         { initialState },
       );
@@ -242,7 +265,7 @@ describe('long-press card', () => {
         ],
       );
       expect(useMutation).toHaveBeenMutatedWith(DELETE_STORY, {
-        variables: { input: { id: event.celebrateable_id } },
+        variables: { input: { id: myStoryEvent.celebrateableId } },
       });
       expect(onRefresh).toHaveBeenCalled();
     });
@@ -258,6 +281,7 @@ describe('long-press card', () => {
           event={storyEvent}
           onRefresh={onRefresh}
           organization={organization}
+          namePressable={false}
         />,
         { initialState },
       );
@@ -281,7 +305,7 @@ describe('long-press card', () => {
         ],
       );
       expect(useMutation).toHaveBeenMutatedWith(REPORT_STORY, {
-        variables: { subjectId: event.celebrateable_id },
+        variables: { subjectId: storyEvent.celebrateableId },
       });
     });
   });
@@ -291,16 +315,17 @@ describe('clear notification button', () => {
   it('calls onClearNotification', () => {
     const { getByTestId } = renderWithContext(
       <CelebrateItem
-        event={event}
+        event={baseEvent}
         onRefresh={onRefresh}
         organization={organization}
         onClearNotification={onClearNotification}
+        namePressable={false}
       />,
       { initialState },
     );
 
     fireEvent.press(getByTestId('ClearNotificationButton'));
 
-    expect(onClearNotification).toHaveBeenCalledWith(event);
+    expect(onClearNotification).toHaveBeenCalledWith(baseEvent);
   });
 });