From 46ff3dea89e83a18909298278e423266dc358bd1 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 5 Sep 2018 22:50:41 +0200 Subject: [PATCH] Reply opens auth popup when not logged in --- .../stream/components/PermalinkView.tsx | 4 +- .../client/stream/components/ReplyList.tsx | 2 + .../client/stream/components/Stream.spec.tsx | 6 +- src/core/client/stream/components/Stream.tsx | 22 +++++-- .../__snapshots__/ReplyList.spec.tsx.snap | 12 ++-- .../__snapshots__/Stream.spec.tsx.snap | 40 +++++++++---- .../containers/CommentContainer.spec.tsx | 5 ++ .../stream/containers/CommentContainer.tsx | 58 ++++++++++++------- .../containers/PermalinkViewContainer.tsx | 10 +++- .../stream/containers/ReplyListContainer.tsx | 8 +++ .../containers/StreamContainer.spec.tsx | 4 +- .../stream/containers/StreamContainer.tsx | 14 +++-- .../containers/UserBoxContainer.spec.tsx | 2 +- .../stream/containers/UserBoxContainer.tsx | 14 ++--- .../CommentContainer.spec.tsx.snap | 4 ++ .../StreamContainer.spec.tsx.snap | 8 +-- .../stream/queries/PermalinkViewQuery.tsx | 21 ++++++- .../client/stream/queries/StreamQuery.tsx | 4 +- 18 files changed, 165 insertions(+), 73 deletions(-) diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx index 38d2d29a0..ceb58f0d1 100644 --- a/src/core/client/stream/components/PermalinkView.tsx +++ b/src/core/client/stream/components/PermalinkView.tsx @@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer"; import * as styles from "./PermalinkView.css"; export interface PermalinkViewProps { + me: PropTypesOf["me"]; asset: PropTypesOf["asset"]; comment: PropTypesOf["comment"] | null; showAllCommentsHref: string | null; @@ -19,6 +20,7 @@ const PermalinkView: StatelessComponent = ({ comment, asset, onShowAllComments, + me, }) => { return (
@@ -44,7 +46,7 @@ const PermalinkView: StatelessComponent = ({ Comment not found )} - {comment && } + {comment && }
); }; diff --git a/src/core/client/stream/components/ReplyList.tsx b/src/core/client/stream/components/ReplyList.tsx index 91db3770e..47e0dbc39 100644 --- a/src/core/client/stream/components/ReplyList.tsx +++ b/src/core/client/stream/components/ReplyList.tsx @@ -10,6 +10,7 @@ import Indent from "./Indent"; export interface ReplyListProps { asset: PropTypesOf["asset"]; + me: PropTypesOf["me"]; comment: { id: string; }; @@ -31,6 +32,7 @@ const ReplyList: StatelessComponent = props => { {props.comments.map(comment => ( { onLoadMore: noop, disableLoadMore: false, hasMore: false, - user: null, + me: null, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); @@ -37,7 +37,7 @@ describe("when use is logged in", () => { onLoadMore: noop, disableLoadMore: false, hasMore: false, - user: {}, + me: {}, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); @@ -54,7 +54,7 @@ describe("when there is more", () => { onLoadMore: sinon.spy(), disableLoadMore: false, hasMore: true, - user: null, + me: null, }; const wrapper = shallow(); diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx index 294ae06c3..1bed822ea 100644 --- a/src/core/client/stream/components/Stream.tsx +++ b/src/core/client/stream/components/Stream.tsx @@ -25,15 +25,19 @@ export interface StreamProps { onLoadMore?: () => void; hasMore?: boolean; disableLoadMore?: boolean; - user: PropTypesOf["user"] | null; + me: + | PropTypesOf["me"] & + PropTypesOf["me"] & + PropTypesOf["me"] + | null; } const Stream: StatelessComponent = props => { return ( - - {props.user ? ( + + {props.me ? ( ) : ( @@ -46,8 +50,16 @@ const Stream: StatelessComponent = props => { > {props.comments.map(comment => ( - - + + ))} {props.hasMore && ( diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap index 6a009c7a8..58655cb5a 100644 --- a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap +++ b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`renders correctly 1`] = ` id="talk-comments-replyList-log--comment-id" role="log" > - - - - - - @@ -21,7 +21,7 @@ exports[`renders correctly 1`] = ` - - @@ -91,7 +95,7 @@ exports[`when there is more disables load more button 1`] = ` size="half" > @@ -103,7 +107,7 @@ exports[`when there is more disables load more button 1`] = ` - - @@ -199,7 +207,7 @@ exports[`when there is more renders a load more button 1`] = ` - - - - diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx index 2541a87d8..d43c241af 100644 --- a/src/core/client/stream/containers/CommentContainer.spec.tsx +++ b/src/core/client/stream/containers/CommentContainer.spec.tsx @@ -1,4 +1,5 @@ import { shallow } from "enzyme"; +import { noop } from "lodash"; import React from "react"; import { removeFragmentRefs } from "talk-framework/testHelpers"; @@ -11,6 +12,7 @@ const CommentContainerN = removeFragmentRefs(CommentContainer); it("renders username and body", () => { const props: PropTypesOf = { + me: null, asset: { id: "asset-id", }, @@ -23,6 +25,7 @@ it("renders username and body", () => { createdAt: "1995-12-17T03:24:00.000Z", }, indentLevel: 1, + showAuthPopup: noop as any, }; const wrapper = shallow(); @@ -31,6 +34,7 @@ it("renders username and body", () => { it("renders body only", () => { const props: PropTypesOf = { + me: null, asset: { id: "asset-id", }, @@ -43,6 +47,7 @@ it("renders body only", () => { createdAt: "1995-12-17T03:24:00.000Z", }, indentLevel: 1, + showAuthPopup: noop as any, }; const wrapper = shallow(); diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx index aed03f7ff..21b4b767e 100644 --- a/src/core/client/stream/containers/CommentContainer.tsx +++ b/src/core/client/stream/containers/CommentContainer.tsx @@ -5,6 +5,11 @@ import withFragmentContainer from "talk-framework/lib/relay/withFragmentContaine import { PropTypesOf } from "talk-framework/types"; import { CommentContainer_asset as AssetData } from "talk-stream/__generated__/CommentContainer_asset.graphql"; import { CommentContainer_comment as CommentData } from "talk-stream/__generated__/CommentContainer_comment.graphql"; +import { CommentContainer_me as MeData } from "talk-stream/__generated__/CommentContainer_me.graphql"; +import { + ShowAuthPopupMutation, + withShowAuthPopupMutation, +} from "talk-stream/mutations"; import Comment from "../components/Comment"; import ReplyButton from "../components/Comment/ReplyButton"; @@ -12,9 +17,11 @@ import ReplyCommentFormContainer from ".//ReplyCommentFormContainer"; import PermalinkButtonContainer from "./PermalinkButtonContainer"; interface InnerProps { + me: MeData | null; comment: CommentData; asset: AssetData; indentLevel?: number; + showAuthPopup: ShowAuthPopupMutation; } interface State { @@ -27,9 +34,13 @@ export class CommentContainer extends Component { }; private openReplyDialog = () => { - this.setState(state => ({ - showReplyDialog: true, - })); + if (this.props.me) { + this.setState(state => ({ + showReplyDialog: true, + })); + } else { + this.props.showAuthPopup({ view: "SIGN_IN" }); + } }; private closeReplyDialog = () => { @@ -69,24 +80,31 @@ export class CommentContainer extends Component { } } -const enhanced = withFragmentContainer({ - asset: graphql` - fragment CommentContainer_asset on Asset { - ...ReplyCommentFormContainer_asset - } - `, - comment: graphql` - fragment CommentContainer_comment on Comment { - id - author { - username +const enhanced = withShowAuthPopupMutation( + withFragmentContainer({ + me: graphql` + fragment CommentContainer_me on User { + __typename } - body - createdAt - ...ReplyCommentFormContainer_comment - } - `, -})(CommentContainer); + `, + asset: graphql` + fragment CommentContainer_asset on Asset { + ...ReplyCommentFormContainer_asset + } + `, + comment: graphql` + fragment CommentContainer_comment on Comment { + id + author { + username + } + body + createdAt + ...ReplyCommentFormContainer_comment + } + `, + })(CommentContainer) +); export type CommentContainerProps = PropTypesOf; export default enhanced; diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx index 02a9f341c..664168e36 100644 --- a/src/core/client/stream/containers/PermalinkViewContainer.tsx +++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx @@ -7,6 +7,7 @@ import { withFragmentContainer } from "talk-framework/lib/relay"; import { buildURL, parseURL } from "talk-framework/utils"; import { PermalinkViewContainer_asset as AssetData } from "talk-stream/__generated__/PermalinkViewContainer_asset.graphql"; import { PermalinkViewContainer_comment as CommentData } from "talk-stream/__generated__/PermalinkViewContainer_comment.graphql"; +import { PermalinkViewContainer_me as MeData } from "talk-stream/__generated__/PermalinkViewContainer_me.graphql"; import { SetCommentIDMutation, withSetCommentIDMutation, @@ -17,6 +18,7 @@ import PermalinkView from "../components/PermalinkView"; interface PermalinkViewContainerProps { comment: CommentData | null; asset: AssetData; + me: MeData | null; setCommentID: SetCommentIDMutation; pym: PymChild | undefined; } @@ -39,9 +41,10 @@ class PermalinkViewContainer extends React.Component< return buildURL({ ...urlParts, search }); } public render() { - const { comment, asset } = this.props; + const { comment, asset, me } = this.props; return ( ({ ...CommentContainer_comment } `, + me: graphql` + fragment PermalinkViewContainer_me on User { + ...CommentContainer_me + } + `, })(PermalinkViewContainer) ) ); diff --git a/src/core/client/stream/containers/ReplyListContainer.tsx b/src/core/client/stream/containers/ReplyListContainer.tsx index 590cbb437..65c6b9ec9 100644 --- a/src/core/client/stream/containers/ReplyListContainer.tsx +++ b/src/core/client/stream/containers/ReplyListContainer.tsx @@ -5,6 +5,7 @@ import { withPaginationContainer } from "talk-framework/lib/relay"; import { PropTypesOf } from "talk-framework/types"; import { ReplyListContainer_asset as AssetData } from "talk-stream/__generated__/ReplyListContainer_asset.graphql"; import { ReplyListContainer_comment as CommentData } from "talk-stream/__generated__/ReplyListContainer_comment.graphql"; +import { ReplyListContainer_me as MeData } from "talk-stream/__generated__/ReplyListContainer_me.graphql"; import { COMMENT_SORT, ReplyListContainerPaginationQueryVariables, @@ -13,6 +14,7 @@ import { import ReplyList from "../components/ReplyList"; export interface InnerProps { + me: MeData | null; asset: AssetData; comment: CommentData; relay: RelayPaginationProp; @@ -33,6 +35,7 @@ export class ReplyListContainer extends React.Component { const comments = this.props.comment.replies.edges.map(edge => edge.node); return ( ( { + me: graphql` + fragment ReplyListContainer_me on User { + ...CommentContainer_me + } + `, asset: graphql` fragment ReplyListContainer_asset on Asset { ...CommentContainer_asset diff --git a/src/core/client/stream/containers/StreamContainer.spec.tsx b/src/core/client/stream/containers/StreamContainer.spec.tsx index 531c74970..3d3a51841 100644 --- a/src/core/client/stream/containers/StreamContainer.spec.tsx +++ b/src/core/client/stream/containers/StreamContainer.spec.tsx @@ -20,7 +20,7 @@ it("renders correctly", () => { edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }], }, }, - user: null, + me: null, relay: { hasMore: noop, isLoading: noop, @@ -40,7 +40,7 @@ describe("when has more comments", () => { edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }], }, }, - user: null, + me: null, relay: { hasMore: () => true, isLoading: () => false, diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx index 4d1be8cc9..980d737b2 100644 --- a/src/core/client/stream/containers/StreamContainer.tsx +++ b/src/core/client/stream/containers/StreamContainer.tsx @@ -4,7 +4,7 @@ import { graphql, RelayPaginationProp } from "react-relay"; import { withPaginationContainer } from "talk-framework/lib/relay"; import { PropTypesOf } from "talk-framework/types"; import { StreamContainer_asset as AssetData } from "talk-stream/__generated__/StreamContainer_asset.graphql"; -import { StreamContainer_user as UserData } from "talk-stream/__generated__/StreamContainer_user.graphql"; +import { StreamContainer_me as MeData } from "talk-stream/__generated__/StreamContainer_me.graphql"; import { COMMENT_SORT, StreamContainerPaginationQueryVariables, @@ -14,7 +14,7 @@ import Stream from "../components/Stream"; interface InnerProps { asset: AssetData; - user: UserData | null; + me: MeData | null; relay: RelayPaginationProp; } @@ -41,7 +41,7 @@ export class StreamContainer extends React.Component { onLoadMore={this.loadMore} hasMore={this.props.relay.hasMore()} disableLoadMore={this.state.disableLoadMore} - user={this.props.user} + me={this.props.me} /> ); } @@ -98,9 +98,11 @@ const enhanced = withPaginationContainer< ...ReplyListContainer_asset } `, - user: graphql` - fragment StreamContainer_user on User { - ...UserBoxContainer_user + me: graphql` + fragment StreamContainer_me on User { + ...ReplyListContainer_me + ...CommentContainer_me + ...UserBoxContainer_me } `, }, diff --git a/src/core/client/stream/containers/UserBoxContainer.spec.tsx b/src/core/client/stream/containers/UserBoxContainer.spec.tsx index f99832b8e..7439e50b1 100644 --- a/src/core/client/stream/containers/UserBoxContainer.spec.tsx +++ b/src/core/client/stream/containers/UserBoxContainer.spec.tsx @@ -18,7 +18,7 @@ it("renders correctly", () => { view: "SIGN_IN", }, }, - user: null, + me: null, // tslint:disable-next-line:no-empty showAuthPopup: async () => {}, // tslint:disable-next-line:no-empty diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx index 6a390c63b..ac10dfa35 100644 --- a/src/core/client/stream/containers/UserBoxContainer.tsx +++ b/src/core/client/stream/containers/UserBoxContainer.tsx @@ -7,7 +7,7 @@ import { withLocalStateContainer, } from "talk-framework/lib/relay"; import { SignOutMutation, withSignOutMutation } from "talk-framework/mutations"; -import { UserBoxContainer_user as UserData } from "talk-stream/__generated__/UserBoxContainer_user.graphql"; +import { UserBoxContainer_me as MeData } from "talk-stream/__generated__/UserBoxContainer_me.graphql"; import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql"; import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated"; import { @@ -22,7 +22,7 @@ import UserBoxAuthenticated from "../components/UserBoxAuthenticated"; interface InnerProps { local: Local; - user: UserData | null; + me: MeData | null; showAuthPopup: ShowAuthPopupMutation; setAuthPopupState: SetAuthPopupStateMutation; signOut: SignOutMutation; @@ -40,16 +40,16 @@ export class UserBoxContainer extends Component { local: { authPopup: { open, focus, view }, }, - user, + me, signOut, } = this.props; - if (user) { + if (me) { return ( ); } @@ -90,8 +90,8 @@ const enhanced = withSignOutMutation( ` )( withFragmentContainer({ - user: graphql` - fragment UserBoxContainer_user on User { + me: graphql` + fragment UserBoxContainer_me on User { username } `, diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap index 1d763eb7a..4883c80e1 100644 --- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap +++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap @@ -24,6 +24,8 @@ exports[`renders body only 1`] = ` } id="comment-id" indentLevel={1} + me={null} + showAuthPopup={[Function]} /> `; @@ -52,6 +54,8 @@ exports[`renders username and body 1`] = ` } id="comment-id" indentLevel={1} + me={null} + showAuthPopup={[Function]} /> `; diff --git a/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap index 97e940cbf..d29f00fdf 100644 --- a/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap +++ b/src/core/client/stream/containers/__snapshots__/StreamContainer.spec.tsx.snap @@ -33,8 +33,8 @@ exports[`renders correctly 1`] = ` ] } disableLoadMore={false} + me={null} onLoadMore={[Function]} - user={null} /> `; @@ -72,8 +72,8 @@ exports[`when has more comments renders hasMore 1`] = ` } disableLoadMore={false} hasMore={true} + me={null} onLoadMore={[Function]} - user={null} /> `; @@ -111,8 +111,8 @@ exports[`when has more comments when loading more disables load more button 1`] } disableLoadMore={true} hasMore={true} + me={null} onLoadMore={[Function]} - user={null} /> `; @@ -150,7 +150,7 @@ exports[`when has more comments when loading more enable load more button after } disableLoadMore={false} hasMore={true} + me={null} onLoadMore={[Function]} - user={null} /> `; diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/queries/PermalinkViewQuery.tsx index c4f4bd455..fc098dafe 100644 --- a/src/core/client/stream/queries/PermalinkViewQuery.tsx +++ b/src/core/client/stream/queries/PermalinkViewQuery.tsx @@ -34,18 +34,32 @@ export const render = ({ ); } return ( - + ); } return ; }; const PermalinkViewQuery: StatelessComponent = ({ - local: { commentID, assetID }, + local: { commentID, assetID, authRevision }, }) => ( query={graphql` - query PermalinkViewQuery($commentID: ID!, $assetID: ID!) { + query PermalinkViewQuery( + $commentID: ID! + $assetID: ID! + $authRevision: Int! + ) { + # authRevision is increment every time auth state has changed. + # This is basically a cache invalidation and causes relay + # to automatically update this query. + me(clientAuthRevision: $authRevision) { + ...PermalinkViewContainer_me + } asset(id: $assetID) { ...PermalinkViewContainer_asset } @@ -57,6 +71,7 @@ const PermalinkViewQuery: StatelessComponent = ({ variables={{ assetID: assetID!, commentID: commentID!, + authRevision, }} render={render} /> diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx index 87fd3254e..b0f1f0c3f 100644 --- a/src/core/client/stream/queries/StreamQuery.tsx +++ b/src/core/client/stream/queries/StreamQuery.tsx @@ -31,7 +31,7 @@ export const render = ({ ); } - return ; + return ; } return ; @@ -47,7 +47,7 @@ const StreamQuery: StatelessComponent = ({ # This is basically a cache invalidation and causes relay # to automatically update this query. me(clientAuthRevision: $authRevision) { - ...StreamContainer_user + ...StreamContainer_me } asset(id: $assetID) { ...StreamContainer_asset