-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
import { T } from "inferno-i18next-dess";
import {
CommentReportView,
} from "lemmy-js-client";
import { i18n } from "../../i18next";
import { CommentNodeI, CommentViewType } from "../../interfaces";
-import { WebSocketService } from "../../services";
-import { myAuth, wsClient } from "../../utils";
-import { Icon } from "../common/icon";
+import { myAuthRequired } from "../../utils";
+import { Icon, Spinner } from "../common/icon";
import { PersonListing } from "../person/person-listing";
import { CommentNode } from "./comment-node";
interface CommentReportProps {
report: CommentReportView;
+ onResolveReport(form: ResolveCommentReport): void;
}
-export class CommentReport extends Component<CommentReportProps, any> {
+interface CommentReportState {
+ loading: boolean;
+}
+
+export class CommentReport extends Component<
+ CommentReportProps,
+ CommentReportState
+> {
+ state: CommentReportState = {
+ loading: false,
+ };
constructor(props: any, context: any) {
super(props, context);
}
+ componentWillReceiveProps(
+ nextProps: Readonly<{ children?: InfernoNode } & CommentReportProps>
+ ): void {
+ if (this.props != nextProps) {
+ this.setState({ loading: false });
+ }
+ }
+
render() {
const r = this.props.report;
const comment = r.comment;
};
return (
- <div>
+ <div className="comment-report">
<CommentNode
node={node}
viewType={CommentViewType.Flat}
allLanguages={[]}
siteLanguages={[]}
hideImages
+ // All of these are unused, since its viewonly
+ finished={new Map()}
+ onSaveComment={() => {}}
+ onBlockPerson={() => {}}
+ onDeleteComment={() => {}}
+ onRemoveComment={() => {}}
+ onCommentVote={() => {}}
+ onCommentReport={() => {}}
+ onDistinguishComment={() => {}}
+ onAddModToCommunity={() => {}}
+ onAddAdmin={() => {}}
+ onTransferCommunity={() => {}}
+ onPurgeComment={() => {}}
+ onPurgePerson={() => {}}
+ onCommentReplyRead={() => {}}
+ onPersonMentionRead={() => {}}
+ onBanPersonFromCommunity={() => {}}
+ onBanPerson={() => {}}
+ onCreateComment={() => Promise.resolve({ state: "empty" })}
+ onEditComment={() => Promise.resolve({ state: "empty" })}
/>
<div>
{i18n.t("reporter")}: <PersonListing person={r.creator} />
data-tippy-content={tippyContent}
aria-label={tippyContent}
>
- <Icon
- icon="check"
- classes={`icon-inline ${
- r.comment_report.resolved ? "text-success" : "text-danger"
- }`}
- />
+ {this.state.loading ? (
+ <Spinner />
+ ) : (
+ <Icon
+ icon="check"
+ classes={`icon-inline ${
+ r.comment_report.resolved ? "text-success" : "text-danger"
+ }`}
+ />
+ )}
</button>
</div>
);
}
handleResolveReport(i: CommentReport) {
- const auth = myAuth();
- if (auth) {
- const form: ResolveCommentReport = {
- report_id: i.props.report.comment_report.id,
- resolved: !i.props.report.comment_report.resolved,
- auth,
- };
- WebSocketService.Instance.send(wsClient.resolveCommentReport(form));
- }
+ i.setState({ loading: true });
+ i.props.onResolveReport({
+ report_id: i.props.report.comment_report.id,
+ resolved: !i.props.report.comment_report.resolved,
+ auth: myAuthRequired(),
+ });
}
}