From 3e64aa11931ec6bf3eecf57054688cc02899c7b5 Mon Sep 17 00:00:00 2001 From: Tessa Thornton Date: Tue, 10 Sep 2019 05:52:05 -0400 Subject: [PATCH] [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 | 1 + .../CommentHistory/CommentHistory.spec.tsx | 3 +++ .../Profile/CommentHistory/CommentHistory.tsx | 2 ++ .../CommentHistory/CommentHistoryContainer.tsx | 8 ++++++++ .../Profile/CommentHistory/HistoryComment.css | 7 +++++++ .../CommentHistory/HistoryComment.spec.tsx | 5 +++++ .../Profile/CommentHistory/HistoryComment.tsx | 13 +++++++++++++ .../CommentHistory/HistoryCommentContainer.tsx | 17 +++++++++++++++++ .../__snapshots__/CommentHistory.spec.tsx.snap | 6 ++++++ src/core/client/stream/tabs/Profile/Profile.tsx | 9 +++++++-- .../stream/tabs/Profile/ProfileContainer.tsx | 1 + 11 files changed, 70 insertions(+), 2 deletions(-) diff --git a/src/core/client/stream/classes.ts b/src/core/client/stream/classes.ts index ce86f0cad..6235a99b3 100644 --- a/src/core/client/stream/classes.ts +++ b/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", }, diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.spec.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.spec.tsx index 8ad7c2ef6..2a4dff845 100644 --- a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.spec.tsx +++ b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.spec.tsx @@ -12,6 +12,7 @@ const CommentHistoryN = removeFragmentRefs(CommentHistory); it("renders correctly", () => { const props: PropTypesOf = { 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 = { 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 = { story: {}, + settings: {}, comments: [{ id: "comment-1" }, { id: "comment-2" }], onLoadMore: noop, hasMore: true, diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx index 10f81cbe6..6909b141f 100644 --- a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx +++ b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx @@ -17,6 +17,7 @@ import styles from "./CommentHistory.css"; interface CommentHistoryProps { story: PropTypesOf["story"]; + settings: PropTypesOf["settings"]; comments: Array< { id: string } & PropTypesOf["comment"] >; @@ -51,6 +52,7 @@ const CommentHistory: FunctionComponent = props => { ))} diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistoryContainer.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistoryContainer.tsx index 0f2899431..0ace82b45 100644 --- a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistoryContainer.tsx +++ b/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 ( { body: "Hello World", createdAt: "2018-07-06T18:24:00.000Z", replyCount: 4, + reactionCount: 0, + reactionSettings: { + label: "reaction", + icon: "icon", + }, story: { metadata: { title: "Story Title", diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx index 81843b088..54bc187c6 100644 --- a/src/core/client/stream/tabs/Profile/CommentHistory/HistoryComment.tsx +++ b/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 = props => { + {!!props.reactionCount && ( +
+ {props.reactionSettings.icon} + + {props.reactionSettings.label} {props.reactionCount} + +
+ )} {!!props.replyCount && (
reply diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/HistoryCommentContainer.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/HistoryCommentContainer.tsx index 283ef97da..168f8ce93 100644 --- a/src/core/client/stream/tabs/Profile/CommentHistory/HistoryCommentContainer.tsx +++ b/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 ( diff --git a/src/core/client/stream/tabs/Profile/Profile.tsx b/src/core/client/stream/tabs/Profile/Profile.tsx index d73831b42..636b8e7b9 100644 --- a/src/core/client/stream/tabs/Profile/Profile.tsx +++ b/src/core/client/stream/tabs/Profile/Profile.tsx @@ -29,7 +29,8 @@ export interface ProfileProps { PropTypesOf["viewer"] & PropTypesOf["viewer"]; settings: PropTypesOf["settings"] & - PropTypesOf["settings"]; + PropTypesOf["settings"] & + PropTypesOf["settings"]; } const Profile: FunctionComponent = props => { @@ -75,7 +76,11 @@ const Profile: FunctionComponent = props => { className={CLASSES.myCommentsTabPane.$root} tabID="MY_COMMENTS" > - + ({ fragment ProfileContainer_settings on Settings { ...UserBoxContainer_settings ...AccountSettingsContainer_settings + ...CommentHistoryContainer_settings } `, })(ProfileContainer);