X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fpost%2Fpost-listing.tsx;h=c92663501e474ecae19526a25c55a2f089e3c3ef;hb=2efe167f6d5f5cb65a2b749ba2fcee0934b247a3;hp=3d373ee012cf3beb5adf1491a955ba987e3862a7;hpb=ee84634a73e2904f39bc7bb1b46fc102778ca156;p=lemmy-ui.git diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 3d373ee..c926635 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -1,4 +1,4 @@ -import { myAuthRequired } from "@utils/app"; +import { myAuth, myAuthRequired } from "@utils/app"; import { canShare, share } from "@utils/browser"; import { getExternalHost, getHttpBase } from "@utils/env"; import { @@ -34,6 +34,7 @@ import { FeaturePost, Language, LockPost, + MarkPostAsRead, PersonView, PostView, PurgePerson, @@ -55,6 +56,7 @@ import { setupTippy } from "../../tippy"; import { Icon, PurgeWarning, Spinner } from "../common/icon"; import { MomentTime } from "../common/moment-time"; import { PictrsImage } from "../common/pictrs-image"; +import { UserBadges } from "../common/user-badges"; import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons"; import { CommunityLink } from "../community/community-link"; import { PersonListing } from "../person/person-listing"; @@ -105,6 +107,9 @@ interface PostListingProps { allLanguages: Language[]; siteLanguages: number[]; showCommunity?: boolean; + /** + * Controls whether to show both the body *and* the metadata preview card + */ showBody?: boolean; hideImage?: boolean; enableDownvotes?: boolean; @@ -126,6 +131,7 @@ interface PostListingProps { onAddModToCommunity(form: AddModToCommunity): void; onAddAdmin(form: AddAdmin): void; onTransferCommunity(form: TransferCommunity): void; + onMarkPostAsRead(form: MarkPostAsRead): void; } export class PostListing extends Component { @@ -200,7 +206,7 @@ export class PostListing extends Component { <> {this.listing()} {this.state.imageExpanded && !this.props.hideImage && this.img} - {post.url && this.state.showBody && post.embed_title && ( + {this.showBody && post.url && post.embed_title && ( )} {this.showBody && this.body()} @@ -306,16 +312,10 @@ export class PostListing extends Component { const url = post.url; const thumbnail = post.thumbnail_url; - if (url && isImage(url)) { - if (url.includes("pictrs")) { - return url; - } else if (thumbnail) { - return thumbnail; - } else { - return url; - } - } else if (thumbnail) { + if (thumbnail) { return thumbnail; + } else if (url && isImage(url)) { + return url; } else { return undefined; } @@ -330,7 +330,7 @@ export class PostListing extends Component { return ( - ); - } - postActions() { // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button. // Possible enhancement: Make each button a component. @@ -662,18 +651,11 @@ export class PostListing extends Component { {this.saveButton} {this.crossPostButton} - {/** - * If there is a URL, or if the post has a body and we were told not to - * show the body, show the MetadataCard/body toggle. - */} - {(post.url || (post.body && !this.props.showBody)) && - this.showPreviewButton()} - - {this.showBody && post_view.post.body && this.viewSourceButton} + {this.props.showBody && post_view.post.body && this.viewSourceButton}
); } + public get linkTarget(): string { + return UserService.Instance.myUserInfo?.local_user_view.local_user + .open_links_in_new_tab + ? "_blank" + : // _self is the default target on links when the field is not specified + "_self"; + } + get commentsButton() { const post_view = this.postView; const title = I18NextService.i18n.t("number_of_comments", { @@ -733,6 +767,7 @@ export class PostListing extends Component { title={title} to={`/post/${post_view.post.id}?scrollToComments=true`} data-tippy-content={title} + target={this.linkTarget} > {post_view.counts.comments} @@ -750,7 +785,7 @@ export class PostListing extends Component { get unreadCount(): number | undefined { const pv = this.postView; - return pv.unread_comments == pv.counts.comments || pv.unread_comments == 0 + return pv.unread_comments === pv.counts.comments || pv.unread_comments === 0 ? undefined : pv.unread_comments; } @@ -762,7 +797,7 @@ export class PostListing extends Component { : I18NextService.i18n.t("save"); return ( @@ -993,9 +1027,8 @@ export class PostListing extends Component { get modUnbanFromCommunityButton() { return ( @@ -1005,20 +1038,15 @@ export class PostListing extends Component { get addModToCommunityButton() { return ( ); @@ -1027,11 +1055,10 @@ export class PostListing extends Component { get modBanButton() { return ( ); } @@ -1039,14 +1066,13 @@ export class PostListing extends Component { get modUnbanButton() { return ( ); @@ -1055,11 +1081,10 @@ export class PostListing extends Component { get purgePersonButton() { return ( ); } @@ -1067,11 +1092,10 @@ export class PostListing extends Component { get purgePostButton() { return ( ); } @@ -1079,20 +1103,31 @@ export class PostListing extends Component { get toggleAdminButton() { return ( ); } + get transferCommunityButton() { + return ( + + ); + } + get modRemoveButton() { const removed = this.postView.post.removed; return ( @@ -1100,113 +1135,28 @@ export class PostListing extends Component { className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item" onClick={linkEvent( this, - !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit + !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit, )} > {/* TODO: Find an icon for this. */} {this.state.removeLoading ? ( ) : !removed ? ( - I18NextService.i18n.t("remove") + capitalizeFirstLetter(I18NextService.i18n.t("remove_post")) ) : ( - I18NextService.i18n.t("restore") + <> + {capitalizeFirstLetter(I18NextService.i18n.t("restore"))}{" "} + {I18NextService.i18n.t("post")} + )} ); } - /** - * Mod/Admin actions to be taken against the author. - */ - userActionsLine() { - // TODO: make nicer - const post_view = this.postView; - return ( - this.state.showAdvanced && ( -
- {this.canMod_ && ( - <> - {!this.creatorIsMod_ && - (!post_view.creator_banned_from_community - ? this.modBanFromCommunityButton - : this.modUnbanFromCommunityButton)} - {!post_view.creator_banned_from_community && - this.addModToCommunityButton} - - )} - - {/* Community creators and admins can transfer community to another mod */} - {(amCommunityCreator(post_view.creator.id, this.props.moderators) || - this.canAdmin_) && - this.creatorIsMod_ && - (!this.state.showConfirmTransferCommunity ? ( - - ) : ( - <> - - - - - ))} - {/* Admins can ban from all, and appoint other admins */} - {this.canAdmin_ && ( - <> - {!this.creatorIsAdmin_ && ( - <> - {!isBanned(post_view.creator) - ? this.modBanButton - : this.modUnbanButton} - {this.purgePersonButton} - {this.purgePostButton} - - )} - {!isBanned(post_view.creator) && - post_view.creator.local && - this.toggleAdminButton} - - )} -
- ) - ); - } - removeAndBanDialogs() { const post = this.postView; const purgeTypeText = - this.state.purgeType == PurgeType.Post + this.state.purgeType === PurgeType.Post ? I18NextService.i18n.t("purge_post") : `${I18NextService.i18n.t("purge")} ${post.creator.name}`; return ( @@ -1230,11 +1180,7 @@ export class PostListing extends Component { value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} /> - )} + {this.state.showConfirmTransferCommunity && ( + <> + + + + + )} {this.state.showBanDialog && (
@@ -1296,11 +1269,7 @@ export class PostListing extends Component { {/* */} {/*
*/}
- )} @@ -1380,10 +1341,10 @@ export class PostListing extends Component { const post = this.postView.post; return post.thumbnail_url || (post.url && isImage(post.url)) ? (
-
+
{this.postTitleLine()}
-
+
{/* Post thumbnail */} {!this.state.imageExpanded && this.thumbnail()}
@@ -1393,15 +1354,18 @@ export class PostListing extends Component { ); } - showBodyPreview() { - const { body, id } = this.postView.post; - - return !this.showBody && body ? ( - -
{body}
- - ) : ( - <> + showPreviewButton() { + return ( + ); } @@ -1418,7 +1382,6 @@ export class PostListing extends Component { {this.mobileThumbnail()} {this.commentsLine(true)} - {this.userActionsLine()} {this.duplicatesLine()} {this.removeAndBanDialogs()}
@@ -1442,15 +1405,14 @@ export class PostListing extends Component { )}
-
+
{this.thumbnail()}
-
+
{this.postTitleLine()} {this.createdLine()} {this.commentsLine()} {this.duplicatesLine()} - {this.userActionsLine()} {this.removeAndBanDialogs()}
@@ -1463,10 +1425,11 @@ export class PostListing extends Component { private get myPost(): boolean { return ( - this.postView.creator.id == + this.postView.creator.id === UserService.Instance.myUserInfo?.local_user_view.person.id ); } + handleEditClick(i: PostListing) { i.setState({ showEdit: true }); } @@ -1590,6 +1553,7 @@ export class PostListing extends Component { post_id: i.postView.post.id, removed: !i.postView.post.removed, auth: myAuthRequired(), + reason: i.state.removeReason, }); } @@ -1661,13 +1625,13 @@ export class PostListing extends Component { handlePurgeSubmit(i: PostListing, event: any) { event.preventDefault(); i.setState({ purgeLoading: true }); - if (i.state.purgeType == PurgeType.Person) { + if (i.state.purgeType === PurgeType.Person) { i.props.onPurgePerson({ person_id: i.postView.creator.id, reason: i.state.purgeReason, auth: myAuthRequired(), }); - } else if (i.state.purgeType == PurgeType.Post) { + } else if (i.state.purgeType === PurgeType.Post) { i.props.onPurgePost({ post_id: i.postView.post.id, reason: i.state.purgeReason, @@ -1700,7 +1664,7 @@ export class PostListing extends Component { const ban = !i.props.post_view.creator_banned_from_community; // If its an unban, restore all their data - if (ban == false) { + if (ban === false) { i.setState({ removeData: false }); } const person_id = i.props.post_view.creator.id; @@ -1708,7 +1672,7 @@ export class PostListing extends Component { const reason = i.state.banReason; const expires = futureDaysToUnixTime(i.state.banExpireDays); - if (i.state.banType == BanType.Community) { + if (i.state.banType === BanType.Community) { const community_id = i.postView.community.id; i.props.onBanPersonFromCommunity({ community_id, @@ -1779,6 +1743,15 @@ export class PostListing extends Component { event.preventDefault(); i.setState({ imageExpanded: !i.state.imageExpanded }); setupTippy(); + + const auth = myAuth(); + if (auth && !i.props.post_view.read) { + i.props.onMarkPostAsRead({ + post_id: i.props.post_view.post.id, + read: true, + auth: auth, + }); + } } handleViewSource(i: PostListing) { @@ -1828,7 +1801,7 @@ export class PostListing extends Component { this.props.moderators, this.props.admins, undefined, - true + true, ); } @@ -1836,7 +1809,7 @@ export class PostListing extends Component { return canMod( this.postView.creator.id, this.props.moderators, - this.props.admins + this.props.admins, ); }