mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add possibility to get last 10 user comments

Browse Source
This commit is contained in:
igoradamenko
2018-06-18 23:28:29 +03:00
parent 1c0e1a2b07
commit 5dcd7aea4e
14 changed files with 165 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/common/api.js
+3
View File
@@ -22,6 +22,8 @@ export const counts = ({ urls, siteId }) => fetcher.post({
export const getComment = ({ id }) => fetcher.get(`/id/${id}?url=${url}`);
export const getUserComments = ({ user, limit }) => fetcher.get(`/comments?user=${user}&limit=${limit}`)
export const vote = ({ id, url, value }) => fetcher.put({
url: `/vote/${id}?url=${url}&vote=${value}`,
withCredentials: true,
@@ -109,6 +111,7 @@ export default {
last,
counts,
getComment,
getUserComments,
vote,
send,
edit,
web/app/components/comment/__body/comment__body.scss
+5
View File
@@ -0,0 +1,5 @@
.comment__body {
+ .comment__user-info {
margin-top: 8px;
}
}
web/app/components/comment/_collapsed/comment_collapsed.scss
+4 -2
View File
@@ -1,5 +1,7 @@
.comment_collapsed {
.comment__text, .comment__actions {
display: none;
> .comment__body {
.comment__text, .comment__actions {
display: none;
}
}
}
web/app/components/comment/_view/_user/comment_view_user.scss
+11
View File
@@ -0,0 +1,11 @@
.comment_view_user {
.comment__time {
margin-left: 0;
}
&.comment_collapsed {
.comment__text, .comment__actions {
display: block;
}
}
}
web/app/components/comment/comment.jsx
+38 -27
View File
@@ -6,6 +6,7 @@ import { url } from 'common/settings';
import store from 'common/store';
import Input from 'components/input';
import UserInfo from 'components/user-info';
export default class Comment extends Component {
constructor(props) {
@@ -14,8 +15,8 @@ export default class Comment extends Component {
this.state = {
isReplying: false,
isEditing: false,
isUserIdVisible: false,
isUserVerified: false,
isUserInfoShown: false,
editTimeLeft: null,
};
@@ -28,7 +29,7 @@ export default class Comment extends Component {
this.toggleEditing = this.toggleEditing.bind(this);
this.toggleReplying = this.toggleReplying.bind(this);
this.toggleCollapse = this.toggleCollapse.bind(this);
this.toggleUserIdVisibility = this.toggleUserIdVisibility.bind(this);
this.toggleUserInfoVisibility = this.toggleUserInfoVisibility.bind(this);
this.scrollToParent = this.scrollToParent.bind(this);
this.onEdit = this.onEdit.bind(this);
this.onReply = this.onReply.bind(this);
@@ -126,8 +127,8 @@ export default class Comment extends Component {
}
}
toggleUserIdVisibility() {
this.setState({ isUserIdVisible: !this.state.isUserIdVisible });
toggleUserInfoVisibility() {
this.setState({ isUserInfoShown: !this.state.isUserInfoShown });
}
onPinClick() {
@@ -301,7 +302,6 @@ export default class Comment extends Component {
render(props, {
guest,
isUserIdVisible,
userBlocked,
pinned,
score,
@@ -312,6 +312,7 @@ export default class Comment extends Component {
isEditing,
isUserVerified,
editTimeLeft,
isUserInfoShown,
}) {
const { data, mods = {} } = props;
const isAdmin = !guest && store.get('user').admin;
@@ -389,24 +390,28 @@ export default class Comment extends Component {
<article className={b('comment', props, defaultMods)} id={mods.disabled ? null : `${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
<div className="comment__body">
<div className="comment__info">
<img
className={b('comment__avatar', {}, { default: o.user.isDefaultPicture })}
src={o.user.isDefaultPicture ? require('./__avatar/comment__avatar.svg') : o.user.picture}
alt=""
/>
<span
className="comment__username"
title={o.user.id}
onClick={this.toggleUserIdVisibility}
>{o.user.name}</span>
{
isUserIdVisible && <span className="comment__user-id"> ({o.user.id})</span>
mods.view !== 'user' && (
<img
className={b('comment__avatar', {}, { default: o.user.isDefaultPicture })}
src={o.user.isDefaultPicture ? require('./__avatar/comment__avatar.svg') : o.user.picture}
alt=""
/>
)
}
{
isAdmin && (
mods.view !== 'user' && (
<span
className="comment__username"
title={o.user.id}
onClick={this.toggleUserInfoVisibility}
>{o.user.name}</span>
)
}
{
isAdmin && mods.view !== 'user' && (
<span
onClick={o.user.verified ? this.onUnverifyClick : this.onVerifyClick}
aria-label="Toggle verification"
@@ -417,7 +422,7 @@ export default class Comment extends Component {
}
{
!isAdmin && !!o.user.verified && (
!isAdmin && !!o.user.verified && mods.view !== 'user' && (
<span
title="Verified user"
className={b('comment__verification', {}, { active: true })}
@@ -428,7 +433,7 @@ export default class Comment extends Component {
<a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__time">{o.time}</a>
{
mods.level > 0 && (
mods.level > 0 && mods.view !== 'user' && (
<a
className="comment__link-to-parent"
href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.pid}`}
@@ -440,7 +445,7 @@ export default class Comment extends Component {
}
{
isAdmin && userBlocked && (
isAdmin && userBlocked && mods.view !== 'user' && (
<span className="comment__status">Blocked</span>
)
}
@@ -452,7 +457,7 @@ export default class Comment extends Component {
}
{
!mods.disabled && (
!mods.disabled && mods.view !== 'user' && (
<span
className={b('comment__action', {}, { type: 'collapse', selected: mods.collapsed })}
tabIndex="0"
@@ -494,7 +499,7 @@ export default class Comment extends Component {
<div className="comment__actions">
{
!deleted && !mods.disabled && !isGuest && (
!deleted && !mods.disabled && !isGuest && mods.view !== 'user' && (
<span
className="comment__action"
role="button"
@@ -505,7 +510,7 @@ export default class Comment extends Component {
}
{
!deleted && !mods.disabled && !!o.orig && isCurrentUser && (!!editTimeLeft || isEditing) && (
!deleted && !mods.disabled && !!o.orig && isCurrentUser && (!!editTimeLeft || isEditing) && mods.view !== 'user' && (
<span
className="comment__action comment__action_type_edit"
role="button"
@@ -579,7 +584,13 @@ export default class Comment extends Component {
</div>
{
isReplying && (
isUserInfoShown && (
<UserInfo mix="comment__user-info" user={o.user} onClose={this.toggleUserInfoVisibility}/>
)
}
{
isReplying && mods.view !== 'user' && (
<Input
mix="comment__input"
onSubmit={this.onReply}
@@ -591,7 +602,7 @@ export default class Comment extends Component {
}
{
isEditing && (
isEditing && mods.view !== 'user' && (
<Input
mix="comment__input"
mods={{ mode: 'edit' }}
web/app/components/comment/comment.scss
+1 -1
View File
@@ -10,7 +10,7 @@
@media (hover: hover) {
&:hover {
.comment__controls {
> .comment__body .comment__actions .comment__controls {
opacity: 1;
}
}
web/app/components/comment/index.js
+2
View File
@@ -11,6 +11,7 @@ require('./__action/_type/_edit/comment__action_type_edit.scss');
require('./__avatar/comment__avatar.scss');
require('./__avatar/_default/comment__avatar_default.scss');
require('./__body/comment__body.scss');
require('./__control/comment__control.scss');
require('./__controls/comment__controls.scss');
require('./__info/comment__info.scss');
@@ -46,3 +47,4 @@ require('./_useless/comment_useless.scss');
require('./_view/_admin/comment_view_admin.scss');
require('./_view/_preview/comment_view_preview.scss');
require('./_view/_user/comment_view_user.scss');
web/app/components/user-info/__close/user-info__close.scss
+10
View File
@@ -0,0 +1,10 @@
.user-info__close {
font-size: 14px;
line-height: 18px;
cursor: pointer;
color: #888;
&:hover {
text-decoration: underline;
}
}
web/app/components/user-info/__id/user-info__id.scss
+7
View File
@@ -0,0 +1,7 @@
.user-info__id {
margin: 0 0 18px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #888;
}
web/app/components/user-info/__preloader/user-info__preloader.scss
+3
View File
@@ -0,0 +1,3 @@
.user-info__preloader {
margin: 0 auto 18px;
}
web/app/components/user-info/__title/user-info__title.scss
+6
View File
@@ -0,0 +1,6 @@
.user-info__title {
margin: 6px 0 0;
font-size: 18px;
font-weight: 700;
line-height: 20px;
}
web/app/components/user-info/index.js
+8
View File
@@ -0,0 +1,8 @@
export { default } from './user-info';
require('./user-info.scss');
require('./__close/user-info__close.scss');
require('./__id/user-info__id.scss');
require('./__preloader/user-info__preloader.scss');
require('./__title/user-info__title.scss');
web/app/components/user-info/user-info.jsx
+60
View File
@@ -0,0 +1,60 @@
import { h, Component } from 'preact';
import api from 'common/api';
import Comment from 'components/comment';
import Preloader from 'components/preloader';
export default class UserInfo extends Component {
constructor(props) {
super(props);
this.state = {
comments: [],
isLoading: false,
};
}
componentWillMount() {
const { user: { id } } = this.props;
// TODO: change Comments to comments
api.getUserComments({ user: id, limit: 10 })
.then(({ Comments = [] }) => this.setState({ comments: Comments }))
.finally(() => this.setState({ isLoading: false }));
}
render(props, { comments, isLoading }) {
const { user: { name, id }, onClose } = props;
return (
<div className={b('user-info', props)}>
<p className="user-info__title">Last comments by {name}</p>
<p className="user-info__id">{id}</p>
{
isLoading && (
<Preloader mix="user-info__preloader"/>
)
}
{
!isLoading && (
<div>
{
comments.map(comment => (
<Comment
data={comment}
mods={{ level: 0, view: 'user' }}
/>
))
}
</div>
)
}
<div><span className="user-info__close" onClick={onClose}>Close</span></div>
</div>
);
}
}
web/app/components/user-info/user-info.scss
+7
View File
@@ -0,0 +1,7 @@
.user-info {
padding: 10px 20px;
overflow: hidden;
background: #fafafa;
border: 1px solid #efefef;
border-radius: 2px;
}