Skip to content

Commit

Permalink
async_comments: merging all comment forms so only comment_form used a…
Browse files Browse the repository at this point in the history 
…nd removing sr only text when not needed
  • Loading branch information
@philli-m @goapunk
philli-m authored and goapunk committed Sep 21, 2023
1 parent 2807be4 commit 8710f0d
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 318 deletions.
2 changes: 1 addition & 1 deletion adhocracy4/comments_async/static/comments_async/category_list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const translated = {
}

const CategoryList = (props) => (
<fieldset>
<fieldset className="mb-0 px-0">
<legend className="sr-only">{translated.chooseCategories}</legend>
{Object.keys(props.categoryChoices).map(objectKey => {
const categoryCheck = props.categoryChoices[objectKey]
Expand Down
124 changes: 46 additions & 78 deletions adhocracy4/comments_async/static/comments_async/comment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import django from 'django'
import Modal from '../../../static/Modal'
import { ReportModal } from '../../../reports/static/reports/react_reports'
import { UrlModal } from '../modals/UrlModal'
import CommentEditForm from './comment_edit_form'
import CommentCategoryEditForm from './comment_category_edit_form'
import CommentForm from './comment_form'
import CommentManageDropdown from './comment_manage_dropdown'
import CommentList from './comment_list'
Expand All @@ -19,7 +17,6 @@ const translated = {
reportTitle: django.gettext('You want to report this content? Your message will be sent to the moderation. The moderation will look at the reported content. The content will be deleted if it does not meet our discussion rules (netiquette).'),
shareLink: django.gettext('Share link'),
categories: django.gettext('Categories: '),
yourReply: django.gettext('Your reply here'),
successMessage: django.gettext('Entry successfully created'),
readMore: django.gettext('Read more...'),
readLess: django.gettext('Read less'),
Expand Down Expand Up @@ -122,12 +119,6 @@ export default class Comment extends React.Component {
return this.props.content_type !== this.props.comment_content_type
}

commentCategoryChoices () {
if (this.props.withCategories === true) {
return this.props.commentCategoryChoices
}
}

toggleExpand (e) {
e.preventDefault()
const newShorten = !this.state.shorten
Expand Down Expand Up @@ -170,67 +161,41 @@ export default class Comment extends React.Component {
renderComment () {
let comment
if (this.state.edit) {
if (!this.props.commentCategoryChoices) {
comment = (
<CommentEditForm
subjectType={this.props.content_type}
subjectId={this.props.object_pk}
comment={this.props.children}
commentId={this.props.id}
useTermsOfUse={this.props.useTermsOfUse}
agreedTermsOfUse={this.props.agreedTermsOfUse}
orgTermsUrl={this.props.orgTermsUrl}
error={this.props.editError}
errorMessage={this.props.errorMessage}
handleErrorClick={() => this.props.onEditErrorClick(this.props.index, this.props.parentIndex)}
rows="5"
handleCancel={this.toggleEdit.bind(this)}
parentIndex={this.props.parentIndex}
onCommentSubmit={newComment => {
this.props.onCommentModify(newComment, this.props.index, this.props.parentIndex)
.then(() => {
this.setState({
edit: false
})
return null
}).catch(error => {
console.warn(error)
})
}}
/>
)
} else {
comment = (
<CommentCategoryEditForm
subjectType={this.props.content_type}
subjectId={this.props.object_pk}
comment={this.props.children}
commentId={this.props.id}
commentCategoryChoices={this.props.commentCategoryChoices}
comment_categories={this.props.comment_categories}
useTermsOfUse={this.props.useTermsOfUse}
agreedTermsOfUse={this.props.agreedTermsOfUse}
orgTermsUrl={this.props.orgTermsUrl}
error={this.props.editError}
errorMessage={this.props.errorMessage}
handleErrorClick={() => this.props.onEditErrorClick(this.props.index, this.props.parentIndex)}
rows="5"
handleCancel={this.toggleEdit.bind(this)}
parentIndex={this.props.parentIndex}
onCommentSubmit={newComment => {
this.props.onCommentModify(newComment, this.props.index, this.props.parentIndex)
.then(() => {
this.setState({
edit: false
})
return null
}).catch(error => {
console.warn(error)
comment = (
// Edit comment form
<CommentForm
subjectType={this.props.content_type}
subjectId={this.props.object_pk}
comment={this.props.children}
commentLength={this.props.children.length}
commentId={this.props.id}
commentCategoryChoices={this.props.commentCategoryChoices}
comment_categories={this.props.comment_categories}
hasCommentingPermission={this.props.hasCommentingPermission}
wouldHaveCommentingPermission={this.props.wouldHaveCommentingPermission}
useTermsOfUse={this.props.useTermsOfUse}
agreedTermsOfUse={this.props.agreedTermsOfUse}
orgTermsUrl={this.props.orgTermsUrl}
error={this.props.editError}
errorMessage={this.props.errorMessage}
handleErrorClick={() => this.props.onEditErrorClick(this.props.index, this.props.parentIndex)}
rows="5"
handleCancel={this.toggleEdit.bind(this)}
parentIndex={this.props.parentIndex}
showCancel
onCommentSubmit={newComment => {
this.props.onCommentModify(newComment, this.props.index, this.props.parentIndex)
.then(() => {
this.setState({
edit: false
})
}}
/>
)
}
return null
}).catch(error => {
console.warn(error)
})
}}
/>
)
} else {
let content
if (this.props.children.length > 400 && this.state.shorten) {
Expand Down Expand Up @@ -262,8 +227,9 @@ export default class Comment extends React.Component {
}

renderCategories () {
if (!this.state.edit && this.displayCategories()) {
if (!this.state.edit && this.props.withCategories) {
const categories = this.props.comment_categories
const categoryHeading = <p className="sr-only">{translated.categories}</p>
let categoryValue = ''
let categoryClassName = ''

Expand All @@ -278,7 +244,12 @@ export default class Comment extends React.Component {
)
})

return categoryHtml
return (
<div className="col-12">
{categoryHeading}
{categoryHtml}
</div>
)
}
}

Expand Down Expand Up @@ -370,10 +341,7 @@ export default class Comment extends React.Component {
/>}
</div>

<div className="col-12">
<span className="sr-only">{translated.categories}</span>
{this.renderCategories()}
</div>
{this.renderCategories()}

<div className="col-12">
{this.renderComment()}
Expand Down Expand Up @@ -465,17 +433,17 @@ export default class Comment extends React.Component {
</div>
<div className="row">
<div className="col-12 ms-3">
{/* Child comment form */}
<CommentForm
subjectType={this.props.comment_content_type}
subjectId={this.props.id}
commentId={'reply' + this.props.id}
onCommentSubmit={this.props.onCommentSubmit}
parentIndex={this.props.index}
placeholder={translated.yourReply}
error={this.props.replyError}
errorMessage={this.props.errorMessage}
handleErrorClick={() => this.props.onReplyErrorClick(this.props.index, this.props.parentIndex)}
rows="1"
// we need the autoFocus here
// we need the autoFocus here after clicking reply
autoFocus // eslint-disable-line jsx-a11y/no-autofocus
hasCommentingPermission={this.props.hasCommentingPermission}
wouldHaveCommentingPermission={this.props.wouldHaveCommentingPermission}
Expand Down
2 changes: 2 additions & 0 deletions adhocracy4/comments_async/static/comments_async/comment_box.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -439,10 +439,12 @@ export const CommentBox = (props) => {
<section>
<h2 className="visually-hidden">{translated.comments}</h2>
<div className="a4-comments__commentbox__form">
{/* Main comment form */}
<CommentForm
subjectType={props.subjectType}
subjectId={props.subjectId}
onCommentSubmit={handleCommentSubmit}
commentId={props.id}
rows="5"
error={error}
errorMessage={errorMessage}
Expand Down
123 changes: 0 additions & 123 deletions adhocracy4/comments_async/static/comments_async/comment_category_edit_form.jsx
View file

This file was deleted.

Loading

0 comments on commit 8710f0d

Please sign in to comment.