diff --git a/src/core/client/stream/mutations/SetStreamOrderByMutation.ts b/src/core/client/stream/mutations/SetStreamOrderByMutation.ts index 35eb7ddbc..1074998d5 100644 --- a/src/core/client/stream/mutations/SetStreamOrderByMutation.ts +++ b/src/core/client/stream/mutations/SetStreamOrderByMutation.ts @@ -7,7 +7,7 @@ export interface SetStreamOrderByInput { | "CREATED_AT_ASC" | "CREATED_AT_DESC" | "REPLIES_DESC" - | "RESPECT_DESC" + | "REACTION_DESC" | "%future added value"; } diff --git a/src/core/client/stream/tabs/comments/components/ReactionButton.tsx b/src/core/client/stream/tabs/comments/components/ReactionButton.tsx index 66a4a249e..39846d297 100644 --- a/src/core/client/stream/tabs/comments/components/ReactionButton.tsx +++ b/src/core/client/stream/tabs/comments/components/ReactionButton.tsx @@ -7,7 +7,7 @@ interface ReactionButtonProps { totalReactions: number; reacted: boolean | null; label: string; - labelActive: string | null; + labelActive: string; icon: string; iconActive: string | null; // color: string; @@ -27,13 +27,7 @@ class ReactionButton extends React.Component { : this.props.icon} - - {reacted - ? this.props.labelActive - ? this.props.labelActive - : this.props.label - : this.props.label} - + {reacted ? this.props.labelActive : this.props.label} {!!totalReactions && {totalReactions}} ); diff --git a/src/core/client/stream/tabs/comments/components/SortMenu.spec.tsx b/src/core/client/stream/tabs/comments/components/SortMenu.spec.tsx index e2a52f611..283a909b0 100644 --- a/src/core/client/stream/tabs/comments/components/SortMenu.spec.tsx +++ b/src/core/client/stream/tabs/comments/components/SortMenu.spec.tsx @@ -12,6 +12,7 @@ it("renders correctly on small screens", () => { const props: PropTypesOf = { orderBy: "CREATED_AT_ASC", onChange: noop, + reactionSortLabel: "Most Reacted", }; const context: UIContextProps = { @@ -34,6 +35,7 @@ it("renders correctly on big screens", () => { const props: PropTypesOf = { orderBy: "CREATED_AT_ASC", onChange: noop, + reactionSortLabel: "Most Reacted", }; const context: UIContextProps = { diff --git a/src/core/client/stream/tabs/comments/components/SortMenu.tsx b/src/core/client/stream/tabs/comments/components/SortMenu.tsx index d1bd114c8..60d8125bc 100644 --- a/src/core/client/stream/tabs/comments/components/SortMenu.tsx +++ b/src/core/client/stream/tabs/comments/components/SortMenu.tsx @@ -18,9 +18,10 @@ interface Props { | "CREATED_AT_ASC" | "CREATED_AT_DESC" | "REPLIES_DESC" - | "RESPECT_DESC" + | "REACTION_DESC" | "%future added value"; onChange: (e: React.ChangeEvent) => void; + reactionSortLabel: string; } const SortMenu: StatelessComponent = props => ( @@ -57,9 +58,7 @@ const SortMenu: StatelessComponent = props => ( - - - + diff --git a/src/core/client/stream/tabs/comments/components/Stream.spec.tsx b/src/core/client/stream/tabs/comments/components/Stream.spec.tsx index d19a3c469..18f614caf 100644 --- a/src/core/client/stream/tabs/comments/components/Stream.spec.tsx +++ b/src/core/client/stream/tabs/comments/components/Stream.spec.tsx @@ -17,12 +17,7 @@ it("renders correctly", () => { isClosed: false, }, comments: [{ id: "comment-1" }, { id: "comment-2" }], - settings: { - reaction: { - icon: "thumb_up_alt", - label: "Respect", - }, - }, + settings: { reaction: { sortLabel: "Most Reacted" } }, onLoadMore: noop, disableLoadMore: false, hasMore: false, @@ -46,12 +41,7 @@ describe("when use is logged in", () => { disableLoadMore: false, hasMore: false, viewer: {}, - settings: { - reaction: { - icon: "thumb_up_alt", - label: "Respect", - }, - }, + settings: { reaction: { sortLabel: "Most Reacted" } }, orderBy: "CREATED_AT_ASC", onChangeOrderBy: noop, }; @@ -67,12 +57,7 @@ describe("when there is more", () => { isClosed: false, }, comments: [{ id: "comment-1" }, { id: "comment-2" }], - settings: { - reaction: { - icon: "thumb_up_alt", - label: "Respect", - }, - }, + settings: { reaction: { sortLabel: "Most Reacted" } }, onLoadMore: sinon.spy(), disableLoadMore: false, hasMore: true, diff --git a/src/core/client/stream/tabs/comments/components/Stream.tsx b/src/core/client/stream/tabs/comments/components/Stream.tsx index 34ecce8bd..96649d39d 100644 --- a/src/core/client/stream/tabs/comments/components/Stream.tsx +++ b/src/core/client/stream/tabs/comments/components/Stream.tsx @@ -25,7 +25,11 @@ export interface StreamProps { PropTypesOf["settings"] & PropTypesOf["settings"] & PropTypesOf["settings"] & - PropTypesOf["settings"]; + PropTypesOf["settings"] & { + reaction: { + sortLabel: string; + }; + }; comments: ReadonlyArray< { id: string } & PropTypesOf["comment"] & PropTypesOf["comment"] @@ -50,7 +54,11 @@ const Stream: StatelessComponent = props => { {props.comments.length > 0 && ( - + )} {props.refetching && ( diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/SortMenu.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/SortMenu.spec.tsx.snap index d7657b729..80e326e47 100644 --- a/src/core/client/stream/tabs/comments/components/__snapshots__/SortMenu.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/components/__snapshots__/SortMenu.spec.tsx.snap @@ -38,9 +38,9 @@ exports[`renders correctly on big screens 1`] = ` Most Replies { viewer: null, settings: { reaction: { - icon: "thumb_up_alt", - label: "Respect", + sortLabel: "Most Respected", }, }, relay: { @@ -50,8 +49,7 @@ describe("when has more comments", () => { viewer: null, settings: { reaction: { - icon: "thumb_up_alt", - label: "Respect", + sortLabel: "Most Respected", }, }, relay: { diff --git a/src/core/client/stream/tabs/comments/containers/StreamContainer.tsx b/src/core/client/stream/tabs/comments/containers/StreamContainer.tsx index a5c96694d..7eeeb62da 100644 --- a/src/core/client/stream/tabs/comments/containers/StreamContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/StreamContainer.tsx @@ -144,6 +144,9 @@ const enhanced = withPaginationContainer< `, settings: graphql` fragment StreamContainer_settings on Settings { + reaction { + sortLabel + } ...PostCommentFormContainer_settings ...ReplyListContainer1_settings ...CommentContainer_settings diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/StreamContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/StreamContainer.spec.tsx.snap index d94edd847..d72f08868 100644 --- a/src/core/client/stream/tabs/comments/containers/__snapshots__/StreamContainer.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/StreamContainer.spec.tsx.snap @@ -43,8 +43,7 @@ exports[`renders correctly 1`] = ` settings={ Object { "reaction": Object { - "icon": "thumb_up_alt", - "label": "Respect", + "sortLabel": "Most Respected", }, } } @@ -117,8 +116,7 @@ exports[`when has more comments renders hasMore 1`] = ` settings={ Object { "reaction": Object { - "icon": "thumb_up_alt", - "label": "Respect", + "sortLabel": "Most Respected", }, } } @@ -191,8 +189,7 @@ exports[`when has more comments when loading more disables load more button 1`] settings={ Object { "reaction": Object { - "icon": "thumb_up_alt", - "label": "Respect", + "sortLabel": "Most Respected", }, } } @@ -265,8 +262,7 @@ exports[`when has more comments when loading more enable load more button after settings={ Object { "reaction": Object { - "icon": "thumb_up_alt", - "label": "Respect", + "sortLabel": "Most Respected", }, } } diff --git a/src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap index 088012c9b..bb4c0e9a4 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap @@ -188,9 +188,9 @@ exports[`renders comment stream with community guidelines 1`] = ` Most Replies ({ icon: "thumb_up", label: "Respect", labelActive: "Respected", + sortLabel: "Most Respected", }, charCount: { enabled: false, diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql index 67742ae7f..da95ef0e8 100644 --- a/src/core/server/graph/tenant/schema/schema.graphql +++ b/src/core/server/graph/tenant/schema/schema.graphql @@ -829,7 +829,8 @@ type ReactionConfiguration { icon: String! """ - + iconActive is the string representing the icon that should be used when the + icon should be considered active. """ iconActive: String @@ -842,7 +843,13 @@ type ReactionConfiguration { labelActive is the string placed beside the reaction icon to provide better context when it has been selected. """ - labelActive: String + labelActive: String! + + """ + sortLabel is the string placed inside of the sort menu to sort for comment + with most reactions. + """ + sortLabel: String! """ color is the hex color code that can be used to change the color of the button. @@ -1792,7 +1799,7 @@ enum COMMENT_SORT { CREATED_AT_DESC CREATED_AT_ASC REPLIES_DESC - RESPECT_DESC + REACTION_DESC } """ diff --git a/src/core/server/models/comment/index.ts b/src/core/server/models/comment/index.ts index b1ab4d3c1..38fabb162 100644 --- a/src/core/server/models/comment/index.ts +++ b/src/core/server/models/comment/index.ts @@ -487,7 +487,7 @@ function cursorGetterFactory( case GQLCOMMENT_SORT.CREATED_AT_ASC: return comment => comment.createdAt; case GQLCOMMENT_SORT.REPLIES_DESC: - case GQLCOMMENT_SORT.RESPECT_DESC: + case GQLCOMMENT_SORT.REACTION_DESC: return (_, index) => (input.after ? (input.after as number) : 0) + index + 1; } @@ -762,7 +762,7 @@ function applyInputToQuery( query.after(input.after as number); } break; - case GQLCOMMENT_SORT.RESPECT_DESC: + case GQLCOMMENT_SORT.REACTION_DESC: query.orderBy({ "actionCounts.REACTION": -1, createdAt: -1 }); if (input.after) { query.after(input.after as number); diff --git a/src/core/server/models/tenant.ts b/src/core/server/models/tenant.ts index 2f476bfb9..74c3eaa97 100644 --- a/src/core/server/models/tenant.ts +++ b/src/core/server/models/tenant.ts @@ -177,6 +177,7 @@ export async function createTenant( // handshake. label: "Respect", labelActive: "Respected", + sortLabel: "Most Respected", icon: "thumb_up", }, createdAt: now, diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl index f9085320a..f7ae4b418 100644 --- a/src/locales/en-US/stream.ftl +++ b/src/locales/en-US/stream.ftl @@ -94,7 +94,6 @@ comments-sortMenu-sortBy = Sort By comments-sortMenu-newest = Newest comments-sortMenu-oldest = Oldest comments-sortMenu-mostReplies = Most Replies -comments-sortMenu-mostReactions = Most Reactions ## Profile Tab profile-historyComment-viewConversation = View Conversation