wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-18 12:40:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

[next] Reaction Sort (#2260)

Browse Source 
* feat: stream sort description to use reaction conf

* feat: use full custom translation string for the sort label
This commit is contained in:
Wyatt Johnson
2019-04-23 20:50:02 +00:00
committed by GitHub
parent a92dcd6224
commit 205e6fcd08
18 changed files with 84 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/mutations/SetStreamOrderByMutation.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export interface SetStreamOrderByInput {
| "CREATED_AT_ASC"
| "CREATED_AT_DESC"
| "REPLIES_DESC"
| "RESPECT_DESC"
| "REACTION_DESC"
| "%future added value";
}
src/core/client/stream/tabs/comments/components/ReactionButton.tsx
+2 -8
View File
@@ -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<ReactionButtonProps> {
: this.props.icon}
</ButtonIcon>
</MatchMedia>
<span>
{reacted
? this.props.labelActive
? this.props.labelActive
: this.props.label
: this.props.label}
</span>
<span>{reacted ? this.props.labelActive : this.props.label}</span>
{!!totalReactions && <span>{totalReactions}</span>}
</Button>
);
src/core/client/stream/tabs/comments/components/SortMenu.spec.tsx
+2
View File
@@ -12,6 +12,7 @@ it("renders correctly on small screens", () => {
const props: PropTypesOf<typeof SortMenu> = {
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<typeof SortMenu> = {
orderBy: "CREATED_AT_ASC",
onChange: noop,
reactionSortLabel: "Most Reacted",
};
const context: UIContextProps = {
src/core/client/stream/tabs/comments/components/SortMenu.tsx
+3 -4
View File
@@ -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<HTMLSelectElement>) => void;
reactionSortLabel: string;
}
const SortMenu: StatelessComponent<Props> = props => (
@@ -57,9 +58,7 @@ const SortMenu: StatelessComponent<Props> = props => (
<Localized id="comments-sortMenu-mostReplies">
<Option value="REPLIES_DESC">Most Replies</Option>
</Localized>
<Localized id="comments-sortMenu-mostReactions">
<Option value="RESPECT_DESC">Most Reactions</Option>
</Localized>
<Option value="REACTION_DESC">{props.reactionSortLabel}</Option>
</SelectField>
</Flex>
<Divider />
src/core/client/stream/tabs/comments/components/Stream.spec.tsx
+3 -18
View File
@@ -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,
src/core/client/stream/tabs/comments/components/Stream.tsx
+10 -2
View File
@@ -25,7 +25,11 @@ export interface StreamProps {
PropTypesOf<typeof ReplyListContainer>["settings"] &
PropTypesOf<typeof UserBoxContainer>["settings"] &
PropTypesOf<typeof CommunityGuidelinesContainer>["settings"] &
PropTypesOf<typeof PostCommentFormContainer>["settings"];
PropTypesOf<typeof PostCommentFormContainer>["settings"] & {
reaction: {
sortLabel: string;
};
};
comments: ReadonlyArray<
{ id: string } & PropTypesOf<typeof CommentContainer>["comment"] &
PropTypesOf<typeof ReplyListContainer>["comment"]
@@ -50,7 +54,11 @@ const Stream: StatelessComponent<StreamProps> = props => {
<CommunityGuidelinesContainer settings={props.settings} />
<PostCommentFormContainer settings={props.settings} story={props.story} />
{props.comments.length > 0 && (
<SortMenu orderBy={props.orderBy} onChange={props.onChangeOrderBy} />
<SortMenu
orderBy={props.orderBy}
onChange={props.onChangeOrderBy}
reactionSortLabel={props.settings.reaction.sortLabel}
/>
)}
{props.refetching && (
<Flex justifyContent="center">
src/core/client/stream/tabs/comments/components/__snapshots__/SortMenu.spec.tsx.snap
+4 -4
View File
@@ -38,9 +38,9 @@ exports[`renders correctly on big screens 1`] = `
Most Replies
</option>
<option
value="RESPECT_DESC"
value="REACTION_DESC"
>
Most Reactions
Most Reacted
</option>
</select>
<span
@@ -94,9 +94,9 @@ exports[`renders correctly on small screens 1`] = `
Most Replies
</option>
<option
value="RESPECT_DESC"
value="REACTION_DESC"
>
Most Reactions
Most Reacted
</option>
</select>
<span
src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap
+32 -56
View File
@@ -9,8 +9,7 @@ exports[`renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -20,8 +19,7 @@ exports[`renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -30,8 +28,7 @@ exports[`renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -45,6 +42,7 @@ exports[`renders correctly 1`] = `
<SortMenu
onChange={[Function]}
orderBy="CREATED_AT_ASC"
reactionSortLabel="Most Reacted"
/>
<ForwardRef(forwardRef)
aria-live="polite"
@@ -64,8 +62,7 @@ exports[`renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -86,8 +83,7 @@ exports[`renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -112,8 +108,7 @@ exports[`renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -134,8 +129,7 @@ exports[`renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -161,8 +155,7 @@ exports[`when there is more disables load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -172,8 +165,7 @@ exports[`when there is more disables load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -182,8 +174,7 @@ exports[`when there is more disables load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -197,6 +188,7 @@ exports[`when there is more disables load more button 1`] = `
<SortMenu
onChange={[Function]}
orderBy="CREATED_AT_ASC"
reactionSortLabel="Most Reacted"
/>
<ForwardRef(forwardRef)
aria-live="polite"
@@ -216,8 +208,7 @@ exports[`when there is more disables load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -238,8 +229,7 @@ exports[`when there is more disables load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -264,8 +254,7 @@ exports[`when there is more disables load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -286,8 +275,7 @@ exports[`when there is more disables load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -327,8 +315,7 @@ exports[`when there is more renders a load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -338,8 +325,7 @@ exports[`when there is more renders a load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -348,8 +334,7 @@ exports[`when there is more renders a load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -363,6 +348,7 @@ exports[`when there is more renders a load more button 1`] = `
<SortMenu
onChange={[Function]}
orderBy="CREATED_AT_ASC"
reactionSortLabel="Most Reacted"
/>
<ForwardRef(forwardRef)
aria-live="polite"
@@ -382,8 +368,7 @@ exports[`when there is more renders a load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -404,8 +389,7 @@ exports[`when there is more renders a load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -430,8 +414,7 @@ exports[`when there is more renders a load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -452,8 +435,7 @@ exports[`when there is more renders a load more button 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -493,8 +475,7 @@ exports[`when use is logged in renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -504,8 +485,7 @@ exports[`when use is logged in renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -514,8 +494,7 @@ exports[`when use is logged in renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -529,6 +508,7 @@ exports[`when use is logged in renders correctly 1`] = `
<SortMenu
onChange={[Function]}
orderBy="CREATED_AT_ASC"
reactionSortLabel="Most Reacted"
/>
<ForwardRef(forwardRef)
aria-live="polite"
@@ -548,8 +528,7 @@ exports[`when use is logged in renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -570,8 +549,7 @@ exports[`when use is logged in renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -596,8 +574,7 @@ exports[`when use is logged in renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
@@ -618,8 +595,7 @@ exports[`when use is logged in renders correctly 1`] = `
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
"sortLabel": "Most Reacted",
},
}
}
src/core/client/stream/tabs/comments/containers/StreamContainer.spec.tsx
+2 -4
View File
@@ -23,8 +23,7 @@ it("renders correctly", () => {
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: {
src/core/client/stream/tabs/comments/containers/StreamContainer.tsx
+3
View File
@@ -144,6 +144,9 @@ const enhanced = withPaginationContainer<
`,
settings: graphql`
fragment StreamContainer_settings on Settings {
reaction {
sortLabel
}
...PostCommentFormContainer_settings
...ReplyListContainer1_settings
...CommentContainer_settings
src/core/client/stream/tabs/comments/containers/__snapshots__/StreamContainer.spec.tsx.snap
+4 -8
View File
@@ -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",
},
}
}
src/core/client/stream/test/comments/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+2 -2
View File
@@ -188,9 +188,9 @@ exports[`renders comment stream with community guidelines 1`] = `
Most Replies
</option>
<option
value="RESPECT_DESC"
value="REACTION_DESC"
>
Most Reactions
Most Respected
</option>
</select>
<span
src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
+2 -2
View File
@@ -206,9 +206,9 @@ exports[`renders comment stream 1`] = `
Most Replies
</option>
<option
value="RESPECT_DESC"
value="REACTION_DESC"
>
Most Reactions
Most Respected
</option>
</select>
<span
src/core/client/stream/test/fixtures.ts
+1
View File
@@ -76,6 +76,7 @@ export const settings = createFixture<GQLSettings>({
icon: "thumb_up",
label: "Respect",
labelActive: "Respected",
sortLabel: "Most Respected",
},
charCount: {
enabled: false,
src/core/server/graph/tenant/schema/schema.graphql
+10 -3
View File
@@ -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
}
"""
src/core/server/models/comment/index.ts
+2 -2
View File
@@ -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);
src/core/server/models/tenant.ts
+1
View File
@@ -177,6 +177,7 @@ export async function createTenant(
// handshake.
label: "Respect",
labelActive: "Respected",
sortLabel: "Most Respected",
icon: "thumb_up",
},
createdAt: now,
src/locales/en-US/stream.ftl
-1
View File
@@ -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