{article.title}
\n\n \n {article.author} wrote this on {date} /{\" \"}\n \n {article.commentsCount} comment\n {article.commentsCount === 1 ? \"\" : \"s\"}\n \n \n
\n{article.content}
\n\n Review\n
\n\n {comment.author} on {createdAt}\n {isAdmin ? adminSection() : \"\"}\n
\n {comment.text}\n
No comments.
;\n\n const list = comments.map(comment => (\n${author}: ${message}
`;\n document\n .getElementById(\"messages\")\n .insertAdjacentHTML(\"beforeend\", renderedMessage);\n }\n\n receivedSignal(signal, data) {\n switch (signal) {\n case \"Room member_joined\":\n if (data.room_id !== this.roomId) return;\n this._memberJoined(data.member);\n break;\n case \"Room member_left\":\n if (data.room_id !== this.roomId) return;\n this._memberLeft(data.member);\n }\n }\n\n _handleSendingMessage() {\n document\n .querySelector(\"[data-behavior~=room-speaker]\")\n .addEventListener(\"keypress\", event => {\n if (event.keyCode !== 13) return;\n event.preventDefault();\n Env.loco.emit({\n signal: \"message\",\n txt: event.target.value,\n room_id: this.roomId\n });\n event.target.value = \"\";\n });\n }\n\n _memberJoined(member) {\n const li = `\n {comment.author} on {createdAt} (\n
\n {comment.text}\n
No comments
;\n }\n return (\n <>\n {comments.map(comment => (\n\n \n {article.author} wrote this on {date} /{\" \"}\n \n {article.commentsCount} comment\n {article.commentsCount === 1 ? \"\" : \"s\"}\n \n \n
\n{article.content}
\n\n Review\n
\n\n {comment.author} on {createdAt} wrote:\n
\n {comment.text}\n
No comments.
;\n }\n\n return <>{list};\n}\n\nStatefulCommentList.propTypes = {\n articleId: PropTypes.number.isRequired,\n comments: PropTypes.arrayOf(PropTypes.instanceOf(CommentModel)).isRequired\n};\n\nexport default StatefulCommentList;\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport store from \"stores/main\";\nimport { commentsForArticle } from \"selectors/comments\";\nimport CommentModel from \"models/article/Comment\";\n\nfunction CommentsNumber(props) {\n const [comments, setComments] = useState(props.comments);\n\n useEffect(() => {\n const unsubscribe = store.subscribe(() => {\n setComments(commentsForArticle(store.getState(), props.articleId));\n });\n\n return () => {\n unsubscribe();\n };\n });\n\n return <>{`${comments.length} comment${comments.length === 1 ? \"\" : \"s\"}`};\n}\n\nCommentsNumber.propTypes = {\n articleId: PropTypes.number.isRequired,\n comments: PropTypes.arrayOf(PropTypes.instanceOf(CommentModel)).isRequired\n};\n\nexport default CommentsNumber;\n","import { Helpers, Services, UI, Views } from \"loco-js\";\n\nimport Flash from \"views/shared/Flash\";\n\nclass Show extends Views.Base {\n constructor(opts = {}) {\n super(opts);\n this.article = null;\n this.newComment = opts.comment;\n }\n\n render() {\n const form = new UI.Form({\n for: this.newComment,\n initObj: true,\n id: \"new_comment\"\n });\n form.render();\n }\n\n renderArticle(article = null) {\n if (!this.article) {\n this.article = article;\n this.connectWith(this.article, { receiver: \"_articleReceivedSignal\" });\n }\n document.getElementById(\"title\").textContent = this.article.title;\n document.getElementById(\"author\").textContent = this.article.author;\n const dateService = new Services.Date(this.article.publishedAt);\n document.getElementById(\"pub_date\").textContent = dateService.toString(\n \"short\"\n );\n const textEl = document.getElementById(\"text\");\n textEl.innerHTML = \"\";\n const text = new Helpers.Text().simpleFormat(this.article.content);\n textEl.insertAdjacentHTML(\"beforeend\", text);\n }\n\n _articleReceivedSignal(signal) {\n switch (signal) {\n case \"updating\": {\n const txt =\n \"Author is currently editing article. Be aware of possible changes.\";\n const flash = new Flash({ warning: txt });\n flash.render();\n break;\n }\n case \"updated\":\n this.article.reload().then(() => {\n this.article.applyChanges();\n this.renderArticle();\n });\n }\n }\n}\n\nexport default Show;\n","import React from \"react\";\nimport { render } from \"react-dom\";\nimport { Controllers } from \"loco-js\";\n\nimport store from \"stores/main\";\nimport CommentList from \"containers/main/articles/StatefulCommentList\";\nimport CommentsNumber from \"containers/main/articles/CommentsNumber\";\n\nimport Article from \"models/Article\";\nimport Comment from \"models/article/Comment\";\nimport Show from \"views/main/articles/Show\";\n\nclass Articles extends Controllers.Base {\n show() {\n const newComment = new Comment({ articleId: this.params.id });\n const view = new Show({ comment: newComment });\n view.render();\n Article.find(this.params.id).then(article => {\n store.dispatch({\n type: \"SET_ARTICLES\",\n payload: { articles: [article] }\n });\n view.renderArticle(article);\n });\n Comment.get(\"count\", { articleId: this.params.id }).then(res => {\n Comment.all({ articleId: this.params.id, total: res.total }).then(\n comments => {\n store.dispatch({\n type: \"SET_COMMENTS\",\n payload: { articleId: this.params.id, comments }\n });\n render(\n React.createElement(CommentList, {\n articleId: this.params.id,\n comments\n }),\n document.getElementById(\"comments\")\n );\n render(\n React.createElement(CommentsNumber, {\n articleId: this.params.id,\n comments\n }),\n document.getElementById(\"comments_count\")\n );\n }\n );\n });\n }\n}\n\nexport default Articles;\n","import React, { useState } from \"react\";\n\nimport Article from \"models/Article\";\nimport store from \"stores/main\";\n\nexport default function LoadMoreLink() {\n const [page, setPage] = useState(1);\n const [noMorePosts, setNoMorePosts] = useState(false);\n\n function handleClick(e) {\n e.preventDefault();\n const currentPage = page + 1;\n setPage(currentPage);\n Article.get(\"all\", { page: currentPage })\n .then(resp => {\n if (resp.resources.length > 0) {\n store.dispatch({\n type: \"ADD_ARTICLES\",\n payload: { articles: resp.resources }\n });\n } else {\n setNoMorePosts(true);\n }\n })\n .catch(err => alert(`Invalid URL: ${err}`));\n }\n\n function output() {\n if (noMorePosts) return No more posts.;\n else\n return (\n \n Load more…\n \n );\n }\n\n return output();\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Services } from \"loco-js\";\n\nimport ArticleModel from \"models/Article\";\n\nfunction Article({ article }) {\n const date = new Services.Date(article.publishedAt).toString(\"short\");\n\n return (\n\n \n {article.author} wrote this on {date} /{\" \"}\n
{article.content}
\n\n Continued…\n
\n