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] Login prompt for not signed in users trying to react to comments. (#1979)

Browse Source 
* Fixing the commentCount for 0 comments

* Show signIn when logged-off user reacts to a comment

* Snapshots updated

* removing graphiql

* Reaction: Icon - Label - Count
This commit is contained in:
Belén Curcio
2018-10-09 16:33:13 +00:00
committed by Wyatt Johnson
parent 7c9b8e5377
commit 0d588f2f28
12 changed files with 585 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/queries/CommentsCountQuery.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ class CommentsCountQuery extends Component<InnerProps> {
return <div>{error.message}</div>;
}
if (props && props.asset && props.asset.commentCounts.totalVisible) {
if (props && props.asset) {
return (
<CommentCountTab
commentCount={props.asset.commentCounts.totalVisible}
src/core/client/stream/tabs/comments/components/ReactionButton.tsx
+1 -1
View File
@@ -18,7 +18,6 @@ class ReactionButton extends React.Component<ReactionButtonProps> {
const { totalReactions, reacted } = this.props;
return (
<Button variant="ghost" size="small" onClick={this.props.onClick}>
{!!totalReactions && <span>{totalReactions}</span>}
<MatchMedia gtWidth="xs">
<ButtonIcon>
{reacted
@@ -35,6 +34,7 @@ class ReactionButton extends React.Component<ReactionButtonProps> {
: this.props.label
: this.props.label}
</span>
{!!totalReactions && <span>{totalReactions}</span>}
</Button>
);
}
src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+7 -6
View File
@@ -140,6 +140,7 @@ export class CommentContainer extends Component<InnerProps, State> {
localReply,
disableReplies,
showConversationLink,
me,
} = this.props;
const { showReplyDialog, showEditDialog, editable } = this.state;
if (showEditDialog) {
@@ -186,12 +187,11 @@ export class CommentContainer extends Component<InnerProps, State> {
/>
)}
<PermalinkButtonContainer commentID={comment.id} />
{this.props.me && (
<ReactionButtonContainer
comment={comment}
settings={settings}
/>
)}
<ReactionButtonContainer
comment={comment}
settings={settings}
me={me}
/>
</ButtonsBar>
{showConversationLink && (
<ShowConversationLink
@@ -227,6 +227,7 @@ const enhanced = withSetCommentIDMutation(
me: graphql`
fragment CommentContainer_me on User {
id
...ReactionButtonContainer_me
}
`,
asset: graphql`
src/core/client/stream/tabs/comments/containers/ReactionButtonContainer.tsx
+47 -24
View File
@@ -2,6 +2,7 @@ import React from "react";
import { graphql } from "react-relay";
import { withFragmentContainer } from "talk-framework/lib/relay";
import { ReactionButtonContainer_comment as CommentData } from "talk-stream/__generated__/ReactionButtonContainer_comment.graphql";
import { ReactionButtonContainer_me as MeData } from "talk-stream/__generated__/ReactionButtonContainer_me.graphql";
import { ReactionButtonContainer_settings as SettingsData } from "talk-stream/__generated__/ReactionButtonContainer_settings.graphql";
import {
@@ -12,17 +13,30 @@ import {
} from "talk-stream/mutations";
import ReactionButton from "talk-stream/tabs/comments/components/ReactionButton";
import {
ShowAuthPopupMutation,
withShowAuthPopupMutation,
} from "talk-stream/mutations";
interface ReactionButtonContainerProps {
createCommentReaction: CreateCommentReactionMutation;
deleteCommentReaction: DeleteCommentReactionMutation;
comment: CommentData;
settings: SettingsData;
me: MeData | null;
showAuthPopup: ShowAuthPopupMutation;
}
class ReactionButtonContainer extends React.Component<
ReactionButtonContainerProps
> {
private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
private handleClick = () => {
if (this.props.me === null) {
return this.handleSignIn();
}
const input = {
commentID: this.props.comment.id,
};
@@ -32,7 +46,9 @@ class ReactionButtonContainer extends React.Component<
this.props.comment.myActionPresence &&
this.props.comment.myActionPresence.reaction;
reacted ? deleteCommentReaction(input) : createCommentReaction(input);
return reacted
? deleteCommentReaction(input)
: createCommentReaction(input);
};
public render() {
const {
@@ -62,32 +78,39 @@ class ReactionButtonContainer extends React.Component<
}
}
export default withDeleteCommentReactionMutation(
withCreateCommentReactionMutation(
withFragmentContainer<ReactionButtonContainerProps>({
comment: graphql`
fragment ReactionButtonContainer_comment on Comment {
id
myActionPresence {
reaction
export default withShowAuthPopupMutation(
withDeleteCommentReactionMutation(
withCreateCommentReactionMutation(
withFragmentContainer<ReactionButtonContainerProps>({
me: graphql`
fragment ReactionButtonContainer_me on User {
id
}
actionCounts {
reaction {
total
`,
comment: graphql`
fragment ReactionButtonContainer_comment on Comment {
id
myActionPresence {
reaction
}
actionCounts {
reaction {
total
}
}
}
}
`,
settings: graphql`
fragment ReactionButtonContainer_settings on Settings {
reaction {
label
labelActive
icon
iconActive
`,
settings: graphql`
fragment ReactionButtonContainer_settings on Settings {
reaction {
label
labelActive
icon
iconActive
}
}
}
`,
})(ReactionButtonContainer)
`,
})(ReactionButtonContainer)
)
)
);
src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
+109
View File
@@ -18,6 +18,33 @@ exports[`hide reply button 1`] = `
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"pending": false,
}
}
me={null}
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
},
}
}
/>
</ButtonsBar>
</React.Fragment>
}
@@ -51,6 +78,33 @@ exports[`renders body only 1`] = `
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
comment={
Object {
"author": Object {
"id": "author-id",
"username": null,
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"pending": false,
}
}
me={null}
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
},
}
}
/>
</ButtonsBar>
</React.Fragment>
}
@@ -84,6 +138,33 @@ exports[`renders username and body 1`] = `
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"pending": false,
}
}
me={null}
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
},
}
}
/>
</ButtonsBar>
</React.Fragment>
}
@@ -117,6 +198,34 @@ exports[`shows conversation link 1`] = `
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"pending": false,
}
}
me={null}
settings={
Object {
"reaction": Object {
"icon": "thumb_up",
"label": "Respect",
"labelActive": "Respected",
},
}
}
/>
</ButtonsBar>
<ShowConversationLink
href="http://localhost/asset?commentID=comment-id"
src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
+75
View File
@@ -246,6 +246,21 @@ exports[`loads more comments 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -320,6 +335,21 @@ exports[`loads more comments 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -394,6 +424,21 @@ exports[`loads more comments 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -652,6 +697,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -726,6 +786,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
+30
View File
@@ -121,6 +121,21 @@ exports[`renders permalink view 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -377,6 +392,21 @@ exports[`show all comments 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+15
View File
@@ -312,6 +312,21 @@ exports[`show all comments 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
+90
View File
@@ -246,6 +246,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -320,6 +335,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -398,6 +428,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -476,6 +521,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -550,6 +610,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -626,6 +701,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
+30
View File
@@ -246,6 +246,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -320,6 +335,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
+75
View File
@@ -246,6 +246,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -324,6 +339,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -608,6 +638,21 @@ exports[`show all replies 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -686,6 +731,21 @@ exports[`show all replies 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -760,6 +820,21 @@ exports[`show all replies 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
+105
View File
@@ -246,6 +246,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -324,6 +339,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -402,6 +432,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -480,6 +525,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -558,6 +618,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>
@@ -636,6 +711,21 @@ exports[`renders comment stream 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
<a
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -795,6 +885,21 @@ exports[`shows conversation 1`] = `
Reply
</span>
</button>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
<span>
Respect
</span>
</button>
</div>
</div>
</div>