decidim-comments 0.22.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/decidim/comments/bundle.js +53 -53
- data/app/assets/javascripts/decidim/comments/bundle.js.map +1 -1
- data/app/cells/decidim/comments/comment_activity_cell.rb +2 -22
- data/app/cells/decidim/comments/comment_cell.rb +22 -0
- data/app/cells/decidim/comments/comment_m/footer.erb +5 -0
- data/app/cells/decidim/comments/comment_m/top.erb +7 -0
- data/app/cells/decidim/comments/comment_m_cell.rb +29 -0
- data/app/commands/decidim/comments/create_comment.rb +1 -1
- data/app/forms/decidim/comments/comment_form.rb +8 -1
- data/app/frontend/comments/add_comment_form.component.test.tsx +30 -28
- data/app/frontend/comments/add_comment_form.component.tsx +32 -16
- data/app/frontend/comments/comment.component.test.tsx +35 -4
- data/app/frontend/comments/comment.component.tsx +24 -15
- data/app/frontend/comments/comment_thread.component.test.tsx +9 -8
- data/app/frontend/comments/comment_thread.component.tsx +3 -1
- data/app/frontend/comments/comments.component.test.tsx +17 -14
- data/app/frontend/comments/comments.component.tsx +28 -4
- data/app/frontend/comments/down_vote_button.component.tsx +24 -9
- data/app/frontend/comments/up_vote_button.component.tsx +24 -9
- data/app/frontend/mutations/add_comment.mutation.graphql +2 -2
- data/app/frontend/mutations/down_vote.mutation.graphql +2 -2
- data/app/frontend/mutations/up_vote.mutation.graphql +2 -2
- data/app/frontend/queries/comments.query.graphql +2 -2
- data/app/frontend/support/schema.ts +1060 -735
- data/app/helpers/decidim/comments/comment_cells_helper.rb +33 -0
- data/app/models/decidim/comments/comment.rb +73 -20
- data/app/models/decidim/comments/seed.rb +1 -1
- data/app/types/decidim/comments/commentable_interface.rb +1 -1
- data/app/types/decidim/comments/commentable_mutation_type.rb +4 -1
- data/config/locales/am-ET.yml +1 -0
- data/config/locales/bg.yml +6 -0
- data/config/locales/ca.yml +1 -0
- data/config/locales/cs.yml +1 -0
- data/config/locales/da.yml +1 -0
- data/config/locales/en.yml +1 -0
- data/config/locales/eo.yml +1 -0
- data/config/locales/es-MX.yml +1 -0
- data/config/locales/es-PY.yml +1 -0
- data/config/locales/es.yml +3 -2
- data/config/locales/et.yml +1 -0
- data/config/locales/fi-plain.yml +1 -0
- data/config/locales/fi.yml +2 -1
- data/config/locales/fr-CA.yml +2 -1
- data/config/locales/fr.yml +2 -1
- data/config/locales/hr.yml +1 -0
- data/config/locales/hu.yml +1 -1
- data/config/locales/is-IS.yml +0 -2
- data/config/locales/is.yml +76 -0
- data/config/locales/ja-JP.yml +2 -2
- data/config/locales/ja.yml +121 -0
- data/config/locales/ko-KR.yml +1 -0
- data/config/locales/ko.yml +1 -0
- data/config/locales/lt.yml +1 -0
- data/config/locales/{lv-LV.yml → lv.yml} +0 -0
- data/config/locales/mt.yml +1 -0
- data/config/locales/nl.yml +3 -2
- data/config/locales/om-ET.yml +1 -0
- data/config/locales/pl.yml +5 -5
- data/config/locales/so-SO.yml +1 -0
- data/config/locales/sv.yml +1 -0
- data/config/locales/ti-ER.yml +1 -0
- data/config/locales/uk.yml +0 -1
- data/config/locales/vi-VN.yml +1 -0
- data/config/locales/vi.yml +1 -0
- data/config/locales/zh-CN.yml +121 -0
- data/config/locales/zh-TW.yml +1 -0
- data/db/migrate/20200706123136_make_comments_handle_i18n.rb +41 -0
- data/db/migrate/20200828101910_add_commentable_counter_cache_to_comments.rb +9 -0
- data/lib/decidim/comments/api/comment_type.rb +5 -1
- data/lib/decidim/comments/comment_serializer.rb +7 -2
- data/lib/decidim/comments/comment_vote_serializer.rb +5 -1
- data/lib/decidim/comments/commentable.rb +11 -0
- data/lib/decidim/comments/comments_helper.rb +28 -4
- data/lib/decidim/comments/engine.rb +13 -0
- data/lib/decidim/comments/mutation_extensions.rb +8 -0
- data/lib/decidim/comments/query_extensions.rb +4 -0
- data/lib/decidim/comments/test/factories.rb +10 -1
- data/lib/decidim/comments/test/shared_examples/comment_event.rb +1 -1
- data/lib/decidim/comments/version.rb +1 -1
- metadata +37 -11
@@ -9,7 +9,8 @@ import generateCommentsData from "../support/generate_comments_data";
|
|
9
9
|
import generateCUserData from "../support/generate_user_data";
|
10
10
|
import { loadLocaleTranslations } from "../support/load_translations";
|
11
11
|
|
12
|
-
describe("<CommentThread />", () => {
|
12
|
+
describe("<CommentThread commentsMaxLength={commentsMaxLength} />", () => {
|
13
|
+
const commentsMaxLength: number = 1000;
|
13
14
|
const orderBy = "older";
|
14
15
|
const rootCommentable = {
|
15
16
|
id: "1",
|
@@ -30,7 +31,7 @@ describe("<CommentThread />", () => {
|
|
30
31
|
|
31
32
|
describe("when comment doesn't have comments", () => {
|
32
33
|
it("should not render a title with author name", () => {
|
33
|
-
const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
34
|
+
const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength} comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
34
35
|
expect(wrapper.find("h6.comment-thread__title").exists()).toBeFalsy();
|
35
36
|
});
|
36
37
|
});
|
@@ -41,7 +42,7 @@ describe("<CommentThread />", () => {
|
|
41
42
|
});
|
42
43
|
|
43
44
|
it("should render a h6 comment-thread__title with author name", () => {
|
44
|
-
const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
45
|
+
const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength} comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
45
46
|
expect(wrapper.find("h6.comment-thread__title").text()).toContain(`Conversation with ${comment.author.name}`);
|
46
47
|
});
|
47
48
|
|
@@ -51,7 +52,7 @@ describe("<CommentThread />", () => {
|
|
51
52
|
});
|
52
53
|
|
53
54
|
it("should render a h6 comment-thread__title with 'Deleted participant'", () => {
|
54
|
-
const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
55
|
+
const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength} comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
55
56
|
expect(wrapper.find("h6.comment-thread__title").text()).toContain("Conversation with Deleted participant");
|
56
57
|
});
|
57
58
|
});
|
@@ -59,22 +60,22 @@ describe("<CommentThread />", () => {
|
|
59
60
|
|
60
61
|
describe("should render a Comment", () => {
|
61
62
|
it("and pass the session as a prop to it", () => {
|
62
|
-
const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
63
|
+
const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength} comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
63
64
|
expect(wrapper.find(Comment).first().props()).toHaveProperty("session", session);
|
64
65
|
});
|
65
66
|
|
66
67
|
it("and pass comment data as a prop to it", () => {
|
67
|
-
const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
68
|
+
const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength} comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
68
69
|
expect(wrapper.find(Comment).first().props()).toHaveProperty("comment", comment);
|
69
70
|
});
|
70
71
|
|
71
72
|
it("and pass the votable as a prop to it", () => {
|
72
|
-
const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
73
|
+
const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength} comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
73
74
|
expect(wrapper.find(Comment).first().props()).toHaveProperty("votable", true);
|
74
75
|
});
|
75
76
|
|
76
77
|
it("and pass the isRootComment equal true", () => {
|
77
|
-
const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
78
|
+
const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength} comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
|
78
79
|
expect(wrapper.find(Comment).first().props()).toHaveProperty("isRootComment", true);
|
79
80
|
});
|
80
81
|
});
|
@@ -18,6 +18,7 @@ interface CommentThreadProps {
|
|
18
18
|
votable?: boolean;
|
19
19
|
rootCommentable: AddCommentFormCommentableFragment;
|
20
20
|
orderBy: string;
|
21
|
+
commentsMaxLength: number;
|
21
22
|
}
|
22
23
|
|
23
24
|
/**
|
@@ -33,7 +34,7 @@ class CommentThread extends React.Component<CommentThreadProps> {
|
|
33
34
|
};
|
34
35
|
|
35
36
|
public render() {
|
36
|
-
const { comment, session, votable, rootCommentable, orderBy } = this.props;
|
37
|
+
const { comment, session, votable, rootCommentable, orderBy, commentsMaxLength } = this.props;
|
37
38
|
|
38
39
|
return (
|
39
40
|
<div>
|
@@ -46,6 +47,7 @@ class CommentThread extends React.Component<CommentThreadProps> {
|
|
46
47
|
isRootComment={true}
|
47
48
|
rootCommentable={rootCommentable}
|
48
49
|
orderBy={orderBy}
|
50
|
+
commentsMaxLength={commentsMaxLength}
|
49
51
|
/>
|
50
52
|
</div>
|
51
53
|
</div>
|
@@ -12,12 +12,15 @@ import resolveGraphQLQuery from "../support/resolve_graphql_query";
|
|
12
12
|
|
13
13
|
import { loadLocaleTranslations } from "../support/load_translations";
|
14
14
|
|
15
|
-
describe("<Comments />", () => {
|
15
|
+
describe("<Comments commentsMaxLength={commentsMaxLength} />", () => {
|
16
16
|
let commentable: any = {};
|
17
17
|
let session: any = null;
|
18
|
+
const commentsMaxLength: number = 1000;
|
18
19
|
const commentableId = "1";
|
19
20
|
const commentableType = "Decidim::DummyResources::DummyResource";
|
20
21
|
const orderBy = "older";
|
22
|
+
const locale = "en";
|
23
|
+
const toggleTranslations = false;
|
21
24
|
const reorderComments = jasmine.createSpy("reorderComments");
|
22
25
|
|
23
26
|
beforeEach(() => {
|
@@ -52,19 +55,19 @@ describe("<Comments />", () => {
|
|
52
55
|
});
|
53
56
|
|
54
57
|
it("renders loading-comments class and the respective loading text", () => {
|
55
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} loading={true} />);
|
58
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} loading={true} />);
|
56
59
|
expect(wrapper.find(".loading-comments").exists()).toBeTruthy();
|
57
60
|
expect(wrapper.find("h2").text()).toEqual("Loading comments ...");
|
58
61
|
});
|
59
62
|
|
60
63
|
it("renders a div of id comments", () => {
|
61
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
64
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
62
65
|
expect(wrapper.find("#comments").exists()).toBeTruthy();
|
63
66
|
});
|
64
67
|
|
65
68
|
describe("renders a CommentThread component for each comment", () => {
|
66
69
|
it("and pass filter comment data as a prop to it", () => {
|
67
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
70
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
68
71
|
expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
|
69
72
|
wrapper.find(CommentThread).forEach((node, idx) => {
|
70
73
|
expect(node.prop("comment")).toEqual(commentable.comments[idx]);
|
@@ -72,7 +75,7 @@ describe("<Comments />", () => {
|
|
72
75
|
});
|
73
76
|
|
74
77
|
it("and pass the session as a prop to it", () => {
|
75
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
78
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
76
79
|
expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
|
77
80
|
wrapper.find(CommentThread).forEach((node) => {
|
78
81
|
expect(node.prop("session")).toEqual(session);
|
@@ -80,7 +83,7 @@ describe("<Comments />", () => {
|
|
80
83
|
});
|
81
84
|
|
82
85
|
it("and pass the commentable 'commentsHaveVotes' property as a prop to it", () => {
|
83
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
86
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
84
87
|
expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
|
85
88
|
wrapper.find(CommentThread).forEach((node) => {
|
86
89
|
expect(node.prop("votable")).toBeTruthy();
|
@@ -89,13 +92,13 @@ describe("<Comments />", () => {
|
|
89
92
|
});
|
90
93
|
|
91
94
|
it("renders comments count", () => {
|
92
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
95
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
93
96
|
const rex = new RegExp(`${commentable.comments.length} comments`);
|
94
97
|
expect(wrapper.find("h2.section-heading").text()).toMatch(rex);
|
95
98
|
});
|
96
99
|
|
97
100
|
it("renders a AddCommentForm component and pass the commentable 'commentsHaveAlignment' as a prop", () => {
|
98
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
101
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
99
102
|
expect(wrapper.find(AddCommentForm).length).toEqual(1);
|
100
103
|
expect(wrapper.find(AddCommentForm).prop("arguable")).toBeTruthy();
|
101
104
|
});
|
@@ -107,12 +110,12 @@ describe("<Comments />", () => {
|
|
107
110
|
});
|
108
111
|
|
109
112
|
it("doesn't render an AddCommentForm component", () => {
|
110
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
113
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
111
114
|
expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
|
112
115
|
});
|
113
116
|
|
114
117
|
it("renders a callout message to inform the user that comments are blocked", () => {
|
115
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
118
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
116
119
|
expect(wrapper.find(".callout.warning").text()).toContain("disabled");
|
117
120
|
});
|
118
121
|
});
|
@@ -123,24 +126,24 @@ describe("<Comments />", () => {
|
|
123
126
|
});
|
124
127
|
|
125
128
|
it("doesn't render an AddCommentForm component", () => {
|
126
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
129
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
127
130
|
expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
|
128
131
|
});
|
129
132
|
|
130
133
|
it("renders a callout message to inform the user that comments are blocked", () => {
|
131
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
134
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
132
135
|
expect(wrapper.find(".callout.warning").text()).toContain("not able");
|
133
136
|
});
|
134
137
|
});
|
135
138
|
|
136
139
|
describe("renders a CommentOrderSelector component", () => {
|
137
140
|
it("and pass the reorderComments as a prop to it", () => {
|
138
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
141
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
139
142
|
expect(wrapper.find(CommentOrderSelector).prop("reorderComments")).toEqual(reorderComments);
|
140
143
|
});
|
141
144
|
|
142
145
|
it("and pass the orderBy as a prop to it", () => {
|
143
|
-
const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
146
|
+
const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
|
144
147
|
expect(wrapper.find(CommentOrderSelector).prop("defaultOrderBy")).toEqual("older");
|
145
148
|
});
|
146
149
|
});
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import * as React from "react";
|
2
2
|
import { graphql } from "react-apollo";
|
3
3
|
|
4
|
+
const PropTypes = require("prop-types");
|
5
|
+
|
4
6
|
import Application from "../application/application.component";
|
5
7
|
|
6
8
|
import AddCommentForm from "./add_comment_form.component";
|
@@ -15,10 +17,13 @@ import {
|
|
15
17
|
const { I18n, Translate } = require("react-i18nify");
|
16
18
|
|
17
19
|
interface CommentsProps extends GetCommentsQuery {
|
20
|
+
locale: string;
|
21
|
+
toggleTranslations: boolean;
|
18
22
|
loading?: boolean;
|
19
23
|
orderBy: string;
|
20
24
|
singleCommentId?: string;
|
21
25
|
reorderComments: (orderBy: string) => void;
|
26
|
+
commentsMaxLength: number;
|
22
27
|
}
|
23
28
|
|
24
29
|
/**
|
@@ -37,8 +42,20 @@ export class Comments extends React.Component<CommentsProps> {
|
|
37
42
|
}
|
38
43
|
};
|
39
44
|
|
45
|
+
public static childContextTypes: any = {
|
46
|
+
locale: PropTypes.string,
|
47
|
+
toggleTranslations: PropTypes.bool
|
48
|
+
};
|
49
|
+
|
50
|
+
public getChildContext() {
|
51
|
+
return {
|
52
|
+
locale: this.props.locale,
|
53
|
+
toggleTranslations: this.props.toggleTranslations
|
54
|
+
};
|
55
|
+
}
|
56
|
+
|
40
57
|
public render() {
|
41
|
-
const { commentable: { totalCommentsCount = 0 }, singleCommentId, loading } = this.props;
|
58
|
+
const { commentable: { totalCommentsCount = 0 }, singleCommentId, loading, commentsMaxLength } = this.props;
|
42
59
|
let commentClasses = "comments";
|
43
60
|
let commentHeader = I18n.t("components.comments.title", { count: totalCommentsCount });
|
44
61
|
if (singleCommentId && singleCommentId !== "") {
|
@@ -164,7 +181,7 @@ export class Comments extends React.Component<CommentsProps> {
|
|
164
181
|
* @returns {ReactComponent[]} - A collection of CommentThread components
|
165
182
|
*/
|
166
183
|
private _renderCommentThreads() {
|
167
|
-
const { session, commentable, orderBy } = this.props;
|
184
|
+
const { session, commentable, orderBy, commentsMaxLength } = this.props;
|
168
185
|
const { comments, commentsHaveVotes } = commentable;
|
169
186
|
|
170
187
|
return comments.map((comment) => (
|
@@ -175,6 +192,7 @@ export class Comments extends React.Component<CommentsProps> {
|
|
175
192
|
votable={commentsHaveVotes}
|
176
193
|
rootCommentable={commentable}
|
177
194
|
orderBy={orderBy}
|
195
|
+
commentsMaxLength={commentsMaxLength}
|
178
196
|
/>
|
179
197
|
));
|
180
198
|
}
|
@@ -185,7 +203,7 @@ export class Comments extends React.Component<CommentsProps> {
|
|
185
203
|
* @returns {Void|ReactComponent} - A AddCommentForm component or nothing
|
186
204
|
*/
|
187
205
|
private _renderAddCommentForm() {
|
188
|
-
const { session, commentable, orderBy, singleCommentId } = this.props;
|
206
|
+
const { session, commentable, orderBy, singleCommentId, commentsMaxLength } = this.props;
|
189
207
|
const { acceptsNewComments, commentsHaveAlignment, userAllowedToComment } = commentable;
|
190
208
|
|
191
209
|
if (singleCommentId && singleCommentId !== "") {
|
@@ -200,6 +218,7 @@ export class Comments extends React.Component<CommentsProps> {
|
|
200
218
|
arguable={commentsHaveAlignment}
|
201
219
|
rootCommentable={commentable}
|
202
220
|
orderBy={orderBy}
|
221
|
+
commentsMaxLength={commentsMaxLength}
|
203
222
|
/>
|
204
223
|
);
|
205
224
|
}
|
@@ -244,6 +263,8 @@ const CommentsWithData: any = graphql<GetCommentsQuery, CommentsProps>(commentsQ
|
|
244
263
|
export interface CommentsApplicationProps extends GetCommentsQueryVariables {
|
245
264
|
singleCommentId: string;
|
246
265
|
locale: string;
|
266
|
+
toggleTranslations: boolean;
|
267
|
+
commentsMaxLength: number;
|
247
268
|
}
|
248
269
|
|
249
270
|
/**
|
@@ -251,11 +272,14 @@ export interface CommentsApplicationProps extends GetCommentsQueryVariables {
|
|
251
272
|
* connect it with Apollo client and store.
|
252
273
|
* @returns {ReactComponent} - A component wrapped within an Application component
|
253
274
|
*/
|
254
|
-
const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, commentableId, commentableType, singleCommentId }) => (
|
275
|
+
const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, toggleTranslations, commentableId, commentableType, singleCommentId, commentsMaxLength }) => (
|
255
276
|
<Application locale={locale}>
|
256
277
|
<CommentsWithData
|
278
|
+
commentsMaxLength={commentsMaxLength}
|
257
279
|
commentableId={commentableId}
|
258
280
|
commentableType={commentableType}
|
281
|
+
locale={locale}
|
282
|
+
toggleTranslations={toggleTranslations}
|
259
283
|
orderBy="older"
|
260
284
|
singleCommentId={singleCommentId}
|
261
285
|
/>
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import * as React from "react";
|
2
2
|
import { graphql, MutationFunc } from "react-apollo";
|
3
3
|
|
4
|
+
const PropTypes = require("prop-types");
|
5
|
+
|
4
6
|
import VoteButton from "./vote_button.component";
|
5
7
|
|
6
8
|
import {
|
@@ -19,16 +21,18 @@ interface DownVoteButtonProps {
|
|
19
21
|
user: any;
|
20
22
|
} | null;
|
21
23
|
comment: DownVoteButtonFragment;
|
22
|
-
downVote?: () => void;
|
24
|
+
downVote?: (context: any) => void;
|
23
25
|
rootCommentable: AddCommentFormCommentableFragment;
|
24
26
|
orderBy: string;
|
25
27
|
}
|
26
28
|
|
27
|
-
export const DownVoteButton: React.SFC<DownVoteButtonProps> = (
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
29
|
+
export const DownVoteButton: React.SFC<DownVoteButtonProps> = (
|
30
|
+
{
|
31
|
+
session,
|
32
|
+
comment: { downVotes, upVoted, downVoted },
|
33
|
+
downVote
|
34
|
+
},
|
35
|
+
context) => {
|
32
36
|
let selectedClass = "";
|
33
37
|
|
34
38
|
if (downVoted) {
|
@@ -39,6 +43,7 @@ export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
|
|
39
43
|
|
40
44
|
const userLoggedIn = session && session.user;
|
41
45
|
const disabled = false;
|
46
|
+
const voteAction = () => downVote && downVote(context);
|
42
47
|
|
43
48
|
return (
|
44
49
|
<VoteButton
|
@@ -46,7 +51,7 @@ export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
|
|
46
51
|
iconName="icon-chevron-bottom"
|
47
52
|
text={I18n.t("components.down_vote_button.text")}
|
48
53
|
votes={downVotes}
|
49
|
-
voteAction={
|
54
|
+
voteAction={voteAction}
|
50
55
|
disabled={disabled}
|
51
56
|
selectedClass={selectedClass}
|
52
57
|
userLoggedIn={userLoggedIn}
|
@@ -54,13 +59,20 @@ export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
|
|
54
59
|
);
|
55
60
|
};
|
56
61
|
|
62
|
+
DownVoteButton.contextTypes = {
|
63
|
+
locale: PropTypes.string,
|
64
|
+
toggleTranslations: PropTypes.bool
|
65
|
+
};
|
66
|
+
|
57
67
|
const downVoteMutation = require("../mutations/down_vote.mutation.graphql");
|
58
68
|
const getCommentsQuery = require("../queries/comments.query.graphql");
|
59
69
|
|
60
70
|
const DownVoteButtonWithMutation = graphql<DownVoteMutation, DownVoteButtonProps>(downVoteMutation, {
|
61
71
|
props: ({ ownProps, mutate }: { ownProps: DownVoteButtonProps, mutate: MutationFunc<DownVoteMutation> }) => ({
|
62
|
-
downVote: () => mutate({
|
72
|
+
downVote: ({ locale, toggleTranslations }: any) => mutate({
|
63
73
|
variables: {
|
74
|
+
locale,
|
75
|
+
toggleTranslations,
|
64
76
|
id: ownProps.comment.id
|
65
77
|
},
|
66
78
|
optimisticResponse: {
|
@@ -77,9 +89,12 @@ const DownVoteButtonWithMutation = graphql<DownVoteMutation, DownVoteButtonProps
|
|
77
89
|
},
|
78
90
|
update: (store, { data }: { data: DownVoteMutation }) => {
|
79
91
|
const variables = {
|
92
|
+
locale,
|
93
|
+
toggleTranslations,
|
80
94
|
commentableId: ownProps.rootCommentable.id,
|
81
95
|
commentableType: ownProps.rootCommentable.type,
|
82
|
-
orderBy: ownProps.orderBy
|
96
|
+
orderBy: ownProps.orderBy,
|
97
|
+
singleCommentId: null
|
83
98
|
};
|
84
99
|
|
85
100
|
const commentReducer = (comment: CommentFragment): CommentFragment => {
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import * as React from "react";
|
2
2
|
import { graphql, MutationFunc } from "react-apollo";
|
3
3
|
|
4
|
+
const PropTypes = require("prop-types");
|
5
|
+
|
4
6
|
import VoteButton from "./vote_button.component";
|
5
7
|
|
6
8
|
const { I18n } = require("react-i18nify");
|
@@ -19,16 +21,18 @@ interface UpVoteButtonProps {
|
|
19
21
|
user: any;
|
20
22
|
} | null;
|
21
23
|
comment: UpVoteButtonFragment;
|
22
|
-
upVote?: () => void;
|
24
|
+
upVote?: (context: any) => void;
|
23
25
|
rootCommentable: AddCommentFormCommentableFragment;
|
24
26
|
orderBy: string;
|
25
27
|
}
|
26
28
|
|
27
|
-
export const UpVoteButton: React.SFC<UpVoteButtonProps> = (
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
29
|
+
export const UpVoteButton: React.SFC<UpVoteButtonProps> = (
|
30
|
+
{
|
31
|
+
session,
|
32
|
+
comment: { upVotes, upVoted, downVoted },
|
33
|
+
upVote
|
34
|
+
},
|
35
|
+
context) => {
|
32
36
|
let selectedClass = "";
|
33
37
|
|
34
38
|
if (upVoted) {
|
@@ -39,6 +43,7 @@ export const UpVoteButton: React.SFC<UpVoteButtonProps> = ({
|
|
39
43
|
|
40
44
|
const userLoggedIn = session && session.user;
|
41
45
|
const disabled = false;
|
46
|
+
const voteAction = () => upVote && upVote(context);
|
42
47
|
|
43
48
|
return (
|
44
49
|
<VoteButton
|
@@ -46,7 +51,7 @@ export const UpVoteButton: React.SFC<UpVoteButtonProps> = ({
|
|
46
51
|
iconName="icon-chevron-top"
|
47
52
|
text={I18n.t("components.up_vote_button.text")}
|
48
53
|
votes={upVotes}
|
49
|
-
voteAction={
|
54
|
+
voteAction={voteAction}
|
50
55
|
disabled={disabled}
|
51
56
|
selectedClass={selectedClass}
|
52
57
|
userLoggedIn={userLoggedIn}
|
@@ -54,13 +59,20 @@ export const UpVoteButton: React.SFC<UpVoteButtonProps> = ({
|
|
54
59
|
);
|
55
60
|
};
|
56
61
|
|
62
|
+
UpVoteButton.contextTypes = {
|
63
|
+
locale: PropTypes.string,
|
64
|
+
toggleTranslations: PropTypes.bool
|
65
|
+
};
|
66
|
+
|
57
67
|
const upVoteMutation = require("../mutations/up_vote.mutation.graphql");
|
58
68
|
const getCommentsQuery = require("../queries/comments.query.graphql");
|
59
69
|
|
60
70
|
const UpVoteButtonWithMutation = graphql<UpVoteMutation, UpVoteButtonProps>(upVoteMutation, {
|
61
71
|
props: ({ ownProps, mutate }: { ownProps: UpVoteButtonProps, mutate: MutationFunc<UpVoteMutation> }) => ({
|
62
|
-
upVote: () => mutate({
|
72
|
+
upVote: ({ locale, toggleTranslations }: any) => mutate({
|
63
73
|
variables: {
|
74
|
+
locale,
|
75
|
+
toggleTranslations,
|
64
76
|
id: ownProps.comment.id
|
65
77
|
},
|
66
78
|
optimisticResponse: {
|
@@ -77,9 +89,12 @@ const UpVoteButtonWithMutation = graphql<UpVoteMutation, UpVoteButtonProps>(upVo
|
|
77
89
|
},
|
78
90
|
update: (store, { data }: { data: UpVoteMutation }) => {
|
79
91
|
const variables = {
|
92
|
+
locale,
|
93
|
+
toggleTranslations,
|
80
94
|
commentableId: ownProps.rootCommentable.id,
|
81
95
|
commentableType: ownProps.rootCommentable.type,
|
82
|
-
orderBy: ownProps.orderBy
|
96
|
+
orderBy: ownProps.orderBy,
|
97
|
+
singleCommentId: null
|
83
98
|
};
|
84
99
|
|
85
100
|
const commentReducer = (comment: CommentFragment): CommentFragment => {
|