LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-26 21:01:28 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'LemmyNet:main' into multiple-images-upload

Browse source
This commit is contained in:
sam365724 2022-09-30 22:36:55 +02:00 committed by GitHub
commit 059dfbd3a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 4220 additions and 3787 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.eslintrc.json
View file

@ -8,7 +8,8 @@
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
"plugin:@typescript-eslint/recommended",
"plugin:inferno/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {

2
lemmy-translations

@ -1 +1 @@
Subproject commit 7ac48ae98271b3b573e28c90b87f9704492e0b62
Subproject commit ae3132fef13542ab7fc337361bf484183d12d786

21
package.json
View file

@ -25,13 +25,13 @@
"emoji-short-name": "^2.0.0",
"express": "~4.18.1",
"i18next": "^21.8.14",
"inferno": "^7.4.11",
"inferno-create-element": "^7.4.11",
"inferno": "^8.0.3",
"inferno-create-element": "^8.0.3",
"inferno-helmet": "^5.2.1",
"inferno-hydrate": "^7.4.11",
"inferno-i18next-dess": "^0.0.1",
"inferno-router": "^7.4.11",
"inferno-server": "^7.4.11",
"inferno-hydrate": "^8.0.3",
"inferno-i18next-dess": "0.0.2",
"inferno-router": "^8.0.3",
"inferno-server": "^8.0.3",
"isomorphic-cookie": "^1.2.4",
"jwt-decode": "^3.1.2",
"markdown-it": "^13.0.1",
@ -55,7 +55,7 @@
"@babel/plugin-proposal-decorators": "^7.18.9",
"@babel/plugin-transform-runtime": "^7.18.9",
"@babel/plugin-transform-typescript": "^7.18.8",
"@babel/preset-env": "7.18.9",
"@babel/preset-env": "7.19.3",
"@babel/preset-typescript": "^7.18.6",
"@babel/runtime": "^7.18.9",
"@sniptt/monads": "^0.5.10",
@ -74,10 +74,11 @@
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"eslint": "^8.20.0",
"eslint-plugin-inferno": "^7.31.8",
"eslint-plugin-prettier": "^4.2.1",
"husky": "^8.0.1",
"import-sort-style-module": "^6.0.0",
"lemmy-js-client": "0.17.0-rc.43",
"lemmy-js-client": "0.17.0-rc.46",
"lint-staged": "^13.0.3",
"mini-css-extract-plugin": "^2.6.1",
"node-fetch": "^2.6.1",
@ -92,10 +93,10 @@
"sortpack": "^2.3.0",
"style-loader": "^3.3.1",
"terser": "^5.14.2",
"typescript": "^4.7.4",
"typescript": "^4.8.4",
"webpack": "5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "4.9.3",
"webpack-dev-server": "4.11.1",
"webpack-node-externals": "^3.0.0"
},
"engines": {

2
src/assets/css/themes/darkly-red.css
View file

@ -53,7 +53,7 @@ section {
}
body {
margin:0;
font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Cantarell,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size:.9375rem;
font-weight:400;
line-height:1.5;

2
src/assets/css/themes/darkly.css
View file

File diff suppressed because one or more lines are too long

2
src/shared/components/app/app.tsx
View file

@ -42,7 +42,7 @@ export class App extends Component<any, any> {
none: <></>,
})}
<Navbar siteRes={siteRes} />
<div class="mt-4 p-0 fl-1">
<div className="mt-4 p-0 fl-1">
<Switch>
{routes.map(({ path, exact, component: C, ...rest }) => (
<Route

20
src/shared/components/app/footer.tsx
View file

@ -16,16 +16,16 @@ export class Footer extends Component<FooterProps, any> {
render() {
return (
<nav class="container navbar navbar-expand-md navbar-light navbar-bg p-3">
<nav className="container navbar navbar-expand-md navbar-light navbar-bg p-3">
<div className="navbar-collapse">
<ul class="navbar-nav ml-auto">
<ul className="navbar-nav ml-auto">
{this.props.site.version !== VERSION && (
<li class="nav-item">
<span class="nav-link">UI: {VERSION}</span>
<li className="nav-item">
<span className="nav-link">UI: {VERSION}</span>
</li>
)}
<li class="nav-item">
<span class="nav-link">BE: {this.props.site.version}</span>
<li className="nav-item">
<span className="nav-link">BE: {this.props.site.version}</span>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/modlog">
@ -42,23 +42,23 @@ export class Footer extends Component<FooterProps, any> {
</li>
)}
{this.props.site.federated_instances && (
<li class="nav-item">
<li className="nav-item">
<NavLink className="nav-link" to="/instances">
{i18n.t("instances")}
</NavLink>
</li>
)}
<li class="nav-item">
<li className="nav-item">
<a className="nav-link" href={docsUrl}>
{i18n.t("docs")}
</a>
</li>
<li class="nav-item">
<li className="nav-item">
<a className="nav-link" href={repoUrl}>
{i18n.t("code")}
</a>
</li>
<li class="nav-item">
<li className="nav-item">
<a className="nav-link" href={joinLemmyUrl}>
{i18n.t("join_lemmy")}
</a>

131
src/shared/components/app/navbar.tsx
View file

@ -1,4 +1,4 @@
import { None, Some } from "@sniptt/monads";
import { None } from "@sniptt/monads";
import { Component, createRef, linkEvent, RefObject } from "inferno";
import { NavLink } from "inferno-router";
import {
@ -21,6 +21,7 @@ import { UserService, WebSocketService } from "../../services";
import {
amAdmin,
auth,
canCreateCommunity,
donateLemmyUrl,
isBrowser,
notifyComment,
@ -144,8 +145,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
// TODO class active corresponding to current page
navbar() {
return (
<nav class="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3">
<div class="container">
<nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3">
<div className="container">
{this.props.siteRes.site_view.match({
some: siteView => (
<NavLink
@ -166,7 +167,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
})}
{UserService.Instance.myUserInfo.isSome() && (
<>
<ul class="navbar-nav ml-auto">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink
to="/inbox"
@ -179,7 +180,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
>
<Icon icon="bell" />
{this.state.unreadInboxCount > 0 && (
<span class="mx-1 badge badge-light">
<span className="mx-1 badge badge-light">
{numToSI(this.state.unreadInboxCount)}
</span>
)}
@ -187,7 +188,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li>
</ul>
{this.moderatesSomething && (
<ul class="navbar-nav ml-1">
<ul className="navbar-nav ml-1">
<li className="nav-item">
<NavLink
to="/reports"
@ -200,7 +201,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
>
<Icon icon="shield" />
{this.state.unreadReportCount > 0 && (
<span class="mx-1 badge badge-light">
<span className="mx-1 badge badge-light">
{numToSI(this.state.unreadReportCount)}
</span>
)}
@ -208,8 +209,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li>
</ul>
)}
{this.amAdmin && (
<ul class="navbar-nav ml-1">
{amAdmin() && (
<ul className="navbar-nav ml-1">
<li className="nav-item">
<NavLink
to="/registration_applications"
@ -224,7 +225,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
>
<Icon icon="clipboard" />
{this.state.unreadApplicationCount > 0 && (
<span class="mx-1 badge badge-light">
<span className="mx-1 badge badge-light">
{numToSI(this.state.unreadApplicationCount)}
</span>
)}
@ -235,7 +236,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</>
)}
<button
class="navbar-toggler border-0 p-1"
className="navbar-toggler border-0 p-1"
type="button"
aria-label="menu"
onClick={linkEvent(this, this.handleToggleExpandNavbar)}
@ -246,8 +247,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<div
className={`${!this.state.expanded && "collapse"} navbar-collapse`}
>
<ul class="navbar-nav my-2 mr-auto">
<li class="nav-item">
<ul className="navbar-nav my-2 mr-auto">
<li className="nav-item">
<NavLink
to="/communities"
className="nav-link"
@ -257,11 +258,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
{i18n.t("communities")}
</NavLink>
</li>
<li class="nav-item">
<li className="nav-item">
{/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
<NavLink
to={{
pathname: "/create_post",
prevPath: this.currentLocation,
search: "",
hash: "",
key: "",
state: { prevPath: this.currentLocation },
}}
className="nav-link"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
@ -270,8 +275,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
{i18n.t("create_post")}
</NavLink>
</li>
{this.canCreateCommunity && (
<li class="nav-item">
{canCreateCommunity(this.props.siteRes) && (
<li className="nav-item">
<NavLink
to="/create_community"
className="nav-link"
@ -282,7 +287,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink>
</li>
)}
<li class="nav-item">
<li className="nav-item">
<a
className="nav-link"
title={i18n.t("support_lemmy")}
@ -292,8 +297,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</a>
</li>
</ul>
<ul class="navbar-nav my-2">
{this.amAdmin && (
<ul className="navbar-nav my-2">
{amAdmin() && (
<li className="nav-item">
<NavLink
to="/admin"
@ -310,12 +315,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
/^\/search/
) && (
<form
class="form-inline mr-2"
className="form-inline mr-2"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<input
id="search-input"
class={`form-control mr-0 search-input ${
className={`form-control mr-0 search-input ${
this.state.toggleSearch ? "show-input" : "hide-input"
}`}
onInput={linkEvent(this, this.handleSearchParam)}
@ -325,13 +330,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
placeholder={i18n.t("search")}
onBlur={linkEvent(this, this.handleSearchBlur)}
></input>
<label class="sr-only" htmlFor="search-input">
<label className="sr-only" htmlFor="search-input">
{i18n.t("search")}
</label>
<button
name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)}
class="px-1 btn btn-link"
className="px-1 btn btn-link"
style="color: var(--gray)"
aria-label={i18n.t("search")}
>
@ -341,7 +346,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
)}
{UserService.Instance.myUserInfo.isSome() ? (
<>
<ul class="navbar-nav my-2">
<ul className="navbar-nav my-2">
<li className="nav-item">
<NavLink
className="nav-link"
@ -354,7 +359,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
>
<Icon icon="bell" />
{this.state.unreadInboxCount > 0 && (
<span class="ml-1 badge badge-light">
<span className="ml-1 badge badge-light">
{numToSI(this.state.unreadInboxCount)}
</span>
)}
@ -362,7 +367,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li>
</ul>
{this.moderatesSomething && (
<ul class="navbar-nav my-2">
<ul className="navbar-nav my-2">
<li className="nav-item">
<NavLink
className="nav-link"
@ -375,7 +380,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
>
<Icon icon="shield" />
{this.state.unreadReportCount > 0 && (
<span class="ml-1 badge badge-light">
<span className="ml-1 badge badge-light">
{numToSI(this.state.unreadReportCount)}
</span>
)}
@ -383,8 +388,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li>
</ul>
)}
{this.amAdmin && (
<ul class="navbar-nav my-2">
{amAdmin() && (
<ul className="navbar-nav my-2">
<li className="nav-item">
<NavLink
to="/registration_applications"
@ -399,7 +404,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
>
<Icon icon="clipboard" />
{this.state.unreadApplicationCount > 0 && (
<span class="mx-1 badge badge-light">
<span className="mx-1 badge badge-light">
{numToSI(this.state.unreadApplicationCount)}
</span>
)}
@ -411,10 +416,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
.map(m => m.local_user_view.person)
.match({
some: person => (
<ul class="navbar-nav">
<li class="nav-item dropdown">
<ul className="navbar-nav">
<li className="nav-item dropdown">
<button
class="nav-link btn btn-link dropdown-toggle"
className="nav-link btn btn-link dropdown-toggle"
onClick={linkEvent(this, this.handleToggleDropdown)}
id="navbarDropdown"
role="button"
@ -433,7 +438,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</button>
{this.state.showDropdown && (
<div
class="dropdown-content"
className="dropdown-content"
onMouseLeave={linkEvent(
this,
this.handleToggleDropdown
@ -460,7 +465,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink>
</li>
<li>
<hr class="dropdown-divider" />
<hr className="dropdown-divider" />
</li>
<li className="nav-item">
<button
@ -484,7 +489,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
})}
</>
) : (
<ul class="navbar-nav my-2">
<ul className="navbar-nav my-2">
<li className="nav-item">
<NavLink
to="/login"
@ -520,20 +525,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
);
}
get amAdmin(): boolean {
return amAdmin(Some(this.props.siteRes.admins));
}
get canCreateCommunity(): boolean {
let adminOnly = this.props.siteRes.site_view
.map(s => s.site.community_creation_admin_only)
.unwrapOr(false);
return !adminOnly || this.amAdmin;
}
handleToggleExpandNavbar(i: Navbar) {
i.state.expanded = !i.state.expanded;
i.setState(i.state);
i.setState({ expanded: !i.state.expanded });
}
handleHideExpandNavbar(i: Navbar) {
@ -541,8 +534,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
}
handleSearchParam(i: Navbar, event: any) {
i.state.searchParam = event.target.value;
i.setState(i.state);
i.setState({ searchParam: event.target.value });
}
handleSearchSubmit(i: Navbar, event: any) {
@ -563,8 +555,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
handleSearchBlur(i: Navbar, event: any) {
if (!(event.relatedTarget && event.relatedTarget.name !== "search-btn")) {
i.state.toggleSearch = false;
i.setState(i.state);
i.setState({ toggleSearch: false });
}
}
@ -574,8 +565,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
}
handleToggleDropdown(i: Navbar) {
i.state.showDropdown = !i.state.showDropdown;
i.setState(i.state);
i.setState({ showDropdown: !i.state.showDropdown });
}
parseMessage(msg: any) {
@ -601,25 +591,28 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
msg,
GetUnreadCountResponse
);
this.state.unreadInboxCount =
data.replies + data.mentions + data.private_messages;
this.setState(this.state);
this.setState({
unreadInboxCount: data.replies + data.mentions + data.private_messages,
});
this.sendUnreadCount();
} else if (op == UserOperation.GetReportCount) {
let data = wsJsonToRes<GetReportCountResponse>(
msg,
GetReportCountResponse
);
this.state.unreadReportCount = data.post_reports + data.comment_reports;
this.setState(this.state);
this.setState({
unreadReportCount:
data.post_reports +
data.comment_reports +
data.private_message_reports.unwrapOr(0),
});
this.sendReportUnread();
} else if (op == UserOperation.GetUnreadRegistrationApplicationCount) {
let data = wsJsonToRes<GetUnreadRegistrationApplicationCountResponse>(
msg,
GetUnreadRegistrationApplicationCountResponse
);
this.state.unreadApplicationCount = data.registration_applications;
this.setState(this.state);
this.setState({ unreadApplicationCount: data.registration_applications });
this.sendApplicationUnread();
} else if (op == UserOperation.CreateComment) {
let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
@ -627,8 +620,9 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
UserService.Instance.myUserInfo.match({
some: mui => {
if (data.recipient_ids.includes(mui.local_user_view.local_user.id)) {
this.state.unreadInboxCount++;
this.setState(this.state);
this.setState({
unreadInboxCount: this.state.unreadInboxCount + 1,
});
this.sendUnreadCount();
notifyComment(data.comment_view, this.context.router);
}
@ -647,8 +641,9 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
data.private_message_view.recipient.id ==
mui.local_user_view.person.id
) {
this.state.unreadInboxCount++;
this.setState(this.state);
this.setState({
unreadInboxCount: this.state.unreadInboxCount + 1,
});
this.sendUnreadCount();
notifyPrivateMessage(
data.private_message_view,
@ -677,7 +672,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
});
WebSocketService.Instance.send(wsClient.getReportCount(reportCountForm));
if (this.amAdmin) {
if (amAdmin()) {
console.log("Fetching applications...");
let applicationCountForm = new GetUnreadRegistrationApplicationCount({

2
src/shared/components/app/no-match.tsx
View file

@ -13,7 +13,7 @@ export class NoMatch extends Component<any, any> {
render() {
return (
<div class="container">
<div className="container">
<h1>404</h1>
{this.errCode && (
<h3>

34
src/shared/components/comment/comment-form.tsx
View file

@ -7,6 +7,7 @@ import {
CommentResponse,
CreateComment,
EditComment,
Language,
UserOperation,
wsJsonToRes,
wsUserOp,
@ -17,6 +18,7 @@ import { UserService, WebSocketService } from "../../services";
import {
auth,
capitalizeFirstLetter,
myFirstDiscussionLanguageId,
wsClient,
wsSubscribe,
} from "../../utils";
@ -32,6 +34,7 @@ interface CommentFormProps {
disabled?: boolean;
focus?: boolean;
onReplyCancel?(): any;
allLanguages: Language[];
}
interface CommentFormState {
@ -74,11 +77,19 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
this.props.edit ? Some(node.comment_view.comment.content) : None,
right: () => None,
});
let selectedLang = this.props.node
.left()
.map(n => n.comment_view.comment.language_id)
.or(myFirstDiscussionLanguageId(UserService.Instance.myUserInfo));
return (
<div class="mb-3">
<div className="mb-3">
{UserService.Instance.myUserInfo.isSome() ? (
<MarkdownTextArea
initialContent={initialContent}
initialLanguageId={selectedLang}
showLanguage
buttonTitle={Some(this.state.buttonTitle)}
maxLength={None}
finished={this.state.finished}
@ -88,9 +99,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
onSubmit={this.handleCommentSubmit}
onReplyCancel={this.handleReplyCancel}
placeholder={Some(i18n.t("comment_here"))}
allLanguages={this.props.allLanguages}
/>
) : (
<div class="alert alert-warning" role="alert">
<div className="alert alert-warning" role="alert">
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
<T i18nKey="must_login" class="d-inline">
#
@ -104,27 +116,34 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
);
}
handleCommentSubmit(msg: { val: string; formId: string }) {
handleCommentSubmit(msg: {
val: Option<string>;
formId: string;
languageId: Option<number>;
}) {
let content = msg.val;
this.state.formId = Some(msg.formId);
let language_id = msg.languageId;
this.setState({ formId: Some(msg.formId) });
this.props.node.match({
left: node => {
if (this.props.edit) {
let form = new EditComment({
content: Some(content),
content,
distinguished: None,
form_id: this.state.formId,
comment_id: node.comment_view.comment.id,
language_id,
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.editComment(form));
} else {
let form = new CreateComment({
content,
content: content.unwrap(),
form_id: this.state.formId,
post_id: node.comment_view.post.id,
parent_id: Some(node.comment_view.comment.id),
language_id,
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.createComment(form));
@ -132,10 +151,11 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
},
right: postId => {
let form = new CreateComment({
content,
content: content.unwrap(),
form_id: this.state.formId,
post_id: postId,
parent_id: None,
language_id,
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.createComment(form));

344
src/shared/components/comment/comment-node.tsx
View file

@ -17,6 +17,7 @@ import {
DeleteComment,
EditComment,
GetComments,
Language,
ListingType,
MarkCommentReplyAsRead,
MarkPersonMentionAsRead,
@ -101,6 +102,7 @@ interface CommentNodeProps {
showCommunity?: boolean;
enableDownvotes: boolean;
viewType: CommentViewType;
allLanguages: Language[];
}
export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
@ -147,13 +149,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
// TODO see if there's a better way to do this, and all willReceiveProps
componentWillReceiveProps(nextProps: CommentNodeProps) {
let cv = nextProps.node.comment_view;
this.state.my_vote = cv.my_vote;
this.state.upvotes = cv.counts.upvotes;
this.state.downvotes = cv.counts.downvotes;
this.state.score = cv.counts.score;
this.state.readLoading = false;
this.state.saveLoading = false;
this.setState(this.state);
this.setState({
my_vote: cv.my_vote,
upvotes: cv.counts.upvotes,
downvotes: cv.counts.downvotes,
score: cv.counts.score,
readLoading: false,
saveLoading: false,
});
}
render() {
@ -227,10 +230,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}
>
<div
class={`${!this.props.noIndent && this.props.node.depth && "ml-2"}`}
className={`${
!this.props.noIndent && this.props.node.depth && "ml-2"
}`}
>
<div class="d-flex flex-wrap align-items-center text-muted small">
<span class="mr-2">
<div className="d-flex flex-wrap align-items-center text-muted small">
<span className="mr-2">
<PersonListing person={cv.creator} />
</span>
{cv.comment.distinguished && (
@ -263,16 +268,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)}
{this.props.showCommunity && (
<>
<span class="mx-1">{i18n.t("to")}</span>
<span className="mx-1">{i18n.t("to")}</span>
<CommunityLink community={cv.community} />
<span class="mx-2">•</span>
<span className="mx-2">•</span>
<Link className="mr-2" to={`/post/${cv.post.id}`}>
{cv.post.name}
</Link>
</>
)}
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
onClick={linkEvent(this, this.handleCommentCollapse)}
aria-label={this.expandText}
data-tippy-content={this.expandText}
@ -294,7 +299,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
data-tippy-content={this.pointsTippy}
>
<span
class="mr-1 font-weight-bold"
className="mr-1 font-weight-bold"
aria-label={i18n.t("number_of_points", {
count: this.state.score,
formattedCount: this.state.score,
@ -321,6 +326,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
onReplyCancel={this.handleReplyCancel}
disabled={this.props.locked}
focus
allLanguages={this.props.allLanguages}
/>
)}
{!this.state.showEdit && !this.state.collapsed && (
@ -335,11 +341,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)}
/>
)}
<div class="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
<div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
{this.props.showContext && this.linkBtn()}
{this.props.markable && (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleMarkRead)}
data-tippy-content={
this.commentReplyOrMentionRead
@ -380,7 +386,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<Icon icon="arrow-up1" classes="icon-inline" />
{showScores() &&
this.state.upvotes !== this.state.score && (
<span class="ml-1">
<span className="ml-1">
{numToSI(this.state.upvotes)}
</span>
)}
@ -399,14 +405,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<Icon icon="arrow-down1" classes="icon-inline" />
{showScores() &&
this.state.upvotes !== this.state.score && (
<span class="ml-1">
<span className="ml-1">
{numToSI(this.state.downvotes)}
</span>
)}
</button>
)}
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)}
data-tippy-content={i18n.t("reply")}
aria-label={i18n.t("reply")}
@ -426,7 +432,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<>
{!this.myComment && (
<>
<button class="btn btn-link btn-animate">
<button className="btn btn-link btn-animate">
<Link
className="text-muted"
to={`/create_private_message/recipient/${cv.creator.id}`}
@ -436,7 +442,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</Link>
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleShowReportDialog
@ -449,7 +455,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<Icon icon="flag" />
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleBlockUserClick
@ -462,7 +468,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</>
)}
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleSaveCommentClick
@ -501,7 +507,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{this.myComment && (
<>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleEditClick
@ -512,7 +518,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<Icon icon="edit" classes="icon-inline" />
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleDeleteClick
@ -538,7 +544,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{(canModOnSelf || canAdminOnSelf) && (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleDistinguishClick
@ -570,7 +576,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<>
{!cv.comment.removed ? (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleModRemoveShow
@ -581,7 +587,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</button>
) : (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleModRemoveSubmit
@ -599,7 +605,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{!isMod_ &&
(!cv.creator_banned_from_community ? (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleModBanFromCommunityShow
@ -610,7 +616,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</button>
) : (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleModBanFromCommunitySubmit
@ -623,7 +629,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{!cv.creator_banned_from_community &&
(!this.state.showConfirmAppointAsMod ? (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleShowConfirmAppointAsMod
@ -641,13 +647,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
) : (
<>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
aria-label={i18n.t("are_you_sure")}
>
{i18n.t("are_you_sure")}
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleAddModToCommunity
@ -657,7 +663,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{i18n.t("yes")}
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleCancelConfirmAppointAsMod
@ -676,7 +682,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
cv.creator.local &&
(!this.state.showConfirmTransferCommunity ? (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleShowConfirmTransferCommunity
@ -688,13 +694,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
) : (
<>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
aria-label={i18n.t("are_you_sure")}
>
{i18n.t("are_you_sure")}
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleTransferCommunity
@ -704,7 +710,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{i18n.t("yes")}
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this
@ -722,7 +728,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{!isAdmin_ && (
<>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handlePurgePersonShow
@ -732,7 +738,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{i18n.t("purge_user")}
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handlePurgeCommentShow
@ -744,7 +750,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{!isBanned(cv.creator) ? (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleModBanShow
@ -755,7 +761,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</button>
) : (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleModBanSubmit
@ -771,7 +777,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
cv.creator.local &&
(!this.state.showConfirmAppointAsAdmin ? (
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleShowConfirmAppointAsAdmin
@ -788,11 +794,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</button>
) : (
<>
<button class="btn btn-link btn-animate text-muted">
<button className="btn btn-link btn-animate text-muted">
{i18n.t("are_you_sure")}
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleAddAdmin
@ -802,7 +808,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{i18n.t("yes")}
</button>
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
this,
this.handleCancelConfirmAppointAsAdmin
@ -833,7 +839,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
>
<button
class="btn btn-link text-muted"
className="btn btn-link text-muted"
onClick={linkEvent(this, this.handleFetchChildren)}
>
{i18n.t("x_more_replies", {
@ -847,11 +853,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{/* end of details */}
{this.state.showRemoveDialog && (
<form
class="form-inline"
className="form-inline"
onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
>
<label
class="sr-only"
className="sr-only"
htmlFor={`mod-remove-reason-${cv.comment.id}`}
>
{i18n.t("reason")}
@ -859,14 +865,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<input
type="text"
id={`mod-remove-reason-${cv.comment.id}`}
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("reason")}
value={toUndefined(this.state.removeReason)}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={i18n.t("remove_comment")}
>
{i18n.t("remove_comment")}
@ -875,24 +881,27 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)}
{this.state.showReportDialog && (
<form
class="form-inline"
className="form-inline"
onSubmit={linkEvent(this, this.handleReportSubmit)}
>
<label class="sr-only" htmlFor={`report-reason-${cv.comment.id}`}>
<label
className="sr-only"
htmlFor={`report-reason-${cv.comment.id}`}
>
{i18n.t("reason")}
</label>
<input
type="text"
required
id={`report-reason-${cv.comment.id}`}
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("reason")}
value={this.state.reportReason}
onInput={linkEvent(this, this.handleReportReasonChange)}
/>
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={i18n.t("create_report")}
>
{i18n.t("create_report")}
@ -901,9 +910,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)}
{this.state.showBanDialog && (
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
<div class="form-group row col-12">
<div className="form-group row col-12">
<label
class="col-form-label"
className="col-form-label"
htmlFor={`mod-ban-reason-${cv.comment.id}`}
>
{i18n.t("reason")}
@ -911,13 +920,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<input
type="text"
id={`mod-ban-reason-${cv.comment.id}`}
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("reason")}
value={toUndefined(this.state.banReason)}
onInput={linkEvent(this, this.handleModBanReasonChange)}
/>
<label
class="col-form-label"
className="col-form-label"
htmlFor={`mod-ban-expires-${cv.comment.id}`}
>
{i18n.t("expires")}
@ -925,22 +934,22 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<input
type="number"
id={`mod-ban-expires-${cv.comment.id}`}
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("number_of_days")}
value={toUndefined(this.state.banExpireDays)}
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
/>
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="mod-ban-remove-data"
type="checkbox"
checked={this.state.removeData}
onChange={linkEvent(this, this.handleModRemoveDataChange)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="mod-ban-remove-data"
title={i18n.t("remove_content_more")}
>
@ -954,10 +963,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{/* <label class="col-form-label">Expires</label> */}
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
{/* </div> */}
<div class="form-group row">
<div className="form-group row">
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={i18n.t("ban")}
>
{i18n.t("ban")} {cv.creator.name}
@ -969,24 +978,24 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{this.state.showPurgeDialog && (
<form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
<PurgeWarning />
<label class="sr-only" htmlFor="purge-reason">
<label className="sr-only" htmlFor="purge-reason">
{i18n.t("reason")}
</label>
<input
type="text"
id="purge-reason"
class="form-control my-3"
className="form-control my-3"
placeholder={i18n.t("reason")}
value={toUndefined(this.state.purgeReason)}
onInput={linkEvent(this, this.handlePurgeReasonChange)}
/>
<div class="form-group row col-12">
<div className="form-group row col-12">
{this.state.purgeLoading ? (
<Spinner />
) : (
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={purgeTypeText}
>
{purgeTypeText}
@ -1001,6 +1010,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
onReplyCancel={this.handleReplyCancel}
disabled={this.props.locked}
focus
allLanguages={this.props.allLanguages}
/>
)}
{!this.state.collapsed && node.children.length > 0 && (
@ -1012,10 +1022,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
maxCommentsShown={None}
enableDownvotes={this.props.enableDownvotes}
viewType={this.props.viewType}
allLanguages={this.props.allLanguages}
/>
)}
{/* A collapsed clearfix */}
{this.state.collapsed && <div class="row col-12"></div>}
{this.state.collapsed && <div className="row col-12"></div>}
</div>
);
}
@ -1090,13 +1101,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}
handleReplyClick(i: CommentNode) {
i.state.showReply = true;
i.setState(i.state);
i.setState({ showReply: true });
}
handleEditClick(i: CommentNode) {
i.state.showEdit = true;
i.setState(i.state);
i.setState({ showEdit: true });
}
handleBlockUserClick(i: CommentNode) {
@ -1129,14 +1138,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
WebSocketService.Instance.send(wsClient.saveComment(form));
i.state.saveLoading = true;
i.setState(this.state);
i.setState({ saveLoading: true });
}
handleReplyCancel() {
this.state.showReply = false;
this.state.showEdit = false;
this.setState(this.state);
this.setState({ showReply: false, showEdit: false });
}
handleCommentUpvote(event: any) {
@ -1145,18 +1151,24 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
let newVote = myVote == 1 ? 0 : 1;
if (myVote == 1) {
this.state.score--;
this.state.upvotes--;
this.setState({
score: this.state.score - 1,
upvotes: this.state.upvotes - 1,
});
} else if (myVote == -1) {
this.state.downvotes--;
this.state.upvotes++;
this.state.score += 2;
this.setState({
downvotes: this.state.downvotes - 1,
upvotes: this.state.upvotes + 1,
score: this.state.score + 2,
});
} else {
this.state.upvotes++;
this.state.score++;
this.setState({
score: this.state.score + 1,
upvotes: this.state.upvotes + 1,
});
}
this.state.my_vote = Some(newVote);
this.setState({ my_vote: Some(newVote) });
let form = new CreateCommentLike({
comment_id: this.props.node.comment_view.comment.id,
@ -1164,7 +1176,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.likeComment(form));
this.setState(this.state);
setupTippy();
}
@ -1174,18 +1185,24 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
let newVote = myVote == -1 ? 0 : -1;
if (myVote == 1) {
this.state.score -= 2;
this.state.upvotes--;
this.state.downvotes++;
this.setState({
downvotes: this.state.downvotes + 1,
upvotes: this.state.upvotes - 1,
score: this.state.score - 2,
});
} else if (myVote == -1) {
this.state.downvotes--;
this.state.score++;
this.setState({
downvotes: this.state.downvotes - 1,
score: this.state.score + 1,
});
} else {
this.state.downvotes++;
this.state.score--;
this.setState({
downvotes: this.state.downvotes + 1,
score: this.state.score - 1,
});
}
this.state.my_vote = Some(newVote);
this.setState({ my_vote: Some(newVote) });
let form = new CreateCommentLike({
comment_id: this.props.node.comment_view.comment.id,
@ -1194,18 +1211,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
});
WebSocketService.Instance.send(wsClient.likeComment(form));
this.setState(this.state);
setupTippy();
}
handleShowReportDialog(i: CommentNode) {
i.state.showReportDialog = !i.state.showReportDialog;
i.setState(i.state);
i.setState({ showReportDialog: !i.state.showReportDialog });
}
handleReportReasonChange(i: CommentNode, event: any) {
i.state.reportReason = event.target.value;
i.setState(i.state);
i.setState({ reportReason: event.target.value });
}
handleReportSubmit(i: CommentNode) {
@ -1217,24 +1231,22 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
});
WebSocketService.Instance.send(wsClient.createCommentReport(form));
i.state.showReportDialog = false;
i.setState(i.state);
i.setState({ showReportDialog: false });
}
handleModRemoveShow(i: CommentNode) {
i.state.showRemoveDialog = !i.state.showRemoveDialog;
i.state.showBanDialog = false;
i.setState(i.state);
i.setState({
showRemoveDialog: !i.state.showRemoveDialog,
showBanDialog: false,
});
}
handleModRemoveReasonChange(i: CommentNode, event: any) {
i.state.removeReason = Some(event.target.value);
i.setState(i.state);
i.setState({ removeReason: Some(event.target.value) });
}
handleModRemoveDataChange(i: CommentNode, event: any) {
i.state.removeData = event.target.checked;
i.setState(i.state);
i.setState({ removeData: event.target.checked });
}
handleModRemoveSubmit(i: CommentNode) {
@ -1247,8 +1259,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
});
WebSocketService.Instance.send(wsClient.removeComment(form));
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({ showRemoveDialog: false });
}
handleDistinguishClick(i: CommentNode) {
@ -1258,6 +1269,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
form_id: None, // TODO not sure about this
content: None,
distinguished: Some(!comment.distinguished),
language_id: Some(comment.language_id),
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.editComment(form));
@ -1293,43 +1305,40 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
WebSocketService.Instance.send(wsClient.markCommentReplyAsRead(form));
}
i.state.readLoading = true;
i.setState(this.state);
i.setState({ readLoading: true });
}
handleModBanFromCommunityShow(i: CommentNode) {
i.state.showBanDialog = true;
i.state.banType = BanType.Community;
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({
showBanDialog: true,
banType: BanType.Community,
showRemoveDialog: false,
});
}
handleModBanShow(i: CommentNode) {
i.state.showBanDialog = true;
i.state.banType = BanType.Site;
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({
showBanDialog: true,
banType: BanType.Site,
showRemoveDialog: false,
});
}
handleModBanReasonChange(i: CommentNode, event: any) {
i.state.banReason = Some(event.target.value);
i.setState(i.state);
i.setState({ banReason: Some(event.target.value) });
}
handleModBanExpireDaysChange(i: CommentNode, event: any) {
i.state.banExpireDays = Some(event.target.value);
i.setState(i.state);
i.setState({ banExpireDays: Some(event.target.value) });
}
handleModBanFromCommunitySubmit(i: CommentNode) {
i.state.banType = BanType.Community;
i.setState(i.state);
i.setState({ banType: BanType.Community });
i.handleModBanBothSubmit(i);
}
handleModBanSubmit(i: CommentNode) {
i.state.banType = BanType.Site;
i.setState(i.state);
i.setState({ banType: BanType.Site });
i.handleModBanBothSubmit(i);
}
@ -1340,7 +1349,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
// If its an unban, restore all their data
let ban = !cv.creator_banned_from_community;
if (ban == false) {
i.state.removeData = false;
i.setState({ removeData: false });
}
let form = new BanFromCommunity({
person_id: cv.creator.id,
@ -1356,7 +1365,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
// If its an unban, restore all their data
let ban = !cv.creator.banned;
if (ban == false) {
i.state.removeData = false;
i.setState({ removeData: false });
}
let form = new BanPerson({
person_id: cv.creator.id,
@ -1369,27 +1378,27 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
WebSocketService.Instance.send(wsClient.banPerson(form));
}
i.state.showBanDialog = false;
i.setState(i.state);
i.setState({ showBanDialog: false });
}
handlePurgePersonShow(i: CommentNode) {
i.state.showPurgeDialog = true;
i.state.purgeType = PurgeType.Person;
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({
showPurgeDialog: true,
purgeType: PurgeType.Person,
showRemoveDialog: false,
});
}
handlePurgeCommentShow(i: CommentNode) {
i.state.showPurgeDialog = true;
i.state.purgeType = PurgeType.Comment;
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({
showPurgeDialog: true,
purgeType: PurgeType.Comment,
showRemoveDialog: false,
});
}
handlePurgeReasonChange(i: CommentNode, event: any) {
i.state.purgeReason = Some(event.target.value);
i.setState(i.state);
i.setState({ purgeReason: Some(event.target.value) });
}
handlePurgeSubmit(i: CommentNode, event: any) {
@ -1411,18 +1420,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
WebSocketService.Instance.send(wsClient.purgeComment(form));
}
i.state.purgeLoading = true;
i.setState(i.state);
i.setState({ purgeLoading: true });
}
handleShowConfirmAppointAsMod(i: CommentNode) {
i.state.showConfirmAppointAsMod = true;
i.setState(i.state);
i.setState({ showConfirmAppointAsMod: true });
}
handleCancelConfirmAppointAsMod(i: CommentNode) {
i.state.showConfirmAppointAsMod = false;
i.setState(i.state);
i.setState({ showConfirmAppointAsMod: false });
}
handleAddModToCommunity(i: CommentNode) {
@ -1434,18 +1440,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.addModToCommunity(form));
i.state.showConfirmAppointAsMod = false;
i.setState(i.state);
i.setState({ showConfirmAppointAsMod: false });
}
handleShowConfirmAppointAsAdmin(i: CommentNode) {
i.state.showConfirmAppointAsAdmin = true;
i.setState(i.state);
i.setState({ showConfirmAppointAsAdmin: true });
}
handleCancelConfirmAppointAsAdmin(i: CommentNode) {
i.state.showConfirmAppointAsAdmin = false;
i.setState(i.state);
i.setState({ showConfirmAppointAsAdmin: false });
}
handleAddAdmin(i: CommentNode) {
@ -1456,18 +1459,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.addAdmin(form));
i.state.showConfirmAppointAsAdmin = false;
i.setState(i.state);
i.setState({ showConfirmAppointAsAdmin: false });
}
handleShowConfirmTransferCommunity(i: CommentNode) {
i.state.showConfirmTransferCommunity = true;
i.setState(i.state);
i.setState({ showConfirmTransferCommunity: true });
}
handleCancelShowConfirmTransferCommunity(i: CommentNode) {
i.state.showConfirmTransferCommunity = false;
i.setState(i.state);
i.setState({ showConfirmTransferCommunity: false });
}
handleTransferCommunity(i: CommentNode) {
@ -1478,18 +1478,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.transferCommunity(form));
i.state.showConfirmTransferCommunity = false;
i.setState(i.state);
i.setState({ showConfirmTransferCommunity: false });
}
handleShowConfirmTransferSite(i: CommentNode) {
i.state.showConfirmTransferSite = true;
i.setState(i.state);
i.setState({ showConfirmTransferSite: true });
}
handleCancelShowConfirmTransferSite(i: CommentNode) {
i.state.showConfirmTransferSite = false;
i.setState(i.state);
i.setState({ showConfirmTransferSite: false });
}
get isCommentNew(): boolean {
@ -1499,19 +1496,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}
handleCommentCollapse(i: CommentNode) {
i.state.collapsed = !i.state.collapsed;
i.setState(i.state);
i.setState({ collapsed: !i.state.collapsed });
setupTippy();
}
handleViewSource(i: CommentNode) {
i.state.viewSource = !i.state.viewSource;
i.setState(i.state);
i.setState({ viewSource: !i.state.viewSource });
}
handleShowAdvanced(i: CommentNode) {
i.state.showAdvanced = !i.state.showAdvanced;
i.setState(i.state);
i.setState({ showAdvanced: !i.state.showAdvanced });
setupTippy();
}

3
src/shared/components/comment/comment-nodes.tsx
View file

@ -3,6 +3,7 @@ import { Component } from "inferno";
import {
CommentNode as CommentNodeI,
CommunityModeratorView,
Language,
PersonViewSafe,
} from "lemmy-js-client";
import { CommentViewType } from "../../interfaces";
@ -22,6 +23,7 @@ interface CommentNodesProps {
showCommunity?: boolean;
enableDownvotes?: boolean;
viewType: CommentViewType;
allLanguages: Language[];
}
export class CommentNodes extends Component<CommentNodesProps, any> {
@ -51,6 +53,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
showCommunity={this.props.showCommunity}
enableDownvotes={this.props.enableDownvotes}
viewType={this.props.viewType}
allLanguages={this.props.allLanguages}
/>
))}
</div>

1
src/shared/components/comment/comment-report.tsx
View file

@ -64,6 +64,7 @@ export class CommentReport extends Component<CommentReportProps, any> {
enableDownvotes={true}
viewOnly={true}
showCommunity={true}
allLanguages={[]}
/>
<div>
{i18n.t("reporter")}: <PersonListing person={r.creator} />

2
src/shared/components/common/banner-icon-header.tsx
View file

@ -14,7 +14,7 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
render() {
return (
<div class="position-relative mb-2">
<div className="position-relative mb-2">
{this.props.banner.match({
some: banner => <PictrsImage src={banner} banner alt="" />,
none: <></>,

2
src/shared/components/common/comment-sort-select.tsx
View file

@ -41,7 +41,7 @@ export class CommentSortSelect extends Component<
name={this.id}
value={this.state.sort}
onChange={linkEvent(this, this.handleSortChange)}
class="custom-select w-auto mr-2 mb-2"
className="custom-select w-auto mr-2 mb-2"
aria-label={i18n.t("sort_type")}
>
<option disabled aria-hidden="true">

2
src/shared/components/common/data-type-select.tsx
View file

@ -32,7 +32,7 @@ export class DataTypeSelect extends Component<
render() {
return (
<div class="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<label
className={`pointer btn btn-outline-secondary
${this.state.type_ == DataType.Post && "active"}

7
src/shared/components/common/html-tags.tsx
View file

@ -19,10 +19,10 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
return (
<Helmet title={this.props.title}>
{["title", "og:title", "twitter:title"].map(t => (
<meta property={t} content={this.props.title} />
<meta key={t} property={t} content={this.props.title} />
))}
{["og:url", "twitter:url"].map(u => (
<meta property={u} content={url} />
<meta key={u} property={u} content={url} />
))}
{/* Open Graph / Facebook */}
@ -35,6 +35,7 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
{this.props.description.isSome() &&
["description", "og:description", "twitter:description"].map(n => (
<meta
key={n}
name={n}
content={md.renderInline(this.props.description.unwrap())}
/>
@ -42,7 +43,7 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
{this.props.image.isSome() &&
["og:image", "twitter:image"].map(p => (
<meta property={p} content={this.props.image.unwrap()} />
<meta key={p} property={p} content={this.props.image.unwrap()} />
))}
</Helmet>
);

6
src/shared/components/common/icon.tsx
View file

@ -17,13 +17,13 @@ export class Icon extends Component<IconProps, any> {
render() {
return (
<svg
class={classNames("icon", this.props.classes, {
className={classNames("icon", this.props.classes, {
"icon-inline": this.props.inline,
small: this.props.small,
})}
>
<use xlinkHref={`#icon-${this.props.icon}`}></use>
<div class="sr-only">
<div className="sr-only">
<title>{this.props.icon}</title>
</div>
</svg>
@ -57,7 +57,7 @@ export class PurgeWarning extends Component<any, any> {
render() {
return (
<div class="mt-2 alert alert-danger" role="alert">
<div className="mt-2 alert alert-danger" role="alert">
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
{i18n.t("purge_warning")}
</div>

27
src/shared/components/common/image-upload-form.tsx
View file

@ -34,14 +34,14 @@ export class ImageUploadForm extends Component<
render() {
return (
<form class="d-inline">
<form className="d-inline">
<label
htmlFor={this.id}
class="pointer text-muted small font-weight-bold"
className="pointer text-muted small font-weight-bold"
>
{this.props.imageSrc.match({
some: imageSrc => (
<span class="d-inline-block position-relative">
<span className="d-inline-block position-relative">
<img
src={imageSrc}
height={this.props.rounded ? 60 : ""}
@ -59,7 +59,9 @@ export class ImageUploadForm extends Component<
</span>
),
none: (
<span class="btn btn-secondary">{this.props.uploadTitle}</span>
<span className="btn btn-secondary">
{this.props.uploadTitle}
</span>
),
})}
</label>
@ -68,7 +70,7 @@ export class ImageUploadForm extends Component<
type="file"
accept="image/*,video/*"
name={this.id}
class="d-none"
className="d-none"
disabled={UserService.Instance.myUserInfo.isNone()}
onChange={linkEvent(this, this.handleImageUpload)}
/>
@ -82,8 +84,7 @@ export class ImageUploadForm extends Component<
const formData = new FormData();
formData.append("images[]", file);
i.state.loading = true;
i.setState(i.state);
i.setState({ loading: true });
fetch(pictrsUri, {
method: "POST",
@ -96,18 +97,15 @@ export class ImageUploadForm extends Component<
if (res.msg == "ok") {
let hash = res.files[0].file;
let url = `${pictrsUri}/${hash}`;
i.state.loading = false;
i.setState(i.state);
i.setState({ loading: false });
i.props.onUpload(url);
} else {
i.state.loading = false;
i.setState(i.state);
i.setState({ loading: false });
toast(JSON.stringify(res), "danger");
}
})
.catch(error => {
i.state.loading = false;
i.setState(i.state);
i.setState({ loading: false });
console.error(error);
toast(error, "danger");
});
@ -115,8 +113,7 @@ export class ImageUploadForm extends Component<
handleRemoveImage(i: ImageUploadForm, event: any) {
event.preventDefault();
i.state.loading = true;
i.setState(i.state);
i.setState({ loading: true });
i.props.onRemove();
}
}

109
src/shared/components/common/language-select.tsx Normal file
View file

@ -0,0 +1,109 @@
import { Option } from "@sniptt/monads";
import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import { Language } from "lemmy-js-client";
import { i18n } from "../../i18next";
import { randomStr } from "../../utils";
import { Icon } from "./icon";
interface LanguageSelectProps {
allLanguages: Language[];
selectedLanguageIds: Option<number[]>;
multiple: boolean;
onChange(val: number[]): any;
}
export class LanguageSelect extends Component<LanguageSelectProps, any> {
private id = `language-select-${randomStr()}`;
constructor(props: any, context: any) {
super(props, context);
}
componentDidMount() {
this.setSelectedValues();
}
// Necessary because there is no HTML way to set selected for multiple in value=
setSelectedValues() {
this.props.selectedLanguageIds.map(toString).match({
some: ids => {
var select = (document.getElementById(this.id) as HTMLSelectElement)
.options;
for (let i = 0; i < select.length; i++) {
let o = select[i];
if (ids.includes(o.value)) {
o.selected = true;
}
}
},
none: void 0,
});
}
render() {
let selectedLangs = this.props.selectedLanguageIds;
return (
<div className="form-group row">
<label
className={classNames("col-form-label", {
"col-sm-3": this.props.multiple,
"col-sm-2": !this.props.multiple,
})}
htmlFor={this.id}
>
{i18n.t(this.props.multiple ? "language_plural" : "language")}
</label>
<div
className={classNames("input-group", {
"col-sm-9": this.props.multiple,
"col-sm-10": !this.props.multiple,
})}
>
<select
className="form-control custom-select"
id={this.id}
onChange={linkEvent(this, this.handleLanguageChange)}
aria-label="action"
multiple={this.props.multiple}
>
{this.props.allLanguages.map(l => (
<option
key={l.id}
value={l.id}
selected={selectedLangs.unwrapOr([]).includes(l.id)}
>
{l.name}
</option>
))}
</select>
{this.props.multiple && (
<div className="input-group-append">
<button
className="input-group-text"
onClick={linkEvent(this, this.handleDeselectAll)}
>
<Icon icon="x" />
</button>
</div>
)}
</div>
</div>
);
}
handleLanguageChange(i: LanguageSelect, event: any) {
let options: HTMLOptionElement[] = Array.from(event.target.options);
let selected: number[] = options
.filter(o => o.selected)
.map(o => Number(o.value));
i.props.onChange(selected);
}
handleDeselectAll(i: LanguageSelect, event: any) {
event.preventDefault();
i.props.onChange([]);
}
}

2
src/shared/components/common/listing-type-select.tsx
View file

@ -40,7 +40,7 @@ export class ListingTypeSelect extends Component<
render() {
return (
<div class="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap mb-2">
{this.props.showSubscribed && (
<label
title={i18n.t("subscribed_description")}

180
src/shared/components/common/markdown-textarea.tsx
View file

@ -2,7 +2,7 @@ import { None, Option, Some } from "@sniptt/monads";
import autosize from "autosize";
import { Component, linkEvent } from "inferno";
import { Prompt } from "inferno-router";
import { toUndefined } from "lemmy-js-client";
import { Language, toUndefined } from "lemmy-js-client";
import { pictrsUri } from "../../env";
import { i18n } from "../../i18next";
import { UserService } from "../../services";
@ -18,9 +18,11 @@ import {
toast,
} from "../../utils";
import { Icon, Spinner } from "./icon";
import { LanguageSelect } from "./language-select";
interface MarkdownTextAreaProps {
initialContent: Option<string>;
initialLanguageId: Option<number>;
placeholder: Option<string>;
buttonTitle: Option<string>;
maxLength: Option<number>;
@ -28,14 +30,21 @@ interface MarkdownTextAreaProps {
focus?: boolean;
disabled?: boolean;
finished?: boolean;
showLanguage?: boolean;
hideNavigationWarnings?: boolean;
onContentChange?(val: string): any;
onReplyCancel?(): any;
onSubmit?(msg: { val: string; formId: string }): any;
onSubmit?(msg: {
val: Option<string>;
formId: string;
languageId: Option<number>;
}): any;
allLanguages: Language[];
}
interface MarkdownTextAreaState {
content: Option<string>;
languageId: Option<number>;
previewMode: boolean;
loading: boolean;
imageLoading: boolean;
@ -50,6 +59,7 @@ export class MarkdownTextArea extends Component<
private tribute: any;
private emptyState: MarkdownTextAreaState = {
content: this.props.initialContent,
languageId: this.props.initialLanguageId,
previewMode: false,
loading: false,
imageLoading: false,
@ -58,6 +68,8 @@ export class MarkdownTextArea extends Component<
constructor(props: any, context: any) {
super(props, context);
this.handleLanguageChange = this.handleLanguageChange.bind(this);
if (isBrowser()) {
this.tribute = setupTribute();
}
@ -70,8 +82,7 @@ export class MarkdownTextArea extends Component<
autosize(textarea);
this.tribute.attach(textarea);
textarea.addEventListener("tribute-replaced", () => {
this.state.content = Some(textarea.value);
this.setState(this.state);
this.setState({ content: Some(textarea.value) });
autosize.update(textarea);
});
@ -96,10 +107,7 @@ export class MarkdownTextArea extends Component<
componentWillReceiveProps(nextProps: MarkdownTextAreaProps) {
if (nextProps.finished) {
this.state.previewMode = false;
this.state.loading = false;
this.state.content = None;
this.setState(this.state);
this.setState({ previewMode: false, loading: false, content: None });
if (this.props.replyType) {
this.props.onReplyCancel();
}
@ -108,7 +116,6 @@ export class MarkdownTextArea extends Component<
let form: any = document.getElementById(this.formId);
form.reset();
setTimeout(() => autosize.update(textarea), 10);
this.setState(this.state);
}
}
@ -125,7 +132,7 @@ export class MarkdownTextArea extends Component<
}
message={i18n.t("block_leaving")}
/>
<div class="form-group row">
<div className="form-group row">
<div className={`col-sm-12`}>
<textarea
id={this.id}
@ -150,17 +157,29 @@ export class MarkdownTextArea extends Component<
none: <></>,
})}
</div>
<label class="sr-only" htmlFor={this.id}>
<label className="sr-only" htmlFor={this.id}>
{i18n.t("body")}
</label>
</div>
<div class="row">
<div class="col-sm-12 d-flex flex-wrap">
{this.props.showLanguage && (
<div className="row justify-content-end">
<div className="col-sm-8">
<LanguageSelect
allLanguages={this.props.allLanguages}
selectedLanguageIds={this.state.languageId.map(Array.of)}
multiple={false}
onChange={this.handleLanguageChange}
/>
</div>
</div>
)}
<div className="row">
<div className="col-sm-12 d-flex flex-wrap">
{this.props.buttonTitle.match({
some: buttonTitle => (
<button
type="submit"
class="btn btn-sm btn-secondary mr-2"
className="btn btn-sm btn-secondary mr-2"
disabled={this.props.disabled || this.state.loading}
>
{this.state.loading ? (
@ -175,7 +194,7 @@ export class MarkdownTextArea extends Component<
{this.props.replyType && (
<button
type="button"
class="btn btn-sm btn-secondary mr-2"
className="btn btn-sm btn-secondary mr-2"
onClick={linkEvent(this, this.handleReplyCancel)}
>
{i18n.t("cancel")}
@ -192,9 +211,9 @@ export class MarkdownTextArea extends Component<
</button>
)}
{/* A flex expander */}
<div class="flex-grow-1"></div>
<div className="flex-grow-1"></div>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("bold")}
aria-label={i18n.t("bold")}
onClick={linkEvent(this, this.handleInsertBold)}
@ -202,7 +221,7 @@ export class MarkdownTextArea extends Component<
<Icon icon="bold" classes="icon-inline" />
</button>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("italic")}
aria-label={i18n.t("italic")}
onClick={linkEvent(this, this.handleInsertItalic)}
@ -210,14 +229,14 @@ export class MarkdownTextArea extends Component<
<Icon icon="italic" classes="icon-inline" />
</button>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("link")}
aria-label={i18n.t("link")}
onClick={linkEvent(this, this.handleInsertLink)}
>
<Icon icon="link" classes="icon-inline" />
</button>
<form class="btn btn-sm text-muted font-weight-bold">
<form className="btn btn-sm text-muted font-weight-bold">
<label
htmlFor={`file-upload-${this.id}`}
className={`mb-0 ${
@ -236,13 +255,13 @@ export class MarkdownTextArea extends Component<
type="file"
accept="image/*,video/*"
name="file"
class="d-none"
className="d-none"
disabled={UserService.Instance.myUserInfo.isNone()}
onChange={linkEvent(this, this.handleImageUpload)}
/>
</form>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("header")}
aria-label={i18n.t("header")}
onClick={linkEvent(this, this.handleInsertHeader)}
@ -250,7 +269,7 @@ export class MarkdownTextArea extends Component<
<Icon icon="header" classes="icon-inline" />
</button>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("strikethrough")}
aria-label={i18n.t("strikethrough")}
onClick={linkEvent(this, this.handleInsertStrikethrough)}
@ -258,7 +277,7 @@ export class MarkdownTextArea extends Component<
<Icon icon="strikethrough" classes="icon-inline" />
</button>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("quote")}
aria-label={i18n.t("quote")}
onClick={linkEvent(this, this.handleInsertQuote)}
@ -266,7 +285,7 @@ export class MarkdownTextArea extends Component<
<Icon icon="format_quote" classes="icon-inline" />
</button>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("list")}
aria-label={i18n.t("list")}
onClick={linkEvent(this, this.handleInsertList)}
@ -274,7 +293,7 @@ export class MarkdownTextArea extends Component<
<Icon icon="list" classes="icon-inline" />
</button>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("code")}
aria-label={i18n.t("code")}
onClick={linkEvent(this, this.handleInsertCode)}
@ -282,7 +301,7 @@ export class MarkdownTextArea extends Component<
<Icon icon="code" classes="icon-inline" />
</button>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("subscript")}
aria-label={i18n.t("subscript")}
onClick={linkEvent(this, this.handleInsertSubscript)}
@ -290,7 +309,7 @@ export class MarkdownTextArea extends Component<
<Icon icon="subscript" classes="icon-inline" />
</button>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("superscript")}
aria-label={i18n.t("superscript")}
onClick={linkEvent(this, this.handleInsertSuperscript)}
@ -298,7 +317,7 @@ export class MarkdownTextArea extends Component<
<Icon icon="superscript" classes="icon-inline" />
</button>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("spoiler")}
aria-label={i18n.t("spoiler")}
onClick={linkEvent(this, this.handleInsertSpoiler)}
@ -307,7 +326,7 @@ export class MarkdownTextArea extends Component<
</button>
<a
href={markdownHelpUrl}
class="btn btn-sm text-muted font-weight-bold"
className="btn btn-sm text-muted font-weight-bold"
title={i18n.t("formatting_help")}
rel={relTags}
>
@ -338,8 +357,7 @@ export class MarkdownTextArea extends Component<
const formData = new FormData();
formData.append("images[]", file);
i.state.imageLoading = true;
i.setState(i.state);
i.setState({ imageLoading: true });
fetch(pictrsUri, {
method: "POST",
@ -355,15 +373,16 @@ export class MarkdownTextArea extends Component<
let deleteToken = res.files[0].delete_token;
let deleteUrl = `${pictrsUri}/delete/${deleteToken}/${hash}`;
let imageMarkdown = `![](${url})`;
i.state.content = Some(
i.state.content.match({
some: content => `${content}\n${imageMarkdown}`,
none: imageMarkdown,
})
);
i.state.imageLoading = false;
i.setState({
content: Some(
i.state.content.match({
some: content => `${content}\n${imageMarkdown}`,
none: imageMarkdown,
})
),
imageLoading: false,
});
i.contentChange();
i.setState(i.state);
let textarea: any = document.getElementById(i.id);
autosize.update(textarea);
pictrsDeleteToast(
@ -373,14 +392,12 @@ export class MarkdownTextArea extends Component<
deleteUrl
);
} else {
i.state.imageLoading = false;
i.setState(i.state);
i.setState({ imageLoading: false });
toast(JSON.stringify(res), "danger");
}
})
.catch(error => {
i.state.imageLoading = false;
i.setState(i.state);
i.setState({ imageLoading: false });
console.error(error);
toast(error, "danger");
});
@ -393,22 +410,27 @@ export class MarkdownTextArea extends Component<
}
handleContentChange(i: MarkdownTextArea, event: any) {
i.state.content = Some(event.target.value);
i.setState({ content: Some(event.target.value) });
i.contentChange();
i.setState(i.state);
}
handlePreviewToggle(i: MarkdownTextArea, event: any) {
event.preventDefault();
i.state.previewMode = !i.state.previewMode;
i.setState(i.state);
i.setState({ previewMode: !i.state.previewMode });
}
handleLanguageChange(val: number[]) {
this.setState({ languageId: Some(val[0]) });
}
handleSubmit(i: MarkdownTextArea, event: any) {
event.preventDefault();
i.state.loading = true;
i.setState(i.state);
let msg = { val: toUndefined(i.state.content), formId: i.formId };
i.setState({ loading: true });
let msg = {
val: i.state.content,
formId: i.formId,
languageId: i.state.languageId,
};
i.props.onSubmit(msg);
}
@ -424,27 +446,28 @@ export class MarkdownTextArea extends Component<
let end: number = textarea.selectionEnd;
if (i.state.content.isNone()) {
i.state.content = Some("");
i.setState({ content: Some("") });
}
let content = i.state.content.unwrap();
if (start !== end) {
let selectedText = content.substring(start, end);
i.state.content = Some(
`${content.substring(0, start)}[${selectedText}]()${content.substring(
end
)}`
);
i.setState({
content: Some(
`${content.substring(0, start)}[${selectedText}]()${content.substring(
end
)}`
),
});
textarea.focus();
setTimeout(() => (textarea.selectionEnd = end + 3), 10);
} else {
i.state.content = Some(`${content} []()`);
i.setState({ content: Some(`${content} []()`) });
textarea.focus();
setTimeout(() => (textarea.selectionEnd -= 1), 10);
}
i.contentChange();
i.setState(i.state);
}
simpleSurround(chars: string) {
@ -461,7 +484,7 @@ export class MarkdownTextArea extends Component<
emptyChars = "___"
) {
if (this.state.content.isNone()) {
this.state.content = Some("");
this.setState({ content: Some("") });
}
let textarea: any = document.getElementById(this.id);
let start: number = textarea.selectionStart;
@ -471,19 +494,20 @@ export class MarkdownTextArea extends Component<
if (start !== end) {
let selectedText = content.substring(start, end);
this.state.content = Some(
`${content.substring(
0,
start
)}${beforeChars}${selectedText}${afterChars}${content.substring(end)}`
);
this.setState({
content: Some(
`${content.substring(
0,
start
)}${beforeChars}${selectedText}${afterChars}${content.substring(end)}`
),
});
} else {
this.state.content = Some(
`${content}${beforeChars}${emptyChars}${afterChars}`
);
this.setState({
content: Some(`${content}${beforeChars}${emptyChars}${afterChars}`),
});
}
this.contentChange();
this.setState(this.state);
textarea.focus();
@ -555,9 +579,11 @@ export class MarkdownTextArea extends Component<
simpleInsert(chars: string) {
if (this.state.content.isNone()) {
this.state.content = Some(`${chars} `);
this.setState({ content: Some(`${chars} `) });
} else {
this.state.content = Some(`${this.state.content.unwrap()}\n${chars} `);
this.setState({
content: Some(`${this.state.content.unwrap()}\n${chars} `),
});
}
let textarea: any = document.getElementById(this.id);
@ -566,7 +592,6 @@ export class MarkdownTextArea extends Component<
autosize.update(textarea);
}, 10);
this.contentChange();
this.setState(this.state);
}
handleInsertSpoiler(i: MarkdownTextArea, event: any) {
@ -586,13 +611,14 @@ export class MarkdownTextArea extends Component<
.map(t => `> ${t}`)
.join("\n") + "\n\n";
if (this.state.content.isNone()) {
this.state.content = Some("");
this.setState({ content: Some("") });
} else {
this.state.content = Some(`${this.state.content.unwrap()}\n`);
this.setState({ content: Some(`${this.state.content.unwrap()}\n`) });
}
this.state.content = Some(`${this.state.content.unwrap()}${quotedText}`);
this.setState({
content: Some(`${this.state.content.unwrap()}${quotedText}`),
});
this.contentChange();
this.setState(this.state);
// Not sure why this needs a delay
setTimeout(() => autosize.update(textarea), 10);
}

6
src/shared/components/common/paginator.tsx
View file

@ -12,16 +12,16 @@ export class Paginator extends Component<PaginatorProps, any> {
}
render() {
return (
<div class="my-2">
<div className="my-2">
<button
class="btn btn-secondary mr-2"
className="btn btn-secondary mr-2"
disabled={this.props.page == 1}
onClick={linkEvent(this, this.handlePrev)}
>
{i18n.t("prev")}
</button>
<button
class="btn btn-secondary"
className="btn btn-secondary"
onClick={linkEvent(this, this.handleNext)}
>
{i18n.t("next")}

11
src/shared/components/common/registration-application.tsx
View file

@ -88,18 +88,20 @@ export class RegistrationApplication extends Component<
})}
{this.state.denyExpanded && (
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<div className="form-group row">
<label className="col-sm-2 col-form-label">
{i18n.t("deny_reason")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<MarkdownTextArea
initialContent={this.state.denyReason}
initialLanguageId={None}
onContentChange={this.handleDenyReasonChange}
placeholder={None}
buttonTitle={None}
maxLength={None}
hideNavigationWarnings
allLanguages={[]}
/>
</div>
</div>
@ -157,7 +159,6 @@ export class RegistrationApplication extends Component<
}
handleDenyReasonChange(val: string) {
this.state.denyReason = Some(val);
this.setState(this.state);
this.setState({ denyReason: Some(val) });
}
}

14
src/shared/components/common/sort-select.tsx
View file

@ -40,23 +40,27 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
name={this.id}
value={this.state.sort}
onChange={linkEvent(this, this.handleSortChange)}
class="custom-select w-auto mr-2 mb-2"
className="custom-select w-auto mr-2 mb-2"
aria-label={i18n.t("sort_type")}
>
<option disabled aria-hidden="true">
{i18n.t("sort_type")}
</option>
{!this.props.hideHot && [
<option value={SortType.Hot}>{i18n.t("hot")}</option>,
<option value={SortType.Active}>{i18n.t("active")}</option>,
<option key={SortType.Hot} value={SortType.Hot}>
{i18n.t("hot")}
</option>,
<option key={SortType.Active} value={SortType.Active}>
{i18n.t("active")}
</option>,
]}
<option value={SortType.New}>{i18n.t("new")}</option>
<option value={SortType.Old}>{i18n.t("old")}</option>
{!this.props.hideMostComments && [
<option value={SortType.MostComments}>
<option key={SortType.MostComments} value={SortType.MostComments}>
{i18n.t("most_comments")}
</option>,
<option value={SortType.NewComments}>
<option key={SortType.NewComments} value={SortType.NewComments}>
{i18n.t("new_comments")}
</option>,
]}

4
src/shared/components/common/symbols.tsx
View file

@ -17,7 +17,7 @@ export const SYMBOLS = (
viewBox="0 0 196.52 196.52"
xmlns="http://www.w3.org/2000/svg"
>
<g color="#000" font-weight="400" font-family="sans-serif">
<g color="#000" fontWeight="400" fontFamily="sans-serif">
<path
d="M47.924 72.797a18.228 18.228 0 0 1-7.796 7.76l42.799 42.965 10.318-5.23zm56.453 56.67l-10.319 5.23 21.686 21.77a18.228 18.228 0 0 1 7.798-7.76z"
overflow="visible"
@ -69,7 +69,7 @@ export const SYMBOLS = (
fill="#dbb210"
/>
</g>
<g transform="rotate(3.118 600.365 106.46)" fill-opacity=".996">
<g transform="rotate(3.118 600.365 106.46)" fillOpacity=".996">
<circle cx="106.266" cy="51.536" r="16.571" fill="#ffca00" />
<circle cx="171.428" cy="110.193" r="16.571" fill="#64ff00" />
<circle cx="135.764" cy="190.277" r="16.571" fill="#00a3ff" />

66
src/shared/components/community/communities.tsx
View file

@ -75,8 +75,11 @@ export class Communities extends Component<any, CommunitiesState> {
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
let listRes = Some(this.isoData.routeData[0] as ListCommunitiesResponse);
this.state.listCommunitiesResponse = listRes;
this.state.loading = false;
this.state = {
...this.state,
listCommunitiesResponse: listRes,
loading: false,
};
} else {
this.refetch();
}
@ -114,7 +117,7 @@ export class Communities extends Component<any, CommunitiesState> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -127,10 +130,10 @@ export class Communities extends Component<any, CommunitiesState> {
</h5>
) : (
<div>
<div class="row">
<div class="col-md-6">
<div className="row">
<div className="col-md-6">
<h4>{i18n.t("list_of_communities")}</h4>
<span class="mb-2">
<span className="mb-2">
<ListingTypeSelect
type_={this.state.listingType}
showLocal={showLocal(this.isoData)}
@ -139,24 +142,27 @@ export class Communities extends Component<any, CommunitiesState> {
/>
</span>
</div>
<div class="col-md-6">
<div class="float-md-right">{this.searchForm()}</div>
<div className="col-md-6">
<div className="float-md-right">{this.searchForm()}</div>
</div>
</div>
<div class="table-responsive">
<table id="community_table" class="table table-sm table-hover">
<thead class="pointer">
<div className="table-responsive">
<table
id="community_table"
className="table table-sm table-hover"
>
<thead className="pointer">
<tr>
<th>{i18n.t("name")}</th>
<th class="text-right">{i18n.t("subscribers")}</th>
<th class="text-right">
<th className="text-right">{i18n.t("subscribers")}</th>
<th className="text-right">
{i18n.t("users")} / {i18n.t("month")}
</th>
<th class="text-right d-none d-lg-table-cell">
<th className="text-right d-none d-lg-table-cell">
{i18n.t("posts")}
</th>
<th class="text-right d-none d-lg-table-cell">
<th className="text-right d-none d-lg-table-cell">
{i18n.t("comments")}
</th>
<th></th>
@ -167,26 +173,26 @@ export class Communities extends Component<any, CommunitiesState> {
.map(l => l.communities)
.unwrapOr([])
.map(cv => (
<tr>
<tr key={cv.community.id}>
<td>
<CommunityLink community={cv.community} />
</td>
<td class="text-right">
<td className="text-right">
{numToSI(cv.counts.subscribers)}
</td>
<td class="text-right">
<td className="text-right">
{numToSI(cv.counts.users_active_month)}
</td>
<td class="text-right d-none d-lg-table-cell">
<td className="text-right d-none d-lg-table-cell">
{numToSI(cv.counts.posts)}
</td>
<td class="text-right d-none d-lg-table-cell">
<td className="text-right d-none d-lg-table-cell">
{numToSI(cv.counts.comments)}
</td>
<td class="text-right">
<td className="text-right">
{cv.subscribed == SubscribedType.Subscribed && (
<button
class="btn btn-link d-inline-block"
className="btn btn-link d-inline-block"
onClick={linkEvent(
cv.community.id,
this.handleUnsubscribe
@ -197,7 +203,7 @@ export class Communities extends Component<any, CommunitiesState> {
)}
{cv.subscribed == SubscribedType.NotSubscribed && (
<button
class="btn btn-link d-inline-block"
className="btn btn-link d-inline-block"
onClick={linkEvent(
cv.community.id,
this.handleSubscribe
@ -207,7 +213,7 @@ export class Communities extends Component<any, CommunitiesState> {
</button>
)}
{cv.subscribed == SubscribedType.Pending && (
<div class="text-warning d-inline-block">
<div className="text-warning d-inline-block">
{i18n.t("subscribe_pending")}
</div>
)}
@ -230,23 +236,23 @@ export class Communities extends Component<any, CommunitiesState> {
searchForm() {
return (
<form
class="form-inline"
className="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<input
type="text"
id="communities-search"
class="form-control mr-2 mb-2"
className="form-control mr-2 mb-2"
value={this.state.searchText}
placeholder={`${i18n.t("search")}...`}
onInput={linkEvent(this, this.handleSearchChange)}
required
minLength={3}
/>
<label class="sr-only" htmlFor="communities-search">
<label className="sr-only" htmlFor="communities-search">
{i18n.t("search")}
</label>
<button type="submit" class="btn btn-secondary mr-2 mb-2">
<button type="submit" className="btn btn-secondary mr-2 mb-2">
<span>{i18n.t("search")}</span>
</button>
</form>
@ -343,10 +349,8 @@ export class Communities extends Component<any, CommunitiesState> {
msg,
ListCommunitiesResponse
);
this.state.listCommunitiesResponse = Some(data);
this.state.loading = false;
this.setState({ listCommunitiesResponse: Some(data), loading: false });
window.scrollTo(0, 0);
this.setState(this.state);
} else if (op == UserOperation.FollowCommunity) {
let data = wsJsonToRes<CommunityResponse>(msg, CommunityResponse);
this.state.listCommunitiesResponse.match({

118
src/shared/components/community/community-form.tsx
View file

@ -73,9 +73,14 @@ export class CommunityForm extends Component<
this.handleBannerUpload = this.handleBannerUpload.bind(this);
this.handleBannerRemove = this.handleBannerRemove.bind(this);
this.props.community_view.match({
some: cv => {
this.state.communityForm = new CreateCommunity({
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
if (this.props.community_view.isSome()) {
let cv = this.props.community_view.unwrap();
this.state = {
...this.state,
communityForm: new CreateCommunity({
name: cv.community.name,
title: cv.community.title,
description: cv.community.description,
@ -86,13 +91,9 @@ export class CommunityForm extends Component<
cv.community.posting_restricted_to_mods
),
auth: undefined,
});
},
none: void 0,
});
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
}),
};
}
}
componentDidUpdate() {
@ -127,24 +128,24 @@ export class CommunityForm extends Component<
/>
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
{this.props.community_view.isNone() && (
<div class="form-group row">
<div className="form-group row">
<label
class="col-12 col-sm-2 col-form-label"
className="col-12 col-sm-2 col-form-label"
htmlFor="community-name"
>
{i18n.t("name")}
<span
class="position-absolute pointer unselectable ml-2 text-muted"
className="position-absolute pointer unselectable ml-2 text-muted"
data-tippy-content={i18n.t("name_explain")}
>
<Icon icon="help-circle" classes="icon-inline" />
</span>
</label>
<div class="col-12 col-sm-10">
<div className="col-12 col-sm-10">
<input
type="text"
id="community-name"
class="form-control"
className="form-control"
value={this.state.communityForm.name}
onInput={linkEvent(this, this.handleCommunityNameChange)}
required
@ -155,35 +156,35 @@ export class CommunityForm extends Component<
</div>
</div>
)}
<div class="form-group row">
<div className="form-group row">
<label
class="col-12 col-sm-2 col-form-label"
className="col-12 col-sm-2 col-form-label"
htmlFor="community-title"
>
{i18n.t("display_name")}
<span
class="position-absolute pointer unselectable ml-2 text-muted"
className="position-absolute pointer unselectable ml-2 text-muted"
data-tippy-content={i18n.t("display_name_explain")}
>
<Icon icon="help-circle" classes="icon-inline" />
</span>
</label>
<div class="col-12 col-sm-10">
<div className="col-12 col-sm-10">
<input
type="text"
id="community-title"
value={this.state.communityForm.title}
onInput={linkEvent(this, this.handleCommunityTitleChange)}
class="form-control"
className="form-control"
required
minLength={3}
maxLength={100}
/>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-2">{i18n.t("icon")}</label>
<div class="col-12 col-sm-10">
<div className="form-group row">
<label className="col-12 col-sm-2">{i18n.t("icon")}</label>
<div className="col-12 col-sm-10">
<ImageUploadForm
uploadTitle={i18n.t("upload_icon")}
imageSrc={this.state.communityForm.icon}
@ -193,9 +194,9 @@ export class CommunityForm extends Component<
/>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-2">{i18n.t("banner")}</label>
<div class="col-12 col-sm-10">
<div className="form-group row">
<label className="col-12 col-sm-2">{i18n.t("banner")}</label>
<div className="col-12 col-sm-10">
<ImageUploadForm
uploadTitle={i18n.t("upload_banner")}
imageSrc={this.state.communityForm.banner}
@ -204,30 +205,32 @@ export class CommunityForm extends Component<
/>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
<div className="form-group row">
<label className="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
{i18n.t("sidebar")}
</label>
<div class="col-12 col-sm-10">
<div className="col-12 col-sm-10">
<MarkdownTextArea
initialContent={this.state.communityForm.description}
initialLanguageId={None}
placeholder={Some("description")}
buttonTitle={None}
maxLength={None}
onContentChange={this.handleCommunityDescriptionChange}
allLanguages={[]}
/>
</div>
</div>
{this.props.enableNsfw && (
<div class="form-group row">
<legend class="col-form-label col-sm-2 pt-0">
<div className="form-group row">
<legend className="col-form-label col-sm-2 pt-0">
{i18n.t("nsfw")}
</legend>
<div class="col-10">
<div class="form-check">
<div className="col-10">
<div className="form-check">
<input
class="form-check-input position-static"
className="form-check-input position-static"
id="community-nsfw"
type="checkbox"
checked={toUndefined(this.state.communityForm.nsfw)}
@ -237,14 +240,14 @@ export class CommunityForm extends Component<
</div>
</div>
)}
<div class="form-group row">
<legend class="col-form-label col-6 pt-0">
<div className="form-group row">
<legend className="col-form-label col-6 pt-0">
{i18n.t("only_mods_can_post_in_community")}
</legend>
<div class="col-6">
<div class="form-check">
<div className="col-6">
<div className="form-check">
<input
class="form-check-input position-static"
className="form-check-input position-static"
id="community-only-mods-can-post"
type="checkbox"
checked={toUndefined(
@ -258,11 +261,11 @@ export class CommunityForm extends Component<
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div className="form-group row">
<div className="col-12">
<button
type="submit"
class="btn btn-secondary mr-2"
className="btn btn-secondary mr-2"
disabled={this.state.loading}
>
{this.state.loading ? (
@ -276,7 +279,7 @@ export class CommunityForm extends Component<
{this.props.community_view.isSome() && (
<button
type="button"
class="btn btn-secondary"
className="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
{i18n.t("cancel")}
@ -291,7 +294,7 @@ export class CommunityForm extends Component<
handleCreateCommunitySubmit(i: CommunityForm, event: any) {
event.preventDefault();
i.state.loading = true;
i.setState({ loading: true });
let cForm = i.state.communityForm;
cForm.auth = auth().unwrap();
@ -330,17 +333,18 @@ export class CommunityForm extends Component<
}
handleCommunityDescriptionChange(val: string) {
this.state.communityForm.description = Some(val);
this.setState(this.state);
this.setState(s => ((s.communityForm.description = Some(val)), s));
}
handleCommunityNsfwChange(i: CommunityForm, event: any) {
i.state.communityForm.nsfw = event.target.checked;
i.state.communityForm.nsfw = Some(event.target.checked);
i.setState(i.state);
}
handleCommunityPostingRestrictedToMods(i: CommunityForm, event: any) {
i.state.communityForm.posting_restricted_to_mods = event.target.checked;
i.state.communityForm.posting_restricted_to_mods = Some(
event.target.checked
);
i.setState(i.state);
}
@ -349,23 +353,19 @@ export class CommunityForm extends Component<
}
handleIconUpload(url: string) {
this.state.communityForm.icon = Some(url);
this.setState(this.state);
this.setState(s => ((s.communityForm.icon = Some(url)), s));
}
handleIconRemove() {
this.state.communityForm.icon = Some("");
this.setState(this.state);
this.setState(s => ((s.communityForm.icon = Some("")), s));
}
handleBannerUpload(url: string) {
this.state.communityForm.banner = Some(url);
this.setState(this.state);
this.setState(s => ((s.communityForm.banner = Some(url)), s));
}
handleBannerRemove() {
this.state.communityForm.banner = Some("");
this.setState(this.state);
this.setState(s => ((s.communityForm.banner = Some("")), s));
}
parseMessage(msg: any) {
@ -374,12 +374,10 @@ export class CommunityForm extends Component<
if (msg.error) {
// Errors handled by top level pages
// toast(i18n.t(msg.error), "danger");
this.state.loading = false;
this.setState(this.state);
this.setState({ loading: false });
return;
} else if (op == UserOperation.CreateCommunity) {
let data = wsJsonToRes<CommunityResponse>(msg, CommunityResponse);
this.state.loading = false;
this.props.onCreate(data.community_view);
// Update myUserInfo
@ -401,7 +399,7 @@ export class CommunityForm extends Component<
});
} else if (op == UserOperation.EditCommunity) {
let data = wsJsonToRes<CommunityResponse>(msg, CommunityResponse);
this.state.loading = false;
this.setState({ loading: false });
this.props.onEdit(data.community_view);
let community = data.community_view.community;

2
src/shared/components/community/community-link.tsx
View file

@ -64,7 +64,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
some: icon => <PictrsImage src={icon} icon />,
none: <></>,
})}
<span class="overflow-wrap-anywhere">{displayName}</span>
<span className="overflow-wrap-anywhere">{displayName}</span>
</>
);
}

93
src/shared/components/community/community.tsx
View file

@ -49,7 +49,9 @@ import {
getDataTypeFromProps,
getPageFromProps,
getSortTypeFromProps,
isPostBlocked,
notifyPost,
nsfwCheck,
postToCommentSortType,
relTags,
restoreScrollPosition,
@ -139,24 +141,27 @@ export class Community extends Component<any, State> {
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.communityRes = Some(
this.isoData.routeData[0] as GetCommunityResponse
);
this.state = {
...this.state,
communityRes: Some(this.isoData.routeData[0] as GetCommunityResponse),
};
let postsRes = Some(this.isoData.routeData[1] as GetPostsResponse);
let commentsRes = Some(this.isoData.routeData[2] as GetCommentsResponse);
postsRes.match({
some: pvs => (this.state.posts = pvs.posts),
none: void 0,
});
commentsRes.match({
some: cvs => (this.state.comments = cvs.comments),
none: void 0,
});
if (postsRes.isSome()) {
this.state = { ...this.state, posts: postsRes.unwrap().posts };
}
this.state.communityLoading = false;
this.state.postsLoading = false;
this.state.commentsLoading = false;
if (commentsRes.isSome()) {
this.state = { ...this.state, comments: commentsRes.unwrap().comments };
}
this.state = {
...this.state,
communityLoading: false,
postsLoading: false,
commentsLoading: false,
};
} else {
this.fetchCommunity();
this.fetchData();
@ -278,7 +283,7 @@ export class Community extends Component<any, State> {
render() {
return (
<div class="container">
<div className="container">
{this.state.communityLoading ? (
<h5>
<Spinner large />
@ -294,12 +299,12 @@ export class Community extends Component<any, State> {
image={res.community_view.community.icon}
/>
<div class="row">
<div class="col-12 col-md-8">
<div className="row">
<div className="col-12 col-md-8">
{this.communityInfo()}
<div class="d-block d-md-none">
<div className="d-block d-md-none">
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
className="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowSidebarMobile)}
>
{i18n.t("sidebar")}{" "}
@ -344,7 +349,7 @@ export class Community extends Component<any, State> {
onChange={this.handlePageChange}
/>
</div>
<div class="d-none d-md-block col-md-4">
<div className="d-none d-md-block col-md-4">
<Sidebar
community_view={res.community_view}
moderators={res.moderators}
@ -388,6 +393,7 @@ export class Community extends Component<any, State> {
removeDuplicates
enableDownvotes={enableDownvotes(this.state.siteRes)}
enableNsfw={enableNsfw(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
)
) : this.state.commentsLoading ? (
@ -404,6 +410,7 @@ export class Community extends Component<any, State> {
moderators={this.state.communityRes.map(r => r.moderators)}
admins={Some(this.state.siteRes.admins)}
maxCommentsShown={None}
allLanguages={this.state.siteRes.all_languages}
/>
);
}
@ -413,9 +420,9 @@ export class Community extends Component<any, State> {
.map(r => r.community_view.community)
.match({
some: community => (
<div class="mb-2">
<div className="mb-2">
<BannerIconHeader banner={community.banner} icon={community.icon} />
<h5 class="mb-0 overflow-wrap-anywhere">{community.title}</h5>
<h5 className="mb-0 overflow-wrap-anywhere">{community.title}</h5>
<CommunityLink
community={community}
realLink
@ -434,14 +441,14 @@ export class Community extends Component<any, State> {
communityRSSUrl(r.community_view.community.actor_id, this.state.sort)
);
return (
<div class="mb-3">
<span class="mr-3">
<div className="mb-3">
<span className="mr-3">
<DataTypeSelect
type_={this.state.dataType}
onChange={this.handleDataTypeChange}
/>
</span>
<span class="mr-2">
<span className="mr-2">
<SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
</span>
{communityRss.match({
@ -475,8 +482,7 @@ export class Community extends Component<any, State> {
}
handleShowSidebarMobile(i: Community) {
i.state.showSidebarMobile = !i.state.showSidebarMobile;
i.setState(i.state);
i.setState({ showSidebarMobile: !i.state.showSidebarMobile });
}
updateUrl(paramUpdates: UrlParams) {
@ -543,9 +549,7 @@ export class Community extends Component<any, State> {
this.fetchData();
} else if (op == UserOperation.GetCommunity) {
let data = wsJsonToRes<GetCommunityResponse>(msg, GetCommunityResponse);
this.state.communityRes = Some(data);
this.state.communityLoading = false;
this.setState(this.state);
this.setState({ communityRes: Some(data), communityLoading: false });
// TODO why is there no auth in this form?
WebSocketService.Instance.send(
wsClient.communityJoin({
@ -576,9 +580,7 @@ export class Community extends Component<any, State> {
this.setState(this.state);
} else if (op == UserOperation.GetPosts) {
let data = wsJsonToRes<GetPostsResponse>(msg, GetPostsResponse);
this.state.posts = data.posts;
this.state.postsLoading = false;
this.setState(this.state);
this.setState({ posts: data.posts, postsLoading: false });
restoreScrollPosition(this.context);
setupTippy();
} else if (
@ -594,15 +596,24 @@ export class Community extends Component<any, State> {
this.setState(this.state);
} else if (op == UserOperation.CreatePost) {
let data = wsJsonToRes<PostResponse>(msg, PostResponse);
this.state.posts.unshift(data.post_view);
let showPostNotifs = UserService.Instance.myUserInfo
.map(m => m.local_user_view.local_user.show_new_post_notifs)
.unwrapOr(false);
// Only push these if you're on the first page, you pass the nsfw check, and it isn't blocked
//
if (
UserService.Instance.myUserInfo
.map(m => m.local_user_view.local_user.show_new_post_notifs)
.unwrapOr(false)
this.state.page == 1 &&
nsfwCheck(data.post_view) &&
!isPostBlocked(data.post_view)
) {
notifyPost(data.post_view, this.context.router);
this.state.posts.unshift(data.post_view);
if (showPostNotifs) {
notifyPost(data.post_view, this.context.router);
}
this.setState(this.state);
}
this.setState(this.state);
} else if (op == UserOperation.CreatePostLike) {
let data = wsJsonToRes<PostResponse>(msg, PostResponse);
createPostLikeFindRes(data.post_view, this.state.posts);
@ -631,9 +642,7 @@ export class Community extends Component<any, State> {
this.setState(this.state);
} else if (op == UserOperation.GetComments) {
let data = wsJsonToRes<GetCommentsResponse>(msg, GetCommentsResponse);
this.state.comments = data.comments;
this.state.commentsLoading = false;
this.setState(this.state);
this.setState({ comments: data.comments, commentsLoading: false });
} else if (
op == UserOperation.EditComment ||
op == UserOperation.DeleteComment ||

6
src/shared/components/community/create-community.tsx
View file

@ -56,7 +56,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -68,8 +68,8 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
<Spinner large />
</h5>
) : (
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{i18n.t("create_community")}</h5>
<CommunityForm
community_view={None}

183
src/shared/components/community/sidebar.tsx
View file

@ -91,16 +91,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
sidebar() {
return (
<div>
<div class="card border-secondary mb-3">
<div class="card-body">
<div className="card border-secondary mb-3">
<div className="card-body">
{this.communityTitle()}
{this.adminButtons()}
{this.subscribe()}
{this.canPost && this.createPost()}
{this.blockCommunity()}
</div>
</div>
<div class="card border-secondary mb-3">
<div class="card-body">
<div className="card border-secondary mb-3">
<div className="card-body">
{this.description()}
{this.badges()}
{this.mods()}
@ -119,10 +120,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{this.props.showIcon && (
<BannerIconHeader icon={community.icon} banner={community.banner} />
)}
<span class="mr-2">{community.title}</span>
<span className="mr-2">{community.title}</span>
{subscribed == SubscribedType.Subscribed && (
<button
class="btn btn-secondary btn-sm mr-2"
className="btn btn-secondary btn-sm mr-2"
onClick={linkEvent(this, this.handleUnsubscribe)}
>
<Icon icon="check" classes="icon-inline text-success mr-1" />
@ -131,7 +132,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
)}
{subscribed == SubscribedType.Pending && (
<button
class="btn btn-warning mr-2"
className="btn btn-warning mr-2"
onClick={linkEvent(this, this.handleUnsubscribe)}
>
{i18n.t("subscribe_pending")}
@ -168,7 +169,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
let community_view = this.props.community_view;
let counts = community_view.counts;
return (
<ul class="my-1 list-inline">
<ul className="my-1 list-inline">
<li className="list-inline-item badge badge-secondary">
{i18n.t("number_online", {
count: this.props.online,
@ -259,10 +260,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
mods() {
return (
<ul class="list-inline small">
<li class="list-inline-item">{i18n.t("mods")}: </li>
<ul className="list-inline small">
<li className="list-inline-item">{i18n.t("mods")}: </li>
{this.props.moderators.map(mod => (
<li class="list-inline-item">
<li key={mod.moderator.id} className="list-inline-item">
<PersonListing person={mod.moderator} />
</li>
))}
@ -273,53 +274,59 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
createPost() {
let cv = this.props.community_view;
return (
cv.subscribed == SubscribedType.Subscribed && (
<Link
className={`btn btn-secondary btn-block mb-2 ${
cv.community.deleted || cv.community.removed ? "no-click" : ""
}`}
to={`/create_post?community_id=${cv.community.id}`}
>
{i18n.t("create_a_post")}
</Link>
)
<Link
className={`btn btn-secondary btn-block mb-2 ${
cv.community.deleted || cv.community.removed ? "no-click" : ""
}`}
to={`/create_post?community_id=${cv.community.id}`}
>
{i18n.t("create_a_post")}
</Link>
);
}
subscribe() {
let community_view = this.props.community_view;
let blocked = this.props.community_view.blocked;
return (
<div class="mb-2">
<div className="mb-2">
{community_view.subscribed == SubscribedType.NotSubscribed && (
<>
<button
class="btn btn-secondary btn-block"
onClick={linkEvent(this, this.handleSubscribe)}
>
{i18n.t("subscribe")}
</button>
{blocked ? (
<button
class="btn btn-danger btn-block"
onClick={linkEvent(this, this.handleUnblock)}
>
{i18n.t("unblock_community")}
</button>
) : (
<button
class="btn btn-danger btn-block"
onClick={linkEvent(this, this.handleBlock)}
>
{i18n.t("block_community")}
</button>
)}
</>
<button
className="btn btn-secondary btn-block"
onClick={linkEvent(this, this.handleSubscribe)}
>
{i18n.t("subscribe")}
</button>
)}
</div>
);
}
blockCommunity() {
let community_view = this.props.community_view;
let blocked = this.props.community_view.blocked;
return (
<div className="mb-2">
{community_view.subscribed == SubscribedType.NotSubscribed &&
(blocked ? (
<button
className="btn btn-danger btn-block"
onClick={linkEvent(this, this.handleUnblock)}
>
{i18n.t("unblock_community")}
</button>
) : (
<button
className="btn btn-danger btn-block"
onClick={linkEvent(this, this.handleBlock)}
>
{i18n.t("block_community")}
</button>
))}
</div>
);
}
description() {
let description = this.props.community_view.community.description;
return description.match({
@ -334,12 +341,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
let community_view = this.props.community_view;
return (
<>
<ul class="list-inline mb-1 text-muted font-weight-bold">
<ul className="list-inline mb-1 text-muted font-weight-bold">
{amMod(Some(this.props.moderators)) && (
<>
<li className="list-inline-item-action">
<button
class="btn btn-link text-muted d-inline-block"
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={i18n.t("edit")}
aria-label={i18n.t("edit")}
@ -351,7 +358,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
(!this.state.showConfirmLeaveModTeam ? (
<li className="list-inline-item-action">
<button
class="btn btn-link text-muted d-inline-block"
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(
this,
this.handleShowConfirmLeaveModTeamClick
@ -367,7 +374,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</li>
<li className="list-inline-item-action">
<button
class="btn btn-link text-muted d-inline-block"
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handleLeaveModTeamClick)}
>
{i18n.t("yes")}
@ -375,7 +382,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</li>
<li className="list-inline-item-action">
<button
class="btn btn-link text-muted d-inline-block"
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(
this,
this.handleCancelLeaveModTeamClick
@ -389,7 +396,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{amTopMod(Some(this.props.moderators)) && (
<li className="list-inline-item-action">
<button
class="btn btn-link text-muted d-inline-block"
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={
!community_view.community.deleted
@ -413,25 +420,25 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
)}
</>
)}
{amAdmin(Some(this.props.admins)) && (
{amAdmin() && (
<li className="list-inline-item">
{!this.props.community_view.community.removed ? (
<button
class="btn btn-link text-muted d-inline-block"
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handleModRemoveShow)}
>
{i18n.t("remove")}
</button>
) : (
<button
class="btn btn-link text-muted d-inline-block"
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handleModRemoveSubmit)}
>
{i18n.t("restore")}
</button>
)}
<button
class="btn btn-link text-muted d-inline-block"
className="btn btn-link text-muted d-inline-block"
onClick={linkEvent(this, this.handlePurgeCommunityShow)}
aria-label={i18n.t("purge_community")}
>
@ -442,14 +449,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</ul>
{this.state.showRemoveDialog && (
<form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
<div class="form-group">
<label class="col-form-label" htmlFor="remove-reason">
<div className="form-group">
<label className="col-form-label" htmlFor="remove-reason">
{i18n.t("reason")}
</label>
<input
type="text"
id="remove-reason"
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("optional")}
value={toUndefined(this.state.removeReason)}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
@ -460,8 +467,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{/* <label class="col-form-label">Expires</label> */}
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
{/* </div> */}
<div class="form-group">
<button type="submit" class="btn btn-secondary">
<div className="form-group">
<button type="submit" className="btn btn-secondary">
{i18n.t("remove_community")}
</button>
</div>
@ -469,29 +476,29 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
)}
{this.state.showPurgeDialog && (
<form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
<div class="form-group">
<div className="form-group">
<PurgeWarning />
</div>
<div class="form-group">
<label class="sr-only" htmlFor="purge-reason">
<div className="form-group">
<label className="sr-only" htmlFor="purge-reason">
{i18n.t("reason")}
</label>
<input
type="text"
id="purge-reason"
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("reason")}
value={toUndefined(this.state.purgeReason)}
onInput={linkEvent(this, this.handlePurgeReasonChange)}
/>
</div>
<div class="form-group">
<div className="form-group">
{this.state.purgeLoading ? (
<Spinner />
) : (
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={i18n.t("purge_community")}
>
{i18n.t("purge_community")}
@ -505,18 +512,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
}
handleEditClick(i: Sidebar) {
i.state.showEdit = true;
i.setState(i.state);
i.setState({ showEdit: true });
}
handleEditCommunity() {
this.state.showEdit = false;
this.setState(this.state);
this.setState({ showEdit: false });
}
handleEditCancel() {
this.state.showEdit = false;
this.setState(this.state);
this.setState({ showEdit: false });
}
handleDeleteClick(i: Sidebar, event: any) {
@ -530,8 +534,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
}
handleShowConfirmLeaveModTeamClick(i: Sidebar) {
i.state.showConfirmLeaveModTeam = true;
i.setState(i.state);
i.setState({ showConfirmLeaveModTeam: true });
}
handleLeaveModTeamClick(i: Sidebar) {
@ -544,16 +547,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.addModToCommunity(form));
i.state.showConfirmLeaveModTeam = false;
i.setState(i.state);
i.setState({ showConfirmLeaveModTeam: false });
},
none: void 0,
});
}
handleCancelLeaveModTeamClick(i: Sidebar) {
i.state.showConfirmLeaveModTeam = false;
i.setState(i.state);
i.setState({ showConfirmLeaveModTeam: false });
}
handleUnsubscribe(i: Sidebar, event: any) {
@ -599,23 +600,20 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
return (
!this.props.community_view.community.posting_restricted_to_mods ||
amMod(Some(this.props.moderators)) ||
amAdmin(Some(this.props.admins))
amAdmin()
);
}
handleModRemoveShow(i: Sidebar) {
i.state.showRemoveDialog = true;
i.setState(i.state);
i.setState({ showRemoveDialog: true });
}
handleModRemoveReasonChange(i: Sidebar, event: any) {
i.state.removeReason = Some(event.target.value);
i.setState(i.state);
i.setState({ removeReason: Some(event.target.value) });
}
handleModRemoveExpiresChange(i: Sidebar, event: any) {
i.state.removeExpires = Some(event.target.value);
i.setState(i.state);
i.setState({ removeExpires: Some(event.target.value) });
}
handleModRemoveSubmit(i: Sidebar, event: any) {
@ -629,19 +627,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
});
WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({ showRemoveDialog: false });
}
handlePurgeCommunityShow(i: Sidebar) {
i.state.showPurgeDialog = true;
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({ showPurgeDialog: true, showRemoveDialog: false });
}
handlePurgeReasonChange(i: Sidebar, event: any) {
i.state.purgeReason = Some(event.target.value);
i.setState(i.state);
i.setState({ purgeReason: Some(event.target.value) });
}
handlePurgeSubmit(i: Sidebar, event: any) {
@ -654,8 +648,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
});
WebSocketService.Instance.send(wsClient.purgeCommunity(form));
i.state.purgeLoading = true;
i.setState(i.state);
i.setState({ purgeLoading: true });
}
handleBlock(i: Sidebar, event: any) {

47
src/shared/components/home/admin-settings.tsx
View file

@ -59,10 +59,11 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.banned = (
this.isoData.routeData[0] as BannedPersonsResponse
).banned;
this.state.loading = false;
this.state = {
...this.state,
banned: (this.isoData.routeData[0] as BannedPersonsResponse).banned,
loading: false,
};
} else {
WebSocketService.Instance.send(
wsClient.getBannedPersons({
@ -103,14 +104,14 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
render() {
return (
<div class="container">
<div className="container">
{this.state.loading ? (
<h5>
<Spinner large />
</h5>
) : (
<div class="row">
<div class="col-12 col-md-6">
<div className="row">
<div className="col-12 col-md-6">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -127,7 +128,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
none: <></>,
})}
</div>
<div class="col-12 col-md-6">
<div className="col-12 col-md-6">
{this.admins()}
{this.bannedUsers()}
</div>
@ -141,9 +142,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
return (
<>
<h5>{capitalizeFirstLetter(i18n.t("admins"))}</h5>
<ul class="list-unstyled">
<ul className="list-unstyled">
{this.state.siteRes.admins.map(admin => (
<li class="list-inline-item">
<li key={admin.person.id} className="list-inline-item">
<PersonListing person={admin.person} />
</li>
))}
@ -157,7 +158,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
return (
<button
onClick={linkEvent(this, this.handleLeaveAdminTeam)}
class="btn btn-danger mb-2"
className="btn btn-danger mb-2"
>
{this.state.leaveAdminTeamLoading ? (
<Spinner />
@ -172,9 +173,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
return (
<>
<h5>{i18n.t("banned_users")}</h5>
<ul class="list-unstyled">
<ul className="list-unstyled">
{this.state.banned.map(banned => (
<li class="list-inline-item">
<li key={banned.person.id} className="list-inline-item">
<PersonListing person={banned.person} />
</li>
))}
@ -184,11 +185,10 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
}
handleLeaveAdminTeam(i: AdminSettings) {
i.state.leaveAdminTeamLoading = true;
i.setState({ leaveAdminTeamLoading: true });
WebSocketService.Instance.send(
wsClient.leaveAdmin({ auth: auth().unwrap() })
);
i.setState(i.state);
}
parseMessage(msg: any) {
@ -197,26 +197,21 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
if (msg.error) {
toast(i18n.t(msg.error), "danger");
this.context.router.history.push("/");
this.state.loading = false;
this.setState(this.state);
this.setState({ loading: false });
return;
} else if (op == UserOperation.EditSite) {
let data = wsJsonToRes<SiteResponse>(msg, SiteResponse);
this.state.siteRes.site_view = Some(data.site_view);
this.setState(this.state);
this.setState(s => ((s.siteRes.site_view = Some(data.site_view)), s));
toast(i18n.t("site_saved"));
} else if (op == UserOperation.GetBannedPersons) {
let data = wsJsonToRes<BannedPersonsResponse>(msg, BannedPersonsResponse);
this.state.banned = data.banned;
this.state.loading = false;
this.setState(this.state);
this.setState({ banned: data.banned, loading: false });
} else if (op == UserOperation.LeaveAdmin) {
let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
this.state.siteRes.site_view = data.site_view;
this.setState(this.state);
this.state.leaveAdminTeamLoading = false;
this.setState(s => ((s.siteRes.site_view = data.site_view), s));
this.setState({ leaveAdminTeamLoading: false });
toast(i18n.t("left_admin_team"));
this.setState(this.state);
this.context.router.history.push("/");
}
}

137
src/shared/components/home/home.tsx
View file

@ -38,6 +38,7 @@ import {
import { UserService, WebSocketService } from "../../services";
import {
auth,
canCreateCommunity,
commentsToFlatNodes,
createCommentLikeRes,
createPostLikeFindRes,
@ -51,7 +52,9 @@ import {
getPageFromProps,
getSortTypeFromProps,
isBrowser,
isPostBlocked,
notifyPost,
nsfwCheck,
postToCommentSortType,
relTags,
restoreScrollPosition,
@ -157,22 +160,24 @@ export class Home extends Component<any, HomeState> {
let commentsRes = Some(this.isoData.routeData[1] as GetCommentsResponse);
let trendingRes = this.isoData.routeData[2] as ListCommunitiesResponse;
postsRes.match({
some: pvs => (this.state.posts = pvs.posts),
none: void 0,
});
commentsRes.match({
some: cvs => (this.state.comments = cvs.comments),
none: void 0,
});
this.state.trendingCommunities = trendingRes.communities;
if (postsRes.isSome()) {
this.state = { ...this.state, posts: postsRes.unwrap().posts };
}
if (commentsRes.isSome()) {
this.state = { ...this.state, comments: commentsRes.unwrap().comments };
}
if (isBrowser()) {
WebSocketService.Instance.send(
wsClient.communityJoin({ community_id: 0 })
);
}
this.state.loading = false;
this.state = {
...this.state,
trendingCommunities: trendingRes.communities,
loading: false,
};
} else {
this.fetchTrendingCommunities();
this.fetchData();
@ -317,7 +322,7 @@ export class Home extends Component<any, HomeState> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -325,12 +330,14 @@ export class Home extends Component<any, HomeState> {
image={None}
/>
{this.state.siteRes.site_view.isSome() && (
<div class="row">
<main role="main" class="col-12 col-md-8">
<div class="d-block d-md-none">{this.mobileView()}</div>
<div className="row">
<main role="main" className="col-12 col-md-8">
<div className="d-block d-md-none">{this.mobileView()}</div>
{this.posts()}
</main>
<aside class="d-none d-md-block col-md-4">{this.mySidebar()}</aside>
<aside className="d-none d-md-block col-md-4">
{this.mySidebar()}
</aside>
</div>
)}
</div>
@ -347,11 +354,11 @@ export class Home extends Component<any, HomeState> {
mobileView() {
let siteRes = this.state.siteRes;
return (
<div class="row">
<div class="col-12">
<div className="row">
<div className="col-12">
{this.hasFollows && (
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
className="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowSubscribedMobile)}
>
{i18n.t("subscribed")}{" "}
@ -366,7 +373,7 @@ export class Home extends Component<any, HomeState> {
</button>
)}
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
className="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowTrendingMobile)}
>
{i18n.t("trending")}{" "}
@ -378,7 +385,7 @@ export class Home extends Component<any, HomeState> {
/>
</button>
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
className="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowSidebarMobile)}
>
{i18n.t("sidebar")}{" "}
@ -403,13 +410,13 @@ export class Home extends Component<any, HomeState> {
none: <></>,
})}
{this.state.showTrendingMobile && (
<div class="col-12 card border-secondary mb-3">
<div class="card-body">{this.trendingCommunities()}</div>
<div className="col-12 card border-secondary mb-3">
<div className="card-body">{this.trendingCommunities()}</div>
</div>
)}
{this.state.showSubscribedMobile && (
<div class="col-12 card border-secondary mb-3">
<div class="card-body">{this.subscribedCommunities()}</div>
<div className="col-12 card border-secondary mb-3">
<div className="card-body">{this.subscribedCommunities()}</div>
</div>
)}
</div>
@ -423,10 +430,11 @@ export class Home extends Component<any, HomeState> {
<div>
{!this.state.loading && (
<div>
<div class="card border-secondary mb-3">
<div class="card-body">
<div className="card border-secondary mb-3">
<div className="card-body">
{this.trendingCommunities()}
{this.createCommunityButton()}
{canCreateCommunity(this.state.siteRes) &&
this.createCommunityButton()}
{this.exploreCommunitiesButton()}
</div>
</div>
@ -443,8 +451,8 @@ export class Home extends Component<any, HomeState> {
none: <></>,
})}
{this.hasFollows && (
<div class="card border-secondary mb-3">
<div class="card-body">{this.subscribedCommunities()}</div>
<div className="card border-secondary mb-3">
<div className="card-body">{this.subscribedCommunities()}</div>
</div>
)}
</div>
@ -480,9 +488,12 @@ export class Home extends Component<any, HomeState> {
</Link>
</T>
</h5>
<ul class="list-inline mb-0">
<ul className="list-inline mb-0">
{this.state.trendingCommunities.map(cv => (
<li class="list-inline-item d-inline-block">
<li
key={cv.community.id}
className="list-inline-item d-inline-block"
>
<CommunityLink community={cv.community} />
</li>
))}
@ -502,7 +513,7 @@ export class Home extends Component<any, HomeState> {
</Link>
</T>
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
onClick={linkEvent(this, this.handleCollapseSubscribe)}
aria-label={i18n.t("collapse")}
data-tippy-content={i18n.t("collapse")}
@ -515,12 +526,15 @@ export class Home extends Component<any, HomeState> {
</button>
</h5>
{!this.state.subscribedCollapsed && (
<ul class="list-inline mb-0">
<ul className="list-inline mb-0">
{UserService.Instance.myUserInfo
.map(m => m.follows)
.unwrapOr([])
.map(cfv => (
<li class="list-inline-item d-inline-block">
<li
key={cfv.community.id}
className="list-inline-item d-inline-block"
>
<CommunityLink community={cfv.community} />
</li>
))}
@ -542,7 +556,7 @@ export class Home extends Component<any, HomeState> {
posts() {
return (
<div class="main-content-wrapper">
<div className="main-content-wrapper">
{this.state.loading ? (
<h5>
<Spinner large />
@ -569,6 +583,7 @@ export class Home extends Component<any, HomeState> {
removeDuplicates
enableDownvotes={enableDownvotes(this.state.siteRes)}
enableNsfw={enableNsfw(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
) : (
<CommentNodes
@ -581,6 +596,7 @@ export class Home extends Component<any, HomeState> {
showCommunity
showContext
enableDownvotes={enableDownvotes(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
);
}
@ -594,13 +610,13 @@ export class Home extends Component<any, HomeState> {
return (
<div className="mb-3">
<span class="mr-3">
<span className="mr-3">
<DataTypeSelect
type_={this.state.dataType}
onChange={this.handleDataTypeChange}
/>
</span>
<span class="mr-3">
<span className="mr-3">
<ListingTypeSelect
type_={this.state.listingType}
showLocal={showLocal(this.isoData)}
@ -608,7 +624,7 @@ export class Home extends Component<any, HomeState> {
onChange={this.handleListingTypeChange}
/>
</span>
<span class="mr-2">
<span className="mr-2">
<SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
</span>
{this.state.listingType == ListingType.All && (
@ -644,23 +660,19 @@ export class Home extends Component<any, HomeState> {
}
handleShowSubscribedMobile(i: Home) {
i.state.showSubscribedMobile = !i.state.showSubscribedMobile;
i.setState(i.state);
i.setState({ showSubscribedMobile: !i.state.showSubscribedMobile });
}
handleShowTrendingMobile(i: Home) {
i.state.showTrendingMobile = !i.state.showTrendingMobile;
i.setState(i.state);
i.setState({ showTrendingMobile: !i.state.showTrendingMobile });
}
handleShowSidebarMobile(i: Home) {
i.state.showSidebarMobile = !i.state.showSidebarMobile;
i.setState(i.state);
i.setState({ showSidebarMobile: !i.state.showSidebarMobile });
}
handleCollapseSubscribe(i: Home) {
i.state.subscribedCollapsed = !i.state.subscribedCollapsed;
i.setState(i.state);
i.setState({ subscribedCollapsed: !i.state.subscribedCollapsed });
}
handlePageChange(page: number) {
@ -731,18 +743,14 @@ export class Home extends Component<any, HomeState> {
msg,
ListCommunitiesResponse
);
this.state.trendingCommunities = data.communities;
this.setState(this.state);
this.setState({ trendingCommunities: data.communities });
} else if (op == UserOperation.EditSite) {
let data = wsJsonToRes<SiteResponse>(msg, SiteResponse);
this.state.siteRes.site_view = Some(data.site_view);
this.setState(this.state);
this.setState(s => ((s.siteRes.site_view = Some(data.site_view)), s));
toast(i18n.t("site_saved"));
} else if (op == UserOperation.GetPosts) {
let data = wsJsonToRes<GetPostsResponse>(msg, GetPostsResponse);
this.state.posts = data.posts;
this.state.loading = false;
this.setState(this.state);
this.setState({ posts: data.posts, loading: false });
WebSocketService.Instance.send(
wsClient.communityJoin({ community_id: 0 })
);
@ -750,21 +758,17 @@ export class Home extends Component<any, HomeState> {
setupTippy();
} else if (op == UserOperation.CreatePost) {
let data = wsJsonToRes<PostResponse>(msg, PostResponse);
// NSFW check
let nsfw = data.post_view.post.nsfw || data.post_view.community.nsfw;
let nsfwCheck =
!nsfw ||
(nsfw &&
UserService.Instance.myUserInfo
.map(m => m.local_user_view.local_user.show_nsfw)
.unwrapOr(false));
let showPostNotifs = UserService.Instance.myUserInfo
.map(m => m.local_user_view.local_user.show_new_post_notifs)
.unwrapOr(false);
// Only push these if you're on the first page, and you pass the nsfw check
if (this.state.page == 1 && nsfwCheck) {
// Only push these if you're on the first page, you pass the nsfw check, and it isn't blocked
if (
this.state.page == 1 &&
nsfwCheck(data.post_view) &&
!isPostBlocked(data.post_view)
) {
// If you're on subscribed, only push it if you're subscribed.
if (this.state.listingType == ListingType.Subscribed) {
if (
@ -812,8 +816,7 @@ export class Home extends Component<any, HomeState> {
this.setState(this.state);
} else if (op == UserOperation.AddAdmin) {
let data = wsJsonToRes<AddAdminResponse>(msg, AddAdminResponse);
this.state.siteRes.admins = data.admins;
this.setState(this.state);
this.setState(s => ((s.siteRes.admins = data.admins), s));
} else if (op == UserOperation.BanPerson) {
let data = wsJsonToRes<BanPersonResponse>(msg, BanPersonResponse);
this.state.posts
@ -823,9 +826,7 @@ export class Home extends Component<any, HomeState> {
this.setState(this.state);
} else if (op == UserOperation.GetComments) {
let data = wsJsonToRes<GetCommentsResponse>(msg, GetCommentsResponse);
this.state.comments = data.comments;
this.state.loading = false;
this.setState(this.state);
this.setState({ comments: data.comments, loading: false });
} else if (
op == UserOperation.EditComment ||
op == UserOperation.DeleteComment ||

12
src/shared/components/home/instances.tsx
View file

@ -30,22 +30,22 @@ export class Instances extends Component<any, InstancesState> {
render() {
return this.state.siteRes.federated_instances.match({
some: federated_instances => (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={None}
image={None}
/>
<div class="row">
<div class="col-md-6">
<div className="row">
<div className="col-md-6">
<h5>{i18n.t("linked_instances")}</h5>
{this.itemList(federated_instances.linked)}
</div>
{federated_instances.allowed.match({
some: allowed =>
allowed.length > 0 && (
<div class="col-md-6">
<div className="col-md-6">
<h5>{i18n.t("allowed_instances")}</h5>
{this.itemList(allowed)}
</div>
@ -55,7 +55,7 @@ export class Instances extends Component<any, InstancesState> {
{federated_instances.blocked.match({
some: blocked =>
blocked.length > 0 && (
<div class="col-md-6">
<div className="col-md-6">
<h5>{i18n.t("blocked_instances")}</h5>
{this.itemList(blocked)}
</div>
@ -74,7 +74,7 @@ export class Instances extends Component<any, InstancesState> {
return items.length > 0 ? (
<ul>
{items.map(i => (
<li>
<li key={i}>
<a href={`https://${i}`} rel={relTags}>
{i}
</a>

2
src/shared/components/home/legal.tsx
View file

@ -26,7 +26,7 @@ export class Legal extends Component<any, LegalState> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}

40
src/shared/components/home/login.tsx
View file

@ -81,15 +81,15 @@ export class Login extends Component<any, State> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={None}
image={None}
/>
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
</div>
</div>
);
@ -100,17 +100,17 @@ export class Login extends Component<any, State> {
<div>
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
<h5>{i18n.t("login")}</h5>
<div class="form-group row">
<div className="form-group row">
<label
class="col-sm-2 col-form-label"
className="col-sm-2 col-form-label"
htmlFor="login-email-or-username"
>
{i18n.t("email_or_username")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="text"
class="form-control"
className="form-control"
id="login-email-or-username"
value={this.state.loginForm.username_or_email}
onInput={linkEvent(this, this.handleLoginUsernameChange)}
@ -120,17 +120,17 @@ export class Login extends Component<any, State> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="login-password">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="login-password">
{i18n.t("password")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="password"
id="login-password"
value={this.state.loginForm.password}
onInput={linkEvent(this, this.handleLoginPasswordChange)}
class="form-control"
className="form-control"
autoComplete="current-password"
required
maxLength={60}
@ -146,9 +146,9 @@ export class Login extends Component<any, State> {
</button>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-secondary">
<div className="form-group row">
<div className="col-sm-10">
<button type="submit" className="btn btn-secondary">
{this.state.loginLoading ? <Spinner /> : i18n.t("login")}
</button>
</div>
@ -160,8 +160,7 @@ export class Login extends Component<any, State> {
handleLoginSubmit(i: Login, event: any) {
event.preventDefault();
i.state.loginLoading = true;
i.setState(i.state);
i.setState({ loginLoading: true });
WebSocketService.Instance.send(wsClient.login(i.state.loginForm));
}
@ -188,21 +187,18 @@ export class Login extends Component<any, State> {
console.log(msg);
if (msg.error) {
toast(i18n.t(msg.error), "danger");
this.state = this.emptyState;
this.setState(this.state);
this.setState(this.emptyState);
return;
} else {
if (op == UserOperation.Login) {
let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
this.state = this.emptyState;
this.setState(this.state);
this.setState(this.emptyState);
UserService.Instance.login(data);
} else if (op == UserOperation.PasswordReset) {
toast(i18n.t("reset_password_mail_sent"));
} else if (op == UserOperation.GetSite) {
let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
this.state.siteRes = data;
this.setState(this.state);
this.setState({ siteRes: data });
}
}
}

53
src/shared/components/home/setup.tsx
View file

@ -67,10 +67,10 @@ export class Setup extends Component<any, State> {
render() {
return (
<div class="container">
<div className="container">
<Helmet title={this.documentTitle} />
<div class="row">
<div class="col-12 offset-lg-3 col-lg-6">
<div className="row">
<div className="col-12 offset-lg-3 col-lg-6">
<h3>{i18n.t("lemmy_instance_setup")}</h3>
{!this.state.doneRegisteringUser ? (
this.registerUser()
@ -87,14 +87,14 @@ export class Setup extends Component<any, State> {
return (
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
<h5>{i18n.t("setup_admin")}</h5>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="username">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="username">
{i18n.t("username")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="text"
class="form-control"
className="form-control"
id="username"
value={this.state.userForm.username}
onInput={linkEvent(this, this.handleRegisterUsernameChange)}
@ -104,16 +104,16 @@ export class Setup extends Component<any, State> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="email">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="email">
{i18n.t("email")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="email"
id="email"
class="form-control"
className="form-control"
placeholder={i18n.t("optional")}
value={toUndefined(this.state.userForm.email)}
onInput={linkEvent(this, this.handleRegisterEmailChange)}
@ -121,17 +121,17 @@ export class Setup extends Component<any, State> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="password">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="password">
{i18n.t("password")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="password"
id="password"
value={this.state.userForm.password}
onInput={linkEvent(this, this.handleRegisterPasswordChange)}
class="form-control"
className="form-control"
required
autoComplete="new-password"
minLength={10}
@ -139,17 +139,17 @@ export class Setup extends Component<any, State> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="verify-password">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="verify-password">
{i18n.t("verify_password")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="password"
id="verify-password"
value={this.state.userForm.password_verify}
onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
class="form-control"
className="form-control"
required
autoComplete="new-password"
minLength={10}
@ -157,9 +157,9 @@ export class Setup extends Component<any, State> {
/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-secondary">
<div className="form-group row">
<div className="col-sm-10">
<button type="submit" className="btn btn-secondary">
{this.state.userLoading ? <Spinner /> : i18n.t("sign_up")}
</button>
</div>
@ -170,8 +170,7 @@ export class Setup extends Component<any, State> {
handleRegisterSubmit(i: Setup, event: any) {
event.preventDefault();
i.state.userLoading = true;
i.setState(i.state);
i.setState({ userLoading: true });
event.preventDefault();
WebSocketService.Instance.send(wsClient.register(i.state.userForm));
}
@ -200,14 +199,12 @@ export class Setup extends Component<any, State> {
let op = wsUserOp(msg);
if (msg.error) {
toast(i18n.t(msg.error), "danger");
this.state.userLoading = false;
this.setState(this.state);
this.setState({ userLoading: false });
return;
} else if (op == UserOperation.Register) {
let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
this.state.userLoading = false;
this.setState({ userLoading: false });
UserService.Instance.login(data);
this.setState(this.state);
} else if (op == UserOperation.CreateSite) {
window.location.href = "/";
}

140
src/shared/components/home/signup.tsx
View file

@ -127,15 +127,17 @@ export class Signup extends Component<any, State> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={None}
image={None}
/>
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3">{this.registerForm()}</div>
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3">
{this.registerForm()}
</div>
</div>
</div>
);
@ -148,8 +150,8 @@ export class Signup extends Component<any, State> {
<h5>{this.titleName(siteView)}</h5>
{this.isLemmyMl && (
<div class="form-group row">
<div class="mt-2 mb-0 alert alert-warning" role="alert">
<div className="form-group row">
<div className="mt-2 mb-0 alert alert-warning" role="alert">
<T i18nKey="lemmy_ml_registration_message">
#<a href={joinLemmyUrl}>#</a>
</T>
@ -157,16 +159,19 @@ export class Signup extends Component<any, State> {
</div>
)}
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="register-username">
<div className="form-group row">
<label
className="col-sm-2 col-form-label"
htmlFor="register-username"
>
{i18n.t("username")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="text"
id="register-username"
class="form-control"
className="form-control"
value={this.state.registerForm.username}
onInput={linkEvent(this, this.handleRegisterUsernameChange)}
required
@ -177,15 +182,15 @@ export class Signup extends Component<any, State> {
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="register-email">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="register-email">
{i18n.t("email")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="email"
id="register-email"
class="form-control"
className="form-control"
placeholder={
siteView.site.require_email_verification
? i18n.t("required")
@ -201,7 +206,7 @@ export class Signup extends Component<any, State> {
!this.state.registerForm.email
.map(validEmail)
.unwrapOr(true) && (
<div class="mt-2 mb-0 alert alert-warning" role="alert">
<div className="mt-2 mb-0 alert alert-warning" role="alert">
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
{i18n.t("no_password_reset")}
</div>
@ -209,11 +214,14 @@ export class Signup extends Component<any, State> {
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="register-password">
<div className="form-group row">
<label
className="col-sm-2 col-form-label"
htmlFor="register-password"
>
{i18n.t("password")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="password"
id="register-password"
@ -222,25 +230,25 @@ export class Signup extends Component<any, State> {
onInput={linkEvent(this, this.handleRegisterPasswordChange)}
minLength={10}
maxLength={60}
class="form-control"
className="form-control"
required
/>
{this.state.registerForm.password && (
<div class={this.passwordColorClass}>
<div className={this.passwordColorClass}>
{i18n.t(this.passwordStrength as I18nKeys)}
</div>
)}
</div>
</div>
<div class="form-group row">
<div className="form-group row">
<label
class="col-sm-2 col-form-label"
className="col-sm-2 col-form-label"
htmlFor="register-verify-password"
>
{i18n.t("verify_password")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="password"
id="register-verify-password"
@ -251,7 +259,7 @@ export class Signup extends Component<any, State> {
this.handleRegisterPasswordVerifyChange
)}
maxLength={60}
class="form-control"
className="form-control"
required
/>
</div>
@ -259,9 +267,9 @@ export class Signup extends Component<any, State> {
{siteView.site.require_application && (
<>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<div class="mt-2 alert alert-warning" role="alert">
<div className="form-group row">
<div className="offset-sm-2 col-sm-10">
<div className="mt-2 alert alert-warning" role="alert">
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
{i18n.t("fill_out_application")}
</div>
@ -277,21 +285,23 @@ export class Signup extends Component<any, State> {
</div>
</div>
<div class="form-group row">
<div className="form-group row">
<label
class="col-sm-2 col-form-label"
className="col-sm-2 col-form-label"
htmlFor="application_answer"
>
{i18n.t("answer")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<MarkdownTextArea
initialContent={None}
initialLanguageId={None}
placeholder={None}
buttonTitle={None}
maxLength={None}
onContentChange={this.handleAnswerChange}
hideNavigationWarnings
allLanguages={[]}
/>
</div>
</div>
@ -299,12 +309,12 @@ export class Signup extends Component<any, State> {
)}
{this.state.captcha.isSome() && (
<div class="form-group row">
<label class="col-sm-2" htmlFor="register-captcha">
<span class="mr-2">{i18n.t("enter_code")}</span>
<div className="form-group row">
<label className="col-sm-2" htmlFor="register-captcha">
<span className="mr-2">{i18n.t("enter_code")}</span>
<button
type="button"
class="btn btn-secondary"
className="btn btn-secondary"
onClick={linkEvent(this, this.handleRegenCaptcha)}
aria-label={i18n.t("captcha")}
>
@ -312,10 +322,10 @@ export class Signup extends Component<any, State> {
</button>
</label>
{this.showCaptcha()}
<div class="col-sm-6">
<div className="col-sm-6">
<input
type="text"
class="form-control"
className="form-control"
id="register-captcha"
value={toUndefined(this.state.registerForm.captcha_answer)}
onInput={linkEvent(
@ -328,11 +338,11 @@ export class Signup extends Component<any, State> {
</div>
)}
{siteView.site.enable_nsfw && (
<div class="form-group row">
<div class="col-sm-10">
<div class="form-check">
<div className="form-group row">
<div className="col-sm-10">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="register-show-nsfw"
type="checkbox"
checked={this.state.registerForm.show_nsfw}
@ -341,7 +351,10 @@ export class Signup extends Component<any, State> {
this.handleRegisterShowNsfwChange
)}
/>
<label class="form-check-label" htmlFor="register-show-nsfw">
<label
className="form-check-label"
htmlFor="register-show-nsfw"
>
{i18n.t("show_nsfw")}
</label>
</div>
@ -353,14 +366,14 @@ export class Signup extends Component<any, State> {
autoComplete="false"
name="a_password"
type="text"
class="form-control honeypot"
className="form-control honeypot"
id="register-honey"
value={toUndefined(this.state.registerForm.honeypot)}
onInput={linkEvent(this, this.handleHoneyPotChange)}
/>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-secondary">
<div className="form-group row">
<div className="col-sm-10">
<button type="submit" className="btn btn-secondary">
{this.state.registerLoading ? (
<Spinner />
) : (
@ -378,19 +391,19 @@ export class Signup extends Component<any, State> {
showCaptcha() {
return this.state.captcha.match({
some: captcha => (
<div class="col-sm-4">
<div className="col-sm-4">
{captcha.ok.match({
some: res => (
<>
<img
class="rounded-top img-fluid"
className="rounded-top img-fluid"
src={this.captchaPngSrc(res)}
style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
alt={i18n.t("captcha")}
/>
{res.wav.isSome() && (
<button
class="rounded-bottom btn btn-sm btn-secondary btn-block"
className="rounded-bottom btn btn-sm btn-secondary btn-block"
style="border-top-right-radius: 0; border-top-left-radius: 0;"
title={i18n.t("play_captcha_audio")}
onClick={linkEvent(this, this.handleCaptchaPlay)}
@ -431,8 +444,7 @@ export class Signup extends Component<any, State> {
handleRegisterSubmit(i: Signup, event: any) {
event.preventDefault();
i.state.registerLoading = true;
i.setState(i.state);
i.setState({ registerLoading: true });
WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
}
@ -470,8 +482,7 @@ export class Signup extends Component<any, State> {
}
handleAnswerChange(val: string) {
this.state.registerForm.answer = Some(val);
this.setState(this.state);
this.setState(s => ((s.registerForm.answer = Some(val)), s));
}
handleHoneyPotChange(i: Signup, event: any) {
@ -481,8 +492,7 @@ export class Signup extends Component<any, State> {
handleRegenCaptcha(i: Signup) {
i.audio = null;
i.state.captchaPlaying = false;
i.setState(i.state);
i.setState({ captchaPlaying: false });
WebSocketService.Instance.send(wsClient.getCaptcha());
}
@ -500,13 +510,11 @@ export class Signup extends Component<any, State> {
i.audio.play();
i.state.captchaPlaying = true;
i.setState(i.state);
i.setState({ captchaPlaying: true });
i.audio.addEventListener("ended", () => {
i.audio.currentTime = 0;
i.state.captchaPlaying = false;
i.setState(i.state);
i.setState({ captchaPlaying: false });
});
},
none: void 0,
@ -524,17 +532,15 @@ export class Signup extends Component<any, State> {
console.log(msg);
if (msg.error) {
toast(i18n.t(msg.error), "danger");
this.state = this.emptyState;
this.state.registerForm.captcha_answer = undefined;
this.setState(this.emptyState);
this.setState(s => ((s.registerForm.captcha_answer = undefined), s));
// Refetch another captcha
// WebSocketService.Instance.send(wsClient.getCaptcha());
this.setState(this.state);
return;
} else {
if (op == UserOperation.Register) {
let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
this.state = this.emptyState;
this.setState(this.state);
this.setState(this.emptyState);
// Only log them in if a jwt was set
if (data.jwt.isSome()) {
UserService.Instance.login(data);
@ -552,9 +558,10 @@ export class Signup extends Component<any, State> {
let data = wsJsonToRes<GetCaptchaResponse>(msg, GetCaptchaResponse);
data.ok.match({
some: res => {
this.state.captcha = Some(data);
this.state.registerForm.captcha_uuid = Some(res.uuid);
this.setState(this.state);
this.setState({ captcha: Some(data) });
this.setState(
s => ((s.registerForm.captcha_uuid = Some(res.uuid)), s)
);
},
none: void 0,
});
@ -562,8 +569,7 @@ export class Signup extends Component<any, State> {
toast(i18n.t("reset_password_mail_sent"));
} else if (op == UserOperation.GetSite) {
let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
this.state.siteRes = data;
this.setState(this.state);
this.setState({ siteRes: data });
}
}
}

241
src/shared/components/home/site-form.tsx
View file

@ -53,6 +53,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
legal_information: None,
description: None,
community_creation_admin_only: None,
application_email_admins: None,
auth: undefined,
hide_modlog_mod_names: Some(true),
}),
@ -78,9 +79,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
this.handleDefaultPostListingTypeChange =
this.handleDefaultPostListingTypeChange.bind(this);
this.props.site.match({
some: site => {
this.state.siteForm = new EditSite({
if (this.props.site.isSome()) {
let site = this.props.site.unwrap();
this.state = {
...this.state,
siteForm: new EditSite({
name: Some(site.name),
sidebar: site.sidebar,
description: site.description,
@ -99,23 +102,21 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
default_theme: Some(site.default_theme),
default_post_listing_type: Some(site.default_post_listing_type),
legal_information: site.legal_information,
application_email_admins: Some(site.application_email_admins),
hide_modlog_mod_names: site.hide_modlog_mod_names,
auth: undefined,
});
},
none: void 0,
});
}),
};
}
}
async componentDidMount() {
this.state.themeList = Some(await fetchThemeList());
this.setState(this.state);
this.setState({ themeList: Some(await fetchThemeList()) });
}
// Necessary to stop the loading
componentWillReceiveProps() {
this.state.loading = false;
this.setState(this.state);
this.setState({ loading: false });
}
componentDidUpdate() {
@ -157,15 +158,15 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
? capitalizeFirstLetter(i18n.t("save"))
: capitalizeFirstLetter(i18n.t("name"))
} ${i18n.t("your_site")}`}</h5>
<div class="form-group row">
<label class="col-12 col-form-label" htmlFor="create-site-name">
<div className="form-group row">
<label className="col-12 col-form-label" htmlFor="create-site-name">
{i18n.t("name")}
</label>
<div class="col-12">
<div className="col-12">
<input
type="text"
id="create-site-name"
class="form-control"
className="form-control"
value={toUndefined(this.state.siteForm.name)}
onInput={linkEvent(this, this.handleSiteNameChange)}
required
@ -174,7 +175,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/>
</div>
</div>
<div class="form-group">
<div className="form-group">
<label>{i18n.t("icon")}</label>
<ImageUploadForm
uploadTitle={i18n.t("upload_icon")}
@ -184,7 +185,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
rounded
/>
</div>
<div class="form-group">
<div className="form-group">
<label>{i18n.t("banner")}</label>
<ImageUploadForm
uploadTitle={i18n.t("upload_banner")}
@ -193,14 +194,14 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
onRemove={this.handleBannerRemove}
/>
</div>
<div class="form-group row">
<label class="col-12 col-form-label" htmlFor="site-desc">
<div className="form-group row">
<label className="col-12 col-form-label" htmlFor="site-desc">
{i18n.t("description")}
</label>
<div class="col-12">
<div className="col-12">
<input
type="text"
class="form-control"
className="form-control"
id="site-desc"
value={toUndefined(this.state.siteForm.description)}
onInput={linkEvent(this, this.handleSiteDescChange)}
@ -208,56 +209,62 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-form-label">{i18n.t("sidebar")}</label>
<div class="col-12">
<div className="form-group row">
<label className="col-12 col-form-label">{i18n.t("sidebar")}</label>
<div className="col-12">
<MarkdownTextArea
initialContent={this.state.siteForm.sidebar}
initialLanguageId={None}
placeholder={None}
buttonTitle={None}
maxLength={None}
onContentChange={this.handleSiteSidebarChange}
hideNavigationWarnings
allLanguages={[]}
/>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-form-label">
<div className="form-group row">
<label className="col-12 col-form-label">
{i18n.t("legal_information")}
</label>
<div class="col-12">
<div className="col-12">
<MarkdownTextArea
initialContent={this.state.siteForm.legal_information}
initialLanguageId={None}
placeholder={None}
buttonTitle={None}
maxLength={None}
onContentChange={this.handleSiteLegalInfoChange}
hideNavigationWarnings
allLanguages={[]}
/>
</div>
</div>
{this.state.siteForm.require_application.unwrapOr(false) && (
<div class="form-group row">
<label class="col-12 col-form-label">
<div className="form-group row">
<label className="col-12 col-form-label">
{i18n.t("application_questionnaire")}
</label>
<div class="col-12">
<div className="col-12">
<MarkdownTextArea
initialContent={this.state.siteForm.application_question}
initialLanguageId={None}
placeholder={None}
buttonTitle={None}
maxLength={None}
onContentChange={this.handleSiteApplicationQuestionChange}
hideNavigationWarnings
allLanguages={[]}
/>
</div>
</div>
)}
<div class="form-group row">
<div class="col-12">
<div class="form-check">
<div className="form-group row">
<div className="col-12">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="create-site-downvotes"
type="checkbox"
checked={toUndefined(this.state.siteForm.enable_downvotes)}
@ -266,24 +273,27 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
this.handleSiteEnableDownvotesChange
)}
/>
<label class="form-check-label" htmlFor="create-site-downvotes">
<label
className="form-check-label"
htmlFor="create-site-downvotes"
>
{i18n.t("enable_downvotes")}
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div class="form-check">
<div className="form-group row">
<div className="col-12">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="create-site-enable-nsfw"
type="checkbox"
checked={toUndefined(this.state.siteForm.enable_nsfw)}
onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="create-site-enable-nsfw"
>
{i18n.t("enable_nsfw")}
@ -291,11 +301,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div class="form-check">
<div className="form-group row">
<div className="col-12">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="create-site-open-registration"
type="checkbox"
checked={toUndefined(this.state.siteForm.open_registration)}
@ -305,7 +315,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="create-site-open-registration"
>
{i18n.t("open_registration")}
@ -313,11 +323,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div class="form-check">
<div className="form-group row">
<div className="col-12">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="create-site-community-creation-admin-only"
type="checkbox"
checked={toUndefined(
@ -329,7 +339,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="create-site-community-creation-admin-only"
>
{i18n.t("community_creation_admin_only")}
@ -337,11 +347,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div class="form-check">
<div className="form-group row">
<div className="col-12">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="create-site-require-email-verification"
type="checkbox"
checked={toUndefined(
@ -353,7 +363,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="create-site-require-email-verification"
>
{i18n.t("require_email_verification")}
@ -361,18 +371,18 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div class="form-check">
<div className="form-group row">
<div className="col-12">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="create-site-require-application"
type="checkbox"
checked={toUndefined(this.state.siteForm.require_application)}
onChange={linkEvent(this, this.handleSiteRequireApplication)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="create-site-require-application"
>
{i18n.t("require_registration_application")}
@ -380,10 +390,34 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div className="form-group row">
<div className="col-12">
<div className="form-check">
<input
className="form-check-input"
id="create-site-application-email-admins"
type="checkbox"
checked={toUndefined(
this.state.siteForm.application_email_admins
)}
onChange={linkEvent(
this,
this.handleSiteApplicationEmailAdmins
)}
/>
<label
className="form-check-label"
htmlFor="create-site-email-admins"
>
{i18n.t("application_email_admins")}
</label>
</div>
</div>
</div>
<div className="form-group row">
<div className="col-12">
<label
class="form-check-label mr-2"
className="form-check-label mr-2"
htmlFor="create-site-default-theme"
>
{i18n.t("theme")}
@ -392,19 +426,21 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
id="create-site-default-theme"
value={toUndefined(this.state.siteForm.default_theme)}
onChange={linkEvent(this, this.handleSiteDefaultTheme)}
class="custom-select w-auto"
className="custom-select w-auto"
>
<option value="browser">{i18n.t("browser_default")}</option>
{this.state.themeList.unwrapOr([]).map(theme => (
<option value={theme}>{theme}</option>
<option key={theme} value={theme}>
{theme}
</option>
))}
</select>
</div>
</div>
{this.props.showLocal && (
<form className="form-group row">
<label class="col-sm-3">{i18n.t("listing_type")}</label>
<div class="col-sm-9">
<label className="col-sm-3">{i18n.t("listing_type")}</label>
<div className="col-sm-9">
<ListingTypeSelect
type_={
ListingType[
@ -420,18 +456,18 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</form>
)}
<div class="form-group row">
<div class="col-12">
<div class="form-check">
<div className="form-group row">
<div className="col-12">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="create-site-private-instance"
type="checkbox"
value={toUndefined(this.state.siteForm.default_theme)}
checked={toUndefined(this.state.siteForm.private_instance)}
onChange={linkEvent(this, this.handleSitePrivateInstance)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="create-site-private-instance"
>
{i18n.t("private_instance")}
@ -439,11 +475,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div class="form-check">
<div className="form-group row">
<div className="col-12">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="create-site-hide-modlog-mod-names"
type="checkbox"
checked={toUndefined(
@ -452,7 +488,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
onChange={linkEvent(this, this.handleSiteHideModlogModNames)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="create-site-hide-modlog-mod-names"
>
{i18n.t("hide_modlog_mod_names")}
@ -460,11 +496,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div className="form-group row">
<div className="col-12">
<button
type="submit"
class="btn btn-secondary mr-2"
className="btn btn-secondary mr-2"
disabled={this.state.loading}
>
{this.state.loading ? (
@ -478,7 +514,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
{this.props.site.isSome() && (
<button
type="button"
class="btn btn-secondary"
className="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
{i18n.t("cancel")}
@ -493,8 +529,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
handleCreateSiteSubmit(i: SiteForm, event: any) {
event.preventDefault();
i.state.loading = true;
i.state.siteForm.auth = auth().unwrap();
i.setState({ loading: true });
i.setState(s => ((s.siteForm.auth = auth().unwrap()), s));
if (i.props.site.isSome()) {
WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
@ -517,6 +553,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
private_instance: sForm.private_instance,
default_theme: sForm.default_theme,
default_post_listing_type: sForm.default_post_listing_type,
application_email_admins: sForm.application_email_admins,
auth: auth().unwrap(),
hide_modlog_mod_names: sForm.hide_modlog_mod_names,
});
@ -531,18 +568,15 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
}
handleSiteSidebarChange(val: string) {
this.state.siteForm.sidebar = Some(val);
this.setState(this.state);
this.setState(s => ((s.siteForm.sidebar = Some(val)), s));
}
handleSiteLegalInfoChange(val: string) {
this.state.siteForm.legal_information = Some(val);
this.setState(this.state);
this.setState(s => ((s.siteForm.legal_information = Some(val)), s));
}
handleSiteApplicationQuestionChange(val: string) {
this.state.siteForm.application_question = Some(val);
this.setState(this.state);
this.setState(s => ((s.siteForm.application_question = Some(val)), s));
}
handleSiteDescChange(i: SiteForm, event: any) {
@ -580,6 +614,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
i.setState(i.state);
}
handleSiteApplicationEmailAdmins(i: SiteForm, event: any) {
i.state.siteForm.application_email_admins = Some(event.target.checked);
i.setState(i.state);
}
handleSitePrivateInstance(i: SiteForm, event: any) {
i.state.siteForm.private_instance = Some(event.target.checked);
i.setState(i.state);
@ -600,29 +639,29 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
}
handleIconUpload(url: string) {
this.state.siteForm.icon = Some(url);
this.setState(this.state);
this.setState(s => ((s.siteForm.icon = Some(url)), s));
}
handleIconRemove() {
this.state.siteForm.icon = Some("");
this.setState(this.state);
this.setState(s => ((s.siteForm.icon = Some("")), s));
}
handleBannerUpload(url: string) {
this.state.siteForm.banner = Some(url);
this.setState(this.state);
this.setState(s => ((s.siteForm.banner = Some(url)), s));
}
handleBannerRemove() {
this.state.siteForm.banner = Some("");
this.setState(this.state);
this.setState(s => ((s.siteForm.banner = Some("")), s));
}
handleDefaultPostListingTypeChange(val: ListingType) {
this.state.siteForm.default_post_listing_type = Some(
ListingType[ListingType[val]]
this.setState(
s => (
(s.siteForm.default_post_listing_type = Some(
ListingType[ListingType[val]]
)),
s
)
);
this.setState(this.state);
}
}

36
src/shared/components/home/site-sidebar.tsx
View file

@ -38,11 +38,11 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
render() {
let site = this.props.site;
return (
<div class="card border-secondary mb-3">
<div class="card-body">
<div className="card border-secondary mb-3">
<div className="card-body">
{!this.state.showEdit ? (
<div>
<div class="mb-2">
<div className="mb-2">
{this.siteName()}
{this.props.admins.isSome() && this.adminButtons()}
</div>
@ -69,10 +69,10 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
siteName() {
let site = this.props.site;
return (
<h5 class="mb-0 d-inline">
<h5 className="mb-0 d-inline">
{site.name}
<button
class="btn btn-sm text-muted"
className="btn btn-sm text-muted"
onClick={linkEvent(this, this.handleCollapseSidebar)}
aria-label={i18n.t("collapse")}
data-tippy-content={i18n.t("collapse")}
@ -113,11 +113,11 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
adminButtons() {
return (
amAdmin(this.props.admins) && (
<ul class="list-inline mb-1 text-muted font-weight-bold">
amAdmin() && (
<ul className="list-inline mb-1 text-muted font-weight-bold">
<li className="list-inline-item-action">
<button
class="btn btn-link d-inline-block text-muted"
className="btn btn-link d-inline-block text-muted"
onClick={linkEvent(this, this.handleEditClick)}
aria-label={i18n.t("edit")}
data-tippy-content={i18n.t("edit")}
@ -138,10 +138,10 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
admins(admins: PersonViewSafe[]) {
return (
<ul class="mt-1 list-inline small mb-0">
<li class="list-inline-item">{i18n.t("admins")}:</li>
<ul className="mt-1 list-inline small mb-0">
<li className="list-inline-item">{i18n.t("admins")}:</li>
{admins.map(av => (
<li class="list-inline-item">
<li key={av.person.id} className="list-inline-item">
<PersonListing person={av.person} />
</li>
))}
@ -153,7 +153,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
let counts = siteAggregates;
let online = this.props.online.unwrapOr(1);
return (
<ul class="my-2 list-inline">
<ul className="my-2 list-inline">
<li className="list-inline-item badge badge-secondary">
{i18n.t("number_online", {
count: online,
@ -246,22 +246,18 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
}
handleCollapseSidebar(i: SiteSidebar) {
i.state.collapsed = !i.state.collapsed;
i.setState(i.state);
i.setState({ collapsed: !i.state.collapsed });
}
handleEditClick(i: SiteSidebar) {
i.state.showEdit = true;
i.setState(i.state);
i.setState({ showEdit: true });
}
handleEditSite() {
this.state.showEdit = false;
this.setState(this.state);
this.setState({ showEdit: false });
}
handleEditCancel() {
this.state.showEdit = false;
this.setState(this.state);
this.setState({ showEdit: false });
}
}

585
src/shared/components/modlog.tsx
View file

@ -38,7 +38,7 @@ import {
amAdmin,
amMod,
auth,
choicesModLogConfig,
choicesConfig,
debounce,
fetchLimit,
fetchUsers,
@ -114,31 +114,41 @@ export class Modlog extends Component<any, ModlogState> {
filter_user: None,
filter_mod: None,
};
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
this.handlePageChange = this.handlePageChange.bind(this);
this.state.communityId = this.props.match.params.community_id
? Some(Number(this.props.match.params.community_id))
: None;
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
this.state = {
...this.state,
communityId: this.props.match.params.community_id
? Some(Number(this.props.match.params.community_id))
: None,
};
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.res = Some(this.isoData.routeData[0] as GetModlogResponse);
this.state = {
...this.state,
res: Some(this.isoData.routeData[0] as GetModlogResponse),
};
if (this.isoData.routeData[1]) {
// Getting the moderators
let communityRes = Some(
this.isoData.routeData[1] as GetCommunityResponse
);
this.state.communityMods = communityRes.map(c => c.moderators);
this.state = {
...this.state,
communityMods: communityRes.map(c => c.moderators),
};
}
this.state.loading = false;
this.state = { ...this.state, loading: false };
} else {
this.refetch();
}
@ -300,219 +310,283 @@ export class Modlog extends Component<any, ModlogState> {
switch (i.type_) {
case ModlogActionType.ModRemovePost: {
let mrpv = i.view as ModRemovePostView;
return [
mrpv.mod_remove_post.removed.unwrapOr(false)
? "Removed "
: "Restored ",
<span>
Post <Link to={`/post/${mrpv.post.id}`}>{mrpv.post.name}</Link>
</span>,
mrpv.mod_remove_post.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
}),
];
return (
<>
<span>
{mrpv.mod_remove_post.removed.unwrapOr(false)
? "Removed "
: "Restored "}
</span>
<span>
Post <Link to={`/post/${mrpv.post.id}`}>{mrpv.post.name}</Link>
</span>
<span>
{mrpv.mod_remove_post.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
})}
</span>
</>
);
}
case ModlogActionType.ModLockPost: {
let mlpv = i.view as ModLockPostView;
return [
mlpv.mod_lock_post.locked.unwrapOr(false) ? "Locked " : "Unlocked ",
<span>
Post <Link to={`/post/${mlpv.post.id}`}>{mlpv.post.name}</Link>
</span>,
];
return (
<>
<span>
{mlpv.mod_lock_post.locked.unwrapOr(false)
? "Locked "
: "Unlocked "}
</span>
<span>
Post <Link to={`/post/${mlpv.post.id}`}>{mlpv.post.name}</Link>
</span>
</>
);
}
case ModlogActionType.ModStickyPost: {
let mspv = i.view as ModStickyPostView;
return [
mspv.mod_sticky_post.stickied.unwrapOr(false)
? "Stickied "
: "Unstickied ",
<span>
Post <Link to={`/post/${mspv.post.id}`}>{mspv.post.name}</Link>
</span>,
];
return (
<>
<span>
{mspv.mod_sticky_post.stickied.unwrapOr(false)
? "Stickied "
: "Unstickied "}
</span>
<span>
Post <Link to={`/post/${mspv.post.id}`}>{mspv.post.name}</Link>
</span>
</>
);
}
case ModlogActionType.ModRemoveComment: {
let mrc = i.view as ModRemoveCommentView;
return [
mrc.mod_remove_comment.removed.unwrapOr(false)
? "Removed "
: "Restored ",
<span>
Comment{" "}
<Link to={`/post/${mrc.post.id}/comment/${mrc.comment.id}`}>
{mrc.comment.content}
</Link>
</span>,
<span>
{" "}
by <PersonListing person={mrc.commenter} />
</span>,
mrc.mod_remove_comment.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
}),
];
return (
<>
<span>
{mrc.mod_remove_comment.removed.unwrapOr(false)
? "Removed "
: "Restored "}
</span>
<span>
Comment{" "}
<Link to={`/post/${mrc.post.id}/comment/${mrc.comment.id}`}>
{mrc.comment.content}
</Link>
</span>
<span>
{" "}
by <PersonListing person={mrc.commenter} />
</span>
<span>
{mrc.mod_remove_comment.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
})}
</span>
</>
);
}
case ModlogActionType.ModRemoveCommunity: {
let mrco = i.view as ModRemoveCommunityView;
return [
mrco.mod_remove_community.removed.unwrapOr(false)
? "Removed "
: "Restored ",
<span>
Community <CommunityLink community={mrco.community} />
</span>,
mrco.mod_remove_community.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
}),
mrco.mod_remove_community.expires.match({
some: expires => (
<div>expires: {moment.utc(expires).fromNow()}</div>
),
none: <></>,
}),
];
return (
<>
<span>
{mrco.mod_remove_community.removed.unwrapOr(false)
? "Removed "
: "Restored "}
</span>
<span>
Community <CommunityLink community={mrco.community} />
</span>
<span>
{mrco.mod_remove_community.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
})}
</span>
<span>
{mrco.mod_remove_community.expires.match({
some: expires => (
<div>expires: {moment.utc(expires).fromNow()}</div>
),
none: <></>,
})}
</span>
</>
);
}
case ModlogActionType.ModBanFromCommunity: {
let mbfc = i.view as ModBanFromCommunityView;
return [
<span>
{mbfc.mod_ban_from_community.banned.unwrapOr(false)
? "Banned "
: "Unbanned "}{" "}
</span>,
<span>
<PersonListing person={mbfc.banned_person} />
</span>,
<span> from the community </span>,
<span>
<CommunityLink community={mbfc.community} />
</span>,
mbfc.mod_ban_from_community.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
}),
mbfc.mod_ban_from_community.expires.match({
some: expires => (
<div>expires: {moment.utc(expires).fromNow()}</div>
),
none: <></>,
}),
];
return (
<>
<span>
{mbfc.mod_ban_from_community.banned.unwrapOr(false)
? "Banned "
: "Unbanned "}{" "}
</span>
<span>
<PersonListing person={mbfc.banned_person} />
</span>
<span> from the community </span>
<span>
<CommunityLink community={mbfc.community} />
</span>
<span>
{mbfc.mod_ban_from_community.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
})}
</span>
<span>
{mbfc.mod_ban_from_community.expires.match({
some: expires => (
<div>expires: {moment.utc(expires).fromNow()}</div>
),
none: <></>,
})}
</span>
</>
);
}
case ModlogActionType.ModAddCommunity: {
let mac = i.view as ModAddCommunityView;
return [
<span>
{mac.mod_add_community.removed.unwrapOr(false)
? "Removed "
: "Appointed "}{" "}
</span>,
<span>
<PersonListing person={mac.modded_person} />
</span>,
<span> as a mod to the community </span>,
<span>
<CommunityLink community={mac.community} />
</span>,
];
return (
<>
<span>
{mac.mod_add_community.removed.unwrapOr(false)
? "Removed "
: "Appointed "}{" "}
</span>
<span>
<PersonListing person={mac.modded_person} />
</span>
<span> as a mod to the community </span>
<span>
<CommunityLink community={mac.community} />
</span>
</>
);
}
case ModlogActionType.ModTransferCommunity: {
let mtc = i.view as ModTransferCommunityView;
return [
<span>
{mtc.mod_transfer_community.removed.unwrapOr(false)
? "Removed "
: "Transferred "}{" "}
</span>,
<span>
<CommunityLink community={mtc.community} />
</span>,
<span> to </span>,
<span>
<PersonListing person={mtc.modded_person} />
</span>,
];
return (
<>
<span>
{mtc.mod_transfer_community.removed.unwrapOr(false)
? "Removed "
: "Transferred "}{" "}
</span>
<span>
<CommunityLink community={mtc.community} />
</span>
<span> to </span>
<span>
<PersonListing person={mtc.modded_person} />
</span>
</>
);
}
case ModlogActionType.ModBan: {
let mb = i.view as ModBanView;
return [
<span>
{mb.mod_ban.banned.unwrapOr(false) ? "Banned " : "Unbanned "}{" "}
</span>,
<span>
<PersonListing person={mb.banned_person} />
</span>,
mb.mod_ban.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
}),
mb.mod_ban.expires.match({
some: expires => (
<div>expires: {moment.utc(expires).fromNow()}</div>
),
none: <></>,
}),
];
return (
<>
<span>
{mb.mod_ban.banned.unwrapOr(false) ? "Banned " : "Unbanned "}{" "}
</span>
<span>
<PersonListing person={mb.banned_person} />
</span>
<span>
{mb.mod_ban.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
})}
</span>
<span>
{mb.mod_ban.expires.match({
some: expires => (
<div>expires: {moment.utc(expires).fromNow()}</div>
),
none: <></>,
})}
</span>
</>
);
}
case ModlogActionType.ModAdd: {
let ma = i.view as ModAddView;
return [
<span>
{ma.mod_add.removed.unwrapOr(false) ? "Removed " : "Appointed "}{" "}
</span>,
<span>
<PersonListing person={ma.modded_person} />
</span>,
<span> as an admin </span>,
];
return (
<>
<span>
{ma.mod_add.removed.unwrapOr(false) ? "Removed " : "Appointed "}{" "}
</span>
<span>
<PersonListing person={ma.modded_person} />
</span>
<span> as an admin </span>
</>
);
}
case ModlogActionType.AdminPurgePerson: {
let ap = i.view as AdminPurgePersonView;
return [
<span>Purged a Person</span>,
ap.admin_purge_person.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
}),
];
return (
<>
<span>Purged a Person</span>
<span>
{ap.admin_purge_person.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
})}
</span>
</>
);
}
case ModlogActionType.AdminPurgeCommunity: {
let ap = i.view as AdminPurgeCommunityView;
return [
<span>Purged a Community</span>,
ap.admin_purge_community.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
}),
];
return (
<>
<span>Purged a Community</span>
<span>
{ap.admin_purge_community.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
})}
</span>
</>
);
}
case ModlogActionType.AdminPurgePost: {
let ap = i.view as AdminPurgePostView;
return [
<span>Purged a Post from from </span>,
<CommunityLink community={ap.community} />,
ap.admin_purge_post.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
}),
];
return (
<>
<span>Purged a Post from from </span>
<CommunityLink community={ap.community} />
<span>
{ap.admin_purge_post.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
})}
</span>
</>
);
}
case ModlogActionType.AdminPurgeComment: {
let ap = i.view as AdminPurgeCommentView;
return [
<span>
Purged a Comment from{" "}
<Link to={`/post/${ap.post.id}`}>{ap.post.name}</Link>
</span>,
ap.admin_purge_comment.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
}),
];
return (
<>
<span>
Purged a Comment from{" "}
<Link to={`/post/${ap.post.id}`}>{ap.post.name}</Link>
</span>
<span>
{ap.admin_purge_comment.reason.match({
some: reason => <div>reason: {reason}</div>,
none: <></>,
})}
</span>
</>
);
}
default:
return <div />;
@ -525,7 +599,7 @@ export class Modlog extends Component<any, ModlogState> {
return (
<tbody>
{combined.map(i => (
<tr>
<tr key={i.id}>
<td>
<MomentTime published={i.when_} updated={None} />
</td>
@ -544,10 +618,7 @@ export class Modlog extends Component<any, ModlogState> {
}
get amAdminOrMod(): boolean {
return (
amAdmin(Some(this.state.siteRes.admins)) ||
amMod(this.state.communityMods)
);
return amAdmin() || amMod(this.state.communityMods);
}
modOrAdminText(person: Option<PersonSafe>): string {
@ -593,67 +664,75 @@ export class Modlog extends Component<any, ModlogState> {
})}
<span>{i18n.t("modlog")}</span>
</h5>
<form className="form-inline mr-2">
<select
value={this.state.filter_action}
onChange={linkEvent(this, this.handleFilterActionChange)}
className="custom-select col-4 mb-2"
aria-label="action"
>
<option disabled aria-hidden="true">
{i18n.t("filter_by_action")}
</option>
<option value={ModlogActionType.All}>{i18n.t("all")}</option>
<option value={ModlogActionType.ModRemovePost}>
Removing Posts
</option>
<option value={ModlogActionType.ModLockPost}>
Locking Posts
</option>
<option value={ModlogActionType.ModStickyPost}>
Stickying Posts
</option>
<option value={ModlogActionType.ModRemoveComment}>
Removing Comments
</option>
<option value={ModlogActionType.ModRemoveCommunity}>
Removing Communities
</option>
<option value={ModlogActionType.ModBanFromCommunity}>
Banning From Communities
</option>
<option value={ModlogActionType.ModAddCommunity}>
Adding Mod to Community
</option>
<option value={ModlogActionType.ModTransferCommunity}>
Transfering Communities
</option>
<option value={ModlogActionType.ModAdd}>
Adding Mod to Site
</option>
<option value={ModlogActionType.ModBan}>
Banning From Site
</option>
</select>
<div className="form-row">
<div className="form-group col-sm-6">
<select
value={this.state.filter_action}
onChange={linkEvent(this, this.handleFilterActionChange)}
className="custom-select mb-2"
aria-label="action"
>
<option disabled aria-hidden="true">
{i18n.t("filter_by_action")}
</option>
<option value={ModlogActionType.All}>{i18n.t("all")}</option>
<option value={ModlogActionType.ModRemovePost}>
Removing Posts
</option>
<option value={ModlogActionType.ModLockPost}>
Locking Posts
</option>
<option value={ModlogActionType.ModStickyPost}>
Stickying Posts
</option>
<option value={ModlogActionType.ModRemoveComment}>
Removing Comments
</option>
<option value={ModlogActionType.ModRemoveCommunity}>
Removing Communities
</option>
<option value={ModlogActionType.ModBanFromCommunity}>
Banning From Communities
</option>
<option value={ModlogActionType.ModAddCommunity}>
Adding Mod to Community
</option>
<option value={ModlogActionType.ModTransferCommunity}>
Transfering Communities
</option>
<option value={ModlogActionType.ModAdd}>
Adding Mod to Site
</option>
<option value={ModlogActionType.ModBan}>
Banning From Site
</option>
</select>
</div>
{this.state.siteRes.site_view.match({
some: site_view =>
!site_view.site.hide_modlog_mod_names.unwrapOr(false) && (
<select
id="filter-mod"
value={toUndefined(this.state.filter_mod)}
>
<option>{i18n.t("filter_by_mod")}</option>
</select>
<div className="form-group col-sm-6">
<select
id="filter-mod"
className="form-control"
value={toUndefined(this.state.filter_mod)}
>
<option>{i18n.t("filter_by_mod")}</option>
</select>
</div>
),
none: <></>,
})}
<select
id="filter-user"
value={toUndefined(this.state.filter_user)}
>
<option>{i18n.t("filter_by_user")}</option>
</select>
</form>
<div className="form-group col-sm-6">
<select
id="filter-user"
className="form-control"
value={toUndefined(this.state.filter_user)}
>
<option>{i18n.t("filter_by_user")}</option>
</select>
</div>
</div>
<div className="table-responsive">
<table id="modlog_table" className="table table-sm table-hover">
<thead className="pointer">
@ -715,12 +794,11 @@ export class Modlog extends Component<any, ModlogState> {
if (isBrowser()) {
let selectId: any = document.getElementById("filter-user");
if (selectId) {
this.userChoices = new Choices(selectId, choicesModLogConfig);
this.userChoices = new Choices(selectId, choicesConfig);
this.userChoices.passedElement.element.addEventListener(
"choice",
(e: any) => {
this.state.filter_user = Some(Number(e.detail.choice.value));
this.setState(this.state);
this.setState({ filter_user: Some(Number(e.detail.choice.value)) });
this.refetch();
},
false
@ -755,12 +833,11 @@ export class Modlog extends Component<any, ModlogState> {
if (isBrowser()) {
let selectId: any = document.getElementById("filter-mod");
if (selectId) {
this.modChoices = new Choices(selectId, choicesModLogConfig);
this.modChoices = new Choices(selectId, choicesConfig);
this.modChoices.passedElement.element.addEventListener(
"choice",
(e: any) => {
this.state.filter_mod = Some(Number(e.detail.choice.value));
this.setState(this.state);
this.setState({ filter_mod: Some(Number(e.detail.choice.value)) });
this.refetch();
},
false
@ -829,14 +906,16 @@ export class Modlog extends Component<any, ModlogState> {
return;
} else if (op == UserOperation.GetModlog) {
let data = wsJsonToRes<GetModlogResponse>(msg, GetModlogResponse);
this.state.loading = false;
window.scrollTo(0, 0);
this.state.res = Some(data);
this.setState(this.state);
this.setState({ res: Some(data), loading: false });
this.setupUserFilter();
this.setupModFilter();
} else if (op == UserOperation.GetCommunity) {
let data = wsJsonToRes<GetCommunityResponse>(msg, GetCommunityResponse);
this.state.communityMods = Some(data.moderators);
this.state.communityName = Some(data.community_view.community.name);
this.setState({
communityMods: Some(data.moderators),
communityName: Some(data.community_view.community.name),
});
}
}
}

156
src/shared/components/person/inbox.tsx
View file

@ -17,6 +17,7 @@ import {
PersonMentionResponse,
PersonMentionView,
PostReportResponse,
PrivateMessageReportResponse,
PrivateMessageResponse,
PrivateMessagesResponse,
PrivateMessageView,
@ -127,15 +128,19 @@ export class Inbox extends Component<any, InboxState> {
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.replies =
(this.isoData.routeData[0] as GetRepliesResponse).replies || [];
this.state.mentions =
(this.isoData.routeData[1] as GetPersonMentionsResponse).mentions || [];
this.state.messages =
(this.isoData.routeData[2] as PrivateMessagesResponse)
.private_messages || [];
this.state.combined = this.buildCombined();
this.state.loading = false;
this.state = {
...this.state,
replies:
(this.isoData.routeData[0] as GetRepliesResponse).replies || [],
mentions:
(this.isoData.routeData[1] as GetPersonMentionsResponse).mentions ||
[],
messages:
(this.isoData.routeData[2] as PrivateMessagesResponse)
.private_messages || [],
loading: false,
};
this.state = { ...this.state, combined: this.buildCombined() };
} else {
this.refetch();
}
@ -166,21 +171,21 @@ export class Inbox extends Component<any, InboxState> {
.ok()
.map(a => `/feeds/inbox/${a}.xml`);
return (
<div class="container">
<div className="container">
{this.state.loading ? (
<h5>
<Spinner large />
</h5>
) : (
<div class="row">
<div class="col-12">
<div className="row">
<div className="col-12">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={None}
image={None}
/>
<h5 class="mb-2">
<h5 className="mb-2">
{i18n.t("inbox")}
{inboxRss.match({
some: rss => (
@ -204,7 +209,7 @@ export class Inbox extends Component<any, InboxState> {
0 &&
this.state.unreadOrAll == UnreadOrAll.Unread && (
<button
class="btn btn-secondary mb-2"
className="btn btn-secondary mb-2"
onClick={linkEvent(this, this.markAllAsRead)}
>
{i18n.t("mark_all_as_read")}
@ -230,7 +235,7 @@ export class Inbox extends Component<any, InboxState> {
unreadOrAllRadios() {
return (
<div class="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<label
className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@ -263,7 +268,7 @@ export class Inbox extends Component<any, InboxState> {
messageTypeRadios() {
return (
<div class="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<label
className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.All && "active"}
@ -323,8 +328,8 @@ export class Inbox extends Component<any, InboxState> {
selects() {
return (
<div className="mb-2">
<span class="mr-3">{this.unreadOrAllRadios()}</span>
<span class="mr-3">{this.messageTypeRadios()}</span>
<span className="mr-3">{this.unreadOrAllRadios()}</span>
<span className="mr-3">{this.messageTypeRadios()}</span>
<CommentSortSelect
sort={this.state.sort}
onChange={this.handleSortChange}
@ -394,6 +399,7 @@ export class Inbox extends Component<any, InboxState> {
showCommunity
showContext
enableDownvotes={enableDownvotes(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
);
case ReplyEnum.Mention:
@ -416,6 +422,7 @@ export class Inbox extends Component<any, InboxState> {
showCommunity
showContext
enableDownvotes={enableDownvotes(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
);
case ReplyEnum.Message:
@ -448,6 +455,7 @@ export class Inbox extends Component<any, InboxState> {
showCommunity
showContext
enableDownvotes={enableDownvotes(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
</div>
);
@ -469,6 +477,7 @@ export class Inbox extends Component<any, InboxState> {
showCommunity
showContext
enableDownvotes={enableDownvotes(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
))}
</div>
@ -494,16 +503,12 @@ export class Inbox extends Component<any, InboxState> {
}
handleUnreadOrAllChange(i: Inbox, event: any) {
i.state.unreadOrAll = Number(event.target.value);
i.state.page = 1;
i.setState(i.state);
i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
i.refetch();
}
handleMessageTypeChange(i: Inbox, event: any) {
i.state.messageType = Number(event.target.value);
i.state.page = 1;
i.setState(i.state);
i.setState({ messageType: Number(event.target.value), page: 1 });
i.refetch();
}
@ -580,9 +585,7 @@ export class Inbox extends Component<any, InboxState> {
}
handleSortChange(val: CommentSortType) {
this.state.sort = val;
this.state.page = 1;
this.setState(this.state);
this.setState({ sort: val, page: 1 });
this.refetch();
}
@ -592,10 +595,8 @@ export class Inbox extends Component<any, InboxState> {
auth: auth().unwrap(),
})
);
i.state.replies = [];
i.state.mentions = [];
i.state.messages = [];
i.state.combined = i.buildCombined();
i.setState({ replies: [], mentions: [], messages: [] });
i.setState({ combined: i.buildCombined() });
UserService.Instance.unreadInboxCountSub.next(0);
window.scrollTo(0, 0);
i.setState(i.state);
@ -620,31 +621,27 @@ export class Inbox extends Component<any, InboxState> {
this.refetch();
} else if (op == UserOperation.GetReplies) {
let data = wsJsonToRes<GetRepliesResponse>(msg, GetRepliesResponse);
this.state.replies = data.replies;
this.state.combined = this.buildCombined();
this.state.loading = false;
this.setState({ replies: data.replies });
this.setState({ combined: this.buildCombined(), loading: false });
window.scrollTo(0, 0);
this.setState(this.state);
setupTippy();
} else if (op == UserOperation.GetPersonMentions) {
let data = wsJsonToRes<GetPersonMentionsResponse>(
msg,
GetPersonMentionsResponse
);
this.state.mentions = data.mentions;
this.state.combined = this.buildCombined();
this.setState({ mentions: data.mentions });
this.setState({ combined: this.buildCombined() });
window.scrollTo(0, 0);
this.setState(this.state);
setupTippy();
} else if (op == UserOperation.GetPrivateMessages) {
let data = wsJsonToRes<PrivateMessagesResponse>(
msg,
PrivateMessagesResponse
);
this.state.messages = data.private_messages;
this.state.combined = this.buildCombined();
this.setState({ messages: data.private_messages });
this.setState({ combined: this.buildCombined() });
window.scrollTo(0, 0);
this.setState(this.state);
setupTippy();
} else if (op == UserOperation.EditPrivateMessage) {
let data = wsJsonToRes<PrivateMessageResponse>(
@ -696,7 +693,9 @@ export class Inbox extends Component<any, InboxState> {
if (found) {
let combinedView = this.state.combined.find(
i => i.id == data.private_message_view.private_message.id
i =>
i.id == data.private_message_view.private_message.id &&
i.type_ == ReplyEnum.Message
).view as PrivateMessageView;
found.private_message.updated = combinedView.private_message.updated =
data.private_message_view.private_message.updated;
@ -706,14 +705,18 @@ export class Inbox extends Component<any, InboxState> {
this.state.unreadOrAll == UnreadOrAll.Unread &&
data.private_message_view.private_message.read
) {
this.state.messages = this.state.messages.filter(
r =>
r.private_message.id !==
data.private_message_view.private_message.id
);
this.state.combined = this.state.combined.filter(
r => r.id !== data.private_message_view.private_message.id
);
this.setState({
messages: this.state.messages.filter(
r =>
r.private_message.id !==
data.private_message_view.private_message.id
),
});
this.setState({
combined: this.state.combined.filter(
r => r.id !== data.private_message_view.private_message.id
),
});
} else {
found.private_message.read = combinedView.private_message.read =
data.private_message_view.private_message.read;
@ -733,7 +736,6 @@ export class Inbox extends Component<any, InboxState> {
this.setState(this.state);
} else if (op == UserOperation.MarkCommentReplyAsRead) {
let data = wsJsonToRes<CommentReplyResponse>(msg, CommentReplyResponse);
console.log(data);
let found = this.state.replies.find(
c => c.comment_reply.id == data.comment_reply_view.comment_reply.id
@ -741,7 +743,9 @@ export class Inbox extends Component<any, InboxState> {
if (found) {
let combinedView = this.state.combined.find(
i => i.id == data.comment_reply_view.comment_reply.id
i =>
i.id == data.comment_reply_view.comment_reply.id &&
i.type_ == ReplyEnum.Reply
).view as CommentReplyView;
found.comment.content = combinedView.comment.content =
data.comment_reply_view.comment.content;
@ -763,12 +767,17 @@ export class Inbox extends Component<any, InboxState> {
this.state.unreadOrAll == UnreadOrAll.Unread &&
data.comment_reply_view.comment_reply.read
) {
this.state.replies = this.state.replies.filter(
r => r.comment_reply.id !== data.comment_reply_view.comment_reply.id
);
this.state.combined = this.state.combined.filter(
r => r.id !== data.comment_reply_view.comment_reply.id
);
this.setState({
replies: this.state.replies.filter(
r =>
r.comment_reply.id !== data.comment_reply_view.comment_reply.id
),
});
this.setState({
combined: this.state.combined.filter(
r => r.id !== data.comment_reply_view.comment_reply.id
),
});
} else {
found.comment_reply.read = combinedView.comment_reply.read =
data.comment_reply_view.comment_reply.read;
@ -786,7 +795,9 @@ export class Inbox extends Component<any, InboxState> {
if (found) {
let combinedView = this.state.combined.find(
i => i.id == data.person_mention_view.person_mention.id
i =>
i.id == data.person_mention_view.person_mention.id &&
i.type_ == ReplyEnum.Mention
).view as PersonMentionView;
found.comment.content = combinedView.comment.content =
data.person_mention_view.comment.content;
@ -808,13 +819,18 @@ export class Inbox extends Component<any, InboxState> {
this.state.unreadOrAll == UnreadOrAll.Unread &&
data.person_mention_view.person_mention.read
) {
this.state.mentions = this.state.mentions.filter(
r =>
r.person_mention.id !== data.person_mention_view.person_mention.id
);
this.state.combined = this.state.combined.filter(
r => r.id !== data.person_mention_view.person_mention.id
);
this.setState({
mentions: this.state.mentions.filter(
r =>
r.person_mention.id !==
data.person_mention_view.person_mention.id
),
});
this.setState({
combined: this.state.combined.filter(
r => r.id !== data.person_mention_view.person_mention.id
),
});
} else {
// TODO test to make sure these mentions are getting marked as read
found.person_mention.read = combinedView.person_mention.read =
@ -865,6 +881,14 @@ export class Inbox extends Component<any, InboxState> {
if (data) {
toast(i18n.t("report_created"));
}
} else if (op == UserOperation.CreatePrivateMessageReport) {
let data = wsJsonToRes<PrivateMessageReportResponse>(
msg,
PrivateMessageReportResponse
);
if (data) {
toast(i18n.t("report_created"));
}
}
}

37
src/shared/components/person/password-change.tsx
View file

@ -66,15 +66,15 @@ export class PasswordChange extends Component<any, State> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={None}
image={None}
/>
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{i18n.t("password_change")}</h5>
{this.passwordChangeForm()}
</div>
@ -86,41 +86,41 @@ export class PasswordChange extends Component<any, State> {
passwordChangeForm() {
return (
<form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="new-password">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="new-password">
{i18n.t("new_password")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
id="new-password"
type="password"
value={this.state.passwordChangeForm.password}
onInput={linkEvent(this, this.handlePasswordChange)}
class="form-control"
className="form-control"
required
maxLength={60}
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="verify-password">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="verify-password">
{i18n.t("verify_password")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
id="verify-password"
type="password"
value={this.state.passwordChangeForm.password_verify}
onInput={linkEvent(this, this.handleVerifyPasswordChange)}
class="form-control"
className="form-control"
required
maxLength={60}
/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-secondary">
<div className="form-group row">
<div className="col-sm-10">
<button type="submit" className="btn btn-secondary">
{this.state.loading ? (
<Spinner />
) : (
@ -145,8 +145,7 @@ export class PasswordChange extends Component<any, State> {
handlePasswordChangeSubmit(i: PasswordChange, event: any) {
event.preventDefault();
i.state.loading = true;
i.setState(i.state);
i.setState({ loading: true });
WebSocketService.Instance.send(
wsClient.passwordChange(i.state.passwordChangeForm)
@ -158,13 +157,11 @@ export class PasswordChange extends Component<any, State> {
console.log(msg);
if (msg.error) {
toast(i18n.t(msg.error), "danger");
this.state.loading = false;
this.setState(this.state);
this.setState({ loading: false });
return;
} else if (op == UserOperation.PasswordChange) {
let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
this.state = this.emptyState;
this.setState(this.state);
this.setState(this.emptyState);
UserService.Instance.login(data);
this.props.history.push("/");
}

13
src/shared/components/person/person-details.tsx
View file

@ -3,6 +3,7 @@ import { Component } from "inferno";
import {
CommentView,
GetPersonDetailsResponse,
Language,
PersonViewSafe,
PostView,
SortType,
@ -16,6 +17,7 @@ import { PostListing } from "../post/post-listing";
interface PersonDetailsProps {
personRes: GetPersonDetailsResponse;
admins: PersonViewSafe[];
allLanguages: Language[];
page: number;
limit: number;
sort: SortType;
@ -99,6 +101,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
showCommunity
showContext
enableDownvotes={this.props.enableDownvotes}
allLanguages={this.props.allLanguages}
/>
);
}
@ -114,6 +117,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
showCommunity
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
/>
);
}
@ -150,7 +154,10 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
return (
<div>
{combined.map(i => [this.renderItemType(i), <hr class="my-3" />])}
{combined.map(i => [
this.renderItemType(i),
<hr key={i.type_} className="my-3" />,
])}
</div>
);
}
@ -168,6 +175,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
showCommunity
showContext
enableDownvotes={this.props.enableDownvotes}
allLanguages={this.props.allLanguages}
/>
</div>
);
@ -186,8 +194,9 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
moderators={None}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
/>
<hr class="my-3" />
<hr className="my-3" />
</>
))}
</div>

169
src/shared/components/person/profile.tsx
View file

@ -121,15 +121,14 @@ export class Profile extends Component<any, ProfileState> {
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.personRes = Some(
this.isoData.routeData[0] as GetPersonDetailsResponse
);
this.state.loading = false;
this.state = {
...this.state,
personRes: Some(this.isoData.routeData[0] as GetPersonDetailsResponse),
loading: false,
};
} else {
this.fetchUserData();
}
this.setPersonBlock();
}
fetchUserData() {
@ -162,11 +161,12 @@ export class Profile extends Component<any, ProfileState> {
UserService.Instance.myUserInfo.match({
some: mui =>
this.state.personRes.match({
some: res => {
this.state.personBlocked = mui.person_blocks
.map(a => a.target.id)
.includes(res.person_view.person.id);
},
some: res =>
this.setState({
personBlocked: mui.person_blocks
.map(a => a.target.id)
.includes(res.person_view.person.id),
}),
none: void 0,
}),
none: void 0,
@ -207,6 +207,7 @@ export class Profile extends Component<any, ProfileState> {
}
componentDidMount() {
this.setPersonBlock();
setupTippy();
}
@ -250,7 +251,7 @@ export class Profile extends Component<any, ProfileState> {
render() {
return (
<div class="container">
<div className="container">
{this.state.loading ? (
<h5>
<Spinner large />
@ -258,8 +259,8 @@ export class Profile extends Component<any, ProfileState> {
) : (
this.state.personRes.match({
some: res => (
<div class="row">
<div class="col-12 col-md-8">
<div className="row">
<div className="col-12 col-md-8">
<>
<HtmlTags
title={this.documentTitle}
@ -281,11 +282,12 @@ export class Profile extends Component<any, ProfileState> {
enableNsfw={enableNsfw(this.state.siteRes)}
view={this.state.view}
onPageChange={this.handlePageChange}
allLanguages={this.state.siteRes.all_languages}
/>
</div>
{!this.state.loading && (
<div class="col-12 col-md-4">
<div className="col-12 col-md-4">
{this.moderates()}
{this.amCurrentUser && this.follows()}
</div>
@ -301,7 +303,7 @@ export class Profile extends Component<any, ProfileState> {
viewRadios() {
return (
<div class="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<label
className={`btn btn-outline-secondary pointer
${this.state.view == PersonDetailsView.Overview && "active"}
@ -363,7 +365,7 @@ export class Profile extends Component<any, ProfileState> {
return (
<div className="mb-2">
<span class="mr-3">{this.viewRadios()}</span>
<span className="mr-3">{this.viewRadios()}</span>
<SortSelect
sort={this.state.sort}
onChange={this.handleSortChange}
@ -406,14 +408,17 @@ export class Profile extends Component<any, ProfileState> {
banner={pv.person.banner}
icon={pv.person.avatar}
/>
<div class="mb-3">
<div class="">
<div class="mb-0 d-flex flex-wrap">
<div className="mb-3">
<div className="">
<div className="mb-0 d-flex flex-wrap">
<div>
{pv.person.display_name && (
<h5 class="mb-0">{pv.person.display_name}</h5>
)}
<ul class="list-inline mb-2">
{pv.person.display_name.match({
some: displayName => (
<h5 className="mb-0">{displayName}</h5>
),
none: <></>,
})}
<ul className="list-inline mb-2">
<li className="list-inline-item">
<PersonListing
person={pv.person}
@ -531,7 +536,7 @@ export class Profile extends Component<any, ProfileState> {
none: <></>,
})}
<div>
<ul class="list-inline mb-2">
<ul className="list-inline mb-2">
<li className="list-inline-item badge badge-light">
{i18n.t("number_of_posts", {
count: pv.counts.post_count,
@ -546,7 +551,7 @@ export class Profile extends Component<any, ProfileState> {
</li>
</ul>
</div>
<div class="text-muted">
<div className="text-muted">
{i18n.t("joined")}{" "}
<MomentTime
published={pv.person.published}
@ -581,33 +586,36 @@ export class Profile extends Component<any, ProfileState> {
<>
{this.state.showBanDialog && (
<form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
<div class="form-group row col-12">
<label class="col-form-label" htmlFor="profile-ban-reason">
<div className="form-group row col-12">
<label
className="col-form-label"
htmlFor="profile-ban-reason"
>
{i18n.t("reason")}
</label>
<input
type="text"
id="profile-ban-reason"
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("reason")}
value={toUndefined(this.state.banReason)}
onInput={linkEvent(this, this.handleModBanReasonChange)}
/>
<label class="col-form-label" htmlFor={`mod-ban-expires`}>
<label className="col-form-label" htmlFor={`mod-ban-expires`}>
{i18n.t("expires")}
</label>
<input
type="number"
id={`mod-ban-expires`}
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("number_of_days")}
value={toUndefined(this.state.banExpireDays)}
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
/>
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="mod-ban-remove-data"
type="checkbox"
checked={this.state.removeData}
@ -617,7 +625,7 @@ export class Profile extends Component<any, ProfileState> {
)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="mod-ban-remove-data"
title={i18n.t("remove_content_more")}
>
@ -631,10 +639,10 @@ export class Profile extends Component<any, ProfileState> {
{/* <label class="col-form-label">Expires</label> */}
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
{/* </div> */}
<div class="form-group row">
<div className="form-group row">
<button
type="cancel"
class="btn btn-secondary mr-2"
type="reset"
className="btn btn-secondary mr-2"
aria-label={i18n.t("cancel")}
onClick={linkEvent(this, this.handleModBanSubmitCancel)}
>
@ -642,7 +650,7 @@ export class Profile extends Component<any, ProfileState> {
</button>
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={i18n.t("ban")}
>
{i18n.t("ban")} {pv.person.name}
@ -656,25 +664,28 @@ export class Profile extends Component<any, ProfileState> {
});
}
// TODO test this, make sure its good
moderates() {
return this.state.personRes
.map(r => r.moderates)
.match({
some: moderates => {
if (moderates.length > 0) {
<div class="card border-secondary mb-3">
<div class="card-body">
<h5>{i18n.t("moderates")}</h5>
<ul class="list-unstyled mb-0">
{moderates.map(cmv => (
<li>
<CommunityLink community={cmv.community} />
</li>
))}
</ul>
return (
<div className="card border-secondary mb-3">
<div className="card-body">
<h5>{i18n.t("moderates")}</h5>
<ul className="list-unstyled mb-0">
{moderates.map(cmv => (
<li key={cmv.community.id}>
<CommunityLink community={cmv.community} />
</li>
))}
</ul>
</div>
</div>
</div>;
);
} else {
return <></>;
}
},
none: void 0,
@ -687,18 +698,22 @@ export class Profile extends Component<any, ProfileState> {
.match({
some: follows => {
if (follows.length > 0) {
<div class="card border-secondary mb-3">
<div class="card-body">
<h5>{i18n.t("subscribed")}</h5>
<ul class="list-unstyled mb-0">
{follows.map(cfv => (
<li>
<CommunityLink community={cfv.community} />
</li>
))}
</ul>
return (
<div className="card border-secondary mb-3">
<div className="card-body">
<h5>{i18n.t("subscribed")}</h5>
<ul className="list-unstyled mb-0">
{follows.map(cfv => (
<li key={cfv.community.id}>
<CommunityLink community={cfv.community} />
</li>
))}
</ul>
</div>
</div>
</div>;
);
} else {
return <></>;
}
},
none: void 0,
@ -715,8 +730,7 @@ export class Profile extends Component<any, ProfileState> {
this.props.history.push(
`${typeView}/view/${viewStr}/sort/${sortStr}/page/${page}`
);
this.state.loading = true;
this.setState(this.state);
this.setState({ loading: true });
this.fetchUserData();
}
@ -736,29 +750,24 @@ export class Profile extends Component<any, ProfileState> {
}
handleModBanShow(i: Profile) {
i.state.showBanDialog = true;
i.setState(i.state);
i.setState({ showBanDialog: true });
}
handleModBanReasonChange(i: Profile, event: any) {
i.state.banReason = event.target.value;
i.setState(i.state);
i.setState({ banReason: event.target.value });
}
handleModBanExpireDaysChange(i: Profile, event: any) {
i.state.banExpireDays = event.target.value;
i.setState(i.state);
i.setState({ banExpireDays: event.target.value });
}
handleModRemoveDataChange(i: Profile, event: any) {
i.state.removeData = event.target.checked;
i.setState(i.state);
i.setState({ removeData: event.target.checked });
}
handleModBanSubmitCancel(i: Profile, event?: any) {
event.preventDefault();
i.state.showBanDialog = false;
i.setState(i.state);
i.setState({ showBanDialog: false });
}
handleModBanSubmit(i: Profile, event?: any) {
@ -771,7 +780,7 @@ export class Profile extends Component<any, ProfileState> {
// If its an unban, restore all their data
let ban = !person.banned;
if (ban == false) {
i.state.removeData = false;
i.setState({ removeData: false });
}
let form = new BanPerson({
person_id: person.id,
@ -783,8 +792,7 @@ export class Profile extends Component<any, ProfileState> {
});
WebSocketService.Instance.send(wsClient.banPerson(form));
i.state.showBanDialog = false;
i.setState(i.state);
i.setState({ showBanDialog: false });
},
none: void 0,
});
@ -809,15 +817,12 @@ export class Profile extends Component<any, ProfileState> {
msg,
GetPersonDetailsResponse
);
this.state.personRes = Some(data);
this.state.loading = false;
this.setState({ personRes: Some(data), loading: false });
this.setPersonBlock();
this.setState(this.state);
restoreScrollPosition(this.context);
} else if (op == UserOperation.AddAdmin) {
let data = wsJsonToRes<AddAdminResponse>(msg, AddAdminResponse);
this.state.siteRes.admins = data.admins;
this.setState(this.state);
this.setState(s => ((s.siteRes.admins = data.admins), s));
} else if (op == UserOperation.CreateCommentLike) {
let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
createCommentLikeRes(

34
src/shared/components/person/registration-applications.tsx
View file

@ -75,10 +75,13 @@ export class RegistrationApplications extends Component<
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.listRegistrationApplicationsResponse = Some(
this.isoData.routeData[0] as ListRegistrationApplicationsResponse
);
this.state.loading = false;
this.state = {
...this.state,
listRegistrationApplicationsResponse: Some(
this.isoData.routeData[0] as ListRegistrationApplicationsResponse
),
loading: false,
};
} else {
this.refetch();
}
@ -110,21 +113,21 @@ export class RegistrationApplications extends Component<
render() {
return (
<div class="container">
<div className="container">
{this.state.loading ? (
<h5>
<Spinner large />
</h5>
) : (
<div class="row">
<div class="col-12">
<div className="row">
<div className="col-12">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={None}
image={None}
/>
<h5 class="mb-2">{i18n.t("registration_applications")}</h5>
<h5 className="mb-2">{i18n.t("registration_applications")}</h5>
{this.selects()}
{this.applicationList()}
<Paginator
@ -140,7 +143,7 @@ export class RegistrationApplications extends Component<
unreadOrAllRadios() {
return (
<div class="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<label
className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@ -174,7 +177,7 @@ export class RegistrationApplications extends Component<
selects() {
return (
<div className="mb-2">
<span class="mr-3">{this.unreadOrAllRadios()}</span>
<span className="mr-3">{this.unreadOrAllRadios()}</span>
</div>
);
}
@ -199,9 +202,7 @@ export class RegistrationApplications extends Component<
}
handleUnreadOrAllChange(i: RegistrationApplications, event: any) {
i.state.unreadOrAll = Number(event.target.value);
i.state.page = 1;
i.setState(i.state);
i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
i.refetch();
}
@ -248,10 +249,11 @@ export class RegistrationApplications extends Component<
msg,
ListRegistrationApplicationsResponse
);
this.state.listRegistrationApplicationsResponse = Some(data);
this.state.loading = false;
this.setState({
listRegistrationApplicationsResponse: Some(data),
loading: false,
});
window.scrollTo(0, 0);
this.setState(this.state);
} else if (op == UserOperation.ApproveRegistrationApplication) {
let data = wsJsonToRes<RegistrationApplicationResponse>(
msg,

206
src/shared/components/person/reports.tsx
View file

@ -8,8 +8,12 @@ import {
ListCommentReportsResponse,
ListPostReports,
ListPostReportsResponse,
ListPrivateMessageReports,
ListPrivateMessageReportsResponse,
PostReportResponse,
PostReportView,
PrivateMessageReportResponse,
PrivateMessageReportView,
UserOperation,
wsJsonToRes,
wsUserOp,
@ -19,6 +23,7 @@ import { i18n } from "../../i18next";
import { InitialFetchRequest } from "../../interfaces";
import { UserService, WebSocketService } from "../../services";
import {
amAdmin,
auth,
fetchLimit,
isBrowser,
@ -27,6 +32,7 @@ import {
toast,
updateCommentReportRes,
updatePostReportRes,
updatePrivateMessageReportRes,
wsClient,
wsSubscribe,
} from "../../utils";
@ -35,6 +41,7 @@ import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
import { Paginator } from "../common/paginator";
import { PostReport } from "../post/post-report";
import { PrivateMessageReport } from "../private_message/private-message-report";
enum UnreadOrAll {
Unread,
@ -45,23 +52,26 @@ enum MessageType {
All,
CommentReport,
PostReport,
PrivateMessageReport,
}
enum MessageEnum {
CommentReport,
PostReport,
PrivateMessageReport,
}
type ItemType = {
id: number;
type_: MessageEnum;
view: CommentReportView | PostReportView;
view: CommentReportView | PostReportView | PrivateMessageReportView;
published: string;
};
interface ReportsState {
listCommentReportsResponse: Option<ListCommentReportsResponse>;
listPostReportsResponse: Option<ListPostReportsResponse>;
listPrivateMessageReportsResponse: Option<ListPrivateMessageReportsResponse>;
unreadOrAll: UnreadOrAll;
messageType: MessageType;
combined: ItemType[];
@ -74,12 +84,14 @@ export class Reports extends Component<any, ReportsState> {
private isoData = setIsoData(
this.context,
ListCommentReportsResponse,
ListPostReportsResponse
ListPostReportsResponse,
ListPrivateMessageReportsResponse
);
private subscription: Subscription;
private emptyState: ReportsState = {
listCommentReportsResponse: None,
listPostReportsResponse: None,
listPrivateMessageReportsResponse: None,
unreadOrAll: UnreadOrAll.Unread,
messageType: MessageType.All,
combined: [],
@ -104,14 +116,28 @@ export class Reports extends Component<any, ReportsState> {
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.listCommentReportsResponse = Some(
this.isoData.routeData[0] as ListCommentReportsResponse
);
this.state.listPostReportsResponse = Some(
this.isoData.routeData[1] as ListPostReportsResponse
);
this.state.combined = this.buildCombined();
this.state.loading = false;
this.state = {
...this.state,
listCommentReportsResponse: Some(
this.isoData.routeData[0] as ListCommentReportsResponse
),
listPostReportsResponse: Some(
this.isoData.routeData[1] as ListPostReportsResponse
),
};
if (amAdmin()) {
this.state = {
...this.state,
listPrivateMessageReportsResponse: Some(
this.isoData.routeData[2] as ListPrivateMessageReportsResponse
),
};
}
this.state = {
...this.state,
combined: this.buildCombined(),
loading: false,
};
} else {
this.refetch();
}
@ -139,27 +165,29 @@ export class Reports extends Component<any, ReportsState> {
render() {
return (
<div class="container">
<div className="container">
{this.state.loading ? (
<h5>
<Spinner large />
</h5>
) : (
<div class="row">
<div class="col-12">
<div className="row">
<div className="col-12">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={None}
image={None}
/>
<h5 class="mb-2">{i18n.t("reports")}</h5>
<h5 className="mb-2">{i18n.t("reports")}</h5>
{this.selects()}
{this.state.messageType == MessageType.All && this.all()}
{this.state.messageType == MessageType.CommentReport &&
this.commentReports()}
{this.state.messageType == MessageType.PostReport &&
this.postReports()}
{this.state.messageType == MessageType.PrivateMessageReport &&
this.privateMessageReports()}
<Paginator
page={this.state.page}
onChange={this.handlePageChange}
@ -173,7 +201,7 @@ export class Reports extends Component<any, ReportsState> {
unreadOrAllRadios() {
return (
<div class="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<label
className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@ -206,7 +234,7 @@ export class Reports extends Component<any, ReportsState> {
messageTypeRadios() {
return (
<div class="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<label
className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.All && "active"}
@ -246,6 +274,26 @@ export class Reports extends Component<any, ReportsState> {
/>
{i18n.t("posts")}
</label>
{amAdmin() && (
<label
className={`btn btn-outline-secondary pointer
${
this.state.messageType == MessageType.PrivateMessageReport &&
"active"
}
`}
>
<input
type="radio"
value={MessageType.PrivateMessageReport}
checked={
this.state.messageType == MessageType.PrivateMessageReport
}
onChange={linkEvent(this, this.handleMessageTypeChange)}
/>
{i18n.t("messages")}
</label>
)}
</div>
);
}
@ -253,13 +301,13 @@ export class Reports extends Component<any, ReportsState> {
selects() {
return (
<div className="mb-2">
<span class="mr-3">{this.unreadOrAllRadios()}</span>
<span class="mr-3">{this.messageTypeRadios()}</span>
<span className="mr-3">{this.unreadOrAllRadios()}</span>
<span className="mr-3">{this.messageTypeRadios()}</span>
</div>
);
}
replyToReplyType(r: CommentReportView): ItemType {
commentReportToItemType(r: CommentReportView): ItemType {
return {
id: r.comment_report.id,
type_: MessageEnum.CommentReport,
@ -268,7 +316,7 @@ export class Reports extends Component<any, ReportsState> {
};
}
mentionToReplyType(r: PostReportView): ItemType {
postReportToItemType(r: PostReportView): ItemType {
return {
id: r.post_report.id,
type_: MessageEnum.PostReport,
@ -277,17 +325,31 @@ export class Reports extends Component<any, ReportsState> {
};
}
privateMessageReportToItemType(r: PrivateMessageReportView): ItemType {
return {
id: r.private_message_report.id,
type_: MessageEnum.PrivateMessageReport,
view: r,
published: r.private_message_report.published,
};
}
buildCombined(): ItemType[] {
let comments: ItemType[] = this.state.listCommentReportsResponse
.map(r => r.comment_reports)
.unwrapOr([])
.map(r => this.replyToReplyType(r));
.map(r => this.commentReportToItemType(r));
let posts: ItemType[] = this.state.listPostReportsResponse
.map(r => r.post_reports)
.unwrapOr([])
.map(r => this.mentionToReplyType(r));
.map(r => this.postReportToItemType(r));
let privateMessages: ItemType[] =
this.state.listPrivateMessageReportsResponse
.map(r => r.private_message_reports)
.unwrapOr([])
.map(r => this.privateMessageReportToItemType(r));
return [...comments, ...posts].sort((a, b) =>
return [...comments, ...posts, ...privateMessages].sort((a, b) =>
b.published.localeCompare(a.published)
);
}
@ -300,6 +362,13 @@ export class Reports extends Component<any, ReportsState> {
);
case MessageEnum.PostReport:
return <PostReport key={i.id} report={i.view as PostReportView} />;
case MessageEnum.PrivateMessageReport:
return (
<PrivateMessageReport
key={i.id}
report={i.view as PrivateMessageReportView}
/>
);
default:
return <div />;
}
@ -350,22 +419,37 @@ export class Reports extends Component<any, ReportsState> {
});
}
privateMessageReports() {
return this.state.listPrivateMessageReportsResponse.match({
some: res => (
<div>
{res.private_message_reports.map(pmr => (
<>
<hr />
<PrivateMessageReport
key={pmr.private_message_report.id}
report={pmr}
/>
</>
))}
</div>
),
none: <></>,
});
}
handlePageChange(page: number) {
this.setState({ page });
this.refetch();
}
handleUnreadOrAllChange(i: Reports, event: any) {
i.state.unreadOrAll = Number(event.target.value);
i.state.page = 1;
i.setState(i.state);
i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
i.refetch();
}
handleMessageTypeChange(i: Reports, event: any) {
i.state.messageType = Number(event.target.value);
i.state.page = 1;
i.setState(i.state);
i.setState({ messageType: Number(event.target.value), page: 1 });
i.refetch();
}
@ -398,6 +482,18 @@ export class Reports extends Component<any, ReportsState> {
});
promises.push(req.client.listPostReports(postReportsForm));
if (amAdmin()) {
let privateMessageReportsForm = new ListPrivateMessageReports({
unresolved_only,
page,
limit,
auth,
});
promises.push(
req.client.listPrivateMessageReports(privateMessageReportsForm)
);
}
return promises;
}
@ -428,6 +524,18 @@ export class Reports extends Component<any, ReportsState> {
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm));
if (amAdmin()) {
let privateMessageReportsForm = new ListPrivateMessageReports({
unresolved_only,
page,
limit,
auth: auth().unwrap(),
});
WebSocketService.Instance.send(
wsClient.listPrivateMessageReports(privateMessageReportsForm)
);
}
}
parseMessage(msg: any) {
@ -443,24 +551,30 @@ export class Reports extends Component<any, ReportsState> {
msg,
ListCommentReportsResponse
);
this.state.listCommentReportsResponse = Some(data);
this.state.combined = this.buildCombined();
this.state.loading = false;
this.setState({ listCommentReportsResponse: Some(data) });
this.setState({ combined: this.buildCombined(), loading: false });
// this.sendUnreadCount();
window.scrollTo(0, 0);
this.setState(this.state);
setupTippy();
} else if (op == UserOperation.ListPostReports) {
let data = wsJsonToRes<ListPostReportsResponse>(
msg,
ListPostReportsResponse
);
this.state.listPostReportsResponse = Some(data);
this.state.combined = this.buildCombined();
this.state.loading = false;
this.setState({ listPostReportsResponse: Some(data) });
this.setState({ combined: this.buildCombined(), loading: false });
// this.sendUnreadCount();
window.scrollTo(0, 0);
setupTippy();
} else if (op == UserOperation.ListPrivateMessageReports) {
let data = wsJsonToRes<ListPrivateMessageReportsResponse>(
msg,
ListPrivateMessageReportsResponse
);
this.setState({ listPrivateMessageReportsResponse: Some(data) });
this.setState({ combined: this.buildCombined(), loading: false });
// this.sendUnreadCount();
window.scrollTo(0, 0);
this.setState(this.state);
setupTippy();
} else if (op == UserOperation.ResolvePostReport) {
let data = wsJsonToRes<PostReportResponse>(msg, PostReportResponse);
@ -490,6 +604,24 @@ export class Reports extends Component<any, ReportsState> {
urcs.next(urcs.getValue() + 1);
}
this.setState(this.state);
} else if (op == UserOperation.ResolvePrivateMessageReport) {
let data = wsJsonToRes<PrivateMessageReportResponse>(
msg,
PrivateMessageReportResponse
);
updatePrivateMessageReportRes(
data.private_message_report_view,
this.state.listPrivateMessageReportsResponse
.map(r => r.private_message_reports)
.unwrapOr([])
);
let urcs = UserService.Instance.unreadReportCountSub;
if (data.private_message_report_view.private_message_report.resolved) {
urcs.next(urcs.getValue() - 1);
} else {
urcs.next(urcs.getValue() + 1);
}
this.setState(this.state);
}
}
}

466
src/shared/components/person/settings.tsx
View file

@ -54,6 +54,7 @@ import {
import { HtmlTags } from "../common/html-tags";
import { Icon, Spinner } from "../common/icon";
import { ImageUploadForm } from "../common/image-upload-form";
import { LanguageSelect } from "../common/language-select";
import { ListingTypeSelect } from "../common/listing-type-select";
import { MarkdownTextArea } from "../common/markdown-textarea";
import { SortSelect } from "../common/sort-select";
@ -99,7 +100,8 @@ export class Settings extends Component<any, SettingsState> {
default_sort_type: None,
default_listing_type: None,
theme: None,
lang: None,
interface_language: None,
discussion_languages: None,
avatar: None,
banner: None,
display_name: None,
@ -140,6 +142,8 @@ export class Settings extends Component<any, SettingsState> {
this.handleSortTypeChange = this.handleSortTypeChange.bind(this);
this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
this.handleBioChange = this.handleBioChange.bind(this);
this.handleDiscussionLanguageChange =
this.handleDiscussionLanguageChange.bind(this);
this.handleAvatarUpload = this.handleAvatarUpload.bind(this);
this.handleAvatarRemove = this.handleAvatarRemove.bind(this);
@ -150,13 +154,44 @@ export class Settings extends Component<any, SettingsState> {
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
this.setUserInfo();
if (UserService.Instance.myUserInfo.isSome()) {
let mui = UserService.Instance.myUserInfo.unwrap();
let luv = mui.local_user_view;
this.state = {
...this.state,
personBlocks: mui.person_blocks,
communityBlocks: mui.community_blocks,
saveUserSettingsForm: {
...this.state.saveUserSettingsForm,
show_nsfw: Some(luv.local_user.show_nsfw),
theme: Some(luv.local_user.theme ? luv.local_user.theme : "browser"),
default_sort_type: Some(luv.local_user.default_sort_type),
default_listing_type: Some(luv.local_user.default_listing_type),
interface_language: Some(luv.local_user.interface_language),
discussion_languages: Some(mui.discussion_languages.map(l => l.id)),
avatar: luv.person.avatar,
banner: luv.person.banner,
display_name: luv.person.display_name,
show_avatars: Some(luv.local_user.show_avatars),
bot_account: Some(luv.person.bot_account),
show_bot_accounts: Some(luv.local_user.show_bot_accounts),
show_scores: Some(luv.local_user.show_scores),
show_read_posts: Some(luv.local_user.show_read_posts),
show_new_post_notifs: Some(luv.local_user.show_new_post_notifs),
email: luv.local_user.email,
bio: luv.person.bio,
send_notifications_to_email: Some(
luv.local_user.send_notifications_to_email
),
matrix_user_id: luv.person.matrix_user_id,
},
};
}
}
async componentDidMount() {
setupTippy();
this.state.themeList = await fetchThemeList();
this.setState(this.state);
this.setState({ themeList: await fetchThemeList() });
}
componentWillUnmount() {
@ -169,7 +204,7 @@ export class Settings extends Component<any, SettingsState> {
render() {
return (
<div class="container">
<div className="container">
<>
<HtmlTags
title={this.documentTitle}
@ -177,10 +212,10 @@ export class Settings extends Component<any, SettingsState> {
description={Some(this.documentTitle)}
image={this.state.saveUserSettingsForm.avatar}
/>
<ul class="nav nav-tabs mb-2">
<li class="nav-item">
<ul className="nav nav-tabs mb-2">
<li className="nav-item">
<button
class={`nav-link btn ${
className={`nav-link btn ${
this.state.currentTab == "settings" && "active"
}`}
onClick={linkEvent(
@ -191,9 +226,9 @@ export class Settings extends Component<any, SettingsState> {
{i18n.t("settings")}
</button>
</li>
<li class="nav-item">
<li className="nav-item">
<button
class={`nav-link btn ${
className={`nav-link btn ${
this.state.currentTab == "blocks" && "active"
}`}
onClick={linkEvent(
@ -214,15 +249,15 @@ export class Settings extends Component<any, SettingsState> {
userSettings() {
return (
<div class="row">
<div class="col-12 col-md-6">
<div class="card border-secondary mb-3">
<div class="card-body">{this.saveUserSettingsHtmlForm()}</div>
<div className="row">
<div className="col-12 col-md-6">
<div className="card border-secondary mb-3">
<div className="card-body">{this.saveUserSettingsHtmlForm()}</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card border-secondary mb-3">
<div class="card-body">{this.changePasswordHtmlForm()}</div>
<div className="col-12 col-md-6">
<div className="card border-secondary mb-3">
<div className="card-body">{this.changePasswordHtmlForm()}</div>
</div>
</div>
</div>
@ -231,15 +266,15 @@ export class Settings extends Component<any, SettingsState> {
blockCards() {
return (
<div class="row">
<div class="col-12 col-md-6">
<div class="card border-secondary mb-3">
<div class="card-body">{this.blockUserCard()}</div>
<div className="row">
<div className="col-12 col-md-6">
<div className="card border-secondary mb-3">
<div className="card-body">{this.blockUserCard()}</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card border-secondary mb-3">
<div class="card-body">{this.blockCommunityCard()}</div>
<div className="col-12 col-md-6">
<div className="card border-secondary mb-3">
<div className="card-body">{this.blockCommunityCard()}</div>
</div>
</div>
</div>
@ -251,15 +286,15 @@ export class Settings extends Component<any, SettingsState> {
<>
<h5>{i18n.t("change_password")}</h5>
<form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
<div class="form-group row">
<label class="col-sm-5 col-form-label" htmlFor="user-password">
<div className="form-group row">
<label className="col-sm-5 col-form-label" htmlFor="user-password">
{i18n.t("new_password")}
</label>
<div class="col-sm-7">
<div className="col-sm-7">
<input
type="password"
id="user-password"
class="form-control"
className="form-control"
value={this.state.changePasswordForm.new_password}
autoComplete="new-password"
maxLength={60}
@ -267,18 +302,18 @@ export class Settings extends Component<any, SettingsState> {
/>
</div>
</div>
<div class="form-group row">
<div className="form-group row">
<label
class="col-sm-5 col-form-label"
className="col-sm-5 col-form-label"
htmlFor="user-verify-password"
>
{i18n.t("verify_password")}
</label>
<div class="col-sm-7">
<div className="col-sm-7">
<input
type="password"
id="user-verify-password"
class="form-control"
className="form-control"
value={this.state.changePasswordForm.new_password_verify}
autoComplete="new-password"
maxLength={60}
@ -286,15 +321,18 @@ export class Settings extends Component<any, SettingsState> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-5 col-form-label" htmlFor="user-old-password">
<div className="form-group row">
<label
className="col-sm-5 col-form-label"
htmlFor="user-old-password"
>
{i18n.t("old_password")}
</label>
<div class="col-sm-7">
<div className="col-sm-7">
<input
type="password"
id="user-old-password"
class="form-control"
className="form-control"
value={this.state.changePasswordForm.old_password}
autoComplete="new-password"
maxLength={60}
@ -302,8 +340,8 @@ export class Settings extends Component<any, SettingsState> {
/>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-secondary mr-4">
<div className="form-group">
<button type="submit" className="btn btn-block btn-secondary mr-4">
{this.state.changePasswordLoading ? (
<Spinner />
) : (
@ -329,9 +367,9 @@ export class Settings extends Component<any, SettingsState> {
return (
<>
<h5>{i18n.t("blocked_users")}</h5>
<ul class="list-unstyled mb-0">
<ul className="list-unstyled mb-0">
{this.state.personBlocks.map(pb => (
<li>
<li key={pb.target.id}>
<span>
<PersonListing person={pb.target} />
<button
@ -354,13 +392,16 @@ export class Settings extends Component<any, SettingsState> {
blockUserForm() {
return (
<div class="form-group row">
<label class="col-md-4 col-form-label" htmlFor="block-person-filter">
<div className="form-group row">
<label
className="col-md-4 col-form-label"
htmlFor="block-person-filter"
>
{i18n.t("block_user")}
</label>
<div class="col-md-8">
<div className="col-md-8">
<select
class="form-control"
className="form-control"
id="block-person-filter"
value={this.state.blockPerson.map(p => p.person.id).unwrapOr(0)}
>
@ -392,9 +433,9 @@ export class Settings extends Component<any, SettingsState> {
return (
<>
<h5>{i18n.t("blocked_communities")}</h5>
<ul class="list-unstyled mb-0">
<ul className="list-unstyled mb-0">
{this.state.communityBlocks.map(cb => (
<li>
<li key={cb.community.id}>
<span>
<CommunityLink community={cb.community} />
<button
@ -417,13 +458,16 @@ export class Settings extends Component<any, SettingsState> {
blockCommunityForm() {
return (
<div class="form-group row">
<label class="col-md-4 col-form-label" htmlFor="block-community-filter">
<div className="form-group row">
<label
className="col-md-4 col-form-label"
htmlFor="block-community-filter"
>
{i18n.t("block_community")}
</label>
<div class="col-md-8">
<div className="col-md-8">
<select
class="form-control"
className="form-control"
id="block-community-filter"
value={this.state.blockCommunityId}
>
@ -440,19 +484,21 @@ export class Settings extends Component<any, SettingsState> {
}
saveUserSettingsHtmlForm() {
let selectedLangs = this.state.saveUserSettingsForm.discussion_languages;
return (
<>
<h5>{i18n.t("settings")}</h5>
<form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
<div class="form-group row">
<label class="col-sm-5 col-form-label" htmlFor="display-name">
<div className="form-group row">
<label className="col-sm-5 col-form-label" htmlFor="display-name">
{i18n.t("display_name")}
</label>
<div class="col-sm-7">
<div className="col-sm-7">
<input
id="display-name"
type="text"
class="form-control"
className="form-control"
placeholder={i18n.t("optional")}
value={toUndefined(
this.state.saveUserSettingsForm.display_name
@ -463,30 +509,32 @@ export class Settings extends Component<any, SettingsState> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" htmlFor="user-bio">
<div className="form-group row">
<label className="col-sm-3 col-form-label" htmlFor="user-bio">
{i18n.t("bio")}
</label>
<div class="col-sm-9">
<div className="col-sm-9">
<MarkdownTextArea
initialContent={this.state.saveUserSettingsForm.bio}
initialLanguageId={None}
onContentChange={this.handleBioChange}
maxLength={Some(300)}
placeholder={None}
buttonTitle={None}
hideNavigationWarnings
allLanguages={this.state.siteRes.all_languages}
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" htmlFor="user-email">
<div className="form-group row">
<label className="col-sm-3 col-form-label" htmlFor="user-email">
{i18n.t("email")}
</label>
<div class="col-sm-9">
<div className="col-sm-9">
<input
type="email"
id="user-email"
class="form-control"
className="form-control"
placeholder={i18n.t("optional")}
value={toUndefined(this.state.saveUserSettingsForm.email)}
onInput={linkEvent(this, this.handleEmailChange)}
@ -494,17 +542,17 @@ export class Settings extends Component<any, SettingsState> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-5 col-form-label" htmlFor="matrix-user-id">
<div className="form-group row">
<label className="col-sm-5 col-form-label" htmlFor="matrix-user-id">
<a href={elementUrl} rel={relTags}>
{i18n.t("matrix_user_id")}
</a>
</label>
<div class="col-sm-7">
<div className="col-sm-7">
<input
id="matrix-user-id"
type="text"
class="form-control"
className="form-control"
placeholder="@user:example.com"
value={toUndefined(
this.state.saveUserSettingsForm.matrix_user_id
@ -514,9 +562,9 @@ export class Settings extends Component<any, SettingsState> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3">{i18n.t("avatar")}</label>
<div class="col-sm-9">
<div className="form-group row">
<label className="col-sm-3">{i18n.t("avatar")}</label>
<div className="col-sm-9">
<ImageUploadForm
uploadTitle={i18n.t("upload_avatar")}
imageSrc={this.state.saveUserSettingsForm.avatar}
@ -526,9 +574,9 @@ export class Settings extends Component<any, SettingsState> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3">{i18n.t("banner")}</label>
<div class="col-sm-9">
<div className="form-group row">
<label className="col-sm-3">{i18n.t("banner")}</label>
<div className="col-sm-9">
<ImageUploadForm
uploadTitle={i18n.t("upload_banner")}
imageSrc={this.state.saveUserSettingsForm.banner}
@ -537,19 +585,21 @@ export class Settings extends Component<any, SettingsState> {
/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3" htmlFor="user-language">
{i18n.t("language")}
<div className="form-group row">
<label className="col-sm-3" htmlFor="user-language">
{i18n.t("interface_language")}
</label>
<div class="col-sm-9">
<div className="col-sm-9">
<select
id="user-language"
value={toUndefined(this.state.saveUserSettingsForm.lang)}
onChange={linkEvent(this, this.handleLangChange)}
class="custom-select w-auto"
value={toUndefined(
this.state.saveUserSettingsForm.interface_language
)}
onChange={linkEvent(this, this.handleInterfaceLangChange)}
className="custom-select w-auto"
>
<option disabled aria-hidden="true">
{i18n.t("language")}
{i18n.t("interface_language")}
</option>
<option value="browser">{i18n.t("browser_default")}</option>
<option disabled aria-hidden="true">
@ -558,35 +608,45 @@ export class Settings extends Component<any, SettingsState> {
{languages
.sort((a, b) => a.code.localeCompare(b.code))
.map(lang => (
<option value={lang.code}>{lang.name}</option>
<option key={lang.code} value={lang.code}>
{lang.name}
</option>
))}
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3" htmlFor="user-theme">
<LanguageSelect
allLanguages={this.state.siteRes.all_languages}
selectedLanguageIds={selectedLangs}
multiple={true}
onChange={this.handleDiscussionLanguageChange}
/>
<div className="form-group row">
<label className="col-sm-3" htmlFor="user-theme">
{i18n.t("theme")}
</label>
<div class="col-sm-9">
<div className="col-sm-9">
<select
id="user-theme"
value={toUndefined(this.state.saveUserSettingsForm.theme)}
onChange={linkEvent(this, this.handleThemeChange)}
class="custom-select w-auto"
className="custom-select w-auto"
>
<option disabled aria-hidden="true">
{i18n.t("theme")}
</option>
<option value="browser">{i18n.t("browser_default")}</option>
{this.state.themeList.map(theme => (
<option value={theme}>{theme}</option>
<option key={theme} value={theme}>
{theme}
</option>
))}
</select>
</div>
</div>
<form className="form-group row">
<label class="col-sm-3">{i18n.t("type")}</label>
<div class="col-sm-9">
<label className="col-sm-3">{i18n.t("type")}</label>
<div className="col-sm-9">
<ListingTypeSelect
type_={
Object.values(ListingType)[
@ -602,8 +662,8 @@ export class Settings extends Component<any, SettingsState> {
</div>
</form>
<form className="form-group row">
<label class="col-sm-3">{i18n.t("sort_type")}</label>
<div class="col-sm-9">
<label className="col-sm-3">{i18n.t("sort_type")}</label>
<div className="col-sm-9">
<SortSelect
sort={
Object.values(SortType)[
@ -617,10 +677,10 @@ export class Settings extends Component<any, SettingsState> {
</div>
</form>
{enableNsfw(this.state.siteRes) && (
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="user-show-nsfw"
type="checkbox"
checked={toUndefined(
@ -628,16 +688,16 @@ export class Settings extends Component<any, SettingsState> {
)}
onChange={linkEvent(this, this.handleShowNsfwChange)}
/>
<label class="form-check-label" htmlFor="user-show-nsfw">
<label className="form-check-label" htmlFor="user-show-nsfw">
{i18n.t("show_nsfw")}
</label>
</div>
</div>
)}
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="user-show-scores"
type="checkbox"
checked={toUndefined(
@ -645,15 +705,15 @@ export class Settings extends Component<any, SettingsState> {
)}
onChange={linkEvent(this, this.handleShowScoresChange)}
/>
<label class="form-check-label" htmlFor="user-show-scores">
<label className="form-check-label" htmlFor="user-show-scores">
{i18n.t("show_scores")}
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="user-show-avatars"
type="checkbox"
checked={toUndefined(
@ -661,15 +721,15 @@ export class Settings extends Component<any, SettingsState> {
)}
onChange={linkEvent(this, this.handleShowAvatarsChange)}
/>
<label class="form-check-label" htmlFor="user-show-avatars">
<label className="form-check-label" htmlFor="user-show-avatars">
{i18n.t("show_avatars")}
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="user-bot-account"
type="checkbox"
checked={toUndefined(
@ -677,15 +737,15 @@ export class Settings extends Component<any, SettingsState> {
)}
onChange={linkEvent(this, this.handleBotAccount)}
/>
<label class="form-check-label" htmlFor="user-bot-account">
<label className="form-check-label" htmlFor="user-bot-account">
{i18n.t("bot_account")}
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="user-show-bot-accounts"
type="checkbox"
checked={toUndefined(
@ -693,15 +753,18 @@ export class Settings extends Component<any, SettingsState> {
)}
onChange={linkEvent(this, this.handleShowBotAccounts)}
/>
<label class="form-check-label" htmlFor="user-show-bot-accounts">
<label
className="form-check-label"
htmlFor="user-show-bot-accounts"
>
{i18n.t("show_bot_accounts")}
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="user-show-read-posts"
type="checkbox"
checked={toUndefined(
@ -709,15 +772,18 @@ export class Settings extends Component<any, SettingsState> {
)}
onChange={linkEvent(this, this.handleReadPosts)}
/>
<label class="form-check-label" htmlFor="user-show-read-posts">
<label
className="form-check-label"
htmlFor="user-show-read-posts"
>
{i18n.t("show_read_posts")}
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="user-show-new-post-notifs"
type="checkbox"
checked={toUndefined(
@ -726,17 +792,17 @@ export class Settings extends Component<any, SettingsState> {
onChange={linkEvent(this, this.handleShowNewPostNotifs)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="user-show-new-post-notifs"
>
{i18n.t("show_new_post_notifs")}
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="user-send-notifications-to-email"
type="checkbox"
disabled={!this.state.saveUserSettingsForm.email}
@ -749,15 +815,15 @@ export class Settings extends Component<any, SettingsState> {
)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="user-send-notifications-to-email"
>
{i18n.t("send_notifications_to_email")}
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-secondary mr-4">
<div className="form-group">
<button type="submit" className="btn btn-block btn-secondary mr-4">
{this.state.saveUserSettingsLoading ? (
<Spinner />
) : (
@ -766,9 +832,9 @@ export class Settings extends Component<any, SettingsState> {
</button>
</div>
<hr />
<div class="form-group">
<div className="form-group">
<button
class="btn btn-block btn-danger"
className="btn btn-block btn-danger"
onClick={linkEvent(
this,
this.handleDeleteAccountShowConfirmToggle
@ -778,7 +844,7 @@ export class Settings extends Component<any, SettingsState> {
</button>
{this.state.deleteAccountShowConfirm && (
<>
<div class="my-2 alert alert-danger" role="alert">
<div className="my-2 alert alert-danger" role="alert">
{i18n.t("delete_account_confirm")}
</div>
<input
@ -790,10 +856,10 @@ export class Settings extends Component<any, SettingsState> {
this,
this.handleDeleteAccountPasswordChange
)}
class="form-control my-2"
className="form-control my-2"
/>
<button
class="btn btn-danger mr-4"
className="btn btn-danger mr-4"
disabled={!this.state.deleteAccountForm.password}
onClick={linkEvent(this, this.handleDeleteAccount)}
>
@ -804,7 +870,7 @@ export class Settings extends Component<any, SettingsState> {
)}
</button>
<button
class="btn btn-secondary"
className="btn btn-secondary"
onClick={linkEvent(
this,
this.handleDeleteAccountShowConfirmToggle
@ -991,26 +1057,40 @@ export class Settings extends Component<any, SettingsState> {
i.setState(i.state);
}
handleLangChange(i: Settings, event: any) {
i.state.saveUserSettingsForm.lang = Some(event.target.value);
handleInterfaceLangChange(i: Settings, event: any) {
i.state.saveUserSettingsForm.interface_language = Some(event.target.value);
i18n.changeLanguage(
getLanguages(i.state.saveUserSettingsForm.lang.unwrap())[0]
getLanguages(i.state.saveUserSettingsForm.interface_language.unwrap())[0]
);
i.setState(i.state);
}
handleSortTypeChange(val: SortType) {
this.state.saveUserSettingsForm.default_sort_type = Some(
Object.keys(SortType).indexOf(val)
handleDiscussionLanguageChange(val: number[]) {
this.setState(
s => ((s.saveUserSettingsForm.discussion_languages = Some(val)), s)
);
}
handleSortTypeChange(val: SortType) {
this.setState(
s => (
(s.saveUserSettingsForm.default_sort_type = Some(
Object.keys(SortType).indexOf(val)
)),
s
)
);
this.setState(this.state);
}
handleListingTypeChange(val: ListingType) {
this.state.saveUserSettingsForm.default_listing_type = Some(
Object.keys(ListingType).indexOf(val)
this.setState(
s => (
(s.saveUserSettingsForm.default_listing_type = Some(
Object.keys(ListingType).indexOf(val)
)),
s
)
);
this.setState(this.state);
}
handleEmailChange(i: Settings, event: any) {
@ -1019,28 +1099,23 @@ export class Settings extends Component<any, SettingsState> {
}
handleBioChange(val: string) {
this.state.saveUserSettingsForm.bio = Some(val);
this.setState(this.state);
this.setState(s => ((s.saveUserSettingsForm.bio = Some(val)), s));
}
handleAvatarUpload(url: string) {
this.state.saveUserSettingsForm.avatar = Some(url);
this.setState(this.state);
this.setState(s => ((s.saveUserSettingsForm.avatar = Some(url)), s));
}
handleAvatarRemove() {
this.state.saveUserSettingsForm.avatar = Some("");
this.setState(this.state);
this.setState(s => ((s.saveUserSettingsForm.avatar = Some("")), s));
}
handleBannerUpload(url: string) {
this.state.saveUserSettingsForm.banner = Some(url);
this.setState(this.state);
this.setState(s => ((s.saveUserSettingsForm.banner = Some(url)), s));
}
handleBannerRemove() {
this.state.saveUserSettingsForm.banner = Some("");
this.setState(this.state);
this.setState(s => ((s.saveUserSettingsForm.banner = Some("")), s));
}
handleDisplayNameChange(i: Settings, event: any) {
@ -1079,30 +1154,26 @@ export class Settings extends Component<any, SettingsState> {
handleSaveSettingsSubmit(i: Settings, event: any) {
event.preventDefault();
i.state.saveUserSettingsLoading = true;
i.state.saveUserSettingsForm.auth = auth().unwrap();
i.setState(i.state);
i.setState({ saveUserSettingsLoading: true });
i.setState(s => ((s.saveUserSettingsForm.auth = auth().unwrap()), s));
WebSocketService.Instance.send(
wsClient.saveUserSettings(i.state.saveUserSettingsForm)
);
let form = new SaveUserSettings({ ...i.state.saveUserSettingsForm });
WebSocketService.Instance.send(wsClient.saveUserSettings(form));
}
handleChangePasswordSubmit(i: Settings, event: any) {
event.preventDefault();
i.state.changePasswordLoading = true;
i.state.changePasswordForm.auth = auth().unwrap();
i.setState(i.state);
i.setState({ changePasswordLoading: true });
i.setState(s => ((s.changePasswordForm.auth = auth().unwrap()), s));
WebSocketService.Instance.send(
wsClient.changePassword(i.state.changePasswordForm)
);
let form = new ChangePassword({ ...i.state.changePasswordForm });
WebSocketService.Instance.send(wsClient.changePassword(form));
}
handleDeleteAccountShowConfirmToggle(i: Settings, event: any) {
event.preventDefault();
i.state.deleteAccountShowConfirm = !i.state.deleteAccountShowConfirm;
i.setState(i.state);
i.setState({ deleteAccountShowConfirm: !i.state.deleteAccountShowConfirm });
}
handleDeleteAccountPasswordChange(i: Settings, event: any) {
@ -1112,13 +1183,12 @@ export class Settings extends Component<any, SettingsState> {
handleDeleteAccount(i: Settings, event: any) {
event.preventDefault();
i.state.deleteAccountLoading = true;
i.state.deleteAccountForm.auth = auth().unwrap();
i.setState(i.state);
i.setState({ deleteAccountLoading: true });
i.setState(s => ((s.deleteAccountForm.auth = auth().unwrap()), s));
WebSocketService.Instance.send(
wsClient.deleteAccount(i.state.deleteAccountForm)
);
let form = new DeleteAccount({ ...i.state.deleteAccountForm });
WebSocketService.Instance.send(wsClient.deleteAccount(form));
}
handleSwitchTab(i: { ctx: Settings; tab: string }) {
@ -1130,58 +1200,6 @@ export class Settings extends Component<any, SettingsState> {
}
}
setUserInfo() {
UserService.Instance.myUserInfo.match({
some: mui => {
let luv = mui.local_user_view;
this.state.saveUserSettingsForm.show_nsfw = Some(
luv.local_user.show_nsfw
);
this.state.saveUserSettingsForm.theme = Some(
luv.local_user.theme ? luv.local_user.theme : "browser"
);
this.state.saveUserSettingsForm.default_sort_type = Some(
luv.local_user.default_sort_type
);
this.state.saveUserSettingsForm.default_listing_type = Some(
luv.local_user.default_listing_type
);
this.state.saveUserSettingsForm.lang = Some(luv.local_user.lang);
this.state.saveUserSettingsForm.avatar = luv.person.avatar;
this.state.saveUserSettingsForm.banner = luv.person.banner;
this.state.saveUserSettingsForm.display_name = luv.person.display_name;
this.state.saveUserSettingsForm.show_avatars = Some(
luv.local_user.show_avatars
);
this.state.saveUserSettingsForm.bot_account = Some(
luv.person.bot_account
);
this.state.saveUserSettingsForm.show_bot_accounts = Some(
luv.local_user.show_bot_accounts
);
this.state.saveUserSettingsForm.show_scores = Some(
luv.local_user.show_scores
);
this.state.saveUserSettingsForm.show_read_posts = Some(
luv.local_user.show_read_posts
);
this.state.saveUserSettingsForm.show_new_post_notifs = Some(
luv.local_user.show_new_post_notifs
);
this.state.saveUserSettingsForm.email = luv.local_user.email;
this.state.saveUserSettingsForm.bio = luv.person.bio;
this.state.saveUserSettingsForm.send_notifications_to_email = Some(
luv.local_user.send_notifications_to_email
);
this.state.saveUserSettingsForm.matrix_user_id =
luv.person.matrix_user_id;
this.state.personBlocks = mui.person_blocks;
this.state.communityBlocks = mui.community_blocks;
},
none: void 0,
});
}
parseMessage(msg: any) {
let op = wsUserOp(msg);
console.log(msg);
@ -1196,15 +1214,13 @@ export class Settings extends Component<any, SettingsState> {
} else if (op == UserOperation.SaveUserSettings) {
let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
UserService.Instance.login(data);
this.state.saveUserSettingsLoading = false;
this.setState(this.state);
this.setState({ saveUserSettingsLoading: false });
toast(i18n.t("saved"));
window.scrollTo(0, 0);
} else if (op == UserOperation.ChangePassword) {
let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
UserService.Instance.login(data);
this.state.changePasswordLoading = false;
this.setState(this.state);
this.setState({ changePasswordLoading: false });
window.scrollTo(0, 0);
toast(i18n.t("password_changed"));
} else if (op == UserOperation.DeleteAccount) {

9
src/shared/components/person/verify-email.tsx
View file

@ -66,15 +66,15 @@ export class VerifyEmail extends Component<any, State> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={None}
image={None}
/>
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{i18n.t("verify_email")}</h5>
</div>
</div>
@ -94,8 +94,7 @@ export class VerifyEmail extends Component<any, State> {
let data = wsJsonToRes<VerifyEmailResponse>(msg, VerifyEmailResponse);
if (data) {
toast(i18n.t("email_verified"));
this.state = this.emptyState;
this.setState(this.state);
this.setState(this.emptyState);
this.props.history.push("/login");
}
}

40
src/shared/components/post/create-post.tsx
View file

@ -50,23 +50,27 @@ export class CreatePost extends Component<any, CreatePostState> {
constructor(props: any, context: any) {
super(props, context);
this.handlePostCreate = this.handlePostCreate.bind(this);
this.state = this.emptyState;
this.handlePostCreate = this.handlePostCreate.bind(this);
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
if (UserService.Instance.myUserInfo.isNone() && isBrowser()) {
toast(i18n.t("not_logged_in"), "danger");
this.context.router.history.push(`/login`);
}
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.listCommunitiesResponse = Some(
this.isoData.routeData[0] as ListCommunitiesResponse
);
this.state.loading = false;
this.state = {
...this.state,
listCommunitiesResponse: Some(
this.isoData.routeData[0] as ListCommunitiesResponse
),
loading: false,
};
} else {
this.refetch();
}
@ -123,7 +127,7 @@ export class CreatePost extends Component<any, CreatePostState> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -137,8 +141,8 @@ export class CreatePost extends Component<any, CreatePostState> {
) : (
this.state.listCommunitiesResponse.match({
some: res => (
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{i18n.t("create_post")}</h5>
<PostForm
post_view={None}
@ -147,6 +151,7 @@ export class CreatePost extends Component<any, CreatePostState> {
params={Some(this.params)}
enableDownvotes={enableDownvotes(this.state.siteRes)}
enableNsfw={enableNsfw(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
</div>
</div>
@ -230,16 +235,15 @@ export class CreatePost extends Component<any, CreatePostState> {
msg,
ListCommunitiesResponse
);
this.state.listCommunitiesResponse = Some(data);
this.state.loading = false;
this.setState(this.state);
this.setState({ listCommunitiesResponse: Some(data), loading: false });
} else if (op == UserOperation.GetCommunity) {
let data = wsJsonToRes<GetCommunityResponse>(msg, GetCommunityResponse);
this.state.listCommunitiesResponse = Some({
communities: [data.community_view],
this.setState({
listCommunitiesResponse: Some({
communities: [data.community_view],
}),
loading: false,
});
this.state.loading = false;
this.setState(this.state);
}
}
}

59
src/shared/components/post/metadata-card.tsx
View file

@ -34,27 +34,33 @@ export class MetadataCard extends Component<
some: embedTitle =>
post.url.match({
some: url => (
<div class="card border-secondary mt-3 mb-2">
<div class="row">
<div class="col-12">
<div class="card-body">
{post.name !== embedTitle && [
<h5 class="card-title d-inline">
<a class="text-body" href={url} rel={relTags}>
{embedTitle}
</a>
</h5>,
<span class="d-inline-block ml-2 mb-2 small text-muted">
<a
class="text-muted font-italic"
href={url}
rel={relTags}
>
{new URL(url).hostname}
<Icon icon="external-link" classes="ml-1" />
</a>
</span>,
]}
<div className="card border-secondary mt-3 mb-2">
<div className="row">
<div className="col-12">
<div className="card-body">
{post.name !== embedTitle && (
<>
<h5 className="card-title d-inline">
<a
className="text-body"
href={url}
rel={relTags}
>
{embedTitle}
</a>
</h5>
<span className="d-inline-block ml-2 mb-2 small text-muted">
<a
className="text-muted font-italic"
href={url}
rel={relTags}
>
{new URL(url).hostname}
<Icon icon="external-link" classes="ml-1" />
</a>
</span>
</>
)}
{post.embed_description.match({
some: desc => (
<div
@ -66,9 +72,9 @@ export class MetadataCard extends Component<
),
none: <></>,
})}
{post.embed_html.isSome() && (
{post.embed_video_url.isSome() && (
<button
class="mt-2 btn btn-secondary text-monospace"
className="mt-2 btn btn-secondary text-monospace"
onClick={linkEvent(this, this.handleIframeExpand)}
data-tippy-content={i18n.t("expand_here")}
>
@ -85,10 +91,10 @@ export class MetadataCard extends Component<
none: <></>,
})}
{this.state.expanded &&
post.embed_html.match({
post.embed_video_url.match({
some: html => (
<div
class="mt-3 mb-2"
className="mt-3 mb-2"
dangerouslySetInnerHTML={{ __html: html }}
/>
),
@ -99,7 +105,6 @@ export class MetadataCard extends Component<
}
handleIframeExpand(i: MetadataCard) {
i.state.expanded = !i.state.expanded;
i.setState(i.state);
i.setState({ expanded: !i.state.expanded });
}
}

247
src/shared/components/post/post-form.tsx
View file

@ -6,6 +6,7 @@ import {
CommunityView,
CreatePost,
EditPost,
Language,
ListingType,
PostResponse,
PostView,
@ -36,6 +37,7 @@ import {
ghostArchiveUrl,
isBrowser,
isImage,
myFirstDiscussionLanguageId,
pictrsDeleteToast,
relTags,
setupTippy,
@ -48,6 +50,7 @@ import {
wsSubscribe,
} from "../../utils";
import { Icon, Spinner } from "../common/icon";
import { LanguageSelect } from "../common/language-select";
import { MarkdownTextArea } from "../common/markdown-textarea";
import { PostListings } from "./post-listings";
@ -60,6 +63,7 @@ const MAX_POST_TITLE_LENGTH = 200;
interface PostFormProps {
post_view: Option<PostView>; // If a post is given, that means this is an edit
allLanguages: Language[];
communities: Option<CommunityView[]>;
params: Option<PostFormParams>;
onCancel?(): any;
@ -76,6 +80,7 @@ interface PostFormState {
crossPosts: Option<PostView[]>;
loading: boolean;
imageLoading: boolean;
communitySearchLoading: boolean;
previewMode: boolean;
}
@ -90,10 +95,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
url: None,
body: None,
honeypot: None,
language_id: None,
auth: undefined,
}),
loading: false,
imageLoading: false,
communitySearchLoading: false,
previewMode: false,
suggestedTitle: None,
suggestedPosts: None,
@ -105,35 +112,44 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
this.fetchSimilarPosts = debounce(this.fetchSimilarPosts.bind(this));
this.fetchPageTitle = debounce(this.fetchPageTitle.bind(this));
this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
this.handleLanguageChange = this.handleLanguageChange.bind(this);
this.state = this.emptyState;
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
// Means its an edit
this.props.post_view.match({
some: pv =>
(this.state.postForm = new CreatePost({
if (this.props.post_view.isSome()) {
let pv = this.props.post_view.unwrap();
this.state = {
...this.state,
postForm: new CreatePost({
body: pv.post.body,
name: pv.post.name,
community_id: pv.community.id,
url: pv.post.url,
nsfw: Some(pv.post.nsfw),
honeypot: None,
language_id: Some(pv.post.language_id),
auth: auth().unwrap(),
})),
none: void 0,
});
}),
};
}
this.props.params.match({
some: params => {
this.state.postForm.name = toUndefined(params.name);
this.state.postForm.url = params.url;
this.state.postForm.body = params.body;
},
none: void 0,
});
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
if (this.props.params.isSome()) {
let params = this.props.params.unwrap();
this.state = {
...this.state,
postForm: {
...this.state.postForm,
name: toUndefined(params.name),
url: params.url,
body: params.body,
},
};
}
}
componentDidMount() {
@ -165,6 +181,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
}
render() {
let selectedLangs = this.state.postForm.language_id
.or(myFirstDiscussionLanguageId(UserService.Instance.myUserInfo))
.map(Array.of);
return (
<div>
<Prompt
@ -177,15 +197,15 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
message={i18n.t("block_leaving")}
/>
<form onSubmit={linkEvent(this, this.handlePostSubmit)}>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="post-url">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="post-url">
{i18n.t("url")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<input
type="url"
id="post-url"
class="form-control"
className="form-control"
value={toUndefined(this.state.postForm.url)}
onInput={linkEvent(this, this.handlePostUrlChange)}
onPaste={linkEvent(this, this.handleImageUploadPaste)}
@ -193,7 +213,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{this.state.suggestedTitle.match({
some: title => (
<div
class="mt-1 text-muted small font-weight-bold pointer"
className="mt-1 text-muted small font-weight-bold pointer"
role="button"
onClick={linkEvent(this, this.copySuggestedTitle)}
>
@ -217,7 +237,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
type="file"
accept="image/*,video/*"
name="file"
class="d-none"
className="d-none"
disabled={UserService.Instance.myUserInfo.isNone()}
onChange={linkEvent(this, this.handleImageUpload)}
/>
@ -230,7 +250,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
href={`${webArchiveUrl}/save/${encodeURIComponent(
url
)}`}
class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
rel={relTags}
>
archive.org {i18n.t("archive_link")}
@ -239,7 +259,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
url
)}`}
class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
rel={relTags}
>
ghostarchive.org {i18n.t("archive_link")}
@ -248,7 +268,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
url
)}`}
class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
rel={relTags}
>
archive.today {i18n.t("archive_link")}
@ -260,14 +280,16 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{this.state.imageLoading && <Spinner />}
{this.state.postForm.url.match({
some: url =>
isImage(url) && <img src={url} class="img-fluid" alt="" />,
isImage(url) && (
<img src={url} className="img-fluid" alt="" />
),
none: <></>,
})}
{this.state.crossPosts.match({
some: xPosts =>
xPosts.length > 0 && (
<>
<div class="my-1 text-muted small font-weight-bold">
<div className="my-1 text-muted small font-weight-bold">
{i18n.t("cross_posts")}
</div>
<PostListings
@ -275,6 +297,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
posts={xPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
/>
</>
),
@ -282,16 +305,16 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
})}
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="post-title">
<div className="form-group row">
<label className="col-sm-2 col-form-label" htmlFor="post-title">
{i18n.t("title")}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<textarea
value={this.state.postForm.name}
id="post-title"
onInput={linkEvent(this, this.handlePostNameChange)}
class={`form-control ${
className={`form-control ${
!validTitle(this.state.postForm.name) && "is-invalid"
}`}
required
@ -300,7 +323,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
maxLength={MAX_POST_TITLE_LENGTH}
/>
{!validTitle(this.state.postForm.name) && (
<div class="invalid-feedback">
<div className="invalid-feedback">
{i18n.t("invalid_post_title")}
</div>
)}
@ -308,7 +331,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
some: sPosts =>
sPosts.length > 0 && (
<>
<div class="my-1 text-muted small font-weight-bold">
<div className="my-1 text-muted small font-weight-bold">
{i18n.t("related_posts")}
</div>
<PostListings
@ -316,6 +339,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
posts={sPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
/>
</>
),
@ -324,33 +348,42 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">{i18n.t("body")}</label>
<div class="col-sm-10">
<div className="form-group row">
<label className="col-sm-2 col-form-label">{i18n.t("body")}</label>
<div className="col-sm-10">
<MarkdownTextArea
initialContent={this.state.postForm.body}
initialLanguageId={None}
onContentChange={this.handlePostBodyChange}
placeholder={None}
buttonTitle={None}
maxLength={None}
allLanguages={this.props.allLanguages}
/>
</div>
</div>
{this.props.post_view.isNone() && (
<div class="form-group row">
<label class="col-sm-2 col-form-label" htmlFor="post-community">
{i18n.t("community")}
<div className="form-group row">
<label
className="col-sm-2 col-form-label"
htmlFor="post-community"
>
{this.state.communitySearchLoading ? (
<Spinner />
) : (
i18n.t("community")
)}
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<select
class="form-control"
className="form-control"
id="post-community"
value={this.state.postForm.community_id}
onInput={linkEvent(this, this.handlePostCommunityChange)}
>
<option>{i18n.t("select_a_community")}</option>
{this.props.communities.unwrapOr([]).map(cv => (
<option value={cv.community.id}>
<option key={cv.community.id} value={cv.community.id}>
{communitySelectName(cv)}
</option>
))}
@ -359,14 +392,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</div>
)}
{this.props.enableNsfw && (
<div class="form-group row">
<legend class="col-form-label col-sm-2 pt-0">
<div className="form-group row">
<legend className="col-form-label col-sm-2 pt-0">
{i18n.t("nsfw")}
</legend>
<div class="col-sm-10">
<div class="form-check">
<div className="col-sm-10">
<div className="form-check">
<input
class="form-check-input position-static"
className="form-check-input position-static"
id="post-nsfw"
type="checkbox"
checked={toUndefined(this.state.postForm.nsfw)}
@ -376,24 +409,30 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</div>
</div>
)}
<LanguageSelect
allLanguages={this.props.allLanguages}
selectedLanguageIds={selectedLangs}
multiple={false}
onChange={this.handleLanguageChange}
/>
<input
tabIndex={-1}
autoComplete="false"
name="a_password"
type="text"
class="form-control honeypot"
className="form-control honeypot"
id="register-honey"
value={toUndefined(this.state.postForm.honeypot)}
onInput={linkEvent(this, this.handleHoneyPotChange)}
/>
<div class="form-group row">
<div class="col-sm-10">
<div className="form-group row">
<div className="col-sm-10">
<button
disabled={
!this.state.postForm.community_id || this.state.loading
}
type="submit"
class="btn btn-secondary mr-2"
className="btn btn-secondary mr-2"
>
{this.state.loading ? (
<Spinner />
@ -406,7 +445,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
{this.props.post_view.isSome() && (
<button
type="button"
class="btn btn-secondary"
className="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
{i18n.t("cancel")}
@ -422,12 +461,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
handlePostSubmit(i: PostForm, event: any) {
event.preventDefault();
i.setState({ loading: true });
// Coerce empty url string to undefined
if (
i.state.postForm.url.isSome() &&
i.state.postForm.url.unwrapOr("blank") === ""
) {
i.state.postForm.url = None;
i.setState(s => ((s.postForm.url = None), s));
}
let pForm = i.state.postForm;
@ -439,37 +480,39 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
body: pForm.body,
nsfw: pForm.nsfw,
post_id: pv.post.id,
language_id: Some(pv.post.language_id),
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.editPost(form));
},
none: () => {
i.state.postForm.auth = auth().unwrap();
WebSocketService.Instance.send(wsClient.createPost(i.state.postForm));
i.setState(s => ((s.postForm.auth = auth().unwrap()), s));
let form = new CreatePost({ ...i.state.postForm });
WebSocketService.Instance.send(wsClient.createPost(form));
},
});
i.state.loading = true;
i.setState(i.state);
}
copySuggestedTitle(i: PostForm) {
i.state.suggestedTitle.match({
some: sTitle => {
i.state.postForm.name = sTitle.substring(0, MAX_POST_TITLE_LENGTH);
i.state.suggestedTitle = None;
i.setState(
s => (
(s.postForm.name = sTitle.substring(0, MAX_POST_TITLE_LENGTH)), s
)
);
i.setState({ suggestedTitle: None });
setTimeout(() => {
let textarea: any = document.getElementById("post-title");
autosize.update(textarea);
}, 10);
i.setState(i.state);
},
none: void 0,
});
}
handlePostUrlChange(i: PostForm, event: any) {
i.state.postForm.url = Some(event.target.value);
i.setState(i.state);
i.setState(s => ((s.postForm.url = Some(event.target.value)), s));
i.fetchPageTitle();
}
@ -494,12 +537,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
// Fetch the page title
getSiteMetadata(url).then(d => {
this.state.suggestedTitle = d.metadata.title;
this.setState(this.state);
this.setState({ suggestedTitle: d.metadata.title });
});
} else {
this.state.suggestedTitle = None;
this.state.crossPosts = None;
this.setState({ suggestedTitle: None, crossPosts: None });
}
},
none: void 0,
@ -507,8 +548,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
}
handlePostNameChange(i: PostForm, event: any) {
i.state.postForm.name = event.target.value;
i.setState(i.state);
i.setState(s => ((s.postForm.name = event.target.value), s));
i.fetchSimilarPosts();
}
@ -529,30 +569,30 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
if (this.state.postForm.name !== "") {
WebSocketService.Instance.send(wsClient.search(form));
} else {
this.state.suggestedPosts = None;
this.setState({ suggestedPosts: None });
}
this.setState(this.state);
}
handlePostBodyChange(val: string) {
this.state.postForm.body = Some(val);
this.setState(this.state);
this.setState(s => ((s.postForm.body = Some(val)), s));
}
handlePostCommunityChange(i: PostForm, event: any) {
i.state.postForm.community_id = Number(event.target.value);
i.setState(i.state);
i.setState(
s => ((s.postForm.community_id = Number(event.target.value)), s)
);
}
handlePostNsfwChange(i: PostForm, event: any) {
i.state.postForm.nsfw = Some(event.target.checked);
i.setState(i.state);
i.setState(s => ((s.postForm.nsfw = Some(event.target.checked)), s));
}
handleLanguageChange(val: number[]) {
this.setState(s => ((s.postForm.language_id = Some(val[0])), s));
}
handleHoneyPotChange(i: PostForm, event: any) {
i.state.postForm.honeypot = Some(event.target.value);
i.setState(i.state);
i.setState(s => ((s.postForm.honeypot = Some(event.target.value)), s));
}
handleCancel(i: PostForm) {
@ -561,8 +601,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
handlePreviewToggle(i: PostForm, event: any) {
event.preventDefault();
i.state.previewMode = !i.state.previewMode;
i.setState(i.state);
i.setState({ previewMode: !i.state.previewMode });
}
handleImageUploadPaste(i: PostForm, event: any) {
@ -584,8 +623,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
const formData = new FormData();
formData.append("images[]", file);
i.state.imageLoading = true;
i.setState(i.state);
i.setState({ imageLoading: true });
fetch(pictrsUri, {
method: "POST",
@ -601,22 +639,19 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
let deleteToken = res.files[0].delete_token;
let deleteUrl = `${pictrsUri}/delete/${deleteToken}/${hash}`;
i.state.postForm.url = Some(url);
i.state.imageLoading = false;
i.setState(i.state);
i.setState({ imageLoading: false });
pictrsDeleteToast(
i18n.t("click_to_delete_picture"),
i18n.t("picture_deleted"),
deleteUrl
);
} else {
i.state.imageLoading = false;
i.setState(i.state);
i.setState({ imageLoading: false });
toast(JSON.stringify(res), "danger");
}
})
.catch(error => {
i.state.imageLoading = false;
i.setState(i.state);
i.setState({ imageLoading: false });
console.error(error);
toast(error, "danger");
});
@ -631,11 +666,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
this.choices.passedElement.element.addEventListener(
"choice",
(e: any) => {
this.state.postForm.community_id = Number(e.detail.choice.value);
this.setState(this.state);
this.setState(
s => (
(s.postForm.community_id = Number(e.detail.choice.value)), s
)
);
},
false
);
this.choices.passedElement.element.addEventListener("search", () => {
this.setState({ communitySearchLoading: true });
});
this.choices.passedElement.element.addEventListener(
"search",
debounce(async (e: any) => {
@ -648,6 +689,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
"label",
true
);
this.setState({ communitySearchLoading: false });
} catch (err) {
console.log(err);
}
@ -658,7 +700,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
}
this.props.post_view.match({
some: pv => (this.state.postForm.community_id = pv.community.id),
some: pv =>
this.setState(s => ((s.postForm.community_id = pv.community.id), s)),
none: void 0,
});
this.props.params.match({
@ -670,9 +713,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
let foundCommunityId = this.props.communities
.unwrapOr([])
.find(r => r.community.name == name).community.id;
this.state.postForm.community_id = foundCommunityId;
this.setState(
s => ((s.postForm.community_id = foundCommunityId), s)
);
},
right: id => (this.state.postForm.community_id = id),
right: id =>
this.setState(s => ((s.postForm.community_id = id), s)),
}),
none: void 0,
}),
@ -693,15 +739,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
if (msg.error) {
// Errors handled by top level pages
// toast(i18n.t(msg.error), "danger");
this.state.loading = false;
this.setState(this.state);
this.setState({ loading: false });
return;
} else if (op == UserOperation.CreatePost) {
let data = wsJsonToRes<PostResponse>(msg, PostResponse);
UserService.Instance.myUserInfo.match({
some: mui => {
if (data.post_view.creator.id == mui.local_user_view.person.id) {
this.state.loading = false;
this.props.onCreate(data.post_view);
}
},
@ -712,7 +756,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
UserService.Instance.myUserInfo.match({
some: mui => {
if (data.post_view.creator.id == mui.local_user_view.person.id) {
this.state.loading = false;
this.setState({ loading: false });
this.props.onEdit(data.post_view);
}
},
@ -722,11 +766,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
let data = wsJsonToRes<SearchResponse>(msg, SearchResponse);
if (data.type_ == SearchType[SearchType.Posts]) {
this.state.suggestedPosts = Some(data.posts);
this.setState({ suggestedPosts: Some(data.posts) });
} else if (data.type_ == SearchType[SearchType.Url]) {
this.state.crossPosts = Some(data.posts);
this.setState({ crossPosts: Some(data.posts) });
}
this.setState(this.state);
}
}
}

377
src/shared/components/post/post-listing.tsx
View file

@ -12,6 +12,7 @@ import {
CreatePostLike,
CreatePostReport,
DeletePost,
Language,
LockPost,
PersonViewSafe,
PostView,
@ -88,6 +89,7 @@ interface PostListingProps {
duplicates: Option<PostView[]>;
moderators: Option<CommunityModeratorView[]>;
admins: Option<PersonViewSafe[]>;
allLanguages: Language[];
showCommunity?: boolean;
showBody?: boolean;
enableDownvotes?: boolean;
@ -135,20 +137,21 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
componentWillReceiveProps(nextProps: PostListingProps) {
this.state.my_vote = nextProps.post_view.my_vote;
this.state.upvotes = nextProps.post_view.counts.upvotes;
this.state.downvotes = nextProps.post_view.counts.downvotes;
this.state.score = nextProps.post_view.counts.score;
this.setState({
my_vote: nextProps.post_view.my_vote,
upvotes: nextProps.post_view.counts.upvotes,
downvotes: nextProps.post_view.counts.downvotes,
score: nextProps.post_view.counts.score,
});
if (this.props.post_view.post.id !== nextProps.post_view.post.id) {
this.state.imageExpanded = false;
this.setState({ imageExpanded: false });
}
this.setState(this.state);
}
render() {
let post = this.props.post_view.post;
return (
<div class="post-listing">
<div className="post-listing">
{!this.state.showEdit ? (
<>
{this.listing()}
@ -159,7 +162,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.showBody && this.body()}
</>
) : (
<div class="col-12">
<div className="col-12">
<PostForm
post_view={Some(this.props.post_view)}
communities={None}
@ -168,6 +171,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
onCancel={this.handleEditCancel}
enableNsfw={this.props.enableNsfw}
enableDownvotes={this.props.enableDownvotes}
allLanguages={this.props.allLanguages}
/>
</div>
)}
@ -178,7 +182,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
body() {
return this.props.post_view.post.body.match({
some: body => (
<div class="col-12 card my-2 p-2">
<div className="col-12 card my-2 p-2">
{this.state.viewSource ? (
<pre>{body}</pre>
) : (
@ -194,14 +198,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return this.imageSrc.match({
some: src => (
<>
<div class="offset-sm-3 my-2 d-none d-sm-block">
<a href={src} class="d-inline-block">
<div className="offset-sm-3 my-2 d-none d-sm-block">
<a href={src} className="d-inline-block">
<PictrsImage src={src} />
</a>
</div>
<div className="my-2 d-block d-sm-none">
<a
class="d-inline-block"
className="d-inline-block"
onClick={linkEvent(this, this.handleImageExpandClick)}
>
<PictrsImage src={src} />
@ -254,7 +258,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return (
<a
href={this.imageSrc.unwrap()}
class="text-body d-inline-block position-relative mb-2"
className="text-body d-inline-block position-relative mb-2"
data-tippy-content={i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={i18n.t("expand_here")}
@ -266,7 +270,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} else if (url.isSome() && thumbnail.isSome()) {
return (
<a
class="text-body d-inline-block position-relative mb-2"
className="text-body d-inline-block position-relative mb-2"
href={url.unwrap()}
rel={relTags}
title={url.unwrap()}
@ -278,13 +282,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} else if (url.isSome()) {
if (isVideo(url.unwrap())) {
return (
<div class="embed-responsive embed-responsive-16by9">
<div className="embed-responsive embed-responsive-16by9">
<video
playsinline
playsInline
muted
loop
controls
class="embed-responsive-item"
className="embed-responsive-item"
>
<source src={url.unwrap()} type="video/mp4" />
</video>
@ -298,7 +302,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
title={url.unwrap()}
rel={relTags}
>
<div class="thumbnail rounded bg-light d-flex justify-content-center">
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="external-link" classes="d-flex align-items-center" />
</div>
</a>
@ -311,7 +315,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
to={`/post/${post.id}`}
title={i18n.t("comments")}
>
<div class="thumbnail rounded bg-light d-flex justify-content-center">
<div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="message-square" classes="d-flex align-items-center" />
</div>
</Link>
@ -322,7 +326,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
createdLine() {
let post_view = this.props.post_view;
return (
<ul class="list-inline mb-1 text-muted small">
<ul className="list-inline mb-1 text-muted small">
<li className="list-inline-item">
<PersonListing person={post_view.creator} />
@ -346,7 +350,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{this.props.showCommunity && (
<span>
<span class="mx-1"> {i18n.t("to")} </span>
<span className="mx-1"> {i18n.t("to")} </span>
<CommunityLink community={post_view.community} />
</span>
)}
@ -416,13 +420,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</button>
{showScores() ? (
<div
class={`unselectable pointer font-weight-bold text-muted px-1`}
className={`unselectable pointer font-weight-bold text-muted px-1`}
data-tippy-content={this.pointsTippy}
>
{numToSI(this.state.score)}
</div>
) : (
<div class="p-1"></div>
<div className="p-1"></div>
)}
{this.props.enableDownvotes && (
<button
@ -470,7 +474,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
})}
{post.url.map(isImage).or(post.thumbnail_url).unwrapOr(false) && (
<button
class="btn btn-link text-monospace text-muted small d-inline-block ml-2"
className="btn btn-link text-monospace text-muted small d-inline-block ml-2"
data-tippy-content={i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
>
@ -525,13 +529,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return this.props.duplicates.match({
some: dupes =>
dupes.length > 0 && (
<ul class="list-inline mb-1 small text-muted">
<ul className="list-inline mb-1 small text-muted">
<>
<li className="list-inline-item mr-2">
{i18n.t("cross_posted_to")}
</li>
{dupes.map(pv => (
<li className="list-inline-item mr-2">
<li key={pv.post.id} className="list-inline-item mr-2">
<Link to={`/post/${pv.post.id}`}>
{pv.community.local
? pv.community.name
@ -551,7 +555,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
commentsLine(mobile = false) {
let post = this.props.post_view.post;
return (
<div class="d-flex justify-content-start flex-wrap text-muted font-weight-bold mb-1">
<div className="d-flex justify-content-start flex-wrap text-muted font-weight-bold mb-1">
{this.commentsButton}
{!post.local && (
<a
@ -617,7 +621,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get commentsButton() {
let post_view = this.props.post_view;
return (
<button class="btn btn-link text-muted py-0 pl-0">
<button className="btn btn-link text-muted py-0 pl-0">
<Link
className="text-muted"
title={i18n.t("number_of_comments", {
@ -627,15 +631,34 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
to={`/post/${post_view.post.id}?scrollToComments=true`}
>
<Icon icon="message-square" classes="mr-1" inline />
{i18n.t("number_of_comments", {
count: post_view.counts.comments,
formattedCount: numToSI(post_view.counts.comments),
<span className="mr-2">
{i18n.t("number_of_comments", {
count: post_view.counts.comments,
formattedCount: numToSI(post_view.counts.comments),
})}
</span>
{this.unreadCount.match({
some: unreadCount => (
<span className="small text-warning">
({unreadCount} {i18n.t("new")})
</span>
),
none: <></>,
})}
</Link>
</button>
);
}
get unreadCount(): Option<number> {
let pv = this.props.post_view;
if (pv.unread_comments == pv.counts.comments || pv.unread_comments == 0) {
return None;
} else {
return Some(pv.unread_comments);
}
}
get mobileVotes() {
// TODO: make nicer
let tippy = showScores() ? { "data-tippy-content": this.pointsTippy } : {};
@ -652,7 +675,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
>
<Icon icon="arrow-up1" classes="icon-inline small" />
{showScores() && (
<span class="ml-2">{numToSI(this.state.upvotes)}</span>
<span className="ml-2">{numToSI(this.state.upvotes)}</span>
)}
</button>
{this.props.enableDownvotes && (
@ -669,7 +692,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<Icon icon="arrow-down1" classes="icon-inline small" />
{showScores() && (
<span
class={classNames("ml-2", {
className={classNames("ml-2", {
invisible: this.state.downvotes === 0,
})}
>
@ -688,7 +711,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let label = saved ? i18n.t("unsave") : i18n.t("save");
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleSavePostClick)}
data-tippy-content={label}
aria-label={label}
@ -717,7 +740,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get reportButton() {
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShowReportDialog)}
data-tippy-content={i18n.t("show_report_dialog")}
aria-label={i18n.t("show_report_dialog")}
@ -730,7 +753,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get blockButton() {
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleBlockUserClick)}
data-tippy-content={i18n.t("block_user")}
aria-label={i18n.t("block_user")}
@ -743,7 +766,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get editButton() {
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={i18n.t("edit")}
aria-label={i18n.t("edit")}
@ -758,7 +781,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let label = !deleted ? i18n.t("delete") : i18n.t("restore");
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={label}
aria-label={label}
@ -775,7 +798,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get showMoreButton() {
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={i18n.t("more")}
aria-label={i18n.t("more")}
@ -788,7 +811,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get viewSourceButton() {
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={i18n.t("view_source")}
aria-label={i18n.t("view_source")}
@ -807,7 +830,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let label = locked ? i18n.t("unlock") : i18n.t("lock");
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModLock)}
data-tippy-content={label}
aria-label={label}
@ -826,7 +849,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let label = stickied ? i18n.t("unsticky") : i18n.t("sticky");
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModSticky)}
data-tippy-content={label}
aria-label={label}
@ -844,7 +867,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let removed = this.props.post_view.post.removed;
return (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(
this,
!removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
@ -870,7 +893,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{!this.creatorIsMod_ &&
(!post_view.creator_banned_from_community ? (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(
this,
this.handleModBanFromCommunityShow
@ -881,7 +904,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</button>
) : (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(
this,
this.handleModBanFromCommunitySubmit
@ -893,7 +916,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
))}
{!post_view.creator_banned_from_community && (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleAddModToCommunity)}
aria-label={
this.creatorIsMod_
@ -914,7 +937,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.creatorIsMod_ &&
(!this.state.showConfirmTransferCommunity ? (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(
this,
this.handleShowConfirmTransferCommunity
@ -926,20 +949,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
) : (
<>
<button
class="d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
className="d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
aria-label={i18n.t("are_you_sure")}
>
{i18n.t("are_you_sure")}
</button>
<button
class="btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
className="btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
aria-label={i18n.t("yes")}
onClick={linkEvent(this, this.handleTransferCommunity)}
>
{i18n.t("yes")}
</button>
<button
class="btn btn-link btn-animate text-muted py-0 d-inline-block"
className="btn btn-link btn-animate text-muted py-0 d-inline-block"
onClick={linkEvent(
this,
this.handleCancelShowConfirmTransferCommunity
@ -957,7 +980,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<>
{!isBanned(post_view.creator) ? (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanShow)}
aria-label={i18n.t("ban_from_site")}
>
@ -965,7 +988,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</button>
) : (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanSubmit)}
aria-label={i18n.t("unban_from_site")}
>
@ -973,14 +996,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</button>
)}
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handlePurgePersonShow)}
aria-label={i18n.t("purge_user")}
>
{i18n.t("purge_user")}
</button>
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handlePurgePostShow)}
aria-label={i18n.t("purge_post")}
>
@ -990,7 +1013,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{!isBanned(post_view.creator) && post_view.creator.local && (
<button
class="btn btn-link btn-animate text-muted py-0"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleAddAdmin)}
aria-label={
this.creatorIsAdmin_
@ -1022,23 +1045,23 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<>
{this.state.showRemoveDialog && (
<form
class="form-inline"
className="form-inline"
onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
>
<label class="sr-only" htmlFor="post-listing-remove-reason">
<label className="sr-only" htmlFor="post-listing-remove-reason">
{i18n.t("reason")}
</label>
<input
type="text"
id="post-listing-remove-reason"
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("reason")}
value={toUndefined(this.state.removeReason)}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={i18n.t("remove_post")}
>
{i18n.t("remove_post")}
@ -1047,40 +1070,43 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{this.state.showBanDialog && (
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
<div class="form-group row col-12">
<label class="col-form-label" htmlFor="post-listing-ban-reason">
<div className="form-group row col-12">
<label
className="col-form-label"
htmlFor="post-listing-ban-reason"
>
{i18n.t("reason")}
</label>
<input
type="text"
id="post-listing-ban-reason"
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("reason")}
value={toUndefined(this.state.banReason)}
onInput={linkEvent(this, this.handleModBanReasonChange)}
/>
<label class="col-form-label" htmlFor={`mod-ban-expires`}>
<label className="col-form-label" htmlFor={`mod-ban-expires`}>
{i18n.t("expires")}
</label>
<input
type="number"
id={`mod-ban-expires`}
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("number_of_days")}
value={toUndefined(this.state.banExpireDays)}
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
/>
<div class="form-group">
<div class="form-check">
<div className="form-group">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
id="mod-ban-remove-data"
type="checkbox"
checked={this.state.removeData}
onChange={linkEvent(this, this.handleModRemoveDataChange)}
/>
<label
class="form-check-label"
className="form-check-label"
htmlFor="mod-ban-remove-data"
title={i18n.t("remove_content_more")}
>
@ -1094,10 +1120,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{/* <label class="col-form-label">Expires</label> */}
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
{/* </div> */}
<div class="form-group row">
<div className="form-group row">
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={i18n.t("ban")}
>
{i18n.t("ban")} {post.creator.name}
@ -1107,16 +1133,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{this.state.showReportDialog && (
<form
class="form-inline"
className="form-inline"
onSubmit={linkEvent(this, this.handleReportSubmit)}
>
<label class="sr-only" htmlFor="post-report-reason">
<label className="sr-only" htmlFor="post-report-reason">
{i18n.t("reason")}
</label>
<input
type="text"
id="post-report-reason"
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("reason")}
required
value={toUndefined(this.state.reportReason)}
@ -1124,7 +1150,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
/>
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={i18n.t("create_report")}
>
{i18n.t("create_report")}
@ -1133,17 +1159,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
{this.state.showPurgeDialog && (
<form
class="form-inline"
className="form-inline"
onSubmit={linkEvent(this, this.handlePurgeSubmit)}
>
<PurgeWarning />
<label class="sr-only" htmlFor="purge-reason">
<label className="sr-only" htmlFor="purge-reason">
{i18n.t("reason")}
</label>
<input
type="text"
id="purge-reason"
class="form-control mr-2"
className="form-control mr-2"
placeholder={i18n.t("reason")}
value={toUndefined(this.state.purgeReason)}
onInput={linkEvent(this, this.handlePurgeReasonChange)}
@ -1153,7 +1179,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
) : (
<button
type="submit"
class="btn btn-secondary"
className="btn btn-secondary"
aria-label={purgeTypeText}
>
{purgeTypeText}
@ -1169,11 +1195,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let post = this.props.post_view.post;
return post.thumbnail_url.isSome() ||
post.url.map(isImage).unwrapOr(false) ? (
<div class="row">
<div className="row">
<div className={`${this.state.imageExpanded ? "col-12" : "col-8"}`}>
{this.postTitleLine()}
</div>
<div class="col-4">
<div className="col-4">
{/* Post body prev or thumbnail */}
{!this.state.imageExpanded && this.thumbnail()}
</div>
@ -1198,9 +1224,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return (
<>
{/* The mobile view*/}
<div class="d-block d-sm-none">
<div class="row">
<div class="col-12">
<div className="d-block d-sm-none">
<div className="row">
<div className="col-12">
{this.createdLine()}
{/* If it has a thumbnail, do a right aligned thumbnail */}
@ -1218,14 +1244,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</div>
{/* The larger view*/}
<div class="d-none d-sm-block">
<div class="row">
<div className="d-none d-sm-block">
<div className="row">
{!this.props.viewOnly && this.voteBar()}
<div class="col-sm-2 pr-0">
<div class="">{this.thumbnail()}</div>
<div className="col-sm-2 pr-0">
<div className="">{this.thumbnail()}</div>
</div>
<div class="col-12 col-sm-9">
<div class="row">
<div className="col-12 col-sm-9">
<div className="row">
<div className="col-12">
{this.postTitleLine()}
{this.createdLine()}
@ -1260,18 +1286,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let newVote = myVote == 1 ? 0 : 1;
if (myVote == 1) {
this.state.score--;
this.state.upvotes--;
this.setState({
score: this.state.score - 1,
upvotes: this.state.upvotes - 1,
});
} else if (myVote == -1) {
this.state.downvotes--;
this.state.upvotes++;
this.state.score += 2;
this.setState({
score: this.state.score + 2,
upvotes: this.state.upvotes + 1,
downvotes: this.state.downvotes - 1,
});
} else {
this.state.upvotes++;
this.state.score++;
this.setState({
score: this.state.score + 1,
upvotes: this.state.upvotes + 1,
});
}
this.state.my_vote = Some(newVote);
this.setState({ my_vote: Some(newVote) });
let form = new CreatePostLike({
post_id: this.props.post_view.post.id,
@ -1294,18 +1326,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let newVote = myVote == -1 ? 0 : -1;
if (myVote == 1) {
this.state.score -= 2;
this.state.upvotes--;
this.state.downvotes++;
this.setState({
score: this.state.score - 2,
upvotes: this.state.upvotes - 1,
downvotes: this.state.downvotes + 1,
});
} else if (myVote == -1) {
this.state.downvotes--;
this.state.score++;
this.setState({
score: this.state.score + 1,
downvotes: this.state.downvotes - 1,
});
} else {
this.state.downvotes++;
this.state.score--;
this.setState({
score: this.state.score - 1,
downvotes: this.state.downvotes + 1,
});
}
this.state.my_vote = Some(newVote);
this.setState({ my_vote: Some(newVote) });
let form = new CreatePostLike({
post_id: this.props.post_view.post.id,
@ -1319,29 +1357,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
handleEditClick(i: PostListing) {
i.state.showEdit = true;
i.setState(i.state);
i.setState({ showEdit: true });
}
handleEditCancel() {
this.state.showEdit = false;
this.setState(this.state);
this.setState({ showEdit: false });
}
// The actual editing is done in the recieve for post
handleEditPost() {
this.state.showEdit = false;
this.setState(this.state);
this.setState({ showEdit: false });
}
handleShowReportDialog(i: PostListing) {
i.state.showReportDialog = !i.state.showReportDialog;
i.setState(this.state);
i.setState({ showReportDialog: !i.state.showReportDialog });
}
handleReportReasonChange(i: PostListing, event: any) {
i.state.reportReason = Some(event.target.value);
i.setState(i.state);
i.setState({ reportReason: Some(event.target.value) });
}
handleReportSubmit(i: PostListing, event: any) {
@ -1353,8 +1386,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
});
WebSocketService.Instance.send(wsClient.createPostReport(form));
i.state.showReportDialog = false;
i.setState(i.state);
i.setState({ showReportDialog: false });
}
handleBlockUserClick(i: PostListing) {
@ -1413,19 +1445,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
handleModRemoveShow(i: PostListing) {
i.state.showRemoveDialog = !i.state.showRemoveDialog;
i.state.showBanDialog = false;
i.setState(i.state);
i.setState({
showRemoveDialog: !i.state.showRemoveDialog,
showBanDialog: false,
});
}
handleModRemoveReasonChange(i: PostListing, event: any) {
i.state.removeReason = Some(event.target.value);
i.setState(i.state);
i.setState({ removeReason: Some(event.target.value) });
}
handleModRemoveDataChange(i: PostListing, event: any) {
i.state.removeData = event.target.checked;
i.setState(i.state);
i.setState({ removeData: event.target.checked });
}
handleModRemoveSubmit(i: PostListing, event: any) {
@ -1438,8 +1469,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
});
WebSocketService.Instance.send(wsClient.removePost(form));
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({ showRemoveDialog: false });
}
handleModLock(i: PostListing) {
@ -1461,36 +1491,39 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
handleModBanFromCommunityShow(i: PostListing) {
i.state.showBanDialog = true;
i.state.banType = BanType.Community;
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({
showBanDialog: true,
banType: BanType.Community,
showRemoveDialog: false,
});
}
handleModBanShow(i: PostListing) {
i.state.showBanDialog = true;
i.state.banType = BanType.Site;
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({
showBanDialog: true,
banType: BanType.Site,
showRemoveDialog: false,
});
}
handlePurgePersonShow(i: PostListing) {
i.state.showPurgeDialog = true;
i.state.purgeType = PurgeType.Person;
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({
showPurgeDialog: true,
purgeType: PurgeType.Person,
showRemoveDialog: false,
});
}
handlePurgePostShow(i: PostListing) {
i.state.showPurgeDialog = true;
i.state.purgeType = PurgeType.Post;
i.state.showRemoveDialog = false;
i.setState(i.state);
i.setState({
showPurgeDialog: true,
purgeType: PurgeType.Post,
showRemoveDialog: false,
});
}
handlePurgeReasonChange(i: PostListing, event: any) {
i.state.purgeReason = Some(event.target.value);
i.setState(i.state);
i.setState({ purgeReason: Some(event.target.value) });
}
handlePurgeSubmit(i: PostListing, event: any) {
@ -1512,29 +1545,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
WebSocketService.Instance.send(wsClient.purgePost(form));
}
i.state.purgeLoading = true;
i.setState(i.state);
i.setState({ purgeLoading: true });
}
handleModBanReasonChange(i: PostListing, event: any) {
i.state.banReason = Some(event.target.value);
i.setState(i.state);
i.setState({ banReason: Some(event.target.value) });
}
handleModBanExpireDaysChange(i: PostListing, event: any) {
i.state.banExpireDays = Some(event.target.value);
i.setState(i.state);
i.setState({ banExpireDays: Some(event.target.value) });
}
handleModBanFromCommunitySubmit(i: PostListing) {
i.state.banType = BanType.Community;
i.setState(i.state);
i.setState({ banType: BanType.Community });
i.handleModBanBothSubmit(i);
}
handleModBanSubmit(i: PostListing) {
i.state.banType = BanType.Site;
i.setState(i.state);
i.setState({ banType: BanType.Site });
i.handleModBanBothSubmit(i);
}
@ -1545,7 +1573,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
// If its an unban, restore all their data
let ban = !i.props.post_view.creator_banned_from_community;
if (ban == false) {
i.state.removeData = false;
i.setState({ removeData: false });
}
let form = new BanFromCommunity({
person_id: i.props.post_view.creator.id,
@ -1561,7 +1589,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
// If its an unban, restore all their data
let ban = !i.props.post_view.creator.banned;
if (ban == false) {
i.state.removeData = false;
i.setState({ removeData: false });
}
let form = new BanPerson({
person_id: i.props.post_view.creator.id,
@ -1574,8 +1602,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
WebSocketService.Instance.send(wsClient.banPerson(form));
}
i.state.showBanDialog = false;
i.setState(i.state);
i.setState({ showBanDialog: false });
}
handleAddModToCommunity(i: PostListing) {
@ -1600,13 +1627,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
handleShowConfirmTransferCommunity(i: PostListing) {
i.state.showConfirmTransferCommunity = true;
i.setState(i.state);
i.setState({ showConfirmTransferCommunity: true });
}
handleCancelShowConfirmTransferCommunity(i: PostListing) {
i.state.showConfirmTransferCommunity = false;
i.setState(i.state);
i.setState({ showConfirmTransferCommunity: false });
}
handleTransferCommunity(i: PostListing) {
@ -1616,48 +1641,42 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.transferCommunity(form));
i.state.showConfirmTransferCommunity = false;
i.setState(i.state);
i.setState({ showConfirmTransferCommunity: false });
}
handleShowConfirmTransferSite(i: PostListing) {
i.state.showConfirmTransferSite = true;
i.setState(i.state);
i.setState({ showConfirmTransferSite: true });
}
handleCancelShowConfirmTransferSite(i: PostListing) {
i.state.showConfirmTransferSite = false;
i.setState(i.state);
i.setState({ showConfirmTransferSite: false });
}
handleImageExpandClick(i: PostListing, event: any) {
event.preventDefault();
i.state.imageExpanded = !i.state.imageExpanded;
i.setState(i.state);
i.setState({ imageExpanded: !i.state.imageExpanded });
setupTippy();
}
handleViewSource(i: PostListing) {
i.state.viewSource = !i.state.viewSource;
i.setState(i.state);
i.setState({ viewSource: !i.state.viewSource });
}
handleShowAdvanced(i: PostListing) {
i.state.showAdvanced = !i.state.showAdvanced;
i.setState(i.state);
i.setState({ showAdvanced: !i.state.showAdvanced });
setupTippy();
}
handleShowMoreMobile(i: PostListing) {
i.state.showMoreMobile = !i.state.showMoreMobile;
i.state.showAdvanced = !i.state.showAdvanced;
i.setState(i.state);
i.setState({
showMoreMobile: !i.state.showMoreMobile,
showAdvanced: !i.state.showAdvanced,
});
setupTippy();
}
handleShowBody(i: PostListing) {
i.state.showBody = !i.state.showBody;
i.setState(i.state);
i.setState({ showBody: !i.state.showBody });
setupTippy();
}

6
src/shared/components/post/post-listings.tsx
View file

@ -2,12 +2,13 @@ import { None, Some } from "@sniptt/monads";
import { Component } from "inferno";
import { T } from "inferno-i18next-dess";
import { Link } from "inferno-router";
import { PostView } from "lemmy-js-client";
import { Language, PostView } from "lemmy-js-client";
import { i18n } from "../../i18next";
import { PostListing } from "./post-listing";
interface PostListingsProps {
posts: PostView[];
allLanguages: Language[];
showCommunity?: boolean;
removeDuplicates?: boolean;
enableDownvotes: boolean;
@ -41,8 +42,9 @@ export class PostListings extends Component<PostListingsProps, any> {
showCommunity={this.props.showCommunity}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
allLanguages={this.props.allLanguages}
/>
<hr class="my-3" />
<hr className="my-3" />
</>
))
) : (

2
src/shared/components/post/post-report.tsx
View file

@ -45,6 +45,7 @@ export class PostReport extends Component<PostReportProps, any> {
read: false,
creator_blocked: false,
my_vote: r.my_vote,
unread_comments: 0,
};
return (
@ -58,6 +59,7 @@ export class PostReport extends Component<PostReportProps, any> {
enableDownvotes={true}
enableNsfw={true}
viewOnly={true}
allLanguages={[]}
/>
<div>
{i18n.t("reporter")}: <PersonListing person={r.creator} />

117
src/shared/components/post/post.tsx
View file

@ -120,28 +120,31 @@ export class Post extends Component<any, PostState> {
super(props, context);
this.state = this.emptyState;
this.state.commentSectionRef = createRef();
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
this.state = { ...this.state, commentSectionRef: createRef() };
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.postRes = Some(this.isoData.routeData[0] as GetPostResponse);
this.state.commentsRes = Some(
this.isoData.routeData[1] as GetCommentsResponse
);
this.state = {
...this.state,
postRes: Some(this.isoData.routeData[0] as GetPostResponse),
commentsRes: Some(this.isoData.routeData[1] as GetCommentsResponse),
};
this.state.commentsRes.match({
some: res => {
this.state.commentTree = buildCommentsTree(
res.comments,
if (this.state.commentsRes.isSome()) {
this.state = {
...this.state,
commentTree: buildCommentsTree(
this.state.commentsRes.unwrap().comments,
this.state.commentId.isSome()
);
},
none: void 0,
});
this.state.loading = false;
),
};
}
this.state = { ...this.state, loading: false };
if (isBrowser()) {
WebSocketService.Instance.send(
@ -305,8 +308,9 @@ export class Post extends Component<any, PostState> {
trackCommentsBoxScrolling = () => {
const wrappedElement = document.getElementsByClassName("comments")[0];
if (wrappedElement && this.isBottom(wrappedElement)) {
this.state.maxCommentsShown += commentsShownInterval;
this.setState(this.state);
this.setState({
maxCommentsShown: this.state.maxCommentsShown + commentsShownInterval,
});
}
};
@ -341,7 +345,7 @@ export class Post extends Component<any, PostState> {
render() {
return (
<div class="container">
<div className="container">
{this.state.loading ? (
<h5>
<Spinner large />
@ -349,8 +353,8 @@ export class Post extends Component<any, PostState> {
) : (
this.state.postRes.match({
some: res => (
<div class="row">
<div class="col-12 col-md-8 mb-3">
<div className="row">
<div className="col-12 col-md-8 mb-3">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -366,15 +370,17 @@ export class Post extends Component<any, PostState> {
admins={Some(this.state.siteRes.admins)}
enableDownvotes={enableDownvotes(this.state.siteRes)}
enableNsfw={enableNsfw(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
<div ref={this.state.commentSectionRef} className="mb-2" />
<CommentForm
node={Right(res.post_view.post.id)}
disabled={res.post_view.post.locked}
allLanguages={this.state.siteRes.all_languages}
/>
<div class="d-block d-md-none">
<div className="d-block d-md-none">
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
className="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowSidebarMobile)}
>
{i18n.t("sidebar")}{" "}
@ -395,7 +401,9 @@ export class Post extends Component<any, PostState> {
{this.state.commentViewType == CommentViewType.Flat &&
this.commentsFlat()}
</div>
<div class="d-none d-md-block col-md-4">{this.sidebar()}</div>
<div className="d-none d-md-block col-md-4">
{this.sidebar()}
</div>
</div>
),
none: <></>,
@ -408,7 +416,7 @@ export class Post extends Component<any, PostState> {
sortRadios() {
return (
<>
<div class="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
<div className="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
<label
className={`btn btn-outline-secondary pointer ${
CommentSortType[this.state.commentSort] === CommentSortType.Hot &&
@ -466,7 +474,7 @@ export class Post extends Component<any, PostState> {
/>
</label>
</div>
<div class="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<label
className={`btn btn-outline-secondary pointer ${
this.state.commentViewType === CommentViewType.Flat && "active"
@ -502,6 +510,7 @@ export class Post extends Component<any, PostState> {
admins={Some(this.state.siteRes.admins)}
enableDownvotes={enableDownvotes(this.state.siteRes)}
showContext
allLanguages={this.state.siteRes.all_languages}
/>
</div>
),
@ -514,7 +523,7 @@ export class Post extends Component<any, PostState> {
sidebar() {
return this.state.postRes.match({
some: res => (
<div class="mb-3">
<div className="mb-3">
<Sidebar
community_view={res.community_view}
moderators={res.moderators}
@ -530,25 +539,26 @@ export class Post extends Component<any, PostState> {
}
handleCommentSortChange(i: Post, event: any) {
i.state.commentSort = CommentSortType[event.target.value];
i.state.commentViewType = CommentViewType.Tree;
i.setState(i.state);
i.setState({
commentSort: CommentSortType[event.target.value],
commentViewType: CommentViewType.Tree,
});
i.fetchPost();
}
handleCommentViewTypeChange(i: Post, event: any) {
i.state.commentViewType = Number(event.target.value);
i.state.commentSort = CommentSortType.New;
i.state.commentTree = buildCommentsTree(
i.state.commentsRes.map(r => r.comments).unwrapOr([]),
i.state.commentId.isSome()
);
i.setState(i.state);
i.setState({
commentViewType: Number(event.target.value),
commentSort: CommentSortType.New,
commentTree: buildCommentsTree(
i.state.commentsRes.map(r => r.comments).unwrapOr([]),
i.state.commentId.isSome()
),
});
}
handleShowSidebarMobile(i: Post) {
i.state.showSidebarMobile = !i.state.showSidebarMobile;
i.setState(i.state);
i.setState({ showSidebarMobile: !i.state.showSidebarMobile });
}
handleViewPost(i: Post) {
@ -581,14 +591,14 @@ export class Post extends Component<any, PostState> {
{this.state.commentId.isSome() && (
<>
<button
class="pl-0 d-block btn btn-link text-muted"
className="pl-0 d-block btn btn-link text-muted"
onClick={linkEvent(this, this.handleViewPost)}
>
{i18n.t("view_all_comments")} ➔
</button>
{showContextButton && (
<button
class="pl-0 d-block btn btn-link text-muted"
className="pl-0 d-block btn btn-link text-muted"
onClick={linkEvent(this, this.handleViewContext)}
>
{i18n.t("show_context")} ➔
@ -604,6 +614,7 @@ export class Post extends Component<any, PostState> {
moderators={Some(res.moderators)}
admins={Some(this.state.siteRes.admins)}
enableDownvotes={enableDownvotes(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
</div>
),
@ -636,7 +647,7 @@ export class Post extends Component<any, PostState> {
});
} else if (op == UserOperation.GetPost) {
let data = wsJsonToRes<GetPostResponse>(msg, GetPostResponse);
this.state.postRes = Some(data);
this.setState({ postRes: Some(data) });
// join the rooms
WebSocketService.Instance.send(
@ -651,7 +662,6 @@ export class Post extends Component<any, PostState> {
// Get cross-posts
// TODO move this into initial fetch and refetch
this.fetchCrossPosts();
this.setState(this.state);
setupTippy();
if (this.state.commentId.isNone()) restoreScrollPosition(this.context);
@ -668,16 +678,16 @@ export class Post extends Component<any, PostState> {
newComments.shift();
res.comments.push(...newComments);
},
none: () => {
this.state.commentsRes = Some(data);
},
none: () => this.setState({ commentsRes: Some(data) }),
});
// this.state.commentsRes = Some(data);
this.state.commentTree = buildCommentsTree(
this.state.commentsRes.map(r => r.comments).unwrapOr([]),
this.state.commentId.isSome()
);
this.state.loading = false;
this.setState({
commentTree: buildCommentsTree(
this.state.commentsRes.map(r => r.comments).unwrapOr([]),
this.state.commentId.isSome()
),
loading: false,
});
this.setState(this.state);
} else if (op == UserOperation.CreateComment) {
let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
@ -827,19 +837,16 @@ export class Post extends Component<any, PostState> {
});
} else if (op == UserOperation.AddAdmin) {
let data = wsJsonToRes<AddAdminResponse>(msg, AddAdminResponse);
this.state.siteRes.admins = data.admins;
this.setState(this.state);
this.setState(s => ((s.siteRes.admins = data.admins), s));
} else if (op == UserOperation.Search) {
let data = wsJsonToRes<SearchResponse>(msg, SearchResponse);
let xPosts = data.posts.filter(
p => p.post.id != Number(this.props.match.params.id)
);
this.state.crossPosts = xPosts.length > 0 ? Some(xPosts) : None;
this.setState(this.state);
this.setState({ crossPosts: xPosts.length > 0 ? Some(xPosts) : None });
} else if (op == UserOperation.LeaveAdmin) {
let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
this.state.siteRes = data;
this.setState(this.state);
this.setState({ siteRes: data });
} else if (op == UserOperation.TransferCommunity) {
let data = wsJsonToRes<GetCommunityResponse>(msg, GetCommunityResponse);
this.state.postRes.match({

27
src/shared/components/private_message/create-private-message.tsx
View file

@ -45,6 +45,7 @@ export class CreatePrivateMessage extends Component<
recipient_id: getRecipientIdFromProps(this.props),
loading: true,
};
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
@ -61,10 +62,13 @@ export class CreatePrivateMessage extends Component<
// Only fetch the data if coming from another route
if (this.isoData.path == this.context.router.route.match.url) {
this.state.recipientDetailsRes = Some(
this.isoData.routeData[0] as GetPersonDetailsResponse
);
this.state.loading = false;
this.state = {
...this.state,
recipientDetailsRes: Some(
this.isoData.routeData[0] as GetPersonDetailsResponse
),
loading: false,
};
} else {
this.fetchPersonDetails();
}
@ -115,7 +119,7 @@ export class CreatePrivateMessage extends Component<
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -129,8 +133,8 @@ export class CreatePrivateMessage extends Component<
) : (
this.state.recipientDetailsRes.match({
some: res => (
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{i18n.t("create_private_message")}</h5>
<PrivateMessageForm
privateMessageView={None}
@ -151,7 +155,7 @@ export class CreatePrivateMessage extends Component<
toast(i18n.t("message_sent"));
// Navigate to the front
this.context.router.history.push(`/`);
this.context.router.history.push("/");
}
parseMessage(msg: any) {
@ -159,17 +163,14 @@ export class CreatePrivateMessage extends Component<
console.log(msg);
if (msg.error) {
toast(i18n.t(msg.error), "danger");
this.state.loading = false;
this.setState(this.state);
this.setState({ loading: false });
return;
} else if (op == UserOperation.GetPersonDetails) {
let data = wsJsonToRes<GetPersonDetailsResponse>(
msg,
GetPersonDetailsResponse
);
this.state.recipientDetailsRes = Some(data);
this.state.loading = false;
this.setState(this.state);
this.setState({ recipientDetailsRes: Some(data), loading: false });
}
}
}

64
src/shared/components/private_message/private-message-form.tsx
View file

@ -71,11 +71,10 @@ export class PrivateMessageForm extends Component<
this.subscription = wsSubscribe(this.parseMessage);
// Its an edit
this.props.privateMessageView.match({
some: pm =>
(this.state.privateMessageForm.content = pm.private_message.content),
none: void 0,
});
if (this.props.privateMessageView.isSome()) {
this.state.privateMessageForm.content =
this.props.privateMessageView.unwrap().private_message.content;
}
}
componentDidMount() {
@ -106,21 +105,21 @@ export class PrivateMessageForm extends Component<
/>
<form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
{this.props.privateMessageView.isNone() && (
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<div className="form-group row">
<label className="col-sm-2 col-form-label">
{capitalizeFirstLetter(i18n.t("to"))}
</label>
<div class="col-sm-10 form-control-plaintext">
<div className="col-sm-10 form-control-plaintext">
<PersonListing person={this.props.recipient} />
</div>
</div>
)}
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<div className="form-group row">
<label className="col-sm-2 col-form-label">
{i18n.t("message")}
<button
class="btn btn-link text-warning d-inline-block"
className="btn btn-link text-warning d-inline-block"
onClick={linkEvent(this, this.handleShowDisclaimer)}
data-tippy-content={i18n.t("private_message_disclaimer")}
aria-label={i18n.t("private_message_disclaimer")}
@ -128,25 +127,27 @@ export class PrivateMessageForm extends Component<
<Icon icon="alert-triangle" classes="icon-inline" />
</button>
</label>
<div class="col-sm-10">
<div className="col-sm-10">
<MarkdownTextArea
initialContent={Some(this.state.privateMessageForm.content)}
initialLanguageId={None}
placeholder={None}
buttonTitle={None}
maxLength={None}
onContentChange={this.handleContentChange}
allLanguages={[]}
/>
</div>
</div>
{this.state.showDisclaimer && (
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<div class="alert alert-danger" role="alert">
<div className="form-group row">
<div className="offset-sm-2 col-sm-10">
<div className="alert alert-danger" role="alert">
<T i18nKey="private_message_disclaimer">
#
<a
class="alert-link"
className="alert-link"
rel={relTags}
href="https://element.io/get-started"
>
@ -157,11 +158,11 @@ export class PrivateMessageForm extends Component<
</div>
</div>
)}
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<div className="form-group row">
<div className="offset-sm-2 col-sm-10">
<button
type="submit"
class="btn btn-secondary mr-2"
className="btn btn-secondary mr-2"
disabled={this.state.loading}
>
{this.state.loading ? (
@ -175,14 +176,14 @@ export class PrivateMessageForm extends Component<
{this.props.privateMessageView.isSome() && (
<button
type="button"
class="btn btn-secondary"
className="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
{i18n.t("cancel")}
</button>
)}
<ul class="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
<li class="list-inline-item"></li>
<ul className="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
<li className="list-inline-item"></li>
</ul>
</div>
</div>
@ -206,13 +207,11 @@ export class PrivateMessageForm extends Component<
wsClient.createPrivateMessage(i.state.privateMessageForm)
),
});
i.state.loading = true;
i.setState(i.state);
i.setState({ loading: true });
}
handleContentChange(val: string) {
this.state.privateMessageForm.content = val;
this.setState(this.state);
this.setState(s => ((s.privateMessageForm.content = val), s));
}
handleCancel(i: PrivateMessageForm) {
@ -221,13 +220,11 @@ export class PrivateMessageForm extends Component<
handlePreviewToggle(i: PrivateMessageForm, event: any) {
event.preventDefault();
i.state.previewMode = !i.state.previewMode;
i.setState(i.state);
i.setState({ previewMode: !i.state.previewMode });
}
handleShowDisclaimer(i: PrivateMessageForm) {
i.state.showDisclaimer = !i.state.showDisclaimer;
i.setState(i.state);
i.setState({ showDisclaimer: !i.state.showDisclaimer });
}
parseMessage(msg: any) {
@ -235,8 +232,7 @@ export class PrivateMessageForm extends Component<
console.log(msg);
if (msg.error) {
toast(i18n.t(msg.error), "danger");
this.state.loading = false;
this.setState(this.state);
this.setState({ loading: false });
return;
} else if (
op == UserOperation.EditPrivateMessage ||
@ -247,16 +243,14 @@ export class PrivateMessageForm extends Component<
msg,
PrivateMessageResponse
);
this.state.loading = false;
this.setState({ loading: false });
this.props.onEdit(data.private_message_view);
} else if (op == UserOperation.CreatePrivateMessage) {
let data = wsJsonToRes<PrivateMessageResponse>(
msg,
PrivateMessageResponse
);
this.state.loading = false;
this.props.onCreate(data.private_message_view);
this.setState(this.state);
}
}
}

92
src/shared/components/private_message/private-message-report.tsx Normal file
View file

@ -0,0 +1,92 @@
import { Component, linkEvent } from "inferno";
import { T } from "inferno-i18next-dess";
import {
PrivateMessageReportView,
ResolvePrivateMessageReport,
} from "lemmy-js-client";
import { i18n } from "../../i18next";
import { WebSocketService } from "../../services";
import { auth, mdToHtml, wsClient } from "../../utils";
import { Icon } from "../common/icon";
import { PersonListing } from "../person/person-listing";
interface Props {
report: PrivateMessageReportView;
}
export class PrivateMessageReport extends Component<Props, any> {
constructor(props: any, context: any) {
super(props, context);
}
render() {
let r = this.props.report;
let pmr = r.private_message_report;
let tippyContent = i18n.t(
r.private_message_report.resolved ? "unresolve_report" : "resolve_report"
);
return (
<div>
<div>
{i18n.t("creator")}:{" "}
<PersonListing person={r.private_message_creator} />
</div>
<div>
{i18n.t("message")}:
<div
className="md-div"
dangerouslySetInnerHTML={mdToHtml(pmr.original_pm_text)}
/>
</div>
<div>
{i18n.t("reporter")}: <PersonListing person={r.creator} />
</div>
<div>
{i18n.t("reason")}: {pmr.reason}
</div>
{r.resolver.match({
some: resolver => (
<div>
{pmr.resolved ? (
<T i18nKey="resolved_by">
#
<PersonListing person={resolver} />
</T>
) : (
<T i18nKey="unresolved_by">
#
<PersonListing person={resolver} />
</T>
)}
</div>
),
none: <></>,
})}
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleResolveReport)}
data-tippy-content={tippyContent}
aria-label={tippyContent}
>
<Icon
icon="check"
classes={`icon-inline ${
pmr.resolved ? "text-success" : "text-danger"
}`}
/>
</button>
</div>
);
}
handleResolveReport(i: PrivateMessageReport) {
let pmr = i.props.report.private_message_report;
let form = new ResolvePrivateMessageReport({
report_id: pmr.id,
resolved: !pmr.resolved,
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.resolvePrivateMessageReport(form));
}
}

107
src/shared/components/private_message/private-message.tsx
View file

@ -1,10 +1,12 @@
import { None, Some } from "@sniptt/monads/build";
import { None, Option, Some } from "@sniptt/monads/build";
import { Component, linkEvent } from "inferno";
import {
CreatePrivateMessageReport,
DeletePrivateMessage,
MarkPrivateMessageAsRead,
PersonSafe,
PrivateMessageView,
toUndefined,
} from "lemmy-js-client";
import { i18n } from "../../i18next";
import { UserService, WebSocketService } from "../../services";
@ -19,6 +21,8 @@ interface PrivateMessageState {
showEdit: boolean;
collapsed: boolean;
viewSource: boolean;
showReportDialog: boolean;
reportReason: Option<string>;
}
interface PrivateMessageProps {
@ -34,6 +38,8 @@ export class PrivateMessage extends Component<
showEdit: false,
collapsed: false,
viewSource: false,
showReportDialog: false,
reportReason: None,
};
constructor(props: any, context: any) {
@ -63,9 +69,9 @@ export class PrivateMessage extends Component<
: message_view.creator;
return (
<div class="border-top border-light">
<div className="border-top border-light">
<div>
<ul class="list-inline mb-0 text-muted small">
<ul className="list-inline mb-0 text-muted small">
{/* TODO refactor this */}
<li className="list-inline-item">
{this.mine ? i18n.t("to") : i18n.t("from")}
@ -114,12 +120,12 @@ export class PrivateMessage extends Component<
dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
/>
)}
<ul class="list-inline mb-0 text-muted font-weight-bold">
<ul className="list-inline mb-0 text-muted font-weight-bold">
{!this.mine && (
<>
<li className="list-inline-item">
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleMarkRead)}
data-tippy-content={
message_view.private_message.read
@ -140,9 +146,10 @@ export class PrivateMessage extends Component<
/>
</button>
</li>
<li className="list-inline-item">{this.reportButton}</li>
<li className="list-inline-item">
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)}
data-tippy-content={i18n.t("reply")}
aria-label={i18n.t("reply")}
@ -156,7 +163,7 @@ export class PrivateMessage extends Component<
<>
<li className="list-inline-item">
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={i18n.t("edit")}
aria-label={i18n.t("edit")}
@ -166,7 +173,7 @@ export class PrivateMessage extends Component<
</li>
<li className="list-inline-item">
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={
!message_view.private_message.deleted
@ -192,7 +199,7 @@ export class PrivateMessage extends Component<
)}
<li className="list-inline-item">
<button
class="btn btn-link btn-animate text-muted"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={i18n.t("view_source")}
aria-label={i18n.t("view_source")}
@ -209,6 +216,32 @@ export class PrivateMessage extends Component<
</div>
)}
</div>
{this.state.showReportDialog && (
<form
className="form-inline"
onSubmit={linkEvent(this, this.handleReportSubmit)}
>
<label className="sr-only" htmlFor="pm-report-reason">
{i18n.t("reason")}
</label>
<input
type="text"
id="pm-report-reason"
className="form-control mr-2"
placeholder={i18n.t("reason")}
required
value={toUndefined(this.state.reportReason)}
onInput={linkEvent(this, this.handleReportReasonChange)}
/>
<button
type="submit"
className="btn btn-secondary"
aria-label={i18n.t("create_report")}
>
{i18n.t("create_report")}
</button>
</form>
)}
{this.state.showReply && (
<PrivateMessageForm
recipient={otherPerson}
@ -217,23 +250,35 @@ export class PrivateMessage extends Component<
/>
)}
{/* A collapsed clearfix */}
{this.state.collapsed && <div class="row col-12"></div>}
{this.state.collapsed && <div className="row col-12"></div>}
</div>
);
}
get reportButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShowReportDialog)}
data-tippy-content={i18n.t("show_report_dialog")}
aria-label={i18n.t("show_report_dialog")}
>
<Icon icon="flag" inline />
</button>
);
}
get messageUnlessRemoved(): string {
let message = this.props.private_message_view.private_message;
return message.deleted ? `*${i18n.t("deleted")}*` : message.content;
}
handleReplyClick(i: PrivateMessage) {
i.state.showReply = true;
i.setState(i.state);
i.setState({ showReply: true });
}
handleEditClick(i: PrivateMessage) {
i.state.showEdit = true;
i.setState({ showEdit: true });
i.setState(i.state);
}
@ -247,9 +292,7 @@ export class PrivateMessage extends Component<
}
handleReplyCancel() {
this.state.showReply = false;
this.state.showEdit = false;
this.setState(this.state);
this.setState({ showReply: false, showEdit: false });
}
handleMarkRead(i: PrivateMessage) {
@ -262,26 +305,42 @@ export class PrivateMessage extends Component<
}
handleMessageCollapse(i: PrivateMessage) {
i.state.collapsed = !i.state.collapsed;
i.setState(i.state);
i.setState({ collapsed: !i.state.collapsed });
}
handleViewSource(i: PrivateMessage) {
i.state.viewSource = !i.state.viewSource;
i.setState(i.state);
i.setState({ viewSource: !i.state.viewSource });
}
handleShowReportDialog(i: PrivateMessage) {
i.setState({ showReportDialog: !i.state.showReportDialog });
}
handleReportReasonChange(i: PrivateMessage, event: any) {
i.setState({ reportReason: Some(event.target.value) });
}
handleReportSubmit(i: PrivateMessage, event: any) {
event.preventDefault();
let form = new CreatePrivateMessageReport({
private_message_id: i.props.private_message_view.private_message.id,
reason: toUndefined(i.state.reportReason),
auth: auth().unwrap(),
});
WebSocketService.Instance.send(wsClient.createPrivateMessageReport(form));
i.setState({ showReportDialog: false });
}
handlePrivateMessageEdit() {
this.state.showEdit = false;
this.setState(this.state);
this.setState({ showEdit: false });
}
handlePrivateMessageCreate(message: PrivateMessageView) {
UserService.Instance.myUserInfo.match({
some: mui => {
if (message.creator.id == mui.local_user_view.person.id) {
this.state.showReply = false;
this.setState(this.state);
this.setState({ showReply: false });
toast(i18n.t("message_sent"));
}
},

163
src/shared/components/search.tsx
View file

@ -200,28 +200,36 @@ export class Search extends Component<any, SearchState> {
);
// This can be single or multiple communities given
communitiesRes.match({
some: res => (this.state.communities = res.communities),
none: void 0,
});
if (communitiesRes.isSome()) {
this.state = {
...this.state,
communities: communitiesRes.unwrap().communities,
};
}
communityRes.match({
some: res => (this.state.communities = [res.community_view]),
none: void 0,
});
if (communityRes.isSome()) {
this.state = {
...this.state,
communities: [communityRes.unwrap().community_view],
};
}
this.state.creatorDetails = Some(
this.isoData.routeData[2] as GetPersonDetailsResponse
);
this.state = {
...this.state,
creatorDetails: Some(
this.isoData.routeData[2] as GetPersonDetailsResponse
),
};
if (this.state.q != "") {
this.state.searchResponse = Some(
this.isoData.routeData[3] as SearchResponse
);
this.state.resolveObjectResponse = Some(
this.isoData.routeData[4] as ResolveObjectResponse
);
this.state.loading = false;
this.state = {
...this.state,
searchResponse: Some(this.isoData.routeData[3] as SearchResponse),
resolveObjectResponse: Some(
this.isoData.routeData[4] as ResolveObjectResponse
),
loading: false,
};
} else {
this.search();
}
@ -382,7 +390,7 @@ export class Search extends Component<any, SearchState> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -407,12 +415,12 @@ export class Search extends Component<any, SearchState> {
searchForm() {
return (
<form
class="form-inline"
className="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<input
type="text"
class="form-control mr-2 mb-2"
className="form-control mr-2 mb-2"
value={this.state.searchText}
placeholder={`${i18n.t("search")}...`}
aria-label={i18n.t("search")}
@ -420,7 +428,7 @@ export class Search extends Component<any, SearchState> {
required
minLength={1}
/>
<button type="submit" class="btn btn-secondary mr-2 mb-2">
<button type="submit" className="btn btn-secondary mr-2 mb-2">
{this.state.loading ? <Spinner /> : <span>{i18n.t("search")}</span>}
</button>
</form>
@ -433,7 +441,7 @@ export class Search extends Component<any, SearchState> {
<select
value={this.state.type_}
onChange={linkEvent(this, this.handleTypeChange)}
class="custom-select w-auto mb-2"
className="custom-select w-auto mb-2"
aria-label={i18n.t("type")}
>
<option disabled aria-hidden="true">
@ -448,7 +456,7 @@ export class Search extends Component<any, SearchState> {
<option value={SearchType.Users}>{i18n.t("users")}</option>
<option value={SearchType.Url}>{i18n.t("url")}</option>
</select>
<span class="ml-2">
<span className="ml-2">
<ListingTypeSelect
type_={this.state.listingType}
showLocal={showLocal(this.isoData)}
@ -456,7 +464,7 @@ export class Search extends Component<any, SearchState> {
onChange={this.handleListingTypeChange}
/>
</span>
<span class="ml-2">
<span className="ml-2">
<SortSelect
sort={this.state.sort}
onChange={this.handleSortChange}
@ -464,7 +472,7 @@ export class Search extends Component<any, SearchState> {
hideMostComments
/>
</span>
<div class="form-row">
<div className="form-row">
{this.state.communities.length > 0 && this.communityFilter()}
{this.creatorFilter()}
</div>
@ -577,8 +585,8 @@ export class Search extends Component<any, SearchState> {
return (
<div>
{combined.map(i => (
<div class="row">
<div class="col-12">
<div key={i.published} className="row">
<div className="col-12">
{i.type_ == "posts" && (
<PostListing
key={(i.data as PostView).post.id}
@ -589,6 +597,8 @@ export class Search extends Component<any, SearchState> {
showCommunity
enableDownvotes={enableDownvotes(this.state.siteRes)}
enableNsfw={enableNsfw(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
viewOnly
/>
)}
{i.type_ == "comments" && (
@ -602,19 +612,21 @@ export class Search extends Component<any, SearchState> {
},
]}
viewType={CommentViewType.Flat}
viewOnly
moderators={None}
admins={None}
maxCommentsShown={None}
locked
noIndent
enableDownvotes={enableDownvotes(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
)}
{i.type_ == "communities" && (
<div>{this.communityListing(i.data as CommunityView)}</div>
)}
{i.type_ == "users" && (
<div>{this.userListing(i.data as PersonViewSafe)}</div>
<div>{this.personListing(i.data as PersonViewSafe)}</div>
)}
</div>
</div>
@ -639,12 +651,14 @@ export class Search extends Component<any, SearchState> {
<CommentNodes
nodes={commentsToFlatNodes(comments)}
viewType={CommentViewType.Flat}
viewOnly
locked
noIndent
moderators={None}
admins={None}
maxCommentsShown={None}
enableDownvotes={enableDownvotes(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
/>
);
}
@ -663,17 +677,19 @@ export class Search extends Component<any, SearchState> {
return (
<>
{posts.map(post => (
<div class="row">
<div class="col-12">
{posts.map(pv => (
<div key={pv.post.id} className="row">
<div className="col-12">
<PostListing
post_view={post}
post_view={pv}
showCommunity
duplicates={None}
moderators={None}
admins={None}
enableDownvotes={enableDownvotes(this.state.siteRes)}
enableNsfw={enableNsfw(this.state.siteRes)}
allLanguages={this.state.siteRes.all_languages}
viewOnly
/>
</div>
</div>
@ -696,9 +712,9 @@ export class Search extends Component<any, SearchState> {
return (
<>
{communities.map(community => (
<div class="row">
<div class="col-12">{this.communityListing(community)}</div>
{communities.map(cv => (
<div key={cv.community.id} className="row">
<div className="col-12">{this.communityListing(cv)}</div>
</div>
))}
</>
@ -719,9 +735,9 @@ export class Search extends Component<any, SearchState> {
return (
<>
{users.map(user => (
<div class="row">
<div class="col-12">{this.userListing(user)}</div>
{users.map(pvs => (
<div key={pvs.person.id} className="row">
<div className="col-12">{this.personListing(pvs)}</div>
</div>
))}
</>
@ -744,33 +760,37 @@ export class Search extends Component<any, SearchState> {
);
}
userListing(person_view: PersonViewSafe) {
return [
<span>
<PersonListing person={person_view.person} showApubName />
</span>,
<span>{` - ${i18n.t("number_of_comments", {
count: person_view.counts.comment_count,
formattedCount: numToSI(person_view.counts.comment_count),
})}`}</span>,
];
personListing(person_view: PersonViewSafe) {
return (
<>
<span>
<PersonListing person={person_view.person} showApubName />
</span>
<span>{` - ${i18n.t("number_of_comments", {
count: person_view.counts.comment_count,
formattedCount: numToSI(person_view.counts.comment_count),
})}`}</span>
</>
);
}
communityFilter() {
return (
<div class="form-group col-sm-6">
<label class="col-form-label" htmlFor="community-filter">
<div className="form-group col-sm-6">
<label className="col-form-label" htmlFor="community-filter">
{i18n.t("community")}
</label>
<div>
<select
class="form-control"
className="form-control"
id="community-filter"
value={this.state.communityId}
>
<option value="0">{i18n.t("all")}</option>
{this.state.communities.map(cv => (
<option value={cv.community.id}>{communitySelectName(cv)}</option>
<option key={cv.community.id} value={cv.community.id}>
{communitySelectName(cv)}
</option>
))}
</select>
</div>
@ -780,13 +800,13 @@ export class Search extends Component<any, SearchState> {
creatorFilter() {
return (
<div class="form-group col-sm-6">
<label class="col-form-label" htmlFor="creator-filter">
<div className="form-group col-sm-6">
<label className="col-form-label" htmlFor="creator-filter">
{capitalizeFirstLetter(i18n.t("creator"))}
</label>
<div>
<select
class="form-control"
className="form-control"
id="creator-filter"
value={this.state.creatorId}
>
@ -852,10 +872,11 @@ export class Search extends Component<any, SearchState> {
});
if (this.state.q != "") {
this.state.searchResponse = None;
this.state.resolveObjectResponse = None;
this.state.loading = true;
this.setState(this.state);
this.setState({
searchResponse: None,
resolveObjectResponse: None,
loading: true,
});
WebSocketService.Instance.send(wsClient.search(form));
WebSocketService.Instance.send(wsClient.resolveObject(resolveObjectForm));
}
@ -996,11 +1017,13 @@ export class Search extends Component<any, SearchState> {
let op = wsUserOp(msg);
if (msg.error) {
if (msg.error == "couldnt_find_object") {
this.state.resolveObjectResponse = Some({
comment: None,
post: None,
community: None,
person: None,
this.setState({
resolveObjectResponse: Some({
comment: None,
post: None,
community: None,
person: None,
}),
});
this.checkFinishedLoading();
} else {
@ -1009,7 +1032,7 @@ export class Search extends Component<any, SearchState> {
}
} else if (op == UserOperation.Search) {
let data = wsJsonToRes<SearchResponse>(msg, SearchResponse);
this.state.searchResponse = Some(data);
this.setState({ searchResponse: Some(data) });
window.scrollTo(0, 0);
this.checkFinishedLoading();
restoreScrollPosition(this.context);
@ -1032,12 +1055,11 @@ export class Search extends Component<any, SearchState> {
msg,
ListCommunitiesResponse
);
this.state.communities = data.communities;
this.setState(this.state);
this.setState({ communities: data.communities });
this.setupCommunityFilter();
} else if (op == UserOperation.ResolveObject) {
let data = wsJsonToRes<ResolveObjectResponse>(msg, ResolveObjectResponse);
this.state.resolveObjectResponse = Some(data);
this.setState({ resolveObjectResponse: Some(data) });
this.checkFinishedLoading();
}
}
@ -1047,8 +1069,7 @@ export class Search extends Component<any, SearchState> {
this.state.searchResponse.isSome() &&
this.state.resolveObjectResponse.isSome()
) {
this.state.loading = false;
this.setState(this.state);
this.setState({ loading: false });
}
}
}

153
src/shared/utils.ts
View file

@ -1,4 +1,4 @@
import { None, Option, Result, Some } from "@sniptt/monads";
import { Err, None, Ok, Option, Result, Some } from "@sniptt/monads";
import { ClassConstructor, deserialize, serialize } from "class-transformer";
import emojiShortName from "emoji-short-name";
import {
@ -23,6 +23,7 @@ import {
PersonViewSafe,
PostReportView,
PostView,
PrivateMessageReportView,
PrivateMessageView,
RegistrationApplicationView,
Search,
@ -69,7 +70,7 @@ export const webArchiveUrl = "https://web.archive.org";
export const elementUrl = "https://element.io";
export const postRefetchSeconds: number = 60 * 1000;
export const fetchLimit = 20;
export const fetchLimit = 40;
export const trendingFetchLimit = 6;
export const mentionDropdownFetchLimit = 10;
export const commentTreeMaxDepth = 8;
@ -246,14 +247,10 @@ export function isAdmin(
});
}
export function amAdmin(
admins: Option<PersonViewSafe[]>,
myUserInfo = UserService.Instance.myUserInfo
): boolean {
return myUserInfo.match({
some: mui => isAdmin(admins, mui.local_user_view.person.id),
none: false,
});
export function amAdmin(myUserInfo = UserService.Instance.myUserInfo): boolean {
return myUserInfo
.map(mui => mui.local_user_view.person.admin)
.unwrapOr(false);
}
export function amCommunityCreator(
@ -418,7 +415,7 @@ export function getLanguages(
myUserInfo = UserService.Instance.myUserInfo
): string[] {
let myLang = myUserInfo
.map(m => m.local_user_view.local_user.lang)
.map(m => m.local_user_view.local_user.interface_language)
.unwrapOr("browser");
let lang = override || myLang;
@ -638,21 +635,18 @@ export function notifyPrivateMessage(pmv: PrivateMessageView, router: any) {
function notify(info: NotifyInfo, router: any) {
messageToastify(info, router);
// TODO absolute nightmare bug, but notifs are currently broken.
// Notification.new will try to do a browser fetch ???
if (Notification.permission !== "granted") Notification.requestPermission();
else {
var notification = new Notification(info.name, {
...{ body: info.body },
...(info.icon.isSome() && { icon: info.icon.unwrap() }),
});
// if (Notification.permission !== "granted") Notification.requestPermission();
// else {
// var notification = new Notification(info.name, {
// icon: info.icon,
// body: info.body,
// });
// notification.onclick = (ev: Event): any => {
// ev.preventDefault();
// router.history.push(info.link);
// };
// }
notification.onclick = (ev: Event): any => {
ev.preventDefault();
router.history.push(info.link);
};
}
}
export function setupTribute() {
@ -959,6 +953,7 @@ export function editPostRes(data: PostView, post: PostView) {
}
}
// TODO possible to make these generic?
export function updatePostReportRes(
data: PostReportView,
reports: PostReportView[]
@ -979,6 +974,18 @@ export function updateCommentReportRes(
}
}
export function updatePrivateMessageReportRes(
data: PrivateMessageReportView,
reports: PrivateMessageReportView[]
) {
let found = reports.find(
c => c.private_message_report.id == data.private_message_report.id
);
if (found) {
found.private_message_report = data.private_message_report;
}
}
export function updateRegistrationApplicationRes(
data: RegistrationApplicationView,
applications: RegistrationApplicationView[]
@ -1338,44 +1345,11 @@ export const choicesConfig = {
shouldSort: false,
searchResultLimit: fetchLimit,
classNames: {
containerOuter: "choices",
containerInner: "choices__inner bg-secondary border-0",
input: "form-control",
inputCloned: "choices__input--cloned",
list: "choices__list",
listItems: "choices__list--multiple",
listSingle: "choices__list--single",
listDropdown: "choices__list--dropdown",
item: "choices__item bg-secondary",
itemSelectable: "choices__item--selectable",
itemDisabled: "choices__item--disabled",
itemChoice: "choices__item--choice",
placeholder: "choices__placeholder",
group: "choices__group",
groupHeading: "choices__heading",
button: "choices__button",
activeState: "is-active",
focusState: "is-focused",
openState: "is-open",
disabledState: "is-disabled",
highlightedState: "text-info",
selectedState: "text-info",
flippedState: "is-flipped",
loadingState: "is-loading",
noResults: "has-no-results",
noChoices: "has-no-choices",
},
};
export const choicesModLogConfig = {
shouldSort: false,
searchResultLimit: fetchLimit,
classNames: {
containerOuter: "choices mb-2 custom-select col-4 px-0",
containerOuter: "choices custom-select px-0",
containerInner:
"choices__inner bg-secondary border-0 py-0 modlog-choices-font-size",
input: "form-control",
inputCloned: "choices__input--cloned w-100",
inputCloned: "choices__input--cloned",
list: "choices__list",
listItems: "choices__list--multiple",
listSingle: "choices__list--single py-0",
@ -1472,3 +1446,62 @@ export function postToCommentSortType(sort: SortType): CommentSortType {
return CommentSortType.Top;
}
}
export function arrayGet<T>(arr: Array<T>, index: number): Result<T, string> {
let out = arr.at(index);
if (out == undefined) {
return Err("Index undefined");
} else {
return Ok(out);
}
}
export function myFirstDiscussionLanguageId(
myUserInfo = UserService.Instance.myUserInfo
): Option<number> {
return myUserInfo.andThen(mui =>
arrayGet(mui.discussion_languages, 0)
.ok()
.map(i => i.id)
);
}
export function canCreateCommunity(
siteRes: GetSiteResponse,
myUserInfo = UserService.Instance.myUserInfo
): boolean {
let adminOnly = siteRes.site_view
.map(s => s.site.community_creation_admin_only)
.unwrapOr(false);
return !adminOnly || amAdmin(myUserInfo);
}
export function isPostBlocked(
pv: PostView,
myUserInfo = UserService.Instance.myUserInfo
): boolean {
return myUserInfo
.map(
mui =>
mui.community_blocks
.map(c => c.community.id)
.includes(pv.community.id) ||
mui.person_blocks.map(p => p.target.id).includes(pv.creator.id)
)
.unwrapOr(false);
}
/// Checks to make sure you can view NSFW posts. Returns true if you can.
export function nsfwCheck(
pv: PostView,
myUserInfo = UserService.Instance.myUserInfo
): boolean {
let nsfw = pv.post.nsfw || pv.community.nsfw;
return (
!nsfw ||
(nsfw &&
myUserInfo
.map(m => m.local_user_view.local_user.show_nsfw)
.unwrapOr(false))
);
}

2763
yarn.lock
View file

File diff suppressed because it is too large Load diff