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.
Files changed (81) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/decidim/comments/bundle.js +53 -53
  3. data/app/assets/javascripts/decidim/comments/bundle.js.map +1 -1
  4. data/app/cells/decidim/comments/comment_activity_cell.rb +2 -22
  5. data/app/cells/decidim/comments/comment_cell.rb +22 -0
  6. data/app/cells/decidim/comments/comment_m/footer.erb +5 -0
  7. data/app/cells/decidim/comments/comment_m/top.erb +7 -0
  8. data/app/cells/decidim/comments/comment_m_cell.rb +29 -0
  9. data/app/commands/decidim/comments/create_comment.rb +1 -1
  10. data/app/forms/decidim/comments/comment_form.rb +8 -1
  11. data/app/frontend/comments/add_comment_form.component.test.tsx +30 -28
  12. data/app/frontend/comments/add_comment_form.component.tsx +32 -16
  13. data/app/frontend/comments/comment.component.test.tsx +35 -4
  14. data/app/frontend/comments/comment.component.tsx +24 -15
  15. data/app/frontend/comments/comment_thread.component.test.tsx +9 -8
  16. data/app/frontend/comments/comment_thread.component.tsx +3 -1
  17. data/app/frontend/comments/comments.component.test.tsx +17 -14
  18. data/app/frontend/comments/comments.component.tsx +28 -4
  19. data/app/frontend/comments/down_vote_button.component.tsx +24 -9
  20. data/app/frontend/comments/up_vote_button.component.tsx +24 -9
  21. data/app/frontend/mutations/add_comment.mutation.graphql +2 -2
  22. data/app/frontend/mutations/down_vote.mutation.graphql +2 -2
  23. data/app/frontend/mutations/up_vote.mutation.graphql +2 -2
  24. data/app/frontend/queries/comments.query.graphql +2 -2
  25. data/app/frontend/support/schema.ts +1060 -735
  26. data/app/helpers/decidim/comments/comment_cells_helper.rb +33 -0
  27. data/app/models/decidim/comments/comment.rb +73 -20
  28. data/app/models/decidim/comments/seed.rb +1 -1
  29. data/app/types/decidim/comments/commentable_interface.rb +1 -1
  30. data/app/types/decidim/comments/commentable_mutation_type.rb +4 -1
  31. data/config/locales/am-ET.yml +1 -0
  32. data/config/locales/bg.yml +6 -0
  33. data/config/locales/ca.yml +1 -0
  34. data/config/locales/cs.yml +1 -0
  35. data/config/locales/da.yml +1 -0
  36. data/config/locales/en.yml +1 -0
  37. data/config/locales/eo.yml +1 -0
  38. data/config/locales/es-MX.yml +1 -0
  39. data/config/locales/es-PY.yml +1 -0
  40. data/config/locales/es.yml +3 -2
  41. data/config/locales/et.yml +1 -0
  42. data/config/locales/fi-plain.yml +1 -0
  43. data/config/locales/fi.yml +2 -1
  44. data/config/locales/fr-CA.yml +2 -1
  45. data/config/locales/fr.yml +2 -1
  46. data/config/locales/hr.yml +1 -0
  47. data/config/locales/hu.yml +1 -1
  48. data/config/locales/is-IS.yml +0 -2
  49. data/config/locales/is.yml +76 -0
  50. data/config/locales/ja-JP.yml +2 -2
  51. data/config/locales/ja.yml +121 -0
  52. data/config/locales/ko-KR.yml +1 -0
  53. data/config/locales/ko.yml +1 -0
  54. data/config/locales/lt.yml +1 -0
  55. data/config/locales/{lv-LV.yml → lv.yml} +0 -0
  56. data/config/locales/mt.yml +1 -0
  57. data/config/locales/nl.yml +3 -2
  58. data/config/locales/om-ET.yml +1 -0
  59. data/config/locales/pl.yml +5 -5
  60. data/config/locales/so-SO.yml +1 -0
  61. data/config/locales/sv.yml +1 -0
  62. data/config/locales/ti-ER.yml +1 -0
  63. data/config/locales/uk.yml +0 -1
  64. data/config/locales/vi-VN.yml +1 -0
  65. data/config/locales/vi.yml +1 -0
  66. data/config/locales/zh-CN.yml +121 -0
  67. data/config/locales/zh-TW.yml +1 -0
  68. data/db/migrate/20200706123136_make_comments_handle_i18n.rb +41 -0
  69. data/db/migrate/20200828101910_add_commentable_counter_cache_to_comments.rb +9 -0
  70. data/lib/decidim/comments/api/comment_type.rb +5 -1
  71. data/lib/decidim/comments/comment_serializer.rb +7 -2
  72. data/lib/decidim/comments/comment_vote_serializer.rb +5 -1
  73. data/lib/decidim/comments/commentable.rb +11 -0
  74. data/lib/decidim/comments/comments_helper.rb +28 -4
  75. data/lib/decidim/comments/engine.rb +13 -0
  76. data/lib/decidim/comments/mutation_extensions.rb +8 -0
  77. data/lib/decidim/comments/query_extensions.rb +4 -0
  78. data/lib/decidim/comments/test/factories.rb +10 -1
  79. data/lib/decidim/comments/test/shared_examples/comment_event.rb +1 -1
  80. data/lib/decidim/comments/version.rb +1 -1
  81. 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
- session,
29
- comment: { downVotes, upVoted, downVoted },
30
- downVote
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={downVote}
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
- session,
29
- comment: { upVotes, upVoted, downVoted },
30
- upVote
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={upVote}
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 => {