mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-09-09 16:08:49 -06:00
Adding comment loading indicator. #519
This commit is contained in:
parent
f8ea6a527d
commit
cd99b1bc1e
80
ui/src/components/comment-form.tsx
vendored
80
ui/src/components/comment-form.tsx
vendored
@ -1,8 +1,13 @@
|
|||||||
import { Component, linkEvent } from 'inferno';
|
import { Component, linkEvent } from 'inferno';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
import { retryWhen, delay, take } from 'rxjs/operators';
|
||||||
import { Prompt } from 'inferno-router';
|
import { Prompt } from 'inferno-router';
|
||||||
import {
|
import {
|
||||||
CommentNode as CommentNodeI,
|
CommentNode as CommentNodeI,
|
||||||
CommentForm as CommentFormI,
|
CommentForm as CommentFormI,
|
||||||
|
WebSocketJsonResponse,
|
||||||
|
UserOperation,
|
||||||
|
CommentResponse,
|
||||||
} from '../interfaces';
|
} from '../interfaces';
|
||||||
import {
|
import {
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
@ -11,6 +16,7 @@ import {
|
|||||||
markdownHelpUrl,
|
markdownHelpUrl,
|
||||||
toast,
|
toast,
|
||||||
setupTribute,
|
setupTribute,
|
||||||
|
wsJsonToRes,
|
||||||
} from '../utils';
|
} from '../utils';
|
||||||
import { WebSocketService, UserService } from '../services';
|
import { WebSocketService, UserService } from '../services';
|
||||||
import autosize from 'autosize';
|
import autosize from 'autosize';
|
||||||
@ -29,12 +35,15 @@ interface CommentFormState {
|
|||||||
commentForm: CommentFormI;
|
commentForm: CommentFormI;
|
||||||
buttonTitle: string;
|
buttonTitle: string;
|
||||||
previewMode: boolean;
|
previewMode: boolean;
|
||||||
|
loading: boolean;
|
||||||
imageLoading: boolean;
|
imageLoading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
||||||
private id = `comment-form-${randomStr()}`;
|
private id = `comment-textarea-${randomStr()}`;
|
||||||
|
private formId = `comment-form-${randomStr()}`;
|
||||||
private tribute: Tribute;
|
private tribute: Tribute;
|
||||||
|
private subscription: Subscription;
|
||||||
private emptyState: CommentFormState = {
|
private emptyState: CommentFormState = {
|
||||||
commentForm: {
|
commentForm: {
|
||||||
auth: null,
|
auth: null,
|
||||||
@ -52,6 +61,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||||||
? capitalizeFirstLetter(i18n.t('edit'))
|
? capitalizeFirstLetter(i18n.t('edit'))
|
||||||
: capitalizeFirstLetter(i18n.t('reply')),
|
: capitalizeFirstLetter(i18n.t('reply')),
|
||||||
previewMode: false,
|
previewMode: false,
|
||||||
|
loading: false,
|
||||||
imageLoading: false,
|
imageLoading: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -72,6 +82,14 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||||||
this.state.commentForm.parent_id = this.props.node.comment.id;
|
this.state.commentForm.parent_id = this.props.node.comment.id;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.subscription = WebSocketService.Instance.subject
|
||||||
|
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
|
||||||
|
.subscribe(
|
||||||
|
msg => this.parseMessage(msg),
|
||||||
|
err => console.error(err),
|
||||||
|
() => console.log('complete')
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -85,6 +103,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.subscription.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
@ -92,7 +114,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||||||
when={this.state.commentForm.content}
|
when={this.state.commentForm.content}
|
||||||
message={i18n.t('block_leaving')}
|
message={i18n.t('block_leaving')}
|
||||||
/>
|
/>
|
||||||
<form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
|
<form
|
||||||
|
id={this.formId}
|
||||||
|
onSubmit={linkEvent(this, this.handleCommentSubmit)}
|
||||||
|
>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<div className={`col-sm-12`}>
|
<div className={`col-sm-12`}>
|
||||||
<textarea
|
<textarea
|
||||||
@ -123,7 +148,13 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||||||
class="btn btn-sm btn-secondary mr-2"
|
class="btn btn-sm btn-secondary mr-2"
|
||||||
disabled={this.props.disabled}
|
disabled={this.props.disabled}
|
||||||
>
|
>
|
||||||
{this.state.buttonTitle}
|
{this.state.loading ? (
|
||||||
|
<svg class="icon icon-spinner spin">
|
||||||
|
<use xlinkHref="#icon-spinner"></use>
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<span>{this.state.buttonTitle}</span>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
{this.state.commentForm.content && (
|
{this.state.commentForm.content && (
|
||||||
<button
|
<button
|
||||||
@ -185,6 +216,19 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleFinished() {
|
||||||
|
this.state.previewMode = false;
|
||||||
|
this.state.loading = false;
|
||||||
|
this.state.commentForm.content = '';
|
||||||
|
let form: any = document.getElementById(this.formId);
|
||||||
|
form.reset();
|
||||||
|
if (this.props.node) {
|
||||||
|
this.props.onReplyCancel();
|
||||||
|
}
|
||||||
|
autosize.update(document.querySelector('textarea'));
|
||||||
|
this.setState(this.state);
|
||||||
|
}
|
||||||
|
|
||||||
handleCommentSubmit(i: CommentForm, event: any) {
|
handleCommentSubmit(i: CommentForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (i.props.edit) {
|
if (i.props.edit) {
|
||||||
@ -193,15 +237,8 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||||||
WebSocketService.Instance.createComment(i.state.commentForm);
|
WebSocketService.Instance.createComment(i.state.commentForm);
|
||||||
}
|
}
|
||||||
|
|
||||||
i.state.previewMode = false;
|
i.state.loading = true;
|
||||||
i.state.commentForm.content = undefined;
|
|
||||||
event.target.reset();
|
|
||||||
i.setState(i.state);
|
i.setState(i.state);
|
||||||
if (i.props.node) {
|
|
||||||
i.props.onReplyCancel();
|
|
||||||
}
|
|
||||||
|
|
||||||
autosize.update(document.querySelector('textarea'));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCommentContentChange(i: CommentForm, event: any) {
|
handleCommentContentChange(i: CommentForm, event: any) {
|
||||||
@ -256,7 +293,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||||||
i.state.commentForm.content = content;
|
i.state.commentForm.content = content;
|
||||||
i.state.imageLoading = false;
|
i.state.imageLoading = false;
|
||||||
i.setState(i.state);
|
i.setState(i.state);
|
||||||
var textarea: any = document.getElementById(i.id);
|
let textarea: any = document.getElementById(i.id);
|
||||||
autosize.update(textarea);
|
autosize.update(textarea);
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
@ -265,4 +302,23 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||||||
toast(error, 'danger');
|
toast(error, 'danger');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
parseMessage(msg: WebSocketJsonResponse) {
|
||||||
|
let res = wsJsonToRes(msg);
|
||||||
|
|
||||||
|
// Only do the showing and hiding if logged in
|
||||||
|
if (UserService.Instance.user) {
|
||||||
|
if (res.op == UserOperation.CreateComment) {
|
||||||
|
let data = res.data as CommentResponse;
|
||||||
|
if (data.comment.creator_id == UserService.Instance.user.id) {
|
||||||
|
this.handleFinished();
|
||||||
|
}
|
||||||
|
} else if (res.op == UserOperation.EditComment) {
|
||||||
|
let data = res.data as CommentResponse;
|
||||||
|
if (data.comment.creator_id == UserService.Instance.user.id) {
|
||||||
|
this.handleFinished();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user