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

Merge branch 'next' into admin

Browse Source
This commit is contained in:
Belén Curcio
2018-09-26 13:15:41 -03:00
committed by GitHub
parent bbf98d0b67 122b9e9871
commit 1e8a8d306c
34 changed files with 3879 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+13 -3
View File
@@ -1342,9 +1342,9 @@
}
},
"@coralproject/rte": {
"version": "0.10.11",
"resolved": "https://registry.npmjs.org/@coralproject/rte/-/rte-0.10.11.tgz",
"integrity": "sha512-Tq8NznCOYx84QpHhZbUldxcYrztEQnnNjDC2aW5HhzltO9nBG2Hu78MzTwliML3MmaTFbLehdIb/BKGKj4eMSw==",
"version": "0.10.12",
"resolved": "https://registry.npmjs.org/@coralproject/rte/-/rte-0.10.12.tgz",
"integrity": "sha512-w7UWe6u+TNoPtFcWvyjYkV7eaAE4ccTOYrhdWPsDfM34ZDRq+bM5eiiAMcUVHizvHgsUzFWoN2qjOo+jSfIjCw==",
"dev": true,
"requires": {
"bowser": "^1.0.0",
@@ -11379,6 +11379,11 @@
"source-map-support": "^0.5.1"
}
},
"graphql-fields": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/graphql-fields/-/graphql-fields-1.1.0.tgz",
"integrity": "sha1-okZtHEFFVNq4DA93d9a6mg4PdbQ="
},
"graphql-import": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
@@ -23373,6 +23378,11 @@
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
"dev": true
},
"striptags": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/striptags/-/striptags-3.1.1.tgz",
"integrity": "sha1-yMPn/db7S7OjKjt1LltePjgJPr0="
},
"style-loader": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.21.0.tgz",
package.json
+3 -1
View File
@@ -49,6 +49,7 @@
"fs-extra": "^6.0.1",
"graphql": "^0.13.2",
"graphql-config": "^2.0.1",
"graphql-fields": "^1.1.0",
"graphql-playground-middleware-express": "^1.7.2",
"graphql-redis-subscriptions": "^1.5.0",
"graphql-tools": "^3.0.5",
@@ -76,6 +77,7 @@
"passport-strategy": "^1.0.0",
"performance-now": "^2.1.0",
"permit": "^0.2.4",
"striptags": "^3.1.1",
"subscriptions-transport-ws": "^0.9.12",
"tlds": "^1.203.1",
"uuid": "^3.3.2"
@@ -87,7 +89,7 @@
"@babel/polyfill": "7.0.0-beta.49",
"@babel/preset-env": "7.0.0-beta.49",
"@babel/preset-react": "7.0.0-beta.49",
"@coralproject/rte": "^0.10.11",
"@coralproject/rte": "^0.10.12",
"@types/bcryptjs": "^2.4.1",
"@types/bull": "^3.3.16",
"@types/bunyan": "^1.8.4",
src/core/client/stream/local/local.graphql
+4
View File
@@ -20,7 +20,11 @@ type AuthPopup {
}
extend type Comment {
# pending is true during the optimistic response.
pending: Boolean
# localReplies contains only comments created by the user
# on the ultimate threading level.
localReplies: [Comment!]
}
type Local {
src/core/client/stream/mutations/CreateCommentMutation.ts
+91 -37
View File
@@ -1,5 +1,9 @@
import { graphql } from "react-relay";
import { Environment, RelayMutationConfig } from "relay-runtime";
import {
ConnectionHandler,
Environment,
RecordSourceSelectorProxy,
} from "relay-runtime";
import { getMe } from "talk-framework/helpers";
import { TalkContext } from "talk-framework/lib/bootstrap";
@@ -14,7 +18,85 @@ import { CreateCommentMutation as MutationTypes } from "talk-stream/__generated_
export type CreateCommentInput = Omit<
MutationTypes["variables"]["input"],
"clientMutationId"
>;
> & { local?: boolean };
function sharedUpdater(
store: RecordSourceSelectorProxy,
input: CreateCommentInput
) {
if (input.local) {
localUpdate(store, input);
} else {
update(store, input);
}
}
/**
* update integrates new comment into the CommentConnection.
*/
function update(store: RecordSourceSelectorProxy, input: CreateCommentInput) {
// Get the payload returned from the server.
const payload = store.getRootField("createComment")!;
// Get the edge of the newly created comment.
const newEdge = payload.getLinkedRecord("edge")!;
// Get parent proxy.
const parentProxy = input.parentID
? store.get(input.parentID)
: store.get(input.assetID);
const connectionKey = input.parentID
? "ReplyList_replies"
: "Stream_comments";
const filters = input.parentID
? { orderBy: "CREATED_AT_ASC" }
: { orderBy: "CREATED_AT_DESC" };
const where = input.parentID ? "append" : "prepend";
if (parentProxy) {
const con = ConnectionHandler.getConnection(
parentProxy,
connectionKey,
filters
);
if (con) {
if (where === "prepend") {
ConnectionHandler.insertEdgeBefore(con, newEdge);
} else {
ConnectionHandler.insertEdgeAfter(con, newEdge);
}
}
}
}
/**
* localUpdate is like update but updates the `localReplies` endpoint.
*/
function localUpdate(
store: RecordSourceSelectorProxy,
input: CreateCommentInput
) {
// Get the payload returned from the server.
const payload = store.getRootField("createComment")!;
// Get the edge of the newly created comment.
const newEdge = payload.getLinkedRecord("edge")!;
const newComment = newEdge.getLinkedRecord("node");
// Get parent proxy.
const parentProxy = store.get(input.parentID!);
if (parentProxy) {
const localReplies = parentProxy.getLinkedRecords("localReplies");
const nextLocalReplies = localReplies
? localReplies.concat(newComment)
: [newComment];
parentProxy.setLinkedRecords(nextLocalReplies, "localReplies");
}
}
const mutation = graphql`
mutation CreateCommentMutation($input: CreateCommentInput!) {
@@ -32,39 +114,6 @@ const mutation = graphql`
let clientMutationId = 0;
function getConfig(input: CreateCommentInput): RelayMutationConfig[] {
if (!input.parentID) {
return [
{
type: "RANGE_ADD",
connectionInfo: [
{
key: "Stream_comments",
rangeBehavior: "prepend",
filters: { orderBy: "CREATED_AT_DESC" },
},
],
parentID: input.assetID,
edgeName: "edge",
},
];
}
return [
{
type: "RANGE_ADD",
connectionInfo: [
{
key: "ReplyList_replies",
rangeBehavior: "append",
filters: { orderBy: "CREATED_AT_ASC" },
},
],
parentID: input.parentID,
edgeName: "edge",
},
];
}
function commit(
environment: Environment,
input: CreateCommentInput,
@@ -77,7 +126,9 @@ function commit(
mutation,
variables: {
input: {
...input,
assetID: input.assetID,
parentID: input.parentID,
body: input.body,
clientMutationId: clientMutationId.toString(),
},
},
@@ -102,9 +153,12 @@ function commit(
},
} as any, // TODO: (cvle) generated types should contain one for the optimistic response.
optimisticUpdater: store => {
sharedUpdater(store, input);
store.get(id)!.setValue(true, "pending");
},
configs: getConfig(input),
updater: store => {
sharedUpdater(store, input);
},
});
}
src/core/client/stream/tabs/comments/components/Indent.css
+6
View File
@@ -30,6 +30,12 @@
border-left: 3px solid var(--palette-grey-lighter);
}
.level6 {
padding-left: var(--spacing-unit);
margin-left: calc(5 * var(--spacing-unit));
border-left: 3px solid var(--palette-grey-lightest);
}
.noBorder {
border: 0;
}
src/core/client/stream/tabs/comments/components/Indent.tsx
+18 -6
View File
@@ -10,16 +10,28 @@ export interface IndentProps {
children: React.ReactNode;
}
const levels = [
"",
styles.level1,
styles.level2,
styles.level3,
styles.level4,
styles.level5,
styles.level6,
];
function getLevelClassName(level: number = 0) {
if (!(level in levels)) {
throw new Error(`Indent level ${level} does not exist`);
}
return levels[level];
}
const Indent: StatelessComponent<IndentProps> = props => {
return (
<div className={cn(props.className, styles.root)}>
<div
className={cn({
[styles.level1]: props.level === 1,
[styles.level2]: props.level === 2,
[styles.level3]: props.level === 3,
[styles.level4]: props.level === 4,
[styles.level5]: props.level === 5,
className={cn(getLevelClassName(props.level), {
[styles.noBorder]: props.noBorder,
})}
>
src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx
+2
View File
@@ -20,6 +20,8 @@ it("renders correctly", () => {
disableShowAll: false,
indentLevel: 1,
me: null,
localReply: false,
disableReplies: false,
};
const wrapper = shallow(<ReplyListN {...props} />);
expect(wrapper).toMatchSnapshot();
src/core/client/stream/tabs/comments/components/ReplyList.tsx
+7 -3
View File
@@ -17,11 +17,13 @@ export interface ReplyListProps {
comments: ReadonlyArray<
{ id: string } & PropTypesOf<typeof CommentContainer>["comment"]
>;
onShowAll: () => void;
hasMore: boolean;
disableShowAll: boolean;
onShowAll?: () => void;
hasMore?: boolean;
disableShowAll?: boolean;
indentLevel?: number;
ReplyListComponent?: React.ComponentType<any>;
localReply?: boolean;
disableReplies?: boolean;
}
function getReplyListElement(
@@ -48,6 +50,8 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
comment={comment}
asset={props.asset}
indentLevel={props.indentLevel}
localReply={props.localReply}
disableReplies={props.disableReplies}
/>
{getReplyListElement(props, comment)}
</HorizontalGutter>
src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap
+4
View File
@@ -19,8 +19,10 @@ exports[`renders correctly 1`] = `
"id": "comment-1",
}
}
disableReplies={false}
indentLevel={1}
key="comment-1"
localReply={false}
me={null}
/>
</withPropsOnChange(HorizontalGutter)>
@@ -38,8 +40,10 @@ exports[`renders correctly 1`] = `
"id": "comment-2",
}
}
disableReplies={false}
indentLevel={1}
key="comment-2"
localReply={false}
me={null}
/>
</withPropsOnChange(HorizontalGutter)>
src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx
+32
View File
@@ -32,6 +32,8 @@ it("renders username and body", () => {
},
indentLevel: 1,
showAuthPopup: noop as any,
localReply: false,
disableReplies: false,
};
const wrapper = shallow(<CommentContainerN {...props} />);
@@ -65,3 +67,33 @@ it("renders body only", () => {
const wrapper = shallow(<CommentContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("hide reply button", () => {
const props: PropTypesOf<typeof CommentContainerN> = {
me: null,
asset: {
id: "asset-id",
},
comment: {
id: "comment-id",
author: {
id: "author-id",
username: "Marvin",
},
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
edited: false,
editableUntil: "1995-12-17T03:24:30.000Z",
},
pending: false,
},
indentLevel: 1,
showAuthPopup: noop as any,
localReply: false,
disableReplies: true,
};
const wrapper = shallow(<CommentContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+22 -6
View File
@@ -26,6 +26,13 @@ interface InnerProps {
asset: AssetData;
indentLevel?: number;
showAuthPopup: ShowAuthPopupMutation;
/**
* localReply will integrate the mutation response into
* localReplies
*/
localReply?: boolean;
/** disableReplies will remove the ReplyButton */
disableReplies?: boolean;
}
interface State {
@@ -107,7 +114,13 @@ export class CommentContainer extends Component<InnerProps, State> {
}
public render() {
const { comment, asset, indentLevel } = this.props;
const {
comment,
asset,
indentLevel,
localReply,
disableReplies,
} = this.props;
const { showReplyDialog, showEditDialog, editable } = this.state;
if (showEditDialog) {
return (
@@ -144,11 +157,13 @@ export class CommentContainer extends Component<InnerProps, State> {
}
footer={
<>
<ReplyButton
id={`comments-commentContainer-replyButton-${comment.id}`}
onClick={this.openReplyDialog}
active={showReplyDialog}
/>
{!disableReplies && (
<ReplyButton
id={`comments-commentContainer-replyButton-${comment.id}`}
onClick={this.openReplyDialog}
active={showReplyDialog}
/>
)}
<PermalinkButtonContainer commentID={comment.id} />
</>
}
@@ -158,6 +173,7 @@ export class CommentContainer extends Component<InnerProps, State> {
comment={comment}
asset={asset}
onClose={this.closeReplyDialog}
localReply={localReply}
/>
)}
</>
src/core/client/stream/tabs/comments/containers/LocalReplyListContainer.tsx
+66
View File
@@ -0,0 +1,66 @@
import React, { Component } from "react";
import { graphql } from "react-relay";
import withFragmentContainer from "talk-framework/lib/relay/withFragmentContainer";
import { PropTypesOf } from "talk-framework/types";
import { LocalReplyListContainer_asset as AssetData } from "talk-stream/__generated__/LocalReplyListContainer_asset.graphql";
import { LocalReplyListContainer_comment as CommentData } from "talk-stream/__generated__/LocalReplyListContainer_comment.graphql";
import { LocalReplyListContainer_me as MeData } from "talk-stream/__generated__/LocalReplyListContainer_me.graphql";
import ReplyList from "../components/ReplyList";
interface InnerProps {
indentLevel: number;
me: MeData;
asset: AssetData;
comment: CommentData;
}
/**
* LocalReplyListContainer renders the replies from the endpoint
* `localReplies` instead of `replies`. This is e.g. used for the
* ultimate threading level to only display the newly created comments
* from the current user.
*/
export class LocalReplyListContainer extends Component<InnerProps> {
public render() {
if (!this.props.comment.localReplies) {
return null;
}
return (
<ReplyList
me={this.props.me}
comment={this.props.comment}
comments={this.props.comment.localReplies}
asset={this.props.asset}
indentLevel={this.props.indentLevel}
disableReplies
/>
);
}
}
const enhanced = withFragmentContainer<InnerProps>({
me: graphql`
fragment LocalReplyListContainer_me on User {
...CommentContainer_me
}
`,
asset: graphql`
fragment LocalReplyListContainer_asset on Asset {
...CommentContainer_asset
}
`,
comment: graphql`
fragment LocalReplyListContainer_comment on Comment {
id
localReplies {
id
...CommentContainer_comment
}
}
`,
})(LocalReplyListContainer);
export type LocalReplyListContainerProps = PropTypesOf<typeof enhanced>;
export default enhanced;
src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.spec.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ it("save values", async () => {
it("creates a comment", async () => {
const assetID = "asset-id";
const input = { body: "Hello World!" };
const input = { body: "Hello World!", local: false };
const createCommentStub = sinon.stub();
const form = { reset: noop };
const onCloseStub = sinon.stub();
src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.tsx
+2
View File
@@ -25,6 +25,7 @@ interface InnerProps {
asset: AssetData;
onClose?: () => void;
autofocus: boolean;
localReply?: boolean;
}
interface State {
@@ -76,6 +77,7 @@ export class ReplyCommentFormContainer extends Component<InnerProps, State> {
await this.props.createComment({
assetID: this.props.asset.id,
parentID: this.props.comment.id,
local: this.props.localReply,
...input,
});
src/core/client/stream/tabs/comments/containers/ReplyListContainer.spec.tsx
+5 -2
View File
@@ -29,19 +29,20 @@ it("renders correctly", () => {
me: null,
indentLevel: 1,
ReplyListComponent: () => null,
localReply: false,
};
const wrapper = shallow(<ReplyListContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders correctly when replies are null", () => {
it("renders correctly when replies are empty", () => {
const props: PropTypesOf<typeof ReplyListContainerN> = {
asset: {
id: "asset-id",
},
comment: {
id: "comment-id",
replies: null,
replies: { edges: [] },
},
relay: {
hasMore: noop,
@@ -50,6 +51,7 @@ it("renders correctly when replies are null", () => {
me: null,
indentLevel: 1,
ReplyListComponent: undefined,
localReply: false,
};
const wrapper = shallow(<ReplyListContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
@@ -75,6 +77,7 @@ describe("when has more replies", () => {
me: null,
indentLevel: 1,
ReplyListComponent: undefined,
localReply: false,
};
let wrapper: ShallowWrapper;
src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx
+21 -3
View File
@@ -3,6 +3,7 @@ import { graphql, GraphQLTaggedNode, RelayPaginationProp } from "react-relay";
import { withProps } from "recompose";
import { withPaginationContainer } from "talk-framework/lib/relay";
import { PropTypesOf } from "talk-framework/types";
import { ReplyListContainer1_asset as AssetData } from "talk-stream/__generated__/ReplyListContainer1_asset.graphql";
import { ReplyListContainer1_comment as CommentData } from "talk-stream/__generated__/ReplyListContainer1_comment.graphql";
import { ReplyListContainer1_me as MeData } from "talk-stream/__generated__/ReplyListContainer1_me.graphql";
@@ -11,7 +12,9 @@ import {
ReplyListContainer1PaginationQueryVariables,
} from "talk-stream/__generated__/ReplyListContainer1PaginationQuery.graphql";
import { StatelessComponent } from "enzyme";
import ReplyList from "../components/ReplyList";
import LocalReplyListContainer from "./LocalReplyListContainer";
export interface InnerProps {
me: MeData | null;
@@ -20,6 +23,7 @@ export interface InnerProps {
relay: RelayPaginationProp;
indentLevel: number;
ReplyListComponent: React.ComponentType<any> | undefined;
localReply: boolean | undefined;
}
// TODO: (cvle) This should be autogenerated.
@@ -52,6 +56,7 @@ export class ReplyListContainer extends React.Component<InnerProps> {
disableShowAll={this.state.disableShowAll}
indentLevel={this.props.indentLevel}
ReplyListComponent={this.props.ReplyListComponent}
localReply={this.props.localReply}
/>
);
}
@@ -83,9 +88,10 @@ function createReplyListContainer(
comment: GraphQLTaggedNode;
},
query: GraphQLTaggedNode,
ReplyListComponent?: React.ComponentType<any>
ReplyListComponent?: React.ComponentType<any>,
localReply?: boolean
) {
return withProps({ indentLevel, ReplyListComponent })(
return withProps({ indentLevel, ReplyListComponent, localReply })(
withPaginationContainer<
InnerProps,
ReplyListContainer1PaginationQueryVariables,
@@ -115,17 +121,26 @@ function createReplyListContainer(
);
}
/**
* LastReplyList uses the LocalReplyListContainer.
*/
const LastReplyList: StatelessComponent<
PropTypesOf<typeof LocalReplyListContainer>
> = props => <LocalReplyListContainer {...props} indentLevel={6} />;
const ReplyListContainer5 = createReplyListContainer(
5,
{
me: graphql`
fragment ReplyListContainer5_me on User {
...CommentContainer_me
...LocalReplyListContainer_me
}
`,
asset: graphql`
fragment ReplyListContainer5_asset on Asset {
...CommentContainer_asset
...LocalReplyListContainer_asset
}
`,
comment: graphql`
@@ -142,6 +157,7 @@ const ReplyListContainer5 = createReplyListContainer(
node {
id
...CommentContainer_comment
...LocalReplyListContainer_comment
}
}
}
@@ -162,7 +178,9 @@ const ReplyListContainer5 = createReplyListContainer(
@arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
}
}
`
`,
LastReplyList,
true
);
const ReplyListContainer4 = createReplyListContainer(
src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
+26
View File
@@ -1,5 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`hide reply button 1`] = `
<React.Fragment>
<IndentedComment
author={
Object {
"id": "author-id",
"username": "Marvin",
}
}
blur={false}
body="Woof"
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<withContext(withLocalStateContainer(PermalinkContainer))
commentID="comment-id"
/>
</React.Fragment>
}
id="comment-comment-id"
indentLevel={1}
showEditedMarker={false}
/>
</React.Fragment>
`;
exports[`renders body only 1`] = `
<React.Fragment>
<IndentedComment
src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap
+5 -1
View File
@@ -39,12 +39,13 @@ exports[`renders correctly 1`] = `
}
disableShowAll={false}
indentLevel={1}
localReply={false}
me={null}
onShowAll={[Function]}
/>
`;
exports[`renders correctly when replies are null 1`] = `""`;
exports[`renders correctly when replies are empty 1`] = `""`;
exports[`when has more replies renders hasMore 1`] = `
<ReplyList
@@ -85,6 +86,7 @@ exports[`when has more replies renders hasMore 1`] = `
disableShowAll={false}
hasMore={true}
indentLevel={1}
localReply={false}
me={null}
onShowAll={[Function]}
/>
@@ -129,6 +131,7 @@ exports[`when has more replies when showing all disables show all button 1`] = `
disableShowAll={true}
hasMore={true}
indentLevel={1}
localReply={false}
me={null}
onShowAll={[Function]}
/>
@@ -173,6 +176,7 @@ exports[`when has more replies when showing all enable show all button after loa
disableShowAll={false}
hasMore={true}
indentLevel={1}
localReply={false}
me={null}
onShowAll={[Function]}
/>
src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
+2939
View File
File diff suppressed because it is too large Load Diff
src/core/client/stream/test/comments/postComment.spec.tsx
+1
View File
@@ -39,6 +39,7 @@ beforeEach(() => {
edited: false,
editableUntil: "2018-07-06T18:24:30.000Z",
},
replies: { edges: [], pageInfo: {} },
},
},
clientMutationId: "0",
src/core/client/stream/test/comments/postLocalReply.spec.tsx
+110
View File
@@ -0,0 +1,110 @@
import { ReactTestRenderer } from "react-test-renderer";
import timekeeper from "timekeeper";
import { timeout } from "talk-common/utils";
import { createSinonStub } from "talk-framework/testHelpers";
import { assetWithDeepestReplies, users } from "../fixtures";
import create from "./create";
let testRenderer: ReactTestRenderer;
beforeEach(() => {
const resolvers = {
Query: {
asset: createSinonStub(
s => s.throws(),
s => s.returns(assetWithDeepestReplies)
),
me: createSinonStub(s => s.throws(), s => s.returns(users[0])),
},
Mutation: {
createComment: createSinonStub(
s => s.throws(),
s =>
s
.withArgs(undefined, {
input: {
assetID: assetWithDeepestReplies.id,
parentID: "comment-with-deepest-replies-5",
body: "<strong>Hello world!</strong>",
clientMutationId: "0",
},
})
.returns({
edge: {
cursor: null,
node: {
id: "comment-x",
author: users[0],
body: "<strong>Hello world! (from server)</strong>",
createdAt: "2018-07-06T18:24:00.000Z",
replies: {
edges: [],
pageInfo: { endCursor: null, hasNextPage: false },
},
editing: {
edited: false,
editableUntil: "2018-07-06T18:24:30.000Z",
},
},
},
clientMutationId: "0",
})
),
},
};
({ testRenderer } = create({
// Set this to true, to see graphql responses.
logNetwork: false,
resolvers,
initLocalState: localRecord => {
localRecord.setValue(assetWithDeepestReplies.id, "assetID");
},
}));
});
it("renders comment stream", async () => {
// Wait for loading.
await timeout();
expect(testRenderer.toJSON()).toMatchSnapshot();
});
it("post a reply", async () => {
// Wait for loading.
await timeout();
// Open reply form.
testRenderer.root
.findByProps({
id:
"comments-commentContainer-replyButton-comment-with-deepest-replies-5",
})
.props.onClick();
await timeout();
expect(testRenderer.toJSON()).toMatchSnapshot("open reply form");
// Write reply .
testRenderer.root
.findByProps({
inputId: "comments-replyCommentForm-rte-comment-with-deepest-replies-5",
})
.props.onChange({ html: "<strong>Hello world!</strong>" });
timekeeper.freeze(new Date("2018-07-06T18:24:00.000Z"));
testRenderer.root
.findByProps({
id: "comments-replyCommentForm-form-comment-with-deepest-replies-5",
})
.props.onSubmit();
// Test optimistic response.
expect(testRenderer.toJSON()).toMatchSnapshot("optimistic response");
timekeeper.reset();
// Wait for loading.
await timeout();
// Test after server response.
expect(testRenderer.toJSON()).toMatchSnapshot("server response");
});
src/core/client/stream/test/fixtures.ts
+107
View File
@@ -171,3 +171,110 @@ export const assetWithDeepReplies = {
},
},
};
export const commentWithDeepestReplies = {
...commentWithReplies,
id: "comment-with-deepest-replies",
body: "body 0",
replies: {
...commentWithReplies.replies,
edges: [
{
cursor: commentWithReplies.createdAt,
node: {
...commentWithReplies,
id: "comment-with-deepest-replies-1",
body: "body 1",
replies: {
...commentWithReplies.replies,
edges: [
{
cursor: commentWithReplies.createdAt,
node: {
...commentWithReplies,
id: "comment-with-deepest-replies-2",
body: "body 2",
replies: {
...commentWithReplies.replies,
edges: [
{
cursor: commentWithReplies.createdAt,
node: {
...commentWithReplies,
id: "comment-with-deepest-replies-3",
body: "body 3",
replies: {
...commentWithReplies.replies,
edges: [
{
cursor: commentWithReplies.createdAt,
node: {
...commentWithReplies,
id: "comment-with-deepest-replies-4",
body: "body 4",
replies: {
...commentWithReplies.replies,
edges: [
{
cursor: commentWithReplies.createdAt,
node: {
...commentWithReplies,
id: "comment-with-deepest-replies-5",
body: "body 5",
replies: {
...commentWithReplies.replies,
edges: [
{
cursor:
commentWithReplies.createdAt,
node: {
...commentWithReplies,
id:
"comment-with-deepest-replies-6",
body: "body 6",
replies: {
...commentWithReplies.replies,
edges: [],
},
},
},
],
},
},
},
],
},
},
},
],
},
},
},
],
},
},
},
],
},
},
},
],
},
};
export const assetWithDeepestReplies = {
id: "asset-with-deepest-replies",
url: "http://localhost/assets/asset-with-replies",
isClosed: false,
comments: {
edges: [
{
node: commentWithDeepestReplies,
cursor: commentWithDeepestReplies.createdAt,
},
],
pageInfo: {
hasNextPage: false,
},
},
};
src/core/server/graph/tenant/loaders/comments.ts
+29 -2
View File
@@ -3,14 +3,35 @@ import DataLoader from "dataloader";
import Context from "talk-server/graph/tenant/context";
import {
AssetToCommentsArgs,
CommentToParentsArgs,
CommentToRepliesArgs,
GQLCOMMENT_SORT,
} from "talk-server/graph/tenant/schema/__generated__/types";
import {
Comment,
retrieveCommentAssetConnection,
retrieveCommentParentsConnection,
retrieveCommentRepliesConnection,
retrieveManyComments,
} from "talk-server/models/comment";
import { Connection } from "talk-server/models/connection";
/**
* primeCommentsFromConnection will prime a given context with the comments
* retrieved via a connection.
*
* @param ctx graph context to use to prime the loaders.
*/
const primeCommentsFromConnection = (ctx: Context) => (
connection: Readonly<Connection<Readonly<Comment>>>
) => {
// For each of the edges, prime the comment loader.
connection.edges.forEach(({ node }) => {
ctx.loaders.Comments.comment.prime(node.id, node);
});
return connection;
};
export default (ctx: Context) => ({
comment: new DataLoader((ids: string[]) =>
@@ -29,7 +50,7 @@ export default (ctx: Context) => ({
first,
orderBy,
after,
}),
}).then(primeCommentsFromConnection(ctx)),
forParent: (
assetID: string,
parentID: string,
@@ -50,5 +71,11 @@ export default (ctx: Context) => ({
orderBy,
after,
}
),
).then(primeCommentsFromConnection(ctx)),
parents: (comment: Comment, { last = 1, before }: CommentToParentsArgs) =>
retrieveCommentParentsConnection(ctx.mongo, ctx.tenant.id, comment, {
last,
// The cursor passed here is always going to be a number.
before: before as number,
}).then(primeCommentsFromConnection(ctx)),
});
src/core/server/graph/tenant/loaders/users.ts
+13 -4
View File
@@ -2,8 +2,17 @@ import DataLoader from "dataloader";
import Context from "talk-server/graph/tenant/context";
import { retrieveManyUsers, User } from "talk-server/models/user";
export default (ctx: Context) => ({
user: new DataLoader<string, User | null>(ids =>
export default (ctx: Context) => {
const user = new DataLoader<string, User | null>(ids =>
retrieveManyUsers(ctx.mongo, ctx.tenant.id, ids)
),
});
);
if (ctx.user) {
// Prime the current logged in user in the dataloader cache.
user.prime(ctx.user.id, ctx.user);
}
return {
user,
};
};
src/core/server/graph/tenant/resolvers/comment.ts
+63 -2
View File
@@ -1,5 +1,10 @@
import { GQLCommentTypeResolver } from "talk-server/graph/tenant/schema/__generated__/types";
import { getRequestedFields } from "talk-server/graph/tenant/resolvers/util";
import {
GQLComment,
GQLCommentTypeResolver,
} from "talk-server/graph/tenant/schema/__generated__/types";
import { Comment } from "talk-server/models/comment";
import { createConnection } from "talk-server/models/connection";
const Comment: GQLCommentTypeResolver<Comment> = {
editing: (comment, input, ctx) => ({
@@ -16,7 +21,63 @@ const Comment: GQLCommentTypeResolver<Comment> = {
author: (comment, input, ctx) =>
ctx.loaders.Users.user.load(comment.author_id),
replies: (comment, input, ctx) =>
ctx.loaders.Comments.forParent(comment.asset_id, comment.id, input),
comment.reply_count > 0
? ctx.loaders.Comments.forParent(comment.asset_id, comment.id, input)
: createConnection(),
parentCount: comment =>
comment.parent_id ? comment.grandparent_ids.length + 1 : 0,
depth: comment =>
comment.parent_id ? comment.grandparent_ids.length + 1 : 0,
replyCount: comment => comment.reply_count,
rootParent: (comment, input, ctx, info) => {
// If there isn't a parent, then return nothing!
if (!comment.parent_id) {
return null;
}
// rootParentID is the root parent id for a given comment.
const rootParentID =
comment.grandparent_ids.length > 0
? comment.grandparent_ids[0]
: comment.parent_id;
// Get the field names of the fields being requested, if it's only the ID,
// we have that, so no need to make a database request.
const fields = getRequestedFields<GQLComment>(info);
if (fields.length === 1 && fields[0] === "id") {
return {
id: rootParentID,
};
}
// We want more than the ID! Get the comment!
// TODO: (wyattjoh) if the parent and the parents (containing the parent) are requested, the parent comment is retrieved from the database twice. Investigate ways of reducing i/o.
return ctx.loaders.Comments.comment.load(rootParentID);
},
parent: (comment, input, ctx, info) => {
// If there isn't a parent, then return nothing!
if (!comment.parent_id) {
return null;
}
// Get the field names of the fields being requested, if it's only the ID,
// we have that, so no need to make a database request.
const fields = getRequestedFields<GQLComment>(info);
if (fields.length === 1 && fields[0] === "id") {
return {
id: comment.parent_id,
};
}
// We want more than the ID! Get the comment!
// TODO: (wyattjoh) if the parent and the parents (containing the parent) are requested, the parent comment is retrieved from the database twice. Investigate ways of reducing i/o.
return ctx.loaders.Comments.comment.load(comment.parent_id);
},
parents: (comment, input, ctx) =>
// Some resolver optimization.
comment.parent_id
? ctx.loaders.Comments.parents(comment, input)
: createConnection(),
};
export default Comment;
src/core/server/graph/tenant/resolvers/util.ts
+12
View File
@@ -0,0 +1,12 @@
import { GraphQLResolveInfo } from "graphql";
import graphqlFields from "graphql-fields";
import { pull } from "lodash";
/**
* getRequestedFields returns the fields in an array that are being queried for.
*
* @param info query information
*/
export function getRequestedFields<T>(info: GraphQLResolveInfo) {
return pull(Object.keys(graphqlFields<T>(info)), "__typename");
}
src/core/server/graph/tenant/schema/schema.graphql
+75 -24
View File
@@ -289,6 +289,27 @@ type Karma {
thresholds: KarmaThresholds!
}
################################################################################
## CharCount
################################################################################
type CharCount {
"""
enabled when true, enables the character count moderation phase.
"""
enabled: Boolean!
"""
min is the smallest length of a Comment that may be posted.
"""
min: Int
"""
max is the largest length of a Comment that may be posted.
"""
max: Int
}
################################################################################
## Email
################################################################################
@@ -411,14 +432,9 @@ type Settings {
editCommentWindowLength: Int!
"""
charCountEnable is true when the character count restriction is enabled.
charCount stores the character count moderation settings.
"""
charCountEnable: Boolean!
"""
charCount is the maximum number of characters a comment may be.
"""
charCount: Int
charCount: CharCount!
"""
organizationName is the name of the organization.
@@ -624,11 +640,22 @@ type Comment {
"""
status: COMMENT_STATUS!
"""
parentCount is the number of direct parents for this Comment. Currently this
value is the same as depth.
"""
parentCount: Int!
"""
depth is the number of levels that a given comment is deep.
"""
depth: Int!
"""
replyCount is the number of replies. Only direct replies to this Comment
are counted. Deleted comments are included in this count.
"""
replyCount: Int
replyCount: Int!
"""
replies will return the replies to this Comment.
@@ -637,7 +664,24 @@ type Comment {
first: Int = 10
orderBy: COMMENT_SORT = CREATED_AT_DESC
after: Cursor
): CommentsConnection
): CommentsConnection!
"""
parent is the immediate parent of a given comment.
"""
parent: Comment
"""
rootParent is the highest level parent Comment. This Comment would have been
left on the Asset itself.
"""
rootParent: Comment
"""
parents returns a CommentsConnection that allows accessing direct parents of
the given Comment.
"""
parents(last: Int = 1, before: Cursor): CommentsConnection!
"""
editing returns details about the edit status of a Comment.
@@ -797,11 +841,6 @@ type Query {
"""
comment(id: ID!): Comment
"""
assets returns a AssetsConnection.
"""
assets(cursor: Cursor, limit: Int = 10): AssetsConnection
"""
asset is the Asset specified by its ID/URL.
"""
@@ -1104,6 +1143,23 @@ input SettingsKarmaInput {
thresholds: SettingsKarmaThresholdsInput
}
input SettingsCharCountInput {
"""
enabled when true, enables the character count moderation phase.
"""
enabled: Boolean
"""
min is the smallest length of a Comment that may be posted.
"""
min: Int
"""
max is the largest length of a Comment that may be posted.
"""
max: Int
}
"""
SettingsInput is the partial type of the Settings type for performing mutations.
"""
@@ -1195,16 +1251,6 @@ input SettingsInput {
"""
editCommentWindowLength: Int
"""
charCountEnable is true when the character count restriction is enabled.
"""
charCountEnable: Boolean
"""
charCount is the maximum number of characters a comment may be.
"""
charCount: Int
"""
organizationName is the name of the organization.
"""
@@ -1240,6 +1286,11 @@ input SettingsInput {
handled.
"""
karma: SettingsKarmaInput
"""
charCount stores the character count moderation settings.
"""
charCount: SettingsCharCountInput
}
"""
src/core/server/models/comment.ts
+125 -1
View File
@@ -10,6 +10,7 @@ import {
import { ActionCounts } from "talk-server/models/actions";
import {
Connection,
createConnection,
Cursor,
getPageInfo,
nodesToEdges,
@@ -28,7 +29,7 @@ export interface BodyHistoryItem {
}
export interface StatusHistoryItem {
status: GQLCOMMENT_STATUS; // TODO: migrate field
status: GQLCOMMENT_STATUS;
assigned_by?: string;
created_at: Date;
}
@@ -43,6 +44,8 @@ export interface Comment extends TenantResource {
status: GQLCOMMENT_STATUS;
status_history: StatusHistoryItem[];
action_counts: ActionCounts;
grandparent_ids: string[];
reply_ids: string[];
reply_count: number;
created_at: Date;
deleted_at?: Date;
@@ -54,6 +57,7 @@ export type CreateCommentInput = Omit<
| "id"
| "tenant_id"
| "created_at"
| "reply_ids"
| "reply_count"
| "body_history"
| "status_history"
@@ -75,6 +79,7 @@ export async function createComment(
id: uuid.v4(),
tenant_id: tenantID,
created_at: now,
reply_ids: [],
reply_count: 0,
body_history: [
{
@@ -102,6 +107,31 @@ export async function createComment(
return comment;
}
/**
* pushChildCommentIDOntoParent will push the new child comment's ID onto the
* parent comment so it can reference direct children.
*/
export async function pushChildCommentIDOntoParent(
mongo: Db,
tenantID: string,
parentID: string,
childID: string
) {
// This pushes the new child ID onto the parent comment.
const result = await collection(mongo).findOneAndUpdate(
{
tenant_id: tenantID,
id: parentID,
},
{
$push: { reply_ids: childID },
$inc: { reply_count: 1 },
}
);
return result.value;
}
export type EditCommentInput = Pick<
Comment,
"id" | "author_id" | "body" | "status" | "metadata"
@@ -273,6 +303,100 @@ export async function retrieveCommentRepliesConnection(
return retrieveConnection(input, query);
}
/**
* retrieveCommentParentsConnection will return a comment connection used to
* represent the parents of a given comment.
*
* @param mongo the database connection to use when retrieving comments
* @param tenantID the tenant id for where the comment exists
* @param commentID the id of the comment to retrieve parents of
* @param pagination pagination options to paginate the results
*/
export async function retrieveCommentParentsConnection(
mongo: Db,
tenantID: string,
comment: Comment,
{ last: limit, before: skip = -1 }: { last: number; before?: number }
): Promise<Readonly<Connection<Readonly<Comment>>>> {
// Return nothing if this comment does not have any parents.
if (!comment.parent_id) {
return createConnection({
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
},
});
}
// TODO: (wyattjoh) maybe throw an error when the limit is zero?
if (limit <= 0) {
return createConnection({
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
},
});
}
// If the last paramter is 1, and the after paramter is either unset or equal
// to zero, then all we have to return is the direct parent.
if (limit === 1 && skip < 0) {
const parent = await retrieveComment(mongo, tenantID, comment.parent_id);
if (!parent) {
throw new Error("parent comment not found");
}
return {
edges: [{ node: parent, cursor: 0 }],
pageInfo: {
hasNextPage: false,
hasPreviousPage: comment.grandparent_ids.length > 0,
endCursor: 0,
startCursor: 0,
},
};
}
// Create a list of all the comment parent ids, in reverse order.
const parentIDs = [comment.parent_id, ...comment.grandparent_ids.reverse()];
// Fetch the subset of the comment id's that we are going to query for.
const parentIDSubset = parentIDs.slice(skip + 1, skip + 1 + limit);
// Retrieve the parents via the subset list.
const parents = await retrieveManyComments(mongo, tenantID, parentIDSubset);
// Loop over the list to ensure that none of the entries is null (indicating
// that there was a misplaced parent). We can assert the type here because we
// will throw an error and abort if one of the comments are null.
parents.forEach(parentComment => {
if (!parentComment) {
// TODO: (wyattjoh) replace with a better error.
throw new Error("parent id specified does not exist");
}
return true;
});
const edges = nodesToEdges(
// We can't have a null parent after the forEach filter above.
parents as Array<Readonly<Comment>>,
(_, index) => index + skip + 1
).reverse();
// Return the resolved connection.
return {
edges,
pageInfo: {
hasNextPage: false,
hasPreviousPage: parentIDs.length > limit + skip,
startCursor: edges.length > 0 ? edges[0].cursor : null,
endCursor: edges.length > 0 ? edges[edges.length - 1].cursor : null,
},
};
}
/**
* retrieveAssetConnection returns a Connection<Comment> for a given Asset's
* comments.
src/core/server/models/connection.ts
+21
View File
@@ -1,3 +1,5 @@
import { merge } from "lodash";
export type Cursor = Date | number | string | null;
export interface Edge<T> {
@@ -17,6 +19,25 @@ export interface Connection<T> {
pageInfo: PageInfo;
}
/**
* createConnection will create a base Connection that can be used to satisfy
* the Connection<T> interface.
*
* @param connection the base connection to optionally merge with the default base
* connection details.
*/
export function createConnection<T>(
connection: Partial<Connection<T>> = {}
): Connection<T> {
return merge(
{
edges: [],
pageInfo: {},
},
connection
);
}
export interface PaginationArgs {
first: number;
}
src/core/server/models/settings.ts
+2 -2
View File
@@ -1,5 +1,6 @@
import {
GQLAuth,
GQLCharCount,
GQLEmail,
GQLExternalIntegrations,
GQLKarma,
@@ -62,8 +63,7 @@ export interface ModerationSettings {
closedMessage?: string;
disableCommenting: boolean;
disableCommentingMessage?: string;
charCountEnable: boolean;
charCount?: number;
charCount: GQLCharCount;
}
export interface Settings extends ModerationSettings {
src/core/server/models/tenant.ts
+3 -1
View File
@@ -71,7 +71,9 @@ export async function createTenant(db: Db, input: CreateTenantInput) {
closedTimeout: 60 * 60 * 24 * 7 * 2,
disableCommenting: false,
editCommentWindowLength: 30 * 1000,
charCountEnable: false,
charCount: {
enabled: false,
},
wordlist: {
suspect: [],
banned: [],
src/core/server/services/comments/index.ts
+18 -2
View File
@@ -7,6 +7,7 @@ import {
CreateCommentInput,
editComment,
EditCommentInput,
pushChildCommentIDOntoParent,
retrieveComment,
} from "talk-server/models/comment";
import { Tenant } from "talk-server/models/tenant";
@@ -16,7 +17,7 @@ import { Request } from "talk-server/types/express";
export type CreateComment = Omit<
CreateCommentInput,
"status" | "action_counts" | "metadata"
"status" | "action_counts" | "metadata" | "grandparent_ids"
>;
export async function create(
@@ -35,6 +36,7 @@ export async function create(
// TODO: (wyattjoh) Check that the asset was visible.
const grandparentIDs: string[] = [];
if (input.parent_id) {
// Check to see that the reference parent ID exists.
const parent = await retrieveComment(mongo, tenant.id, input.parent_id);
@@ -44,6 +46,13 @@ export async function create(
}
// TODO: (wyattjoh) Check that the parent comment was visible.
// Push the parent's parent id's into the comment's grandparent id's.
grandparentIDs.push(...parent.grandparent_ids);
if (parent.parent_id) {
// If this parent has a parent, push it down as well.
grandparentIDs.push(parent.parent_id);
}
}
// Run the comment through the moderation phases.
@@ -61,11 +70,18 @@ export async function create(
...input,
status,
action_counts: {},
grandparent_ids: grandparentIDs,
metadata,
});
if (input.parent_id) {
// TODO: update reply count of parent.
// Push the child's ID onto the parent.
await pushChildCommentIDOntoParent(
mongo,
tenant.id,
input.parent_id,
comment.id
);
}
return comment;
src/core/server/services/comments/moderation/phases/commentLength.ts
+26 -11
View File
@@ -1,3 +1,6 @@
import striptags from "striptags";
import { isNil } from "lodash";
import {
GQLACTION_GROUP,
GQLACTION_TYPE,
@@ -9,28 +12,40 @@ import {
IntermediatePhaseResult,
} from "talk-server/services/comments/moderation";
const testCharCount = (settings: Partial<ModerationSettings>, length: number) =>
settings.charCountEnable && settings.charCount && length > settings.charCount;
const testCharCount = (
settings: Partial<ModerationSettings>,
length: number
) => {
// settings.charCount.enable && settings.charCount && length > settings.charCount;
if (settings.charCount && settings.charCount.enabled) {
if (!isNil(settings.charCount.min)) {
if (length < settings.charCount.min) {
return true;
}
}
if (!isNil(settings.charCount.max)) {
if (length > settings.charCount.max) {
return true;
}
}
}
return false;
};
export const commentLength: IntermediateModerationPhase = ({
asset,
tenant,
comment,
}): IntermediatePhaseResult | void => {
const length = comment.body ? comment.body.length : 0;
const length = comment.body ? striptags(comment.body).length : 0;
// Check to see if the body is too short, if it is, then complain about it!
if (length < 2) {
// TODO: (wyattjoh) return better error.
throw new Error("comment body too short");
}
// Reject if the comment is too long
// Reject if the comment is too long or too short.
if (
testCharCount(tenant, length) ||
(asset.settings && testCharCount(asset.settings, length))
) {
// Add the flag related to Trust to the comment.
return {
status: GQLCOMMENT_STATUS.REJECTED,
actions: [
src/types/graphql-fields.d.ts
Vendored
+7
View File
@@ -0,0 +1,7 @@
declare module "graphql-fields" {
import { GraphQLResolveInfo } from "graphql";
export default function graphqlFields<T>(
info: GraphQLResolveInfo
): { [P in keyof T]: any };
}