[CORL-591] add reactions to my comments history (#2541)

* add reactions to my comments history

* remove unused field

* fix lanaguage for reactions

src/core/client/stream/classes.ts

@@ -722,6 +722,7 @@ const CLASSES = {
     timestamp: "coral coral-myComment-timestamp",
     content: "coral coral-myComment-content",
     replies: "coral coral-myComment-replies",
+    reactions: "coral coral-myComment-reactions",
     viewConversationButton: "coral coral-myComment-viewConversationButton",
   },
 

src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.spec.tsx

@@ -12,6 +12,7 @@ const CommentHistoryN = removeFragmentRefs(CommentHistory);
 it("renders correctly", () => {
   const props: PropTypesOf<typeof CommentHistoryN> = {
     story: {},
+    settings: {},
     comments: [{ id: "comment-1" }, { id: "comment-2" }],
     onLoadMore: noop,
     hasMore: false,
@@ -26,6 +27,7 @@ describe("has more", () => {
   it("renders correctly", () => {
     const props: PropTypesOf<typeof CommentHistoryN> = {
       story: {},
+      settings: {},
       comments: [{ id: "comment-1" }, { id: "comment-2" }],
       onLoadMore: noop,
       hasMore: true,
@@ -38,6 +40,7 @@ describe("has more", () => {
   it("disables load more", () => {
     const props: PropTypesOf<typeof CommentHistoryN> = {
       story: {},
+      settings: {},
       comments: [{ id: "comment-1" }, { id: "comment-2" }],
       onLoadMore: noop,
       hasMore: true,

src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx

@@ -17,6 +17,7 @@ import styles from "./CommentHistory.css";
 
 interface CommentHistoryProps {
   story: PropTypesOf<typeof HistoryCommentContainer>["story"];
+  settings: PropTypesOf<typeof HistoryCommentContainer>["settings"];
   comments: Array<
     { id: string } & PropTypesOf<typeof HistoryCommentContainer>["comment"]
   >;
@@ -51,6 +52,7 @@ const CommentHistory: FunctionComponent<CommentHistoryProps> = props => {
         <HistoryCommentContainer
           key={comment.id}
           story={props.story}
+          settings={props.settings}
           comment={comment}
         />
       ))}

src/core/client/stream/tabs/Profile/CommentHistory/CommentHistoryContainer.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { graphql, RelayPaginationProp } from "react-relay";
 
 import { withPaginationContainer } from "coral-framework/lib/relay";
+import { CommentHistoryContainer_settings as SettingsData } from "coral-stream/__generated__/CommentHistoryContainer_settings.graphql";
 import { CommentHistoryContainer_story as StoryData } from "coral-stream/__generated__/CommentHistoryContainer_story.graphql";
 import { CommentHistoryContainer_viewer as ViewerData } from "coral-stream/__generated__/CommentHistoryContainer_viewer.graphql";
 import { CommentHistoryContainerPaginationQueryVariables } from "coral-stream/__generated__/CommentHistoryContainerPaginationQuery.graphql";
@@ -11,6 +12,7 @@ import CommentHistory from "./CommentHistory";
 interface CommentHistoryContainerProps {
   viewer: ViewerData;
   story: StoryData;
+  settings: SettingsData;
   relay: RelayPaginationProp;
 }
 
@@ -26,6 +28,7 @@ export class CommentHistoryContainer extends React.Component<
     return (
       <CommentHistory
         story={this.props.story}
+        settings={this.props.settings}
         comments={comments}
         onLoadMore={this.loadMore}
         hasMore={this.props.relay.hasMore()}
@@ -66,6 +69,11 @@ const enhanced = withPaginationContainer<
         ...HistoryCommentContainer_story
       }
     `,
+    settings: graphql`
+      fragment CommentHistoryContainer_settings on Settings {
+        ...HistoryCommentContainer_settings
+      }
+    `,
     viewer: graphql`
       fragment CommentHistoryContainer_viewer on User
         @argumentDefinitions(

src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.css

@@ -15,6 +15,13 @@
   align-items: center;
 }
 
+.reactions {
+  composes: button from "coral-ui/shared/typography.css";
+  color: var(--palette-text-primary);
+  display: inline-flex;
+  align-items: center;
+}
+
 .viewConversation {
   composes: button from "coral-ui/shared/typography.css";
 }

src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.spec.tsx

@@ -15,6 +15,11 @@ it("renders correctly", () => {
     body: "Hello World",
     createdAt: "2018-07-06T18:24:00.000Z",
     replyCount: 4,
+    reactionCount: 0,
+    reactionSettings: {
+      label: "reaction",
+      icon: "icon",
+    },
     story: {
       metadata: {
         title: "Story Title",

src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx

@@ -21,6 +21,11 @@ export interface HistoryCommentProps {
   body: string | null;
   createdAt: string;
   replyCount: number | null;
+  reactionCount: number | null;
+  reactionSettings: {
+    label: string;
+    icon: string;
+  };
   parentAuthorName?: string | null;
   story: {
     metadata: {
@@ -69,6 +74,14 @@ const HistoryComment: FunctionComponent<HistoryCommentProps> = props => {
         </Typography>
       </div>
       <Flex direction="row" alignItems="center" itemGutter="double">
+        {!!props.reactionCount && (
+          <div className={cn(styles.reactions, CLASSES.myComment.reactions)}>
+            <Icon className={styles.icon}>{props.reactionSettings.icon}</Icon>
+            <span>
+              {props.reactionSettings.label} {props.reactionCount}
+            </span>
+          </div>
+        )}
         {!!props.replyCount && (
           <div className={cn(styles.replies, CLASSES.myComment.replies)}>
             <Icon className={styles.icon}>reply</Icon>

src/core/client/stream/tabs/Profile/CommentHistory/HistoryCommentContainer.tsx

@@ -4,6 +4,7 @@ import { graphql } from "react-relay";
 import { getURLWithCommentID } from "coral-framework/helpers";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { HistoryCommentContainer_comment as CommentData } from "coral-stream/__generated__/HistoryCommentContainer_comment.graphql";
+import { HistoryCommentContainer_settings as SettingsData } from "coral-stream/__generated__/HistoryCommentContainer_settings.graphql";
 import { HistoryCommentContainer_story as StoryData } from "coral-stream/__generated__/HistoryCommentContainer_story.graphql";
 import {
   SetCommentIDMutation,
@@ -16,6 +17,7 @@ interface HistoryCommentContainerProps {
   setCommentID: SetCommentIDMutation;
   story: StoryData;
   comment: CommentData;
+  settings: SettingsData;
 }
 
 export class HistoryCommentContainer extends React.Component<
@@ -31,6 +33,8 @@ export class HistoryCommentContainer extends React.Component<
     return (
       <HistoryComment
         {...this.props.comment}
+        reactionCount={this.props.comment.actionCounts.reaction.total}
+        reactionSettings={this.props.settings.reaction}
         parentAuthorName={
           this.props.comment.parent &&
           this.props.comment.parent.author &&
@@ -53,6 +57,14 @@ const enhanced = withSetCommentIDMutation(
         id
       }
     `,
+    settings: graphql`
+      fragment HistoryCommentContainer_settings on Settings {
+        reaction {
+          label
+          icon
+        }
+      }
+    `,
     comment: graphql`
       fragment HistoryCommentContainer_comment on Comment {
         id
@@ -71,6 +83,11 @@ const enhanced = withSetCommentIDMutation(
             title
           }
         }
+        actionCounts {
+          reaction {
+            total
+          }
+        }
       }
     `,
   })(HistoryCommentContainer)

src/core/client/stream/tabs/Profile/CommentHistory/__snapshots__/CommentHistory.spec.tsx.snap

@@ -11,6 +11,7 @@ exports[`has more disables load more 1`] = `
         "id": "comment-1",
       }
     }
+    settings={Object {}}
     story={Object {}}
   />
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -19,6 +20,7 @@ exports[`has more disables load more 1`] = `
         "id": "comment-2",
       }
     }
+    settings={Object {}}
     story={Object {}}
   />
   <Localized
@@ -50,6 +52,7 @@ exports[`has more renders correctly 1`] = `
         "id": "comment-1",
       }
     }
+    settings={Object {}}
     story={Object {}}
   />
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -58,6 +61,7 @@ exports[`has more renders correctly 1`] = `
         "id": "comment-2",
       }
     }
+    settings={Object {}}
     story={Object {}}
   />
   <Localized
@@ -89,6 +93,7 @@ exports[`renders correctly 1`] = `
         "id": "comment-1",
       }
     }
+    settings={Object {}}
     story={Object {}}
   />
   <withContext(createMutationContainer(Relay(HistoryCommentContainer)))
@@ -97,6 +102,7 @@ exports[`renders correctly 1`] = `
         "id": "comment-2",
       }
     }
+    settings={Object {}}
     story={Object {}}
   />
 </ForwardRef(forwardRef)>

src/core/client/stream/tabs/Profile/Profile.tsx

@@ -29,7 +29,8 @@ export interface ProfileProps {
     PropTypesOf<typeof AccountSettingsContainer>["viewer"] &
     PropTypesOf<typeof NotificationSettingsContainer>["viewer"];
   settings: PropTypesOf<typeof UserBoxContainer>["settings"] &
-    PropTypesOf<typeof AccountSettingsContainer>["settings"];
+    PropTypesOf<typeof AccountSettingsContainer>["settings"] &
+    PropTypesOf<typeof CommentHistoryContainer>["settings"];
 }
 
 const Profile: FunctionComponent<ProfileProps> = props => {
@@ -75,7 +76,11 @@ const Profile: FunctionComponent<ProfileProps> = props => {
           className={CLASSES.myCommentsTabPane.$root}
           tabID="MY_COMMENTS"
         >
-          <CommentHistoryContainer viewer={props.viewer} story={props.story} />
+          <CommentHistoryContainer
+            settings={props.settings}
+            viewer={props.viewer}
+            story={props.story}
+          />
         </TabPane>
         <TabPane
           className={CLASSES.notificationsTabPane.$root}

src/core/client/stream/tabs/Profile/ProfileContainer.tsx

@@ -46,6 +46,7 @@ const enhanced = withFragmentContainer<ProfileContainerProps>({
     fragment ProfileContainer_settings on Settings {
       ...UserBoxContainer_settings
       ...AccountSettingsContainer_settings
+      ...CommentHistoryContainer_settings
     }
   `,
 })(ProfileContainer);