X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fpost%2Fpost-listing.tsx;h=a4ce5db54af50d8ac60a6b5289034b126087a557;hb=34f04e6758d53bfccbdda2cbb0adde21e9a0cffa;hp=ed2658e470831be03cf6a340de3de8761b099d71;hpb=7e7bbde72108a85e89c8f00383ca39e85b937136;p=lemmy-ui.git diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index ed2658e..a4ce5db 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -49,12 +49,13 @@ import { PurgeType, VoteContentType, } from "../../interfaces"; -import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown"; +import { mdToHtml, mdToHtmlInline } from "../../markdown"; import { I18NextService, UserService } from "../../services"; 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 +106,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; @@ -167,6 +171,26 @@ export class PostListing extends Component { this.handleEditCancel = this.handleEditCancel.bind(this); } + componentWillReceiveProps(nextProps: PostListingProps) { + if (this.props !== nextProps) { + this.setState({ + purgeLoading: false, + reportLoading: false, + blockLoading: false, + lockLoading: false, + deleteLoading: false, + removeLoading: false, + saveLoading: false, + featureCommunityLoading: false, + featureLocalLoading: false, + banLoading: false, + addModLoading: false, + addAdminLoading: false, + transferLoading: false, + }); + } + } + get postView(): PostView { return this.props.post_view; } @@ -180,7 +204,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()} @@ -308,27 +332,33 @@ export class PostListing extends Component { if (!this.props.hideImage && url && isImage(url) && this.imageSrc) { return ( - {this.imgThumb(this.imageSrc)} - - + + ); } else if (!this.props.hideImage && url && thumbnail && this.imageSrc) { return ( {this.imgThumb(this.imageSrc)} - + ); } else if (url) { @@ -374,24 +404,16 @@ export class PostListing extends Component { createdLine() { const post_view = this.postView; + return ( - - - {this.creatorIsMod_ && ( - - {I18NextService.i18n.t("mod")} - - )} - {this.creatorIsAdmin_ && ( - - {I18NextService.i18n.t("admin")} - - )} - {post_view.creator.bot_account && ( - - {I18NextService.i18n.t("bot_account").toLowerCase()} - - )} +
+ + {this.props.showCommunity && ( <> {" "} @@ -413,7 +435,7 @@ export class PostListing extends Component { published={post_view.post.published} updated={post_view.post.updated} /> - +
); } @@ -444,7 +466,7 @@ export class PostListing extends Component { return ( <>
-
+

{url && this.props.showBody ? ( { ) : ( this.postLink )} -

- {(url && isImage(url)) || - (post.thumbnail_url && ( - - ))} + {/** - * 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. + * If there is (a) a URL and an embed title, or (b) a post body, and + * we were not told to show the body by the parent component, show the + * MetadataCard/body toggle. */} - {(post.url || (post.body && !this.props.showBody)) && ( - - )} + {!this.props.showBody && + ((post.url && post.embed_title) || post.body) && + this.showPreviewButton()} {post.removed && ( {I18NextService.i18n.t("removed")} )} + {post.deleted && ( { )} + {post.locked && ( { )} + {post.featured_community && ( { )} + {post.featured_local && ( { )} + {post.nsfw && ( {I18NextService.i18n.t("nsfw")} @@ -691,6 +694,9 @@ export class PostListing extends Component { {this.canMod_ && ( <> +
  • +
    +
    • {!this.creatorIsMod_ && (!post_view.creator_banned_from_community ? (
  • {this.modBanFromCommunityButton}
    • @@ -703,76 +709,29 @@ export class PostListing extends Component { )} - {/* 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 ? ( -
  • - -
    • - ) : ( - <> -
  • - -
    • -
  • - -
    • -
  • - -
    • - - ))} + this.creatorIsMod_ &&
  • {this.transferCommunityButton}
    • } + {/* Admins can ban from all, and appoint other admins */} {this.canAdmin_ && ( <> +
  • +
    +
    • {!this.creatorIsAdmin_ && ( <> {!isBanned(post_view.creator) ? ( -
  • {modBanButton}
    • +
  • {this.modBanButton}
    • ) : ( -
  • {modUnbanButton}
    • +
  • {this.modUnbanButton}
    • )} -
  • {purgePersonButton}
    • -
  • {purgePostButton}
    • +
  • {this.purgePersonButton}
    • +
  • {this.purgePostButton}
    • )} {!isBanned(post_view.creator) && post_view.creator.local && ( -
  • {toggleAdminButton}
    • +
  • {this.toggleAdminButton}
    • )} )} @@ -1043,9 +1002,8 @@ export class PostListing extends Component { get modBanFromCommunityButton() { return ( @@ -1055,9 +1013,8 @@ export class PostListing extends Component { get modUnbanFromCommunityButton() { return ( @@ -1067,20 +1024,15 @@ export class PostListing extends Component { get addModToCommunityButton() { return ( ); @@ -1089,11 +1041,10 @@ export class PostListing extends Component { get modBanButton() { return ( ); } @@ -1101,14 +1052,13 @@ export class PostListing extends Component { get modUnbanButton() { return ( ); @@ -1117,11 +1067,10 @@ export class PostListing extends Component { get purgePersonButton() { return ( ); } @@ -1129,11 +1078,10 @@ export class PostListing extends Component { get purgePostButton() { return ( ); } @@ -1141,20 +1089,31 @@ export class PostListing extends Component { get toggleAdminButton() { return ( ); } + get transferCommunityButton() { + return ( + + ); + } + get modRemoveButton() { const removed = this.postView.post.removed; return ( @@ -1169,25 +1128,17 @@ export class PostListing extends Component { {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 &&
    - ); - } - removeAndBanDialogs() { const post = this.postView; const purgeTypeText = @@ -1215,11 +1166,7 @@ export class PostListing extends Component { value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} /> - )} + {this.state.showConfirmTransferCommunity && ( + <> + + + + + )} {this.state.showBanDialog && (
    @@ -1281,11 +1255,7 @@ export class PostListing extends Component { {/* */} {/*
    */}
    - )} @@ -1378,6 +1340,21 @@ export class PostListing extends Component { ); } + showPreviewButton() { + return ( + + ); + } + listing() { return ( <> @@ -1391,7 +1368,6 @@ export class PostListing extends Component { {this.mobileThumbnail()} {this.commentsLine(true)} - {this.userActionsLine()} {this.duplicatesLine()} {this.removeAndBanDialogs()}
    @@ -1402,26 +1378,27 @@ export class PostListing extends Component {
    {!this.props.viewOnly && ( - +
    + +
    )} -
    -
    {this.thumbnail()}
    -
    -
    +
    -
    +
    +
    {this.thumbnail()}
    +
    +
    {this.postTitleLine()} {this.createdLine()} {this.commentsLine()} {this.duplicatesLine()} - {this.userActionsLine()} {this.removeAndBanDialogs()}