mirror of
https://github.com/wassname/talk.git
synced 2026-08-01 13:00:55 +08:00
[next] Implement Comment History Pagination (#2008)
* refactor: profile * feat: add pagination to comment history * feat: add getMeSourceID helper * feat: update profile in CreateCommentMutation * fix: clear query response cache on mutation * test: add integration tests for profile * test: add unit tests
This commit is contained in:
Kiwi
@@ -0,0 +1,47 @@
|
||||
import { shallow } from "enzyme";
|
||||
import { noop } from "lodash";
|
||||
import React from "react";
|
||||
|
||||
import { removeFragmentRefs } from "talk-framework/testHelpers";
|
||||
import { PropTypesOf } from "talk-framework/types";
|
||||
|
||||
import CommentHistory from "./CommentHistory";
|
||||
|
||||
const CommentHistoryN = removeFragmentRefs(CommentHistory);
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof CommentHistoryN> = {
|
||||
asset: {},
|
||||
comments: [{ id: "comment-1" }, { id: "comment-2" }],
|
||||
onLoadMore: noop,
|
||||
hasMore: false,
|
||||
disableLoadMore: false,
|
||||
};
|
||||
const wrapper = shallow(<CommentHistoryN {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("has more", () => {
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof CommentHistoryN> = {
|
||||
asset: {},
|
||||
comments: [{ id: "comment-1" }, { id: "comment-2" }],
|
||||
onLoadMore: noop,
|
||||
hasMore: true,
|
||||
disableLoadMore: false,
|
||||
};
|
||||
const wrapper = shallow(<CommentHistoryN {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
it("disables load more", () => {
|
||||
const props: PropTypesOf<typeof CommentHistoryN> = {
|
||||
asset: {},
|
||||
comments: [{ id: "comment-1" }, { id: "comment-2" }],
|
||||
onLoadMore: noop,
|
||||
hasMore: true,
|
||||
disableLoadMore: true,
|
||||
};
|
||||
const wrapper = shallow(<CommentHistoryN {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import * as React from "react";
|
||||
import { StatelessComponent } from "react";
|
||||
import { PropTypesOf } from "talk-framework/types";
|
||||
import { Button, HorizontalGutter, Typography } from "talk-ui/components";
|
||||
|
||||
import HistoryCommentContainer from "../containers/HistoryCommentContainer";
|
||||
|
||||
interface CommentHistoryProps {
|
||||
asset: PropTypesOf<typeof HistoryCommentContainer>["asset"];
|
||||
comments: Array<
|
||||
{ id: string } & PropTypesOf<typeof HistoryCommentContainer>["comment"]
|
||||
>;
|
||||
onLoadMore?: () => void;
|
||||
hasMore?: boolean;
|
||||
disableLoadMore?: boolean;
|
||||
}
|
||||
|
||||
const CommentHistory: StatelessComponent<CommentHistoryProps> = props => {
|
||||
return (
|
||||
<HorizontalGutter size="double">
|
||||
<Localized id="profile-historyComment-commentHistory">
|
||||
<Typography variant="heading3">Comment History</Typography>
|
||||
</Localized>
|
||||
{props.comments.map(comment => (
|
||||
<HistoryCommentContainer
|
||||
key={comment.id}
|
||||
asset={props.asset}
|
||||
comment={comment}
|
||||
/>
|
||||
))}
|
||||
{props.hasMore && (
|
||||
<Localized id="profile-commentHistory-loadMore">
|
||||
<Button
|
||||
id={"talk-profile-commentHistory-loadMore"}
|
||||
onClick={props.onLoadMore}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
disabled={props.disableLoadMore}
|
||||
aria-controls="talk-profile-commentHistory-log"
|
||||
>
|
||||
Load More
|
||||
</Button>
|
||||
</Localized>
|
||||
)}
|
||||
</HorizontalGutter>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentHistory;
|
||||
@@ -1,36 +0,0 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import * as React from "react";
|
||||
import { StatelessComponent } from "react";
|
||||
import { HorizontalGutter, Typography } from "talk-ui/components";
|
||||
import HistoryComment from "./HistoryComment";
|
||||
|
||||
interface Comment {
|
||||
id: string;
|
||||
body: string | null;
|
||||
createdAt: any;
|
||||
replyCount: number | null;
|
||||
asset: {
|
||||
title: string | null;
|
||||
};
|
||||
conversationURL: string;
|
||||
onGotoConversation: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
interface CommentsHistoryProps {
|
||||
comments: Comment[];
|
||||
}
|
||||
|
||||
const CommentsHistory: StatelessComponent<CommentsHistoryProps> = props => {
|
||||
return (
|
||||
<HorizontalGutter size="double">
|
||||
<Localized id="profile-historyComment-commentHistory">
|
||||
<Typography variant="heading3">Comment History</Typography>
|
||||
</Localized>
|
||||
{props.comments.map(comment => (
|
||||
<HistoryComment key={comment.id} {...comment} />
|
||||
))}
|
||||
</HorizontalGutter>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentsHistory;
|
||||
@@ -0,0 +1,25 @@
|
||||
import { shallow } from "enzyme";
|
||||
import { noop } from "lodash";
|
||||
import React from "react";
|
||||
|
||||
import { removeFragmentRefs } from "talk-framework/testHelpers";
|
||||
import { PropTypesOf } from "talk-framework/types";
|
||||
|
||||
import HistoryComment from "./HistoryComment";
|
||||
|
||||
const HistoryCommentN = removeFragmentRefs(HistoryComment);
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof HistoryCommentN> = {
|
||||
body: "Hello World",
|
||||
createdAt: "2018-07-06T18:24:00.000Z",
|
||||
replyCount: 4,
|
||||
asset: {
|
||||
title: "Asset Title",
|
||||
},
|
||||
conversationURL: "http://localhost/conversation",
|
||||
onGotoConversation: noop,
|
||||
};
|
||||
const wrapper = shallow(<HistoryCommentN {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,18 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
|
||||
import { removeFragmentRefs } from "talk-framework/testHelpers";
|
||||
import { PropTypesOf } from "talk-framework/types";
|
||||
|
||||
import Profile from "./Profile";
|
||||
|
||||
const ProfileN = removeFragmentRefs(Profile);
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof ProfileN> = {
|
||||
asset: {},
|
||||
me: {},
|
||||
};
|
||||
const wrapper = shallow(<ProfileN {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -3,21 +3,19 @@ import { StatelessComponent } from "react";
|
||||
import { PropTypesOf } from "talk-framework/types";
|
||||
import UserBoxContainer from "talk-stream/containers/UserBoxContainer";
|
||||
import { HorizontalGutter } from "talk-ui/components";
|
||||
import CommentsHistoryContainer from "../containers/CommentsHistoryContainer";
|
||||
import CommentHistoryContainer from "../containers/CommentHistoryContainer";
|
||||
|
||||
export interface ProfileProps {
|
||||
asset: PropTypesOf<typeof CommentsHistoryContainer>["asset"];
|
||||
asset: PropTypesOf<typeof CommentHistoryContainer>["asset"];
|
||||
me: PropTypesOf<typeof UserBoxContainer>["me"] &
|
||||
PropTypesOf<typeof CommentsHistoryContainer>["me"];
|
||||
PropTypesOf<typeof CommentHistoryContainer>["me"];
|
||||
}
|
||||
|
||||
const Profile: StatelessComponent<ProfileProps> = props => {
|
||||
return (
|
||||
<HorizontalGutter size="double">
|
||||
<UserBoxContainer me={props.me} />
|
||||
{props.me && (
|
||||
<CommentsHistoryContainer me={props.me} asset={props.asset} />
|
||||
)}
|
||||
<CommentHistoryContainer me={props.me} asset={props.asset} />
|
||||
</HorizontalGutter>
|
||||
);
|
||||
};
|
||||
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`has more disables load more 1`] = `
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
size="double"
|
||||
>
|
||||
<Localized
|
||||
id="profile-historyComment-commentHistory"
|
||||
>
|
||||
<withPropsOnChange(Typography)
|
||||
variant="heading3"
|
||||
>
|
||||
Comment History
|
||||
</withPropsOnChange(Typography)>
|
||||
</Localized>
|
||||
<withContext(createMutationContainer(Relay(HistoryCommentContainer)))
|
||||
asset={Object {}}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
key="comment-1"
|
||||
/>
|
||||
<withContext(createMutationContainer(Relay(HistoryCommentContainer)))
|
||||
asset={Object {}}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
key="comment-2"
|
||||
/>
|
||||
<Localized
|
||||
id="profile-commentHistory-loadMore"
|
||||
>
|
||||
<withPropsOnChange(Button)
|
||||
aria-controls="talk-profile-commentHistory-log"
|
||||
disabled={true}
|
||||
fullWidth={true}
|
||||
id="talk-profile-commentHistory-loadMore"
|
||||
onClick={[Function]}
|
||||
variant="outlined"
|
||||
>
|
||||
Load More
|
||||
</withPropsOnChange(Button)>
|
||||
</Localized>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
`;
|
||||
|
||||
exports[`has more renders correctly 1`] = `
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
size="double"
|
||||
>
|
||||
<Localized
|
||||
id="profile-historyComment-commentHistory"
|
||||
>
|
||||
<withPropsOnChange(Typography)
|
||||
variant="heading3"
|
||||
>
|
||||
Comment History
|
||||
</withPropsOnChange(Typography)>
|
||||
</Localized>
|
||||
<withContext(createMutationContainer(Relay(HistoryCommentContainer)))
|
||||
asset={Object {}}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
key="comment-1"
|
||||
/>
|
||||
<withContext(createMutationContainer(Relay(HistoryCommentContainer)))
|
||||
asset={Object {}}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
key="comment-2"
|
||||
/>
|
||||
<Localized
|
||||
id="profile-commentHistory-loadMore"
|
||||
>
|
||||
<withPropsOnChange(Button)
|
||||
aria-controls="talk-profile-commentHistory-log"
|
||||
disabled={false}
|
||||
fullWidth={true}
|
||||
id="talk-profile-commentHistory-loadMore"
|
||||
onClick={[Function]}
|
||||
variant="outlined"
|
||||
>
|
||||
Load More
|
||||
</withPropsOnChange(Button)>
|
||||
</Localized>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
`;
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
size="double"
|
||||
>
|
||||
<Localized
|
||||
id="profile-historyComment-commentHistory"
|
||||
>
|
||||
<withPropsOnChange(Typography)
|
||||
variant="heading3"
|
||||
>
|
||||
Comment History
|
||||
</withPropsOnChange(Typography)>
|
||||
</Localized>
|
||||
<withContext(createMutationContainer(Relay(HistoryCommentContainer)))
|
||||
asset={Object {}}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-1",
|
||||
}
|
||||
}
|
||||
key="comment-1"
|
||||
/>
|
||||
<withContext(createMutationContainer(Relay(HistoryCommentContainer)))
|
||||
asset={Object {}}
|
||||
comment={
|
||||
Object {
|
||||
"id": "comment-2",
|
||||
}
|
||||
}
|
||||
key="comment-2"
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
`;
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<withPropsOnChange(HorizontalGutter)>
|
||||
<Localized
|
||||
$title="Asset Title"
|
||||
id="profile-historyComment-story"
|
||||
>
|
||||
<withPropsOnChange(Typography)
|
||||
variant="heading4"
|
||||
>
|
||||
Story: {$title}
|
||||
</withPropsOnChange(Typography)>
|
||||
</Localized>
|
||||
<Timestamp>
|
||||
2018-07-06T18:24:00.000Z
|
||||
</Timestamp>
|
||||
<withPropsOnChange(Typography)
|
||||
container="div"
|
||||
variant="bodyCopy"
|
||||
>
|
||||
<HTMLContent>
|
||||
Hello World
|
||||
</HTMLContent>
|
||||
</withPropsOnChange(Typography)>
|
||||
<withPropsOnChange(Flex)
|
||||
alignItems="center"
|
||||
direction="row"
|
||||
itemGutter={true}
|
||||
>
|
||||
<div
|
||||
className="HistoryComment-replies"
|
||||
>
|
||||
<withPropsOnChange(Icon)
|
||||
className="HistoryComment-icon"
|
||||
>
|
||||
reply
|
||||
</withPropsOnChange(Icon)>
|
||||
<Localized
|
||||
$replyCount={4}
|
||||
id="profile-historyComment-replies"
|
||||
>
|
||||
<span>
|
||||
Replies {$replyCount}
|
||||
</span>
|
||||
</Localized>
|
||||
</div>
|
||||
<withPropsOnChange(Button)
|
||||
anchor={true}
|
||||
href="http://localhost/conversation"
|
||||
onClick={[Function]}
|
||||
target="_parent"
|
||||
variant="underlined"
|
||||
>
|
||||
<withPropsOnChange(Icon)>
|
||||
launch
|
||||
</withPropsOnChange(Icon)>
|
||||
<Localized
|
||||
id="profile-historyComment-viewConversation"
|
||||
>
|
||||
<span>
|
||||
View Conversation
|
||||
</span>
|
||||
</Localized>
|
||||
</withPropsOnChange(Button)>
|
||||
</withPropsOnChange(Flex)>
|
||||
<MatchMediaWithContext
|
||||
lteWidth="xs"
|
||||
>
|
||||
<hr
|
||||
className="HistoryComment-divider"
|
||||
/>
|
||||
</MatchMediaWithContext>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
`;
|
||||
@@ -0,0 +1,15 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<withPropsOnChange(HorizontalGutter)
|
||||
size="double"
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
|
||||
me={Object {}}
|
||||
/>
|
||||
<Relay(CommentHistoryContainer)
|
||||
asset={Object {}}
|
||||
me={Object {}}
|
||||
/>
|
||||
</withPropsOnChange(HorizontalGutter)>
|
||||
`;
|
||||
@@ -0,0 +1,124 @@
|
||||
import React from "react";
|
||||
import { graphql, RelayPaginationProp } from "react-relay";
|
||||
|
||||
import { withPaginationContainer } from "talk-framework/lib/relay";
|
||||
import { CommentHistoryContainer_asset as AssetData } from "talk-stream/__generated__/CommentHistoryContainer_asset.graphql";
|
||||
import { CommentHistoryContainer_me as MeData } from "talk-stream/__generated__/CommentHistoryContainer_me.graphql";
|
||||
import { CommentHistoryContainerPaginationQueryVariables } from "talk-stream/__generated__/CommentHistoryContainerPaginationQuery.graphql";
|
||||
|
||||
import CommentHistory from "../components/CommentHistory";
|
||||
|
||||
interface CommentHistoryContainerProps {
|
||||
me: MeData;
|
||||
asset: AssetData;
|
||||
relay: RelayPaginationProp;
|
||||
}
|
||||
|
||||
export class CommentHistoryContainer extends React.Component<
|
||||
CommentHistoryContainerProps
|
||||
> {
|
||||
public state = {
|
||||
disableLoadMore: false,
|
||||
};
|
||||
|
||||
public render() {
|
||||
const comments = this.props.me.comments.edges.map(edge => edge.node);
|
||||
return (
|
||||
<CommentHistory
|
||||
asset={this.props.asset}
|
||||
comments={comments}
|
||||
onLoadMore={this.loadMore}
|
||||
hasMore={this.props.relay.hasMore()}
|
||||
disableLoadMore={this.state.disableLoadMore}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private loadMore = () => {
|
||||
if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
|
||||
return;
|
||||
}
|
||||
this.setState({ disableLoadMore: true });
|
||||
this.props.relay.loadMore(
|
||||
10, // Fetch the next 10 feed items
|
||||
error => {
|
||||
this.setState({ disableLoadMore: false });
|
||||
if (error) {
|
||||
// tslint:disable-next-line:no-console
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: (cvle) This should be autogenerated.
|
||||
interface FragmentVariables {
|
||||
count: number;
|
||||
cursor?: string;
|
||||
}
|
||||
|
||||
const enhanced = withPaginationContainer<
|
||||
CommentHistoryContainerProps,
|
||||
CommentHistoryContainerPaginationQueryVariables,
|
||||
FragmentVariables
|
||||
>(
|
||||
{
|
||||
asset: graphql`
|
||||
fragment CommentHistoryContainer_asset on Asset {
|
||||
...HistoryCommentContainer_asset
|
||||
}
|
||||
`,
|
||||
me: graphql`
|
||||
fragment CommentHistoryContainer_me on User
|
||||
@argumentDefinitions(
|
||||
count: { type: "Int!", defaultValue: 5 }
|
||||
cursor: { type: "Cursor" }
|
||||
) {
|
||||
comments(first: $count, after: $cursor)
|
||||
@connection(key: "CommentHistory_comments") {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
...HistoryCommentContainer_comment
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
direction: "forward",
|
||||
getConnectionFromProps(props) {
|
||||
return props.me && props.me.comments;
|
||||
},
|
||||
// This is also the default implementation of `getFragmentVariables` if it isn't provided.
|
||||
getFragmentVariables(prevVars, totalCount) {
|
||||
return {
|
||||
...prevVars,
|
||||
count: totalCount,
|
||||
};
|
||||
},
|
||||
getVariables(props, { count, cursor }, fragmentVariables) {
|
||||
return {
|
||||
count,
|
||||
cursor,
|
||||
};
|
||||
},
|
||||
query: graphql`
|
||||
# Pagination query to be fetched upon calling 'loadMore'.
|
||||
# Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
|
||||
query CommentHistoryContainerPaginationQuery(
|
||||
$count: Int!
|
||||
$cursor: Cursor
|
||||
) {
|
||||
me {
|
||||
...CommentHistoryContainer_me
|
||||
@arguments(count: $count, cursor: $cursor)
|
||||
}
|
||||
}
|
||||
`,
|
||||
}
|
||||
)(CommentHistoryContainer);
|
||||
|
||||
export default enhanced;
|
||||
@@ -1,70 +0,0 @@
|
||||
import React from "react";
|
||||
import { graphql } from "react-relay";
|
||||
|
||||
import { getURLWithCommentID } from "talk-framework/helpers";
|
||||
import { withFragmentContainer } from "talk-framework/lib/relay";
|
||||
import { CommentsHistoryContainer_asset as AssetData } from "talk-stream/__generated__/CommentsHistoryContainer_asset.graphql";
|
||||
import { CommentsHistoryContainer_me as CommentsData } from "talk-stream/__generated__/CommentsHistoryContainer_me.graphql";
|
||||
import {
|
||||
SetCommentIDMutation,
|
||||
withSetCommentIDMutation,
|
||||
} from "talk-stream/mutations";
|
||||
import CommentsHistory from "../components/CommentsHistory";
|
||||
|
||||
interface CommentsHistoryContainerProps {
|
||||
setCommentID: SetCommentIDMutation;
|
||||
me: CommentsData;
|
||||
asset: AssetData;
|
||||
}
|
||||
|
||||
export class CommentsHistoryContainer extends React.Component<
|
||||
CommentsHistoryContainerProps
|
||||
> {
|
||||
private onGoToConversation = (id: string) => {
|
||||
this.props.setCommentID({ id });
|
||||
};
|
||||
public render() {
|
||||
const comments = this.props.me.comments.edges.map(edge => ({
|
||||
...edge.node,
|
||||
conversationURL: getURLWithCommentID(edge.node.asset.url, edge.node.id),
|
||||
onGotoConversation: (e: React.MouseEvent) => {
|
||||
if (this.props.asset.id === edge.node.asset.id) {
|
||||
this.onGoToConversation(edge.node.id);
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
}));
|
||||
return <CommentsHistory comments={comments} />;
|
||||
}
|
||||
}
|
||||
|
||||
const enhanced = withSetCommentIDMutation(
|
||||
withFragmentContainer<CommentsHistoryContainerProps>({
|
||||
asset: graphql`
|
||||
fragment CommentsHistoryContainer_asset on Asset {
|
||||
id
|
||||
}
|
||||
`,
|
||||
me: graphql`
|
||||
fragment CommentsHistoryContainer_me on User {
|
||||
comments {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
body
|
||||
createdAt
|
||||
replyCount
|
||||
asset {
|
||||
id
|
||||
title
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
})(CommentsHistoryContainer)
|
||||
);
|
||||
|
||||
export default enhanced;
|
||||
@@ -0,0 +1,66 @@
|
||||
import React from "react";
|
||||
import { graphql } from "react-relay";
|
||||
|
||||
import { getURLWithCommentID } from "talk-framework/helpers";
|
||||
import { withFragmentContainer } from "talk-framework/lib/relay";
|
||||
import { HistoryCommentContainer_asset as AssetData } from "talk-stream/__generated__/HistoryCommentContainer_asset.graphql";
|
||||
import { HistoryCommentContainer_comment as CommentData } from "talk-stream/__generated__/HistoryCommentContainer_comment.graphql";
|
||||
import {
|
||||
SetCommentIDMutation,
|
||||
withSetCommentIDMutation,
|
||||
} from "talk-stream/mutations";
|
||||
import HistoryComment from "../components/HistoryComment";
|
||||
|
||||
interface HistoryCommentContainerProps {
|
||||
setCommentID: SetCommentIDMutation;
|
||||
asset: AssetData;
|
||||
comment: CommentData;
|
||||
}
|
||||
|
||||
export class HistoryCommentContainer extends React.Component<
|
||||
HistoryCommentContainerProps
|
||||
> {
|
||||
private handleGoToConversation = (e: React.MouseEvent) => {
|
||||
if (this.props.asset.id === this.props.comment.asset.id) {
|
||||
this.props.setCommentID({ id: this.props.comment.id });
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
public render() {
|
||||
return (
|
||||
<HistoryComment
|
||||
{...this.props.comment}
|
||||
conversationURL={getURLWithCommentID(
|
||||
this.props.comment.asset.url,
|
||||
this.props.comment.id
|
||||
)}
|
||||
onGotoConversation={this.handleGoToConversation}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const enhanced = withSetCommentIDMutation(
|
||||
withFragmentContainer<HistoryCommentContainerProps>({
|
||||
asset: graphql`
|
||||
fragment HistoryCommentContainer_asset on Asset {
|
||||
id
|
||||
}
|
||||
`,
|
||||
comment: graphql`
|
||||
fragment HistoryCommentContainer_comment on Comment {
|
||||
id
|
||||
body
|
||||
createdAt
|
||||
replyCount
|
||||
asset {
|
||||
id
|
||||
title
|
||||
url
|
||||
}
|
||||
}
|
||||
`,
|
||||
})(HistoryCommentContainer)
|
||||
);
|
||||
|
||||
export default enhanced;
|
||||
@@ -20,13 +20,13 @@ export class StreamContainer extends React.Component<ProfileContainerProps> {
|
||||
const enhanced = withFragmentContainer<ProfileContainerProps>({
|
||||
asset: graphql`
|
||||
fragment ProfileContainer_asset on Asset {
|
||||
...CommentsHistoryContainer_asset
|
||||
...CommentHistoryContainer_asset
|
||||
}
|
||||
`,
|
||||
me: graphql`
|
||||
fragment ProfileContainer_me on User {
|
||||
...UserBoxContainer_me
|
||||
...CommentsHistoryContainer_me
|
||||
...CommentHistoryContainer_me
|
||||
}
|
||||
`,
|
||||
})(StreamContainer);
|
||||
|
||||
@@ -64,10 +64,6 @@ const ProfileQuery: StatelessComponent<InnerProps> = ({
|
||||
assetID,
|
||||
assetURL,
|
||||
}}
|
||||
cacheConfig={{
|
||||
// TODO: enable caching after mutations are adapted.
|
||||
force: true,
|
||||
}}
|
||||
render={render}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user