-import { None, Option, Some } from "@sniptt/monads";
import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import { Link } from "inferno-router";
CreatePostLike,
CreatePostReport,
DeletePost,
+ FeaturePost,
+ Language,
LockPost,
- PersonViewSafe,
+ PersonView,
PostView,
PurgePerson,
PurgePost,
RemovePost,
SavePost,
- StickyPost,
- toUndefined,
TransferCommunity,
} from "lemmy-js-client";
-import { externalHost } from "../../env";
+import { getExternalHost, getHttpBase } from "../../env";
import { i18n } from "../../i18next";
-import { BanType, PurgeType } from "../../interfaces";
+import { BanType, PostFormParams, PurgeType } from "../../interfaces";
import { UserService, WebSocketService } from "../../services";
import {
+ amAdmin,
amCommunityCreator,
- auth,
+ amMod,
canAdmin,
canMod,
+ canShare,
futureDaysToUnixTime,
hostname,
isAdmin,
isImage,
isMod,
isVideo,
- md,
+ mdNoImages,
mdToHtml,
+ mdToHtmlInline,
+ myAuth,
numToSI,
relTags,
setupTippy,
+ share,
showScores,
wsClient,
} from "../../utils";
showEdit: boolean;
showRemoveDialog: boolean;
showPurgeDialog: boolean;
- purgeReason: Option<string>;
- purgeType: PurgeType;
+ purgeReason?: string;
+ purgeType?: PurgeType;
purgeLoading: boolean;
- removeReason: Option<string>;
+ removeReason?: string;
showBanDialog: boolean;
- banReason: Option<string>;
- banExpireDays: Option<number>;
- banType: BanType;
- removeData: boolean;
+ banReason?: string;
+ banExpireDays?: number;
+ banType?: BanType;
+ removeData?: boolean;
showConfirmTransferSite: boolean;
showConfirmTransferCommunity: boolean;
imageExpanded: boolean;
showMoreMobile: boolean;
showBody: boolean;
showReportDialog: boolean;
- reportReason: Option<string>;
- my_vote: Option<number>;
+ reportReason?: string;
+ my_vote?: number;
score: number;
upvotes: number;
downvotes: number;
interface PostListingProps {
post_view: PostView;
- duplicates: Option<PostView[]>;
- moderators: Option<CommunityModeratorView[]>;
- admins: Option<PersonViewSafe[]>;
+ duplicates?: PostView[];
+ moderators?: CommunityModeratorView[];
+ admins?: PersonView[];
+ allLanguages: Language[];
+ siteLanguages: number[];
showCommunity?: boolean;
showBody?: boolean;
+ hideImage?: boolean;
enableDownvotes?: boolean;
enableNsfw?: boolean;
viewOnly?: boolean;
}
export class PostListing extends Component<PostListingProps, PostListingState> {
- private emptyState: PostListingState = {
+ state: PostListingState = {
showEdit: false,
showRemoveDialog: false,
showPurgeDialog: false,
- purgeReason: None,
purgeType: PurgeType.Person,
purgeLoading: false,
- removeReason: None,
showBanDialog: false,
- banReason: None,
- banExpireDays: None,
banType: BanType.Community,
removeData: false,
showConfirmTransferSite: false,
showMoreMobile: false,
showBody: false,
showReportDialog: false,
- reportReason: None,
my_vote: this.props.post_view.my_vote,
score: this.props.post_view.counts.score,
upvotes: this.props.post_view.counts.upvotes,
constructor(props: any, context: any) {
super(props, context);
- this.state = this.emptyState;
this.handlePostLike = this.handlePostLike.bind(this);
this.handlePostDisLike = this.handlePostDisLike.bind(this);
this.handleEditPost = this.handleEditPost.bind(this);
}
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;
+ const post = this.props.post_view.post;
+
return (
- <div class="post-listing">
+ <div className="post-listing">
{!this.state.showEdit ? (
<>
{this.listing()}
- {this.state.imageExpanded && this.img}
- {post.url.isSome() &&
- this.showBody &&
- post.embed_title.isSome() && <MetadataCard post={post} />}
+ {this.state.imageExpanded && !this.props.hideImage && this.img}
+ {post.url && this.showBody && post.embed_title && (
+ <MetadataCard post={post} />
+ )}
{this.showBody && this.body()}
</>
) : (
- <div class="col-12">
+ <div className="col-12">
<PostForm
- post_view={Some(this.props.post_view)}
- communities={None}
- params={None}
+ post_view={this.props.post_view}
onEdit={this.handleEditPost}
onCancel={this.handleEditCancel}
enableNsfw={this.props.enableNsfw}
enableDownvotes={this.props.enableDownvotes}
+ allLanguages={this.props.allLanguages}
+ siteLanguages={this.props.siteLanguages}
/>
</div>
)}
}
body() {
- return this.props.post_view.post.body.match({
- some: body => (
- <div class="col-12 card my-2 p-2">
- {this.state.viewSource ? (
- ) : (
-
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
- )}
- </div>
- ),
- none: <></>,
- });
+ let body = this.props.post_view.post.body;
+ return body ? (
+ <div className="col-12 card my-2 p-2">
+ {this.state.viewSource ? (
+ <pre>{body}</pre>
+ ) : (
+ <div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
+ )}
+ </div>
+ ) : (
+ <></>
+ );
}
get img() {
- 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">
-
<PictrsImage src={src} />
- </a>
- </div>
-
<div className="my-2 d-block d-sm-none">
- class="d-inline-block"
- onClick={linkEvent(this, this.handleImageExpandClick)}
- >
-
<PictrsImage src={src} />
- </a>
- </div>
- </>
- ),
- none: <></>,
- });
+ let src = this.imageSrc;
+ return src ? (
+ <>
+ <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
+ className="d-inline-block"
+ onClick={linkEvent(this, this.handleImageExpandClick)}
+ >
+ <PictrsImage src={src} />
+ </a>
+ </div>
+ </>
+ ) : (
+ <></>
+ );
}
imgThumb(src: string) {
);
}
- get imageSrc(): Option<string> {
+ get imageSrc(): string | undefined {
let post = this.props.post_view.post;
let url = post.url;
let thumbnail = post.thumbnail_url;
- if (url.isSome() && isImage(url.unwrap())) {
- if (url.unwrap().includes("pictrs")) {
+ if (url && isImage(url)) {
+ if (url.includes("pictrs")) {
return url;
- } else if (thumbnail.isSome()) {
+ } else if (thumbnail) {
return thumbnail;
} else {
return url;
}
- } else if (thumbnail.isSome()) {
+ } else if (thumbnail) {
return thumbnail;
} else {
- return None;
+ return undefined;
}
}
let url = post.url;
let thumbnail = post.thumbnail_url;
- if (url.isSome() && isImage(url.unwrap())) {
+ if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
return (
<a
- href={this.imageSrc.unwrap()}
- class="text-body d-inline-block position-relative mb-2"
+ href={this.imageSrc}
+ 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")}
>
- {this.imgThumb(this.imageSrc.unwrap())}
+ {this.imgThumb(this.imageSrc)}
<Icon icon="image" classes="mini-overlay" />
</a>
);
- } else if (url.isSome() && thumbnail.isSome()) {
+ } else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
return (
<a
- class="text-body d-inline-block position-relative mb-2"
- href={url.unwrap()}
+ className="text-body d-inline-block position-relative mb-2"
+ href={url}
rel={relTags}
- title={url.unwrap()}
+ title={url}
>
- {this.imgThumb(this.imageSrc.unwrap())}
+ {this.imgThumb(this.imageSrc)}
<Icon icon="external-link" classes="mini-overlay" />
</a>
);
- } else if (url.isSome()) {
- if (isVideo(url.unwrap())) {
+ } else if (url) {
+ if (!this.props.hideImage && isVideo(url)) {
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" />
+ <source src={url} type="video/mp4" />
</video>
</div>
);
} else {
return (
- <a
- className="text-body"
- href={url.unwrap()}
- title={url.unwrap()}
- rel={relTags}
- >
- <div class="thumbnail rounded bg-light d-flex justify-content-center">
+ <a className="text-body" href={url} title={url} rel={relTags}>
+ <div className="thumbnail rounded bg-light d-flex justify-content-center">
<Icon icon="external-link" classes="d-flex align-items-center" />
</div>
</a>
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>
createdLine() {
let post_view = this.props.post_view;
+ let url = post_view.post.url;
+ let body = post_view.post.body;
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} />
{this.creatorIsMod_ && (
- <span className="mx-1 badge badge-light">{i18n.t("mod")}</span>
+ <span className="mx-1 badge badge-muted">{i18n.t("mod")}</span>
)}
{this.creatorIsAdmin_ && (
- <span className="mx-1 badge badge-light">{i18n.t("admin")}</span>
+ <span className="mx-1 badge badge-muted">{i18n.t("admin")}</span>
)}
{post_view.creator.bot_account && (
- <span className="mx-1 badge badge-light">
+ <span className="mx-1 badge badge-muted">
{i18n.t("bot_account").toLowerCase()}
</span>
)}
- {(post_view.creator_banned_from_community ||
- isBanned(post_view.creator)) && (
- <span className="mx-1 badge badge-danger">{i18n.t("banned")}</span>
- )}
- {post_view.creator_blocked && (
- <span className="mx-1 badge badge-danger">{"blocked"}</span>
- )}
{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>
)}
</li>
+ {post_view.post.language_id !== 0 && (
+ <span className="mx-1 badge badge-muted">
+ {
+ this.props.allLanguages.find(
+ lang => lang.id === post_view.post.language_id
+ )?.name
+ }
+ </span>
+ )}
<li className="list-inline-item">•</li>
- {post_view.post.url.match({
- some: url =>
- !(hostname(url) == externalHost) && (
- <>
- <li className="list-inline-item">
- <a
- className="text-muted font-italic"
- href={url}
- title={url}
- rel={relTags}
- >
- {hostname(url)}
- </a>
- </li>
- <li className="list-inline-item">•</li>
- </>
- ),
- none: <></>,
- })}
+ {url && !(hostname(url) === getExternalHost()) && (
+ <>
+ <li className="list-inline-item">
+ <a
+ className="text-muted font-italic"
+ href={url}
+ title={url}
+ rel={relTags}
+ >
+ {hostname(url)}
+ </a>
+ </li>
+ <li className="list-inline-item">•</li>
+ </>
+ )}
<li className="list-inline-item">
<span>
<MomentTime
/>
</span>
</li>
- {post_view.post.body.match({
- some: body => (
- <>
- <li className="list-inline-item">•</li>
- <li className="list-inline-item">
- <button
- className="text-muted btn btn-sm btn-link p-0"
- data-tippy-content={md.render(body)}
- data-tippy-allowHtml={true}
- onClick={linkEvent(this, this.handleShowBody)}
- >
- <Icon icon="book-open" classes="icon-inline mr-1" />
- </button>
- </li>
- </>
- ),
- none: <></>,
- })}
+ {body && (
+ <>
+ <li className="list-inline-item">•</li>
+ <li className="list-inline-item">
+ <button
+ className="text-muted btn btn-sm btn-link p-0"
+ data-tippy-content={mdNoImages.render(body)}
+ data-tippy-allowHtml={true}
+ onClick={linkEvent(this, this.handleShowBody)}
+ >
+ <Icon icon="book-open" classes="icon-inline mr-1" />
+ </button>
+ </li>
+ </>
+ )}
</ul>
);
}
<div className={`vote-bar col-1 pr-0 small text-center`}>
<button
className={`btn-animate btn btn-link p-0 ${
- this.state.my_vote.unwrapOr(0) == 1 ? "text-info" : "text-muted"
+ this.state.my_vote == 1 ? "text-info" : "text-muted"
}`}
onClick={this.handlePostLike}
data-tippy-content={i18n.t("upvote")}
</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
className={`btn-animate btn btn-link p-0 ${
- this.state.my_vote.unwrapOr(0) == -1
- ? "text-danger"
- : "text-muted"
+ this.state.my_vote == -1 ? "text-danger" : "text-muted"
}`}
onClick={this.handlePostDisLike}
data-tippy-content={i18n.t("downvote")}
);
}
+ get postLink() {
+ let post = this.props.post_view.post;
+ return (
+ <Link
+ className={`d-inline-block ${
+ !post.featured_community && !post.featured_local
+ ? "text-body"
+ : "text-primary"
+ }`}
+ to={`/post/${post.id}`}
+ title={i18n.t("comments")}
+ >
+ <div
+ className="d-inline-block"
+ dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
+ />
+ </Link>
+ );
+ }
+
postTitleLine() {
let post = this.props.post_view.post;
+ let url = post.url;
+
return (
<div className="post-title overflow-hidden">
<h5>
- {post.url.match({
- some: url => (
+ {url ? (
+ this.props.showBody ? (
<a
- className={!post.stickied ? "text-body" : "text-primary"}
+ className={`d-inline-block ${
+ !post.featured_community && !post.featured_local
+ ? "text-body"
+ : "text-primary"
+ }`}
href={url}
title={url}
rel={relTags}
>
- {post.name}
+ <div
+ className="d-inline-block"
+ dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
+ />
</a>
- ),
- none: (
- <Link
- className={!post.stickied ? "text-body" : "text-primary"}
- to={`/post/${post.id}`}
- title={i18n.t("comments")}
- >
- {post.name}
- </Link>
- ),
- })}
- {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"
- data-tippy-content={i18n.t("expand_here")}
- onClick={linkEvent(this, this.handleImageExpandClick)}
- >
- <Icon
- icon={
- !this.state.imageExpanded ? "plus-square" : "minus-square"
- }
- classes="icon-inline"
- />
- </button>
+ ) : (
+ this.postLink
+ )
+ ) : (
+ this.postLink
)}
+ {(url && isImage(url)) ||
+ (post.thumbnail_url && (
+ <button
+ className="btn btn-link text-monospace text-muted small d-inline-block"
+ data-tippy-content={i18n.t("expand_here")}
+ onClick={linkEvent(this, this.handleImageExpandClick)}
+ >
+ <Icon
+ icon={
+ !this.state.imageExpanded ? "plus-square" : "minus-square"
+ }
+ classes="icon-inline"
+ />
+ </button>
+ ))}
{post.removed && (
<small className="ml-2 text-muted font-italic">
{i18n.t("removed")}
<Icon icon="lock" classes="icon-inline text-danger" />
</small>
)}
- {post.stickied && (
+ {post.featured_community && (
<small
className="unselectable pointer ml-2 text-muted font-italic"
- data-tippy-content={i18n.t("stickied")}
+ data-tippy-content={i18n.t("featured")}
>
<Icon icon="pin" classes="icon-inline text-primary" />
</small>
)}
+ {post.featured_local && (
+ <small
+ className="unselectable pointer ml-2 text-muted font-italic"
+ data-tippy-content={i18n.t("featured")}
+ >
+ <Icon icon="pin" classes="icon-inline text-secondary" />
+ </small>
+ )}
{post.nsfw && (
<small className="ml-2 text-muted font-italic">
{i18n.t("nsfw")}
}
duplicatesLine() {
- return this.props.duplicates.match({
- some: dupes =>
- dupes.length > 0 && (
- <ul class="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">
- <Link to={`/post/${pv.post.id}`}>
- {pv.community.local
- ? pv.community.name
- : `${pv.community.name}@${hostname(
- pv.community.actor_id
- )}`}
- </Link>
- </li>
- ))}
- </>
- </ul>
- ),
- none: <></>,
- });
+ let dupes = this.props.duplicates;
+ return dupes && dupes.length > 0 ? (
+ <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 key={pv.post.id} className="list-inline-item mr-2">
+ <Link to={`/post/${pv.post.id}`}>
+ {pv.community.local
+ ? pv.community.name
+ : `${pv.community.name}@${hostname(pv.community.actor_id)}`}
+ </Link>
+ </li>
+ ))}
+ </>
+ </ul>
+ ) : (
+ <></>
+ );
}
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}
+ {canShare() && (
+ <button
+ className="btn btn-link"
+ onClick={linkEvent(this, this.handleShare)}
+ type="button"
+ >
+ <Icon icon="share" inline />
+ </button>
+ )}
{!post.local && (
<a
className="btn btn-link btn-animate text-muted py-0"
</a>
)}
{mobile && !this.props.viewOnly && this.mobileVotes}
- {UserService.Instance.myUserInfo.isSome() &&
+ {UserService.Instance.myUserInfo &&
!this.props.viewOnly &&
this.postActions(mobile)}
</div>
)}
{this.state.showAdvanced && (
<>
- {this.showBody &&
- post_view.post.body.isSome() &&
- this.viewSourceButton}
- {this.canModOnSelf_ && (
+ {this.showBody && post_view.post.body && this.viewSourceButton}
+ {/* Any mod can do these, not limited to hierarchy*/}
+ {(amMod(this.props.moderators) || amAdmin()) && (
<>
{this.lockButton}
- {this.stickyButton}
+ {this.featureButton}
</>
)}
{(this.canMod_ || this.canAdmin_) && <>{this.modRemoveButton}</>}
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", {
- count: post_view.counts.comments,
- formattedCount: post_view.counts.comments,
+ count: Number(post_view.counts.comments),
+ formattedCount: Number(post_view.counts.comments),
})}
to={`/post/${post_view.post.id}?scrollToComments=true`}
>
<Icon icon="message-square" classes="mr-1" inline />
- {i18n.t("number_of_comments", {
- count: post_view.counts.comments,
- formattedCount: numToSI(post_view.counts.comments),
- })}
+ <span className="mr-2">
+ {i18n.t("number_of_comments", {
+ count: Number(post_view.counts.comments),
+ formattedCount: numToSI(post_view.counts.comments),
+ })}
+ </span>
+ {this.unreadCount && (
+ <span className="small text-warning">
+ ({this.unreadCount} {i18n.t("new")})
+ </span>
+ )}
</Link>
</button>
);
}
+ get unreadCount(): number | undefined {
+ let pv = this.props.post_view;
+ return pv.unread_comments == pv.counts.comments || pv.unread_comments == 0
+ ? undefined
+ : pv.unread_comments;
+ }
+
get mobileVotes() {
// TODO: make nicer
let tippy = showScores() ? { "data-tippy-content": this.pointsTippy } : {};
<div>
<button
className={`btn-animate btn py-0 px-1 ${
- this.state.my_vote.unwrapOr(0) == 1 ? "text-info" : "text-muted"
+ this.state.my_vote == 1 ? "text-info" : "text-muted"
}`}
{...tippy}
onClick={this.handlePostLike}
>
<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 && (
<button
className={`ml-2 btn-animate btn py-0 px-1 ${
- this.state.my_vote.unwrapOr(0) == -1
- ? "text-danger"
- : "text-muted"
+ this.state.my_vote == -1 ? "text-danger" : "text-muted"
}`}
onClick={this.handlePostDisLike}
{...tippy}
<Icon icon="arrow-down1" classes="icon-inline small" />
{showScores() && (
<span
- class={classNames("ml-2", {
+ className={classNames("ml-2", {
invisible: this.state.downvotes === 0,
})}
>
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}
return (
<Link
className="btn btn-link btn-animate text-muted py-0"
- to={`/create_post${this.crossPostParams}`}
+ to={{
+ /* Empty string properties are required to satisfy type*/
+ pathname: "/create_post",
+ state: { ...this.crossPostParams },
+ hash: "",
+ key: "",
+ search: "",
+ }}
title={i18n.t("cross_post")}
>
<Icon icon="copy" inline />
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")}
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")}
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")}
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}
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")}
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")}
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}
);
}
- get stickyButton() {
- let stickied = this.props.post_view.post.stickied;
- let label = stickied ? i18n.t("unsticky") : i18n.t("sticky");
+ get featureButton() {
+ const featuredCommunity = this.props.post_view.post.featured_community;
+ const labelCommunity = featuredCommunity
+ ? i18n.t("unfeature_from_community")
+ : i18n.t("feature_in_community");
+
+ const featuredLocal = this.props.post_view.post.featured_local;
+ const labelLocal = featuredLocal
+ ? i18n.t("unfeature_from_local")
+ : i18n.t("feature_in_local");
return (
- <button
- class="btn btn-link btn-animate text-muted py-0"
- onClick={linkEvent(this, this.handleModSticky)}
- data-tippy-content={label}
- aria-label={label}
- >
- <Icon
- icon="pin"
- classes={classNames({ "text-success": stickied })}
- inline
- />
- </button>
+ <span>
+ <button
+ className="btn btn-link btn-animate text-muted py-0 pl-0"
+ onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
+ data-tippy-content={labelCommunity}
+ aria-label={labelCommunity}
+ >
+ <Icon
+ icon="pin"
+ classes={classNames({ "text-success": featuredCommunity })}
+ inline
+ />{" "}
+ Community
+ </button>
+ {amAdmin() && (
+ <button
+ className="btn btn-link btn-animate text-muted py-0"
+ onClick={linkEvent(this, this.handleModFeaturePostLocal)}
+ data-tippy-content={labelLocal}
+ aria-label={labelLocal}
+ >
+ <Icon
+ icon="pin"
+ classes={classNames({ "text-success": featuredLocal })}
+ inline
+ />{" "}
+ Local
+ </button>
+ )}
+ </span>
);
}
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
{!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
)}
- aria-label={i18n.t("ban")}
+ aria-label={i18n.t("ban_from_community")}
>
- {i18n.t("ban")}
+ {i18n.t("ban_from_community")}
</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
))}
{!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_
</>
)}
{/* Community creators and admins can transfer community to another mod */}
- {(amCommunityCreator(this.props.moderators, post_view.creator.id) ||
+ {(amCommunityCreator(post_view.creator.id, this.props.moderators) ||
this.canAdmin_) &&
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
) : (
<>
<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
<>
{!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")}
>
</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")}
>
</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")}
>
)}
{!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_
removeAndBanDialogs() {
let post = this.props.post_view;
- let purgeTypeText: string;
- if (this.state.purgeType == PurgeType.Post) {
- purgeTypeText = i18n.t("purge_post");
- } else if (this.state.purgeType == PurgeType.Person) {
- purgeTypeText = `${i18n.t("purge")} ${post.creator.name}`;
- }
+ let purgeTypeText =
+ this.state.purgeType == PurgeType.Post
+ ? i18n.t("purge_post")
+ : `${i18n.t("purge")} ${post.creator.name}`;
return (
<>
{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)}
+ value={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")}
)}
{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)}
+ value={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)}
+ value={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")}
>
{/* <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}
)}
{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)}
+ 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")}
)}
{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)}
+ value={this.state.purgeReason}
onInput={linkEvent(this, this.handlePurgeReasonChange)}
/>
{this.state.purgeLoading ? (
) : (
<button
type="submit"
- class="btn btn-secondary"
+ className="btn btn-secondary"
aria-label={purgeTypeText}
>
{purgeTypeText}
mobileThumbnail() {
let post = this.props.post_view.post;
- return post.thumbnail_url.isSome() ||
- post.url.map(isImage).unwrapOr(false) ? (
- <div class="row">
+ return post.thumbnail_url || (post.url && isImage(post.url)) ? (
+ <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>
}
showMobilePreview() {
- let post = this.props.post_view.post;
- return (
- !this.showBody &&
- post.body.match({
- some: body => <div className="md-div mb-1 preview-lines">{body}</div>,
- none: <></>,
- })
+ let body = this.props.post_view.post.body;
+ return !this.showBody && body ? (
+ <div className="md-div mb-1 preview-lines">{body}</div>
+ ) : (
+ <></>
);
}
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 */}
</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()}
}
private get myPost(): boolean {
- return UserService.Instance.myUserInfo.match({
- some: mui =>
- this.props.post_view.creator.id == mui.local_user_view.person.id,
- none: false,
- });
+ return (
+ this.props.post_view.creator.id ==
+ UserService.Instance.myUserInfo?.local_user_view.person.id
+ );
}
handlePostLike(event: any) {
event.preventDefault();
- if (UserService.Instance.myUserInfo.isNone()) {
+ if (!UserService.Instance.myUserInfo) {
this.context.router.history.push(`/login`);
}
- let myVote = this.state.my_vote.unwrapOr(0);
+ let myVote = this.state.my_vote;
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: newVote });
- let form = new CreatePostLike({
- post_id: this.props.post_view.post.id,
- score: newVote,
- auth: auth().unwrap(),
- });
+ let auth = myAuth();
+ if (auth) {
+ let form: CreatePostLike = {
+ post_id: this.props.post_view.post.id,
+ score: newVote,
+ auth,
+ };
- WebSocketService.Instance.send(wsClient.likePost(form));
- this.setState(this.state);
+ WebSocketService.Instance.send(wsClient.likePost(form));
+ this.setState(this.state);
+ }
setupTippy();
}
handlePostDisLike(event: any) {
event.preventDefault();
- if (UserService.Instance.myUserInfo.isNone()) {
+ if (!UserService.Instance.myUserInfo) {
this.context.router.history.push(`/login`);
}
- let myVote = this.state.my_vote.unwrapOr(0);
+ let myVote = this.state.my_vote;
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: newVote });
- let form = new CreatePostLike({
- post_id: this.props.post_view.post.id,
- score: newVote,
- auth: auth().unwrap(),
- });
+ let auth = myAuth();
+ if (auth) {
+ let form: CreatePostLike = {
+ post_id: this.props.post_view.post.id,
+ score: newVote,
+ auth,
+ };
- WebSocketService.Instance.send(wsClient.likePost(form));
- this.setState(this.state);
+ WebSocketService.Instance.send(wsClient.likePost(form));
+ this.setState(this.state);
+ }
setupTippy();
}
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 });
+ }
+
+ handleShare(i: PostListing) {
+ const { name, body, id } = i.props.post_view.post;
+ share({
+ title: name,
+ text: body?.slice(0, 50),
+ url: `${getHttpBase()}/post/${id}`,
+ });
}
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: event.target.value });
}
handleReportSubmit(i: PostListing, event: any) {
event.preventDefault();
- let form = new CreatePostReport({
- post_id: i.props.post_view.post.id,
- reason: toUndefined(i.state.reportReason),
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.createPostReport(form));
+ let auth = myAuth();
+ let reason = i.state.reportReason;
+ if (auth && reason) {
+ let form: CreatePostReport = {
+ post_id: i.props.post_view.post.id,
+ reason,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.createPostReport(form));
- i.state.showReportDialog = false;
- i.setState(i.state);
+ i.setState({ showReportDialog: false });
+ }
}
handleBlockUserClick(i: PostListing) {
- let blockUserForm = new BlockPerson({
- person_id: i.props.post_view.creator.id,
- block: true,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
+ let auth = myAuth();
+ if (auth) {
+ let blockUserForm: BlockPerson = {
+ person_id: i.props.post_view.creator.id,
+ block: true,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
+ }
}
handleDeleteClick(i: PostListing) {
- let deleteForm = new DeletePost({
- post_id: i.props.post_view.post.id,
- deleted: !i.props.post_view.post.deleted,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.deletePost(deleteForm));
+ let auth = myAuth();
+ if (auth) {
+ let deleteForm: DeletePost = {
+ post_id: i.props.post_view.post.id,
+ deleted: !i.props.post_view.post.deleted,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.deletePost(deleteForm));
+ }
}
handleSavePostClick(i: PostListing) {
- let saved =
- i.props.post_view.saved == undefined ? true : !i.props.post_view.saved;
- let form = new SavePost({
- post_id: i.props.post_view.post.id,
- save: saved,
- auth: auth().unwrap(),
- });
-
- WebSocketService.Instance.send(wsClient.savePost(form));
+ let auth = myAuth();
+ if (auth) {
+ let saved =
+ i.props.post_view.saved == undefined ? true : !i.props.post_view.saved;
+ let form: SavePost = {
+ post_id: i.props.post_view.post.id,
+ save: saved,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.savePost(form));
+ }
}
- get crossPostParams(): string {
- let post = this.props.post_view.post;
- let params = `?title=${encodeURIComponent(post.name)}`;
+ get crossPostParams(): PostFormParams {
+ const queryParams: PostFormParams = {};
+ const { name, url } = this.props.post_view.post;
- if (post.url.isSome()) {
- params += `&url=${encodeURIComponent(post.url.unwrap())}`;
+ queryParams.name = name;
+
+ if (url) {
+ queryParams.url = url;
}
- if (post.body.isSome()) {
- params += `&body=${encodeURIComponent(this.crossPostBody())}`;
+
+ const crossPostBody = this.crossPostBody();
+ if (crossPostBody) {
+ queryParams.body = crossPostBody;
}
- return params;
+
+ return queryParams;
}
- crossPostBody(): string {
+ crossPostBody(): string | undefined {
let post = this.props.post_view.post;
- let body = `${i18n.t("cross_posted_from")} ${post.ap_id}\n\n${post.body
- .unwrap()
- .replace(/^/gm, "> ")}`;
- return body;
+ let body = post.body;
+
+ return body
+ ? `${i18n.t("cross_posted_from")} ${post.ap_id}\n\n${body.replace(
+ /^/gm,
+ "> "
+ )}`
+ : undefined;
}
get showBody(): boolean {
}
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: 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) {
event.preventDefault();
- let form = new RemovePost({
- post_id: i.props.post_view.post.id,
- removed: !i.props.post_view.post.removed,
- reason: i.state.removeReason,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.removePost(form));
- i.state.showRemoveDialog = false;
- i.setState(i.state);
+ let auth = myAuth();
+ if (auth) {
+ let form: RemovePost = {
+ post_id: i.props.post_view.post.id,
+ removed: !i.props.post_view.post.removed,
+ reason: i.state.removeReason,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.removePost(form));
+ i.setState({ showRemoveDialog: false });
+ }
}
handleModLock(i: PostListing) {
- let form = new LockPost({
- post_id: i.props.post_view.post.id,
- locked: !i.props.post_view.post.locked,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.lockPost(form));
+ let auth = myAuth();
+ if (auth) {
+ let form: LockPost = {
+ post_id: i.props.post_view.post.id,
+ locked: !i.props.post_view.post.locked,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.lockPost(form));
+ }
}
- handleModSticky(i: PostListing) {
- let form = new StickyPost({
- post_id: i.props.post_view.post.id,
- stickied: !i.props.post_view.post.stickied,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.stickyPost(form));
+ handleModFeaturePostLocal(i: PostListing) {
+ let auth = myAuth();
+ if (auth) {
+ let form: FeaturePost = {
+ post_id: i.props.post_view.post.id,
+ feature_type: "Local",
+ featured: !i.props.post_view.post.featured_local,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.featurePost(form));
+ }
+ }
+
+ handleModFeaturePostCommunity(i: PostListing) {
+ let auth = myAuth();
+ if (auth) {
+ let form: FeaturePost = {
+ post_id: i.props.post_view.post.id,
+ feature_type: "Community",
+ featured: !i.props.post_view.post.featured_community,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.featurePost(form));
+ }
}
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: event.target.value });
}
handlePurgeSubmit(i: PostListing, event: any) {
event.preventDefault();
- if (i.state.purgeType == PurgeType.Person) {
- let form = new PurgePerson({
- person_id: i.props.post_view.creator.id,
- reason: i.state.purgeReason,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.purgePerson(form));
- } else if (i.state.purgeType == PurgeType.Post) {
- let form = new PurgePost({
- post_id: i.props.post_view.post.id,
- reason: i.state.purgeReason,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.purgePost(form));
- }
+ let auth = myAuth();
+ if (auth) {
+ if (i.state.purgeType == PurgeType.Person) {
+ let form: PurgePerson = {
+ person_id: i.props.post_view.creator.id,
+ reason: i.state.purgeReason,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.purgePerson(form));
+ } else if (i.state.purgeType == PurgeType.Post) {
+ let form: PurgePost = {
+ post_id: i.props.post_view.post.id,
+ reason: i.state.purgeReason,
+ auth,
+ };
+ 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: event.target.value });
}
handleModBanExpireDaysChange(i: PostListing, event: any) {
- i.state.banExpireDays = Some(event.target.value);
- i.setState(i.state);
+ i.setState({ banExpireDays: 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);
}
handleModBanBothSubmit(i: PostListing, event?: any) {
if (event) event.preventDefault();
-
- if (i.state.banType == BanType.Community) {
- // If its an unban, restore all their data
+ let auth = myAuth();
+ if (auth) {
let ban = !i.props.post_view.creator_banned_from_community;
- if (ban == false) {
- i.state.removeData = false;
- }
- let form = new BanFromCommunity({
- person_id: i.props.post_view.creator.id,
- community_id: i.props.post_view.community.id,
- ban,
- remove_data: Some(i.state.removeData),
- reason: i.state.banReason,
- expires: i.state.banExpireDays.map(futureDaysToUnixTime),
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.banFromCommunity(form));
- } else {
- // If its an unban, restore all their data
- let ban = !i.props.post_view.creator.banned;
- if (ban == false) {
- i.state.removeData = false;
+ let person_id = i.props.post_view.creator.id;
+ let remove_data = i.state.removeData;
+ let reason = i.state.banReason;
+ let expires = futureDaysToUnixTime(i.state.banExpireDays);
+
+ if (i.state.banType == BanType.Community) {
+ // If its an unban, restore all their data
+ if (ban == false) {
+ i.setState({ removeData: false });
+ }
+
+ let form: BanFromCommunity = {
+ person_id,
+ community_id: i.props.post_view.community.id,
+ ban,
+ remove_data,
+ reason,
+ expires,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.banFromCommunity(form));
+ } else {
+ // If its an unban, restore all their data
+ let ban = !i.props.post_view.creator.banned;
+ if (ban == false) {
+ i.setState({ removeData: false });
+ }
+ let form: BanPerson = {
+ person_id,
+ ban,
+ remove_data,
+ reason,
+ expires,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.banPerson(form));
}
- let form = new BanPerson({
- person_id: i.props.post_view.creator.id,
- ban,
- remove_data: Some(i.state.removeData),
- reason: i.state.banReason,
- expires: i.state.banExpireDays.map(futureDaysToUnixTime),
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.banPerson(form));
- }
- i.state.showBanDialog = false;
- i.setState(i.state);
+ i.setState({ showBanDialog: false });
+ }
}
handleAddModToCommunity(i: PostListing) {
- let form = new AddModToCommunity({
- person_id: i.props.post_view.creator.id,
- community_id: i.props.post_view.community.id,
- added: !i.creatorIsMod_,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.addModToCommunity(form));
- i.setState(i.state);
+ let auth = myAuth();
+ if (auth) {
+ let form: AddModToCommunity = {
+ person_id: i.props.post_view.creator.id,
+ community_id: i.props.post_view.community.id,
+ added: !i.creatorIsMod_,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.addModToCommunity(form));
+ i.setState(i.state);
+ }
}
handleAddAdmin(i: PostListing) {
- let form = new AddAdmin({
- person_id: i.props.post_view.creator.id,
- added: !i.creatorIsAdmin_,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.addAdmin(form));
- i.setState(i.state);
+ let auth = myAuth();
+ if (auth) {
+ let form: AddAdmin = {
+ person_id: i.props.post_view.creator.id,
+ added: !i.creatorIsAdmin_,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.addAdmin(form));
+ i.setState(i.state);
+ }
}
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) {
- let form = new TransferCommunity({
- community_id: i.props.post_view.community.id,
- person_id: i.props.post_view.creator.id,
- auth: auth().unwrap(),
- });
- WebSocketService.Instance.send(wsClient.transferCommunity(form));
- i.state.showConfirmTransferCommunity = false;
- i.setState(i.state);
+ let auth = myAuth();
+ if (auth) {
+ let form: TransferCommunity = {
+ community_id: i.props.post_view.community.id,
+ person_id: i.props.post_view.creator.id,
+ auth,
+ };
+ WebSocketService.Instance.send(wsClient.transferCommunity(form));
+ 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();
}
get pointsTippy(): string {
let points = i18n.t("number_of_points", {
- count: this.state.score,
- formattedCount: this.state.score,
+ count: Number(this.state.score),
+ formattedCount: Number(this.state.score),
});
let upvotes = i18n.t("number_of_upvotes", {
- count: this.state.upvotes,
- formattedCount: this.state.upvotes,
+ count: Number(this.state.upvotes),
+ formattedCount: Number(this.state.upvotes),
});
let downvotes = i18n.t("number_of_downvotes", {
- count: this.state.downvotes,
- formattedCount: this.state.downvotes,
+ count: Number(this.state.downvotes),
+ formattedCount: Number(this.state.downvotes),
});
return `${points} • ${upvotes} • ${downvotes}`;
get canModOnSelf_(): boolean {
return canMod(
+ this.props.post_view.creator.id,
this.props.moderators,
this.props.admins,
- this.props.post_view.creator.id,
undefined,
true
);
get canMod_(): boolean {
return canMod(
+ this.props.post_view.creator.id,
this.props.moderators,
- this.props.admins,
- this.props.post_view.creator.id
+ this.props.admins
);
}
get canAdmin_(): boolean {
- return canAdmin(this.props.admins, this.props.post_view.creator.id);
+ return canAdmin(this.props.post_view.creator.id, this.props.admins);
}
get creatorIsMod_(): boolean {
- return isMod(this.props.moderators, this.props.post_view.creator.id);
+ return isMod(this.props.post_view.creator.id, this.props.moderators);
}
get creatorIsAdmin_(): boolean {
- return isAdmin(this.props.admins, this.props.post_view.creator.id);
+ return isAdmin(this.props.post_view.creator.id, this.props.admins);
}
}
projects / lemmy-ui.git / blobdiff