mirror of
https://github.com/wassname/talk.git
synced 2026-07-09 15:37:48 +08:00
Reply opens auth popup when not logged in
This commit is contained in:
Chi Vinh Le
@@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer";
|
||||
import * as styles from "./PermalinkView.css";
|
||||
|
||||
export interface PermalinkViewProps {
|
||||
me: PropTypesOf<typeof CommentContainer>["me"];
|
||||
asset: PropTypesOf<typeof CommentContainer>["asset"];
|
||||
comment: PropTypesOf<typeof CommentContainer>["comment"] | null;
|
||||
showAllCommentsHref: string | null;
|
||||
@@ -19,6 +20,7 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
|
||||
comment,
|
||||
asset,
|
||||
onShowAllComments,
|
||||
me,
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
@@ -44,7 +46,7 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
|
||||
<Typography>Comment not found</Typography>
|
||||
</Localized>
|
||||
)}
|
||||
{comment && <CommentContainer comment={comment} asset={asset} />}
|
||||
{comment && <CommentContainer me={me} comment={comment} asset={asset} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -10,6 +10,7 @@ import Indent from "./Indent";
|
||||
|
||||
export interface ReplyListProps {
|
||||
asset: PropTypesOf<typeof CommentContainer>["asset"];
|
||||
me: PropTypesOf<typeof CommentContainer>["me"];
|
||||
comment: {
|
||||
id: string;
|
||||
};
|
||||
@@ -31,6 +32,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
|
||||
{props.comments.map(comment => (
|
||||
<CommentContainer
|
||||
key={comment.id}
|
||||
me={props.me}
|
||||
comment={comment}
|
||||
asset={props.asset}
|
||||
indentLevel={props.indentLevel}
|
||||
|
||||
@@ -20,7 +20,7 @@ it("renders correctly", () => {
|
||||
onLoadMore: noop,
|
||||
disableLoadMore: false,
|
||||
hasMore: false,
|
||||
user: null,
|
||||
me: null,
|
||||
};
|
||||
const wrapper = shallow(<StreamN {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
@@ -37,7 +37,7 @@ describe("when use is logged in", () => {
|
||||
onLoadMore: noop,
|
||||
disableLoadMore: false,
|
||||
hasMore: false,
|
||||
user: {},
|
||||
me: {},
|
||||
};
|
||||
const wrapper = shallow(<StreamN {...props} />);
|
||||
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(<StreamN {...props} />);
|
||||
|
||||
@@ -25,15 +25,19 @@ export interface StreamProps {
|
||||
onLoadMore?: () => void;
|
||||
hasMore?: boolean;
|
||||
disableLoadMore?: boolean;
|
||||
user: PropTypesOf<typeof UserBoxContainer>["user"] | null;
|
||||
me:
|
||||
| PropTypesOf<typeof UserBoxContainer>["me"] &
|
||||
PropTypesOf<typeof CommentContainer>["me"] &
|
||||
PropTypesOf<typeof ReplyListContainer>["me"]
|
||||
| null;
|
||||
}
|
||||
|
||||
const Stream: StatelessComponent<StreamProps> = props => {
|
||||
return (
|
||||
<HorizontalGutter className={styles.root} size="double">
|
||||
<HorizontalGutter size="half">
|
||||
<UserBoxContainer user={props.user} />
|
||||
{props.user ? (
|
||||
<UserBoxContainer me={props.me} />
|
||||
{props.me ? (
|
||||
<PostCommentFormContainer assetID={props.asset.id} />
|
||||
) : (
|
||||
<PostCommentFormFake />
|
||||
@@ -46,8 +50,16 @@ const Stream: StatelessComponent<StreamProps> = props => {
|
||||
>
|
||||
{props.comments.map(comment => (
|
||||
<HorizontalGutter key={comment.id}>
|
||||
<CommentContainer comment={comment} asset={props.asset} />
|
||||
<ReplyListContainer comment={comment} asset={props.asset} />
|
||||
<CommentContainer
|
||||
me={props.me}
|
||||
comment={comment}
|
||||
asset={props.asset}
|
||||
/>
|
||||
<ReplyListContainer
|
||||
me={props.me}
|
||||
comment={comment}
|
||||
asset={props.asset}
|
||||
/>
|
||||
</HorizontalGutter>
|
||||
))}
|
||||
{props.hasMore && (
|
||||
|
||||
@@ -5,7 +5,7 @@ exports[`renders correctly 1`] = `
|
||||
id="talk-comments-replyList-log--comment-id"
|
||||
role="log"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -19,7 +19,7 @@ exports[`renders correctly 1`] = `
|
||||
indentLevel={1}
|
||||
key="comment-1"
|
||||
/>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -41,7 +41,7 @@ exports[`when there is more disables load more button 1`] = `
|
||||
id="talk-comments-replyList-log--comment-id"
|
||||
role="log"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -55,7 +55,7 @@ exports[`when there is more disables load more button 1`] = `
|
||||
indentLevel={1}
|
||||
key="comment-1"
|
||||
/>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -96,7 +96,7 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
id="talk-comments-replyList-log--comment-id"
|
||||
role="log"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -110,7 +110,7 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
indentLevel={1}
|
||||
key="comment-1"
|
||||
/>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
|
||||
@@ -9,7 +9,7 @@ exports[`renders correctly 1`] = `
|
||||
size="half"
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
|
||||
user={null}
|
||||
me={null}
|
||||
/>
|
||||
<PostCommentFormFake />
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
@@ -21,7 +21,7 @@ exports[`renders correctly 1`] = `
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
key="comment-1"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -33,6 +33,7 @@ exports[`renders correctly 1`] = `
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
<Relay(ReplyListContainer)
|
||||
asset={
|
||||
@@ -46,12 +47,13 @@ exports[`renders correctly 1`] = `
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
key="comment-2"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -63,6 +65,7 @@ exports[`renders correctly 1`] = `
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
<Relay(ReplyListContainer)
|
||||
asset={
|
||||
@@ -76,6 +79,7 @@ exports[`renders correctly 1`] = `
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
@@ -91,7 +95,7 @@ exports[`when there is more disables load more button 1`] = `
|
||||
size="half"
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
|
||||
user={null}
|
||||
me={null}
|
||||
/>
|
||||
<PostCommentFormFake />
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
@@ -103,7 +107,7 @@ exports[`when there is more disables load more button 1`] = `
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
key="comment-1"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -115,6 +119,7 @@ exports[`when there is more disables load more button 1`] = `
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
<Relay(ReplyListContainer)
|
||||
asset={
|
||||
@@ -128,12 +133,13 @@ exports[`when there is more disables load more button 1`] = `
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
key="comment-2"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -145,6 +151,7 @@ exports[`when there is more disables load more button 1`] = `
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
<Relay(ReplyListContainer)
|
||||
asset={
|
||||
@@ -158,6 +165,7 @@ exports[`when there is more disables load more button 1`] = `
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
<Localized
|
||||
@@ -187,7 +195,7 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
size="half"
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
|
||||
user={null}
|
||||
me={null}
|
||||
/>
|
||||
<PostCommentFormFake />
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
@@ -199,7 +207,7 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
key="comment-1"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -211,6 +219,7 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
<Relay(ReplyListContainer)
|
||||
asset={
|
||||
@@ -224,12 +233,13 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
key="comment-2"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -241,6 +251,7 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
<Relay(ReplyListContainer)
|
||||
asset={
|
||||
@@ -254,6 +265,7 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
me={null}
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
<Localized
|
||||
@@ -283,7 +295,7 @@ exports[`when use is logged in renders correctly 1`] = `
|
||||
size="half"
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
|
||||
user={Object {}}
|
||||
me={Object {}}
|
||||
/>
|
||||
<withContext(withContext(createMutationContainer(PostCommentFormContainer)))
|
||||
assetID="asset-id"
|
||||
@@ -297,7 +309,7 @@ exports[`when use is logged in renders correctly 1`] = `
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
key="comment-1"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -309,6 +321,7 @@ exports[`when use is logged in renders correctly 1`] = `
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
me={Object {}}
|
||||
/>
|
||||
<Relay(ReplyListContainer)
|
||||
asset={
|
||||
@@ -322,12 +335,13 @@ exports[`when use is logged in renders correctly 1`] = `
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
me={Object {}}
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
key="comment-2"
|
||||
>
|
||||
<Relay(CommentContainer)
|
||||
<withContext(createMutationContainer(Relay(CommentContainer)))
|
||||
asset={
|
||||
Object {
|
||||
"id": "asset-id",
|
||||
@@ -339,6 +353,7 @@ exports[`when use is logged in renders correctly 1`] = `
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
me={Object {}}
|
||||
/>
|
||||
<Relay(ReplyListContainer)
|
||||
asset={
|
||||
@@ -352,6 +367,7 @@ exports[`when use is logged in renders correctly 1`] = `
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
me={Object {}}
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
|
||||
@@ -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<typeof CommentContainerN> = {
|
||||
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(<CommentContainerN {...props} />);
|
||||
@@ -31,6 +34,7 @@ it("renders username and body", () => {
|
||||
|
||||
it("renders body only", () => {
|
||||
const props: PropTypesOf<typeof CommentContainerN> = {
|
||||
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(<CommentContainerN {...props} />);
|
||||
|
||||
@@ -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<InnerProps, State> {
|
||||
};
|
||||
|
||||
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<InnerProps, State> {
|
||||
}
|
||||
}
|
||||
|
||||
const enhanced = withFragmentContainer<InnerProps>({
|
||||
asset: graphql`
|
||||
fragment CommentContainer_asset on Asset {
|
||||
...ReplyCommentFormContainer_asset
|
||||
}
|
||||
`,
|
||||
comment: graphql`
|
||||
fragment CommentContainer_comment on Comment {
|
||||
id
|
||||
author {
|
||||
username
|
||||
const enhanced = withShowAuthPopupMutation(
|
||||
withFragmentContainer<InnerProps>({
|
||||
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<typeof enhanced>;
|
||||
export default enhanced;
|
||||
|
||||
@@ -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 (
|
||||
<PermalinkView
|
||||
me={me}
|
||||
asset={asset}
|
||||
comment={comment}
|
||||
showAllCommentsHref={this.getShowAllCommentsHref()}
|
||||
@@ -66,6 +69,11 @@ const enhanced = withContext(ctx => ({
|
||||
...CommentContainer_comment
|
||||
}
|
||||
`,
|
||||
me: graphql`
|
||||
fragment PermalinkViewContainer_me on User {
|
||||
...CommentContainer_me
|
||||
}
|
||||
`,
|
||||
})(PermalinkViewContainer)
|
||||
)
|
||||
);
|
||||
|
||||
@@ -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<InnerProps> {
|
||||
const comments = this.props.comment.replies.edges.map(edge => edge.node);
|
||||
return (
|
||||
<ReplyList
|
||||
me={this.props.me}
|
||||
comment={this.props.comment}
|
||||
comments={comments}
|
||||
asset={this.props.asset}
|
||||
@@ -76,6 +79,11 @@ const enhanced = withPaginationContainer<
|
||||
FragmentVariables
|
||||
>(
|
||||
{
|
||||
me: graphql`
|
||||
fragment ReplyListContainer_me on User {
|
||||
...CommentContainer_me
|
||||
}
|
||||
`,
|
||||
asset: graphql`
|
||||
fragment ReplyListContainer_asset on Asset {
|
||||
...CommentContainer_asset
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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<InnerProps> {
|
||||
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
|
||||
}
|
||||
`,
|
||||
},
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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<InnerProps> {
|
||||
local: {
|
||||
authPopup: { open, focus, view },
|
||||
},
|
||||
user,
|
||||
me,
|
||||
signOut,
|
||||
} = this.props;
|
||||
|
||||
if (user) {
|
||||
if (me) {
|
||||
return (
|
||||
<UserBoxAuthenticated
|
||||
onSignOut={signOut}
|
||||
// TODO: why nullable?
|
||||
username={user.username!}
|
||||
username={me.username!}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -90,8 +90,8 @@ const enhanced = withSignOutMutation(
|
||||
`
|
||||
)(
|
||||
withFragmentContainer<InnerProps>({
|
||||
user: graphql`
|
||||
fragment UserBoxContainer_user on User {
|
||||
me: graphql`
|
||||
fragment UserBoxContainer_me on User {
|
||||
username
|
||||
}
|
||||
`,
|
||||
|
||||
@@ -24,6 +24,8 @@ exports[`renders body only 1`] = `
|
||||
}
|
||||
id="comment-id"
|
||||
indentLevel={1}
|
||||
me={null}
|
||||
showAuthPopup={[Function]}
|
||||
/>
|
||||
</React.Fragment>
|
||||
`;
|
||||
@@ -52,6 +54,8 @@ exports[`renders username and body 1`] = `
|
||||
}
|
||||
id="comment-id"
|
||||
indentLevel={1}
|
||||
me={null}
|
||||
showAuthPopup={[Function]}
|
||||
/>
|
||||
</React.Fragment>
|
||||
`;
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
`;
|
||||
|
||||
@@ -34,18 +34,32 @@ export const render = ({
|
||||
);
|
||||
}
|
||||
return (
|
||||
<PermalinkViewContainer comment={props.comment} asset={props.asset} />
|
||||
<PermalinkViewContainer
|
||||
me={props.me}
|
||||
comment={props.comment}
|
||||
asset={props.asset}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <Spinner />;
|
||||
};
|
||||
|
||||
const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
|
||||
local: { commentID, assetID },
|
||||
local: { commentID, assetID, authRevision },
|
||||
}) => (
|
||||
<QueryRenderer<QueryTypes>
|
||||
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<InnerProps> = ({
|
||||
variables={{
|
||||
assetID: assetID!,
|
||||
commentID: commentID!,
|
||||
authRevision,
|
||||
}}
|
||||
render={render}
|
||||
/>
|
||||
|
||||
@@ -31,7 +31,7 @@ export const render = ({
|
||||
</Localized>
|
||||
);
|
||||
}
|
||||
return <StreamContainer asset={props.asset} user={props.me} />;
|
||||
return <StreamContainer me={props.me} asset={props.asset} />;
|
||||
}
|
||||
|
||||
return <Spinner />;
|
||||
@@ -47,7 +47,7 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
|
||||
# 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
|
||||
|
||||
Reference in New Issue
Block a user