mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-29 07:41:13 +00:00
Merge branch 'main' into hide_create_community
This commit is contained in:
commit
ace8ec9f31
59 changed files with 3028 additions and 2708 deletions
|
|
@ -8,7 +8,8 @@
|
|||
],
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended"
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:inferno/recommended"
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
|
|
|
|||
17
package.json
17
package.json
|
|
@ -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.1",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@babel/runtime": "^7.18.9",
|
||||
"@sniptt/monads": "^0.5.10",
|
||||
|
|
@ -74,6 +74,7 @@
|
|||
"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",
|
||||
|
|
@ -95,7 +96,7 @@
|
|||
"typescript": "^4.7.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": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -145,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
|
||||
|
|
@ -167,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"
|
||||
|
|
@ -180,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>
|
||||
)}
|
||||
|
|
@ -188,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"
|
||||
|
|
@ -201,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>
|
||||
)}
|
||||
|
|
@ -210,7 +210,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
</ul>
|
||||
)}
|
||||
{this.amAdmin && (
|
||||
<ul class="navbar-nav ml-1">
|
||||
<ul className="navbar-nav ml-1">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
|
|
@ -225,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>
|
||||
)}
|
||||
|
|
@ -236,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)}
|
||||
|
|
@ -247,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"
|
||||
|
|
@ -258,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)}
|
||||
|
|
@ -272,7 +276,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
</NavLink>
|
||||
</li>
|
||||
{canCreateCommunity(this.props.siteRes) && (
|
||||
<li class="nav-item">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/create_community"
|
||||
className="nav-link"
|
||||
|
|
@ -283,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")}
|
||||
|
|
@ -293,7 +297,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav my-2">
|
||||
<ul className="navbar-nav my-2">
|
||||
{this.amAdmin && (
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
|
|
@ -311,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)}
|
||||
|
|
@ -326,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")}
|
||||
>
|
||||
|
|
@ -342,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"
|
||||
|
|
@ -355,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>
|
||||
)}
|
||||
|
|
@ -363,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"
|
||||
|
|
@ -376,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>
|
||||
)}
|
||||
|
|
@ -385,7 +389,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
</ul>
|
||||
)}
|
||||
{this.amAdmin && (
|
||||
<ul class="navbar-nav my-2">
|
||||
<ul className="navbar-nav my-2">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
|
|
@ -400,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>
|
||||
)}
|
||||
|
|
@ -412,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"
|
||||
|
|
@ -434,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
|
||||
|
|
@ -461,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
|
||||
|
|
@ -485,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"
|
||||
|
|
@ -526,8 +530,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
}
|
||||
|
||||
handleToggleExpandNavbar(i: Navbar) {
|
||||
i.state.expanded = !i.state.expanded;
|
||||
i.setState(i.state);
|
||||
i.setState({ expanded: !i.state.expanded });
|
||||
}
|
||||
|
||||
handleHideExpandNavbar(i: Navbar) {
|
||||
|
|
@ -535,8 +538,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) {
|
||||
|
|
@ -557,8 +559,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 });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -568,8 +569,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) {
|
||||
|
|
@ -595,25 +595,25 @@ 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,
|
||||
});
|
||||
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);
|
||||
|
|
@ -621,8 +621,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);
|
||||
}
|
||||
|
|
@ -641,8 +642,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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||
.or(myFirstDiscussionLanguageId(UserService.Instance.myUserInfo));
|
||||
|
||||
return (
|
||||
<div class="mb-3">
|
||||
<div className="mb-3">
|
||||
{UserService.Instance.myUserInfo.isSome() ? (
|
||||
<MarkdownTextArea
|
||||
initialContent={initialContent}
|
||||
|
|
@ -102,7 +102,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||
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">
|
||||
#
|
||||
|
|
@ -123,7 +123,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|||
}) {
|
||||
let content = msg.val;
|
||||
let language_id = msg.languageId;
|
||||
this.state.formId = Some(msg.formId);
|
||||
this.setState({ formId: Some(msg.formId) });
|
||||
|
||||
this.props.node.match({
|
||||
left: node => {
|
||||
|
|
|
|||
|
|
@ -149,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() {
|
||||
|
|
@ -229,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 && (
|
||||
|
|
@ -265,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}
|
||||
|
|
@ -296,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,
|
||||
|
|
@ -338,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
|
||||
|
|
@ -383,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>
|
||||
)}
|
||||
|
|
@ -402,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")}
|
||||
|
|
@ -429,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}`}
|
||||
|
|
@ -439,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
|
||||
|
|
@ -452,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
|
||||
|
|
@ -465,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
|
||||
|
|
@ -504,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
|
||||
|
|
@ -515,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
|
||||
|
|
@ -541,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
|
||||
|
|
@ -573,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
|
||||
|
|
@ -584,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
|
||||
|
|
@ -602,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
|
||||
|
|
@ -613,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
|
||||
|
|
@ -626,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
|
||||
|
|
@ -644,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
|
||||
|
|
@ -660,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
|
||||
|
|
@ -679,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
|
||||
|
|
@ -691,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
|
||||
|
|
@ -707,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
|
||||
|
|
@ -725,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
|
||||
|
|
@ -735,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
|
||||
|
|
@ -747,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
|
||||
|
|
@ -758,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
|
||||
|
|
@ -774,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
|
||||
|
|
@ -791,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
|
||||
|
|
@ -805,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
|
||||
|
|
@ -836,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", {
|
||||
|
|
@ -850,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")}
|
||||
|
|
@ -862,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")}
|
||||
|
|
@ -878,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")}
|
||||
|
|
@ -904,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")}
|
||||
|
|
@ -914,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")}
|
||||
|
|
@ -928,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")}
|
||||
>
|
||||
|
|
@ -957,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}
|
||||
|
|
@ -972,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}
|
||||
|
|
@ -1020,7 +1026,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
/>
|
||||
)}
|
||||
{/* A collapsed clearfix */}
|
||||
{this.state.collapsed && <div class="row col-12"></div>}
|
||||
{this.state.collapsed && <div className="row col-12"></div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1095,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) {
|
||||
|
|
@ -1134,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) {
|
||||
|
|
@ -1150,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,
|
||||
|
|
@ -1169,7 +1176,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
auth: auth().unwrap(),
|
||||
});
|
||||
WebSocketService.Instance.send(wsClient.likeComment(form));
|
||||
this.setState(this.state);
|
||||
setupTippy();
|
||||
}
|
||||
|
||||
|
|
@ -1179,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,
|
||||
|
|
@ -1199,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) {
|
||||
|
|
@ -1222,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) {
|
||||
|
|
@ -1252,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) {
|
||||
|
|
@ -1299,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);
|
||||
}
|
||||
|
||||
|
|
@ -1346,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,
|
||||
|
|
@ -1362,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,
|
||||
|
|
@ -1375,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) {
|
||||
|
|
@ -1417,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) {
|
||||
|
|
@ -1440,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) {
|
||||
|
|
@ -1462,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) {
|
||||
|
|
@ -1484,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 {
|
||||
|
|
@ -1505,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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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: <></>,
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
let selectedLangs = this.props.selectedLanguageIds;
|
||||
|
||||
return (
|
||||
<div class="form-group row">
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className={classNames("col-form-label", {
|
||||
"col-sm-3": this.props.multiple,
|
||||
|
|
@ -62,15 +62,15 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
})}
|
||||
>
|
||||
<select
|
||||
class="form-control"
|
||||
className="form-control custom-select"
|
||||
id={this.id}
|
||||
onChange={linkEvent(this, this.handleLanguageChange)}
|
||||
className="custom-select"
|
||||
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)}
|
||||
>
|
||||
|
|
@ -79,9 +79,9 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
))}
|
||||
</select>
|
||||
{this.props.multiple && (
|
||||
<div class="input-group-append">
|
||||
<div className="input-group-append">
|
||||
<button
|
||||
class="input-group-text"
|
||||
className="input-group-text"
|
||||
onClick={linkEvent(this, this.handleDeselectAll)}
|
||||
>
|
||||
<Icon icon="x" />
|
||||
|
|
|
|||
|
|
@ -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")}
|
||||
|
|
|
|||
|
|
@ -82,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);
|
||||
});
|
||||
|
||||
|
|
@ -108,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();
|
||||
}
|
||||
|
|
@ -120,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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -137,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}
|
||||
|
|
@ -162,13 +157,13 @@ 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>
|
||||
{this.props.showLanguage && (
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-sm-8">
|
||||
<div className="row justify-content-end">
|
||||
<div className="col-sm-8">
|
||||
<LanguageSelect
|
||||
allLanguages={this.props.allLanguages}
|
||||
selectedLanguageIds={this.state.languageId.map(Array.of)}
|
||||
|
|
@ -178,13 +173,13 @@ export class MarkdownTextArea extends Component<
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div class="row">
|
||||
<div class="col-sm-12 d-flex flex-wrap">
|
||||
<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 ? (
|
||||
|
|
@ -199,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")}
|
||||
|
|
@ -216,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)}
|
||||
|
|
@ -226,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)}
|
||||
|
|
@ -234,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 ${
|
||||
|
|
@ -260,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)}
|
||||
|
|
@ -274,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)}
|
||||
|
|
@ -282,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)}
|
||||
|
|
@ -290,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)}
|
||||
|
|
@ -298,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)}
|
||||
|
|
@ -306,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)}
|
||||
|
|
@ -314,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)}
|
||||
|
|
@ -322,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)}
|
||||
|
|
@ -331,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}
|
||||
>
|
||||
|
|
@ -362,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",
|
||||
|
|
@ -379,15 +373,16 @@ export class MarkdownTextArea extends Component<
|
|||
let deleteToken = res.files[0].delete_token;
|
||||
let deleteUrl = `${pictrsUri}/delete/${deleteToken}/${hash}`;
|
||||
let imageMarkdown = ``;
|
||||
i.state.content = Some(
|
||||
i.setState({
|
||||
content: Some(
|
||||
i.state.content.match({
|
||||
some: content => `${content}\n${imageMarkdown}`,
|
||||
none: imageMarkdown,
|
||||
})
|
||||
);
|
||||
i.state.imageLoading = false;
|
||||
),
|
||||
imageLoading: false,
|
||||
});
|
||||
i.contentChange();
|
||||
i.setState(i.state);
|
||||
let textarea: any = document.getElementById(i.id);
|
||||
autosize.update(textarea);
|
||||
pictrsDeleteToast(
|
||||
|
|
@ -396,14 +391,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");
|
||||
});
|
||||
|
|
@ -416,26 +409,22 @@ 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.state.languageId = Some(val[0]);
|
||||
this.setState(this.state);
|
||||
this.setState({ languageId: Some(val[0]) });
|
||||
}
|
||||
|
||||
handleSubmit(i: MarkdownTextArea, event: any) {
|
||||
event.preventDefault();
|
||||
i.state.loading = true;
|
||||
i.setState(i.state);
|
||||
i.setState({ loading: true });
|
||||
let msg = {
|
||||
val: i.state.content,
|
||||
formId: i.formId,
|
||||
|
|
@ -456,27 +445,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(
|
||||
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) {
|
||||
|
|
@ -493,7 +483,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;
|
||||
|
|
@ -503,19 +493,20 @@ export class MarkdownTextArea extends Component<
|
|||
|
||||
if (start !== end) {
|
||||
let selectedText = content.substring(start, end);
|
||||
this.state.content = Some(
|
||||
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();
|
||||
|
||||
|
|
@ -587,9 +578,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);
|
||||
|
|
@ -598,7 +591,6 @@ export class MarkdownTextArea extends Component<
|
|||
autosize.update(textarea);
|
||||
}, 10);
|
||||
this.contentChange();
|
||||
this.setState(this.state);
|
||||
}
|
||||
|
||||
handleInsertSpoiler(i: MarkdownTextArea, event: any) {
|
||||
|
|
@ -618,13 +610,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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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")}
|
||||
|
|
|
|||
|
|
@ -88,11 +88,11 @@ 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}
|
||||
|
|
@ -159,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) });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>,
|
||||
]}
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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,11 +205,11 @@ 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}
|
||||
|
|
@ -222,14 +223,14 @@ export class CommunityForm extends Component<
|
|||
</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)}
|
||||
|
|
@ -239,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(
|
||||
|
|
@ -260,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 ? (
|
||||
|
|
@ -278,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")}
|
||||
|
|
@ -293,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();
|
||||
|
||||
|
|
@ -332,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);
|
||||
}
|
||||
|
||||
|
|
@ -351,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) {
|
||||
|
|
@ -376,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
|
||||
|
|
@ -403,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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -139,24 +139,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 +281,7 @@ export class Community extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div class="container">
|
||||
<div className="container">
|
||||
{this.state.communityLoading ? (
|
||||
<h5>
|
||||
<Spinner large />
|
||||
|
|
@ -294,12 +297,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 +347,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}
|
||||
|
|
@ -415,9 +418,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
|
||||
|
|
@ -436,14 +439,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({
|
||||
|
|
@ -477,8 +480,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) {
|
||||
|
|
@ -545,9 +547,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({
|
||||
|
|
@ -578,9 +578,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 (
|
||||
|
|
@ -633,9 +631,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 ||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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,7 +274,6 @@ 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" : ""
|
||||
|
|
@ -282,40 +282,47 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
>
|
||||
{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"
|
||||
className="btn btn-secondary btn-block"
|
||||
onClick={linkEvent(this, this.handleSubscribe)}
|
||||
>
|
||||
{i18n.t("subscribe")}
|
||||
</button>
|
||||
{blocked ? (
|
||||
)}
|
||||
</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
|
||||
class="btn btn-danger btn-block"
|
||||
className="btn btn-danger btn-block"
|
||||
onClick={linkEvent(this, this.handleUnblock)}
|
||||
>
|
||||
{i18n.t("unblock_community")}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
class="btn btn-danger btn-block"
|
||||
className="btn btn-danger btn-block"
|
||||
onClick={linkEvent(this, this.handleBlock)}
|
||||
>
|
||||
{i18n.t("block_community")}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -417,21 +424,21 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
<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) {
|
||||
|
|
@ -604,18 +605,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
}
|
||||
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -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("/");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,22 +158,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();
|
||||
|
|
@ -318,7 +320,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}
|
||||
|
|
@ -326,12 +328,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>
|
||||
|
|
@ -348,11 +352,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")}{" "}
|
||||
|
|
@ -367,7 +371,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")}{" "}
|
||||
|
|
@ -379,7 +383,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")}{" "}
|
||||
|
|
@ -404,13 +408,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>
|
||||
|
|
@ -424,8 +428,8 @@ 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()}
|
||||
{canCreateCommunity(this.state.siteRes) &&
|
||||
this.createCommunityButton()}
|
||||
|
|
@ -445,8 +449,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>
|
||||
|
|
@ -482,9 +486,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>
|
||||
))}
|
||||
|
|
@ -504,7 +511,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")}
|
||||
|
|
@ -517,12 +524,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>
|
||||
))}
|
||||
|
|
@ -544,7 +554,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 />
|
||||
|
|
@ -598,13 +608,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)}
|
||||
|
|
@ -612,7 +622,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 && (
|
||||
|
|
@ -648,23 +658,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) {
|
||||
|
|
@ -735,18 +741,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 })
|
||||
);
|
||||
|
|
@ -816,8 +818,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
|
||||
|
|
@ -827,9 +828,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 ||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = "/";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,14 +285,14 @@ 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}
|
||||
|
|
@ -301,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")}
|
||||
>
|
||||
|
|
@ -314,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(
|
||||
|
|
@ -330,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}
|
||||
|
|
@ -343,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>
|
||||
|
|
@ -355,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 />
|
||||
) : (
|
||||
|
|
@ -380,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)}
|
||||
|
|
@ -433,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));
|
||||
}
|
||||
|
||||
|
|
@ -472,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) {
|
||||
|
|
@ -483,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());
|
||||
}
|
||||
|
||||
|
|
@ -502,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,
|
||||
|
|
@ -526,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);
|
||||
|
|
@ -554,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,
|
||||
});
|
||||
|
|
@ -564,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 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,9 +78,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,
|
||||
|
|
@ -101,21 +103,18 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
legal_information: site.legal_information,
|
||||
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 +156,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 +173,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 +183,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 +192,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,9 +207,9 @@ 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}
|
||||
|
|
@ -223,11 +222,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</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}
|
||||
|
|
@ -241,11 +240,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</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}
|
||||
|
|
@ -259,11 +258,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</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)}
|
||||
|
|
@ -272,24 +271,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")}
|
||||
|
|
@ -297,11 +299,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)}
|
||||
|
|
@ -311,7 +313,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")}
|
||||
|
|
@ -319,11 +321,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(
|
||||
|
|
@ -335,7 +337,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")}
|
||||
|
|
@ -343,11 +345,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(
|
||||
|
|
@ -359,7 +361,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")}
|
||||
|
|
@ -367,18 +369,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")}
|
||||
|
|
@ -386,10 +388,10 @@ 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">
|
||||
<label
|
||||
class="form-check-label mr-2"
|
||||
className="form-check-label mr-2"
|
||||
htmlFor="create-site-default-theme"
|
||||
>
|
||||
{i18n.t("theme")}
|
||||
|
|
@ -398,19 +400,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[
|
||||
|
|
@ -426,18 +430,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")}
|
||||
|
|
@ -445,11 +449,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(
|
||||
|
|
@ -458,7 +462,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")}
|
||||
|
|
@ -466,11 +470,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 ? (
|
||||
|
|
@ -484,7 +488,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")}
|
||||
|
|
@ -499,8 +503,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));
|
||||
|
|
@ -537,18 +541,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) {
|
||||
|
|
@ -606,29 +607,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(
|
||||
this.setState(
|
||||
s => (
|
||||
(s.siteForm.default_post_listing_type = Some(
|
||||
ListingType[ListingType[val]]
|
||||
)),
|
||||
s
|
||||
)
|
||||
);
|
||||
this.setState(this.state);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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")}
|
||||
|
|
@ -114,10 +114,10 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
|
|||
adminButtons() {
|
||||
return (
|
||||
amAdmin(this.props.admins) && (
|
||||
<ul class="list-inline mb-1 text-muted font-weight-bold">
|
||||
<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 });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
{mrpv.mod_remove_post.removed.unwrapOr(false)
|
||||
? "Removed "
|
||||
: "Restored ",
|
||||
: "Restored "}
|
||||
</span>
|
||||
<span>
|
||||
Post <Link to={`/post/${mrpv.post.id}`}>{mrpv.post.name}</Link>
|
||||
</span>,
|
||||
mrpv.mod_remove_post.reason.match({
|
||||
</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 ",
|
||||
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>,
|
||||
];
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
case ModlogActionType.ModStickyPost: {
|
||||
let mspv = i.view as ModStickyPostView;
|
||||
return [
|
||||
mspv.mod_sticky_post.stickied.unwrapOr(false)
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
{mspv.mod_sticky_post.stickied.unwrapOr(false)
|
||||
? "Stickied "
|
||||
: "Unstickied ",
|
||||
: "Unstickied "}
|
||||
</span>
|
||||
<span>
|
||||
Post <Link to={`/post/${mspv.post.id}`}>{mspv.post.name}</Link>
|
||||
</span>,
|
||||
];
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
case ModlogActionType.ModRemoveComment: {
|
||||
let mrc = i.view as ModRemoveCommentView;
|
||||
return [
|
||||
mrc.mod_remove_comment.removed.unwrapOr(false)
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
{mrc.mod_remove_comment.removed.unwrapOr(false)
|
||||
? "Removed "
|
||||
: "Restored ",
|
||||
: "Restored "}
|
||||
</span>
|
||||
<span>
|
||||
Comment{" "}
|
||||
<Link to={`/post/${mrc.post.id}/comment/${mrc.comment.id}`}>
|
||||
{mrc.comment.content}
|
||||
</Link>
|
||||
</span>,
|
||||
</span>
|
||||
<span>
|
||||
{" "}
|
||||
by <PersonListing person={mrc.commenter} />
|
||||
</span>,
|
||||
mrc.mod_remove_comment.reason.match({
|
||||
</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)
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
{mrco.mod_remove_community.removed.unwrapOr(false)
|
||||
? "Removed "
|
||||
: "Restored ",
|
||||
: "Restored "}
|
||||
</span>
|
||||
<span>
|
||||
Community <CommunityLink community={mrco.community} />
|
||||
</span>,
|
||||
mrco.mod_remove_community.reason.match({
|
||||
</span>
|
||||
<span>
|
||||
{mrco.mod_remove_community.reason.match({
|
||||
some: reason => <div>reason: {reason}</div>,
|
||||
none: <></>,
|
||||
}),
|
||||
mrco.mod_remove_community.expires.match({
|
||||
})}
|
||||
</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 [
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
{mbfc.mod_ban_from_community.banned.unwrapOr(false)
|
||||
? "Banned "
|
||||
: "Unbanned "}{" "}
|
||||
</span>,
|
||||
</span>
|
||||
<span>
|
||||
<PersonListing person={mbfc.banned_person} />
|
||||
</span>,
|
||||
<span> from the community </span>,
|
||||
</span>
|
||||
<span> from the community </span>
|
||||
<span>
|
||||
<CommunityLink community={mbfc.community} />
|
||||
</span>,
|
||||
mbfc.mod_ban_from_community.reason.match({
|
||||
</span>
|
||||
<span>
|
||||
{mbfc.mod_ban_from_community.reason.match({
|
||||
some: reason => <div>reason: {reason}</div>,
|
||||
none: <></>,
|
||||
}),
|
||||
mbfc.mod_ban_from_community.expires.match({
|
||||
})}
|
||||
</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 [
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
{mac.mod_add_community.removed.unwrapOr(false)
|
||||
? "Removed "
|
||||
: "Appointed "}{" "}
|
||||
</span>,
|
||||
</span>
|
||||
<span>
|
||||
<PersonListing person={mac.modded_person} />
|
||||
</span>,
|
||||
<span> as a mod to the community </span>,
|
||||
</span>
|
||||
<span> as a mod to the community </span>
|
||||
<span>
|
||||
<CommunityLink community={mac.community} />
|
||||
</span>,
|
||||
];
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
case ModlogActionType.ModTransferCommunity: {
|
||||
let mtc = i.view as ModTransferCommunityView;
|
||||
return [
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
{mtc.mod_transfer_community.removed.unwrapOr(false)
|
||||
? "Removed "
|
||||
: "Transferred "}{" "}
|
||||
</span>,
|
||||
</span>
|
||||
<span>
|
||||
<CommunityLink community={mtc.community} />
|
||||
</span>,
|
||||
<span> to </span>,
|
||||
</span>
|
||||
<span> to </span>
|
||||
<span>
|
||||
<PersonListing person={mtc.modded_person} />
|
||||
</span>,
|
||||
];
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
case ModlogActionType.ModBan: {
|
||||
let mb = i.view as ModBanView;
|
||||
return [
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
{mb.mod_ban.banned.unwrapOr(false) ? "Banned " : "Unbanned "}{" "}
|
||||
</span>,
|
||||
</span>
|
||||
<span>
|
||||
<PersonListing person={mb.banned_person} />
|
||||
</span>,
|
||||
mb.mod_ban.reason.match({
|
||||
</span>
|
||||
<span>
|
||||
{mb.mod_ban.reason.match({
|
||||
some: reason => <div>reason: {reason}</div>,
|
||||
none: <></>,
|
||||
}),
|
||||
mb.mod_ban.expires.match({
|
||||
})}
|
||||
</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 [
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
{ma.mod_add.removed.unwrapOr(false) ? "Removed " : "Appointed "}{" "}
|
||||
</span>,
|
||||
</span>
|
||||
<span>
|
||||
<PersonListing person={ma.modded_person} />
|
||||
</span>,
|
||||
<span> as an admin </span>,
|
||||
];
|
||||
</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({
|
||||
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({
|
||||
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({
|
||||
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 [
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
Purged a Comment from{" "}
|
||||
<Link to={`/post/${ap.post.id}`}>{ap.post.name}</Link>
|
||||
</span>,
|
||||
ap.admin_purge_comment.reason.match({
|
||||
</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>
|
||||
|
|
@ -593,11 +667,12 @@ export class Modlog extends Component<any, ModlogState> {
|
|||
})}
|
||||
<span>{i18n.t("modlog")}</span>
|
||||
</h5>
|
||||
<form className="form-inline mr-2">
|
||||
<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 col-4 mb-2"
|
||||
className="custom-select mb-2"
|
||||
aria-label="action"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
@ -635,25 +710,32 @@ export class Modlog extends Component<any, ModlogState> {
|
|||
Banning From Site
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
{this.state.siteRes.site_view.match({
|
||||
some: site_view =>
|
||||
!site_view.site.hide_modlog_mod_names.unwrapOr(false) && (
|
||||
<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: <></>,
|
||||
})}
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive">
|
||||
<table id="modlog_table" className="table table-sm table-hover">
|
||||
<thead className="pointer">
|
||||
|
|
@ -719,8 +801,7 @@ export class Modlog extends Component<any, ModlogState> {
|
|||
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
|
||||
|
|
@ -759,8 +840,7 @@ export class Modlog extends Component<any, ModlogState> {
|
|||
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 +909,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),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,15 +127,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.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 || [];
|
||||
this.state.combined = this.buildCombined();
|
||||
this.state.loading = false;
|
||||
.private_messages || [],
|
||||
loading: false,
|
||||
};
|
||||
this.state = { ...this.state, combined: this.buildCombined() };
|
||||
} else {
|
||||
this.refetch();
|
||||
}
|
||||
|
|
@ -166,21 +170,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 +208,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 +234,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 +267,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 +327,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}
|
||||
|
|
@ -498,16 +502,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();
|
||||
}
|
||||
|
||||
|
|
@ -584,9 +584,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();
|
||||
}
|
||||
|
||||
|
|
@ -596,10 +594,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);
|
||||
|
|
@ -624,31 +620,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>(
|
||||
|
|
@ -700,7 +692,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;
|
||||
|
|
@ -710,14 +704,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(
|
||||
this.setState({
|
||||
messages: this.state.messages.filter(
|
||||
r =>
|
||||
r.private_message.id !==
|
||||
data.private_message_view.private_message.id
|
||||
);
|
||||
this.state.combined = this.state.combined.filter(
|
||||
),
|
||||
});
|
||||
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;
|
||||
|
|
@ -737,7 +735,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
|
||||
|
|
@ -745,7 +742,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;
|
||||
|
|
@ -767,12 +766,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(
|
||||
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;
|
||||
|
|
@ -790,7 +794,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;
|
||||
|
|
@ -812,13 +818,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(
|
||||
this.setState({
|
||||
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.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 =
|
||||
|
|
|
|||
|
|
@ -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("/");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -154,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>
|
||||
);
|
||||
}
|
||||
|
|
@ -193,7 +196,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
|||
enableNsfw={this.props.enableNsfw}
|
||||
allLanguages={this.props.allLanguages}
|
||||
/>
|
||||
<hr class="my-3" />
|
||||
<hr className="my-3" />
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -121,10 +121,11 @@ 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();
|
||||
}
|
||||
|
|
@ -162,11 +163,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
|
||||
some: res =>
|
||||
this.setState({
|
||||
personBlocked: mui.person_blocks
|
||||
.map(a => a.target.id)
|
||||
.includes(res.person_view.person.id);
|
||||
},
|
||||
.includes(res.person_view.person.id),
|
||||
}),
|
||||
none: void 0,
|
||||
}),
|
||||
none: void 0,
|
||||
|
|
@ -250,7 +252,7 @@ export class Profile extends Component<any, ProfileState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div class="container">
|
||||
<div className="container">
|
||||
{this.state.loading ? (
|
||||
<h5>
|
||||
<Spinner large />
|
||||
|
|
@ -258,8 +260,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}
|
||||
|
|
@ -286,7 +288,7 @@ export class Profile extends Component<any, ProfileState> {
|
|||
</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>
|
||||
|
|
@ -302,7 +304,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"}
|
||||
|
|
@ -364,7 +366,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}
|
||||
|
|
@ -407,14 +409,14 @@ 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>
|
||||
<h5 className="mb-0">{pv.person.display_name}</h5>
|
||||
)}
|
||||
<ul class="list-inline mb-2">
|
||||
<ul className="list-inline mb-2">
|
||||
<li className="list-inline-item">
|
||||
<PersonListing
|
||||
person={pv.person}
|
||||
|
|
@ -532,7 +534,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,
|
||||
|
|
@ -547,7 +549,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}
|
||||
|
|
@ -582,33 +584,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}
|
||||
|
|
@ -618,7 +623,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")}
|
||||
>
|
||||
|
|
@ -632,10 +637,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)}
|
||||
>
|
||||
|
|
@ -643,7 +648,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}
|
||||
|
|
@ -664,12 +669,12 @@ export class Profile extends Component<any, ProfileState> {
|
|||
.match({
|
||||
some: moderates => {
|
||||
if (moderates.length > 0) {
|
||||
<div class="card border-secondary mb-3">
|
||||
<div class="card-body">
|
||||
<div className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
<h5>{i18n.t("moderates")}</h5>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<ul className="list-unstyled mb-0">
|
||||
{moderates.map(cmv => (
|
||||
<li>
|
||||
<li key={cmv.community.id}>
|
||||
<CommunityLink community={cmv.community} />
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -688,12 +693,12 @@ 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">
|
||||
<div className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
<h5>{i18n.t("subscribed")}</h5>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<ul className="list-unstyled mb-0">
|
||||
{follows.map(cfv => (
|
||||
<li>
|
||||
<li key={cfv.community.id}>
|
||||
<CommunityLink community={cfv.community} />
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -716,8 +721,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();
|
||||
}
|
||||
|
||||
|
|
@ -737,29 +741,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) {
|
||||
|
|
@ -772,7 +771,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,
|
||||
|
|
@ -784,8 +783,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,
|
||||
});
|
||||
|
|
@ -810,15 +808,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(
|
||||
|
|
|
|||
|
|
@ -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.state = {
|
||||
...this.state,
|
||||
listRegistrationApplicationsResponse: Some(
|
||||
this.isoData.routeData[0] as ListRegistrationApplicationsResponse
|
||||
);
|
||||
this.state.loading = false;
|
||||
),
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -104,14 +104,20 @@ 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.state = {
|
||||
...this.state,
|
||||
listCommentReportsResponse: Some(
|
||||
this.isoData.routeData[0] as ListCommentReportsResponse
|
||||
);
|
||||
this.state.listPostReportsResponse = Some(
|
||||
),
|
||||
listPostReportsResponse: Some(
|
||||
this.isoData.routeData[1] as ListPostReportsResponse
|
||||
);
|
||||
this.state.combined = this.buildCombined();
|
||||
this.state.loading = false;
|
||||
),
|
||||
};
|
||||
this.state = {
|
||||
...this.state,
|
||||
combined: this.buildCombined(),
|
||||
loading: false,
|
||||
};
|
||||
} else {
|
||||
this.refetch();
|
||||
}
|
||||
|
|
@ -139,21 +145,21 @@ 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 &&
|
||||
|
|
@ -173,7 +179,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 +212,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"}
|
||||
|
|
@ -253,8 +259,8 @@ 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -356,16 +362,12 @@ export class Reports extends Component<any, ReportsState> {
|
|||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
|
|
@ -443,24 +445,20 @@ 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);
|
||||
this.setState(this.state);
|
||||
setupTippy();
|
||||
} else if (op == UserOperation.ResolvePostReport) {
|
||||
let data = wsJsonToRes<PostReportResponse>(msg, PostReportResponse);
|
||||
|
|
|
|||
|
|
@ -154,13 +154,43 @@ 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),
|
||||
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() {
|
||||
|
|
@ -173,7 +203,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div class="container">
|
||||
<div className="container">
|
||||
<>
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
|
|
@ -181,10 +211,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(
|
||||
|
|
@ -195,9 +225,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(
|
||||
|
|
@ -218,15 +248,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>
|
||||
|
|
@ -235,15 +265,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>
|
||||
|
|
@ -255,15 +285,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}
|
||||
|
|
@ -271,18 +301,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}
|
||||
|
|
@ -290,15 +320,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}
|
||||
|
|
@ -306,8 +339,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 />
|
||||
) : (
|
||||
|
|
@ -333,9 +366,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
|
||||
|
|
@ -358,13 +391,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)}
|
||||
>
|
||||
|
|
@ -396,9 +432,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
|
||||
|
|
@ -421,13 +457,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}
|
||||
>
|
||||
|
|
@ -450,15 +489,15 @@ export class Settings extends Component<any, SettingsState> {
|
|||
<>
|
||||
<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
|
||||
|
|
@ -469,11 +508,11 @@ 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}
|
||||
|
|
@ -486,15 +525,15 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</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)}
|
||||
|
|
@ -502,17 +541,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
|
||||
|
|
@ -522,9 +561,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}
|
||||
|
|
@ -534,9 +573,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}
|
||||
|
|
@ -545,18 +584,18 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3" htmlFor="user-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.interface_language
|
||||
)}
|
||||
onChange={linkEvent(this, this.handleInterfaceLangChange)}
|
||||
class="custom-select w-auto"
|
||||
className="custom-select w-auto"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{i18n.t("interface_language")}
|
||||
|
|
@ -568,7 +607,9 @@ 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>
|
||||
|
|
@ -579,30 +620,32 @@ export class Settings extends Component<any, SettingsState> {
|
|||
multiple={true}
|
||||
onChange={this.handleDiscussionLanguageChange}
|
||||
/>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3" htmlFor="user-theme">
|
||||
<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)[
|
||||
|
|
@ -618,8 +661,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)[
|
||||
|
|
@ -633,10 +676,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(
|
||||
|
|
@ -644,16 +687,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(
|
||||
|
|
@ -661,15 +704,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(
|
||||
|
|
@ -677,15 +720,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(
|
||||
|
|
@ -693,15 +736,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(
|
||||
|
|
@ -709,15 +752,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(
|
||||
|
|
@ -725,15 +771,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(
|
||||
|
|
@ -742,17 +791,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}
|
||||
|
|
@ -765,15 +814,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 />
|
||||
) : (
|
||||
|
|
@ -782,9 +831,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
|
||||
|
|
@ -794,7 +843,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
|
||||
|
|
@ -806,10 +855,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)}
|
||||
>
|
||||
|
|
@ -820,7 +869,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
)}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
className="btn btn-secondary"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleDeleteAccountShowConfirmToggle
|
||||
|
|
@ -1016,22 +1065,31 @@ export class Settings extends Component<any, SettingsState> {
|
|||
}
|
||||
|
||||
handleDiscussionLanguageChange(val: number[]) {
|
||||
this.state.saveUserSettingsForm.discussion_languages = Some(val);
|
||||
this.setState(this.state);
|
||||
this.setState(
|
||||
s => ((s.saveUserSettingsForm.discussion_languages = Some(val)), s)
|
||||
);
|
||||
}
|
||||
|
||||
handleSortTypeChange(val: SortType) {
|
||||
this.state.saveUserSettingsForm.default_sort_type = Some(
|
||||
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(
|
||||
this.setState(
|
||||
s => (
|
||||
(s.saveUserSettingsForm.default_listing_type = Some(
|
||||
Object.keys(ListingType).indexOf(val)
|
||||
)),
|
||||
s
|
||||
)
|
||||
);
|
||||
this.setState(this.state);
|
||||
}
|
||||
|
||||
handleEmailChange(i: Settings, event: any) {
|
||||
|
|
@ -1040,28 +1098,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) {
|
||||
|
|
@ -1100,30 +1153,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) {
|
||||
|
|
@ -1133,13 +1182,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 }) {
|
||||
|
|
@ -1151,64 +1199,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.interface_language = Some(
|
||||
luv.local_user.interface_language
|
||||
);
|
||||
this.state.saveUserSettingsForm.discussion_languages =
|
||||
UserService.Instance.myUserInfo.map(mui =>
|
||||
mui.discussion_languages.map(l => l.id)
|
||||
);
|
||||
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);
|
||||
|
|
@ -1223,15 +1213,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) {
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.state = {
|
||||
...this.state,
|
||||
listCommunitiesResponse: Some(
|
||||
this.isoData.routeData[0] as ListCommunitiesResponse
|
||||
);
|
||||
this.state.loading = false;
|
||||
),
|
||||
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}
|
||||
|
|
@ -231,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({
|
||||
this.setState({
|
||||
listCommunitiesResponse: Some({
|
||||
communities: [data.community_view],
|
||||
}),
|
||||
loading: false,
|
||||
});
|
||||
this.state.loading = false;
|
||||
this.setState(this.state);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<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 class="d-inline-block ml-2 mb-2 small text-muted">
|
||||
</h5>
|
||||
<span className="d-inline-block ml-2 mb-2 small text-muted">
|
||||
<a
|
||||
class="text-muted font-italic"
|
||||
className="text-muted font-italic"
|
||||
href={url}
|
||||
rel={relTags}
|
||||
>
|
||||
{new URL(url).hostname}
|
||||
<Icon icon="external-link" classes="ml-1" />
|
||||
</a>
|
||||
</span>,
|
||||
]}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{post.embed_description.match({
|
||||
some: desc => (
|
||||
<div
|
||||
|
|
@ -68,7 +74,7 @@ export class MetadataCard extends Component<
|
|||
})}
|
||||
{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")}
|
||||
>
|
||||
|
|
@ -88,7 +94,7 @@ export class MetadataCard extends Component<
|
|||
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 });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -114,10 +114,16 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
|
||||
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,
|
||||
|
|
@ -126,21 +132,22 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
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;
|
||||
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,
|
||||
},
|
||||
none: void 0,
|
||||
});
|
||||
|
||||
this.parseMessage = this.parseMessage.bind(this);
|
||||
this.subscription = wsSubscribe(this.parseMessage);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -188,15 +195,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)}
|
||||
|
|
@ -204,7 +211,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)}
|
||||
>
|
||||
|
|
@ -228,7 +235,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)}
|
||||
/>
|
||||
|
|
@ -241,7 +248,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")}
|
||||
|
|
@ -250,7 +257,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")}
|
||||
|
|
@ -259,7 +266,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")}
|
||||
|
|
@ -271,14 +278,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
|
||||
|
|
@ -294,16 +303,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
|
||||
|
|
@ -312,7 +321,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>
|
||||
)}
|
||||
|
|
@ -320,7 +329,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
|
||||
|
|
@ -337,9 +346,9 @@ 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}
|
||||
|
|
@ -352,20 +361,23 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
</div>
|
||||
</div>
|
||||
{this.props.post_view.isNone() && (
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label" htmlFor="post-community">
|
||||
<div className="form-group row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="post-community"
|
||||
>
|
||||
{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>
|
||||
))}
|
||||
|
|
@ -374,14 +386,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)}
|
||||
|
|
@ -402,19 +414,19 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
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 />
|
||||
|
|
@ -427,7 +439,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")}
|
||||
|
|
@ -443,12 +455,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;
|
||||
|
|
@ -466,32 +480,33 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
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();
|
||||
}
|
||||
|
||||
|
|
@ -516,12 +531,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,
|
||||
|
|
@ -529,8 +542,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();
|
||||
}
|
||||
|
||||
|
|
@ -551,35 +563,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.state.postForm.language_id = Some(val[0]);
|
||||
this.setState(this.state);
|
||||
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) {
|
||||
|
|
@ -588,8 +595,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) {
|
||||
|
|
@ -611,8 +617,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",
|
||||
|
|
@ -628,22 +633,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");
|
||||
});
|
||||
|
|
@ -658,8 +660,11 @@ 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
|
||||
);
|
||||
|
|
@ -685,7 +690,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({
|
||||
|
|
@ -697,9 +703,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,
|
||||
}),
|
||||
|
|
@ -720,15 +729,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);
|
||||
}
|
||||
},
|
||||
|
|
@ -739,7 +746,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);
|
||||
}
|
||||
},
|
||||
|
|
@ -749,11 +756,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(this.state);
|
||||
this.setState({ crossPosts: Some(data.posts) });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -137,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()}
|
||||
|
|
@ -161,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}
|
||||
|
|
@ -181,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>
|
||||
) : (
|
||||
|
|
@ -197,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} />
|
||||
|
|
@ -257,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")}
|
||||
|
|
@ -269,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()}
|
||||
|
|
@ -281,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>
|
||||
|
|
@ -301,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>
|
||||
|
|
@ -314,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>
|
||||
|
|
@ -325,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} />
|
||||
|
||||
|
|
@ -349,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>
|
||||
)}
|
||||
|
|
@ -419,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
|
||||
|
|
@ -473,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)}
|
||||
>
|
||||
|
|
@ -528,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
|
||||
|
|
@ -554,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
|
||||
|
|
@ -620,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", {
|
||||
|
|
@ -655,7 +656,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 && (
|
||||
|
|
@ -672,7 +673,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,
|
||||
})}
|
||||
>
|
||||
|
|
@ -691,7 +692,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}
|
||||
|
|
@ -720,7 +721,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")}
|
||||
|
|
@ -733,7 +734,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")}
|
||||
|
|
@ -746,7 +747,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")}
|
||||
|
|
@ -761,7 +762,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}
|
||||
|
|
@ -778,7 +779,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")}
|
||||
|
|
@ -791,7 +792,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")}
|
||||
|
|
@ -810,7 +811,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}
|
||||
|
|
@ -829,7 +830,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}
|
||||
|
|
@ -847,7 +848,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
|
||||
|
|
@ -873,7 +874,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
|
||||
|
|
@ -884,7 +885,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
|
||||
|
|
@ -896,7 +897,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_
|
||||
|
|
@ -917,7 +918,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
|
||||
|
|
@ -929,20 +930,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
|
||||
|
|
@ -960,7 +961,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")}
|
||||
>
|
||||
|
|
@ -968,7 +969,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")}
|
||||
>
|
||||
|
|
@ -976,14 +977,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")}
|
||||
>
|
||||
|
|
@ -993,7 +994,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_
|
||||
|
|
@ -1025,23 +1026,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")}
|
||||
|
|
@ -1050,40 +1051,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")}
|
||||
>
|
||||
|
|
@ -1097,10 +1101,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}
|
||||
|
|
@ -1110,16 +1114,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)}
|
||||
|
|
@ -1127,7 +1131,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")}
|
||||
|
|
@ -1136,17 +1140,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)}
|
||||
|
|
@ -1156,7 +1160,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-secondary"
|
||||
className="btn btn-secondary"
|
||||
aria-label={purgeTypeText}
|
||||
>
|
||||
{purgeTypeText}
|
||||
|
|
@ -1172,11 +1176,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>
|
||||
|
|
@ -1201,9 +1205,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 */}
|
||||
|
|
@ -1221,14 +1225,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()}
|
||||
|
|
@ -1263,18 +1267,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,
|
||||
|
|
@ -1297,18 +1307,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,
|
||||
|
|
@ -1322,29 +1338,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) {
|
||||
|
|
@ -1356,8 +1367,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) {
|
||||
|
|
@ -1416,19 +1426,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) {
|
||||
|
|
@ -1441,8 +1450,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) {
|
||||
|
|
@ -1464,36 +1472,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) {
|
||||
|
|
@ -1515,29 +1526,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);
|
||||
}
|
||||
|
||||
|
|
@ -1548,7 +1554,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,
|
||||
|
|
@ -1564,7 +1570,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,
|
||||
|
|
@ -1577,8 +1583,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) {
|
||||
|
|
@ -1603,13 +1608,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) {
|
||||
|
|
@ -1619,48 +1622,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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export class PostListings extends Component<PostListingsProps, any> {
|
|||
enableNsfw={this.props.enableNsfw}
|
||||
allLanguages={this.props.allLanguages}
|
||||
/>
|
||||
<hr class="my-3" />
|
||||
<hr className="my-3" />
|
||||
</>
|
||||
))
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -374,9 +378,9 @@ export class Post extends Component<any, PostState> {
|
|||
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")}{" "}
|
||||
|
|
@ -397,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: <></>,
|
||||
|
|
@ -410,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 &&
|
||||
|
|
@ -468,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"
|
||||
|
|
@ -517,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}
|
||||
|
|
@ -533,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.setState({
|
||||
commentViewType: Number(event.target.value),
|
||||
commentSort: CommentSortType.New,
|
||||
commentTree: buildCommentsTree(
|
||||
i.state.commentsRes.map(r => r.comments).unwrapOr([]),
|
||||
i.state.commentId.isSome()
|
||||
);
|
||||
i.setState(i.state);
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
handleShowSidebarMobile(i: Post) {
|
||||
i.state.showSidebarMobile = !i.state.showSidebarMobile;
|
||||
i.setState(i.state);
|
||||
i.setState({ showSidebarMobile: !i.state.showSidebarMobile });
|
||||
}
|
||||
|
||||
handleViewPost(i: Post) {
|
||||
|
|
@ -584,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")} ➔
|
||||
|
|
@ -640,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(
|
||||
|
|
@ -655,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);
|
||||
|
||||
|
|
@ -672,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.setState({
|
||||
commentTree: buildCommentsTree(
|
||||
this.state.commentsRes.map(r => r.comments).unwrapOr([]),
|
||||
this.state.commentId.isSome()
|
||||
);
|
||||
this.state.loading = false;
|
||||
),
|
||||
loading: false,
|
||||
});
|
||||
this.setState(this.state);
|
||||
} else if (op == UserOperation.CreateComment) {
|
||||
let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
|
||||
|
|
@ -831,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({
|
||||
|
|
|
|||
|
|
@ -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.state = {
|
||||
...this.state,
|
||||
recipientDetailsRes: Some(
|
||||
this.isoData.routeData[0] as GetPersonDetailsResponse
|
||||
);
|
||||
this.state.loading = false;
|
||||
),
|
||||
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 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,7 +127,7 @@ 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}
|
||||
|
|
@ -142,13 +141,13 @@ export class PrivateMessageForm extends Component<
|
|||
</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"
|
||||
>
|
||||
|
|
@ -159,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 ? (
|
||||
|
|
@ -177,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>
|
||||
|
|
@ -208,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) {
|
||||
|
|
@ -223,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) {
|
||||
|
|
@ -237,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 ||
|
||||
|
|
@ -249,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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,9 +63,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 +114,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
|
||||
|
|
@ -142,7 +142,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.handleReplyClick)}
|
||||
data-tippy-content={i18n.t("reply")}
|
||||
aria-label={i18n.t("reply")}
|
||||
|
|
@ -156,7 +156,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 +166,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 +192,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")}
|
||||
|
|
@ -217,7 +217,7 @@ 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -228,12 +228,11 @@ export class PrivateMessage extends Component<
|
|||
}
|
||||
|
||||
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 +246,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 +259,22 @@ 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 });
|
||||
}
|
||||
|
||||
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"));
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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.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.state = {
|
||||
...this.state,
|
||||
searchResponse: Some(this.isoData.routeData[3] as SearchResponse),
|
||||
resolveObjectResponse: Some(
|
||||
this.isoData.routeData[4] as ResolveObjectResponse
|
||||
);
|
||||
this.state.loading = false;
|
||||
),
|
||||
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}
|
||||
|
|
@ -590,6 +598,7 @@ export class Search extends Component<any, SearchState> {
|
|||
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
||||
enableNsfw={enableNsfw(this.state.siteRes)}
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
viewOnly
|
||||
/>
|
||||
)}
|
||||
{i.type_ == "comments" && (
|
||||
|
|
@ -603,6 +612,7 @@ export class Search extends Component<any, SearchState> {
|
|||
},
|
||||
]}
|
||||
viewType={CommentViewType.Flat}
|
||||
viewOnly
|
||||
moderators={None}
|
||||
admins={None}
|
||||
maxCommentsShown={None}
|
||||
|
|
@ -616,7 +626,7 @@ export class Search extends Component<any, SearchState> {
|
|||
<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>
|
||||
|
|
@ -641,6 +651,7 @@ export class Search extends Component<any, SearchState> {
|
|||
<CommentNodes
|
||||
nodes={commentsToFlatNodes(comments)}
|
||||
viewType={CommentViewType.Flat}
|
||||
viewOnly
|
||||
locked
|
||||
noIndent
|
||||
moderators={None}
|
||||
|
|
@ -666,11 +677,11 @@ 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}
|
||||
|
|
@ -678,6 +689,7 @@ export class Search extends Component<any, SearchState> {
|
|||
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
||||
enableNsfw={enableNsfw(this.state.siteRes)}
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
viewOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -700,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>
|
||||
))}
|
||||
</>
|
||||
|
|
@ -723,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>
|
||||
))}
|
||||
</>
|
||||
|
|
@ -748,33 +760,37 @@ export class Search extends Component<any, SearchState> {
|
|||
);
|
||||
}
|
||||
|
||||
userListing(person_view: PersonViewSafe) {
|
||||
return [
|
||||
personListing(person_view: PersonViewSafe) {
|
||||
return (
|
||||
<>
|
||||
<span>
|
||||
<PersonListing person={person_view.person} showApubName />
|
||||
</span>,
|
||||
</span>
|
||||
<span>{` - ${i18n.t("number_of_comments", {
|
||||
count: person_view.counts.comment_count,
|
||||
formattedCount: numToSI(person_view.counts.comment_count),
|
||||
})}`}</span>,
|
||||
];
|
||||
})}`}</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>
|
||||
|
|
@ -784,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}
|
||||
>
|
||||
|
|
@ -856,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));
|
||||
}
|
||||
|
|
@ -1000,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({
|
||||
this.setState({
|
||||
resolveObjectResponse: Some({
|
||||
comment: None,
|
||||
post: None,
|
||||
community: None,
|
||||
person: None,
|
||||
}),
|
||||
});
|
||||
this.checkFinishedLoading();
|
||||
} else {
|
||||
|
|
@ -1013,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);
|
||||
|
|
@ -1036,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();
|
||||
}
|
||||
}
|
||||
|
|
@ -1051,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 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,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;
|
||||
|
|
@ -630,21 +630,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() {
|
||||
|
|
@ -1363,7 +1360,7 @@ export const choicesModLogConfig = {
|
|||
shouldSort: false,
|
||||
searchResultLimit: fetchLimit,
|
||||
classNames: {
|
||||
containerOuter: "choices mb-2 custom-select col-4 px-0",
|
||||
containerOuter: "choices mb-2 custom-select px-0",
|
||||
containerInner:
|
||||
"choices__inner bg-secondary border-0 py-0 modlog-choices-font-size",
|
||||
input: "form-control",
|
||||
|
|
|
|||
Loading…
Reference in a new issue