Just wondering, has anyone found out a cleaner and more comprehensible way to customize markup of existing Components in extensions?
This really doesn't look good and is not very readable nor maintainable...
extend(CommentPost.prototype, 'content', function (content) {
const { post } = this.props;
const review = post.discussion().review();
if (review) {
if (post === post.discussion().firstPost()) {
// .Post-header ul *
const origHeaderItems = content[0].children[0].children;
const headerItems = [];
// Add rating and move in meta
headerItems.push(
<li>
<ArticleRating value={review.rating()} />
{/* PostMeta */}
{origHeaderItems[1].children}
</li>
);
// Customize author elements
const author = origHeaderItems[0].children[0];
// .PostUser h3 a *
const oldLinkElements = author.children[0].children[1].children;
const linkElements = [
// .Avatar
oldLinkElements[0],
// customized username text
<span>
{app.translator.trans(
'glowingblue-orell-rezensionen.forum.reviews.from_text',
{ user: post.user() }
)}
</span>,
// .UserOnline
oldLinkElements[1],
];
//.PostUser h3 a *
author.children[0].children[1].children = linkElements;
// Add author & title
headerItems.push(
<li>
<h2>{post.discussion().title()}</h2>
{author}
</li>
);
//.Post-header ul *
content[0].children[0].children = headerItems;
} else {
// Remove PostMeta (will be added to Post-footer)
//.Post-header ul *
content[0].children[0].children.pop();
}
}
});
