import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { WebSocketService, UserService } from '../services'; import { Post, CreatePostLikeForm, DeletePostForm, RemovePostForm, LockPostForm, StickyPostForm, SavePostForm, CommunityUser, UserView, BanType, BanFromCommunityForm, BanUserForm, AddModToCommunityForm, AddAdminForm, TransferSiteForm, TransferCommunityForm, } from '../interfaces'; import { MomentTime } from './moment-time'; import { PostForm } from './post-form'; import { IFramelyCard } from './iframely-card'; import { UserListing } from './user-listing'; import { CommunityLink } from './community-link'; import { md, mdToHtml, canMod, isMod, isImage, isVideo, getUnixTime, pictrsImage, setupTippy, hostname, previewLines, } from '../utils'; import { i18n } from '../i18next'; interface PostListingState { showEdit: boolean; showRemoveDialog: boolean; removeReason: string; showBanDialog: boolean; banReason: string; banExpires: string; banType: BanType; showConfirmTransferSite: boolean; showConfirmTransferCommunity: boolean; imageExpanded: boolean; viewSource: boolean; showAdvanced: boolean; my_vote: number; score: number; upvotes: number; downvotes: number; } interface PostListingProps { post: Post; showCommunity?: boolean; showBody?: boolean; moderators?: Array; admins?: Array; enableDownvotes: boolean; enableNsfw: boolean; } export class PostListing extends Component { private emptyState: PostListingState = { showEdit: false, showRemoveDialog: false, removeReason: null, showBanDialog: false, banReason: null, banExpires: null, banType: BanType.Community, showConfirmTransferSite: false, showConfirmTransferCommunity: false, imageExpanded: false, viewSource: false, showAdvanced: false, my_vote: this.props.post.my_vote, score: this.props.post.score, upvotes: this.props.post.upvotes, downvotes: this.props.post.downvotes, }; 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); this.handleEditCancel = this.handleEditCancel.bind(this); } componentWillReceiveProps(nextProps: PostListingProps) { this.state.my_vote = nextProps.post.my_vote; this.state.upvotes = nextProps.post.upvotes; this.state.downvotes = nextProps.post.downvotes; this.state.score = nextProps.post.score; if (this.props.post.id !== nextProps.post.id) { this.state.imageExpanded = false; } this.setState(this.state); } render() { return (
{!this.state.showEdit ? ( <> {this.listing()} {this.body()} ) : (
)}
); } body() { return (
{this.props.post.url && this.props.showBody && this.props.post.embed_title && ( )} {this.props.showBody && this.props.post.body && ( <> {this.state.viewSource ? (
{this.props.post.body}
) : (
)} )}
); } imgThumb(src: string) { let post = this.props.post; return ( ); } getImage(thumbnail: boolean = false) { let post = this.props.post; if (isImage(post.url)) { if (post.url.includes('pictrs')) { return pictrsImage(post.url, thumbnail); } else if (post.thumbnail_url) { return pictrsImage(post.thumbnail_url, thumbnail); } else { return post.url; } } else if (post.thumbnail_url) { return pictrsImage(post.thumbnail_url, thumbnail); } } thumbnail() { let post = this.props.post; if (isImage(post.url)) { return ( {this.imgThumb(this.getImage(true))} ); } else if (post.thumbnail_url) { return ( {this.imgThumb(this.getImage(true))} ); } else if (post.url) { if (isVideo(post.url)) { return (
); } else { return ( ); } } else { return ( ); } } listing() { let post = this.props.post; return (
{this.state.score}
{this.props.enableDownvotes && ( )}
{!this.state.imageExpanded && (
{this.thumbnail()}
)}
{this.props.showBody && post.url ? ( {post.name} ) : ( {post.name} )}
{post.url && !(hostname(post.url) == window.location.hostname) && ( {hostname(post.url)} )} {(isImage(post.url) || this.props.post.thumbnail_url) && ( <> {!this.state.imageExpanded ? ( ) : (
)} )} {post.removed && ( {i18n.t('removed')} )} {post.deleted && ( )} {post.locked && ( )} {post.stickied && ( )} {post.nsfw && ( {i18n.t('nsfw')} )}
  • {i18n.t('by')} {this.isMod && ( {i18n.t('mod')} )} {this.isAdmin && ( {i18n.t('admin')} )} {(post.banned_from_community || post.banned) && ( {i18n.t('banned')} )} {this.props.showCommunity && ( {i18n.t('to')} )}
  • {post.body && ( <>
  • {/* Using a link with tippy doesn't work on touch devices unfortunately */}
  • )}
  • {this.state.upvotes !== this.state.score && ( <>
  • {this.state.upvotes}
  • {this.state.downvotes}
  • )}
  • {post.number_of_comments}
{this.props.post.duplicates && (
    <>
  • {i18n.t('cross_posted_to')}
  • {this.props.post.duplicates.map(post => (
  • {post.community_name}
  • ))}
)}
    {UserService.Instance.user && ( <> {this.props.showBody && ( <>
  • )} {this.myPost && this.props.showBody && ( <>
  • )} {!this.state.showAdvanced && this.props.showBody ? (
  • ) : ( <> {this.props.showBody && post.body && (
  • )} {this.canModOnSelf && ( <>
  • )} {/* Mods can ban from community, and appoint as mods to community */} {(this.canMod || this.canAdmin) && (
  • {!post.removed ? ( {i18n.t('remove')} ) : ( {i18n.t('restore')} )}
  • )} {this.canMod && ( <> {!this.isMod && (
  • {!post.banned_from_community ? ( {i18n.t('ban')} ) : ( {i18n.t('unban')} )}
  • )} {!post.banned_from_community && (
  • {this.isMod ? i18n.t('remove_as_mod') : i18n.t('appoint_as_mod')}
  • )} )} {/* Community creators and admins can transfer community to another mod */} {(this.amCommunityCreator || this.canAdmin) && this.isMod && (
  • {!this.state.showConfirmTransferCommunity ? ( {i18n.t('transfer_community')} ) : ( <> {i18n.t('are_you_sure')} {i18n.t('yes')} {i18n.t('no')} )}
  • )} {/* Admins can ban from all, and appoint other admins */} {this.canAdmin && ( <> {!this.isAdmin && (
  • {!post.banned ? ( {i18n.t('ban_from_site')} ) : ( {i18n.t('unban_from_site')} )}
  • )} {!post.banned && (
  • {this.isAdmin ? i18n.t('remove_as_admin') : i18n.t('appoint_as_admin')}
  • )} )} {/* Site Creator can transfer to another admin */} {this.amSiteCreator && this.isAdmin && (
  • {!this.state.showConfirmTransferSite ? ( {i18n.t('transfer_site')} ) : ( <> {i18n.t('are_you_sure')} {i18n.t('yes')} {i18n.t('no')} )}
  • )} )} )}
{this.state.showRemoveDialog && (
)} {this.state.showBanDialog && (
{/* TODO hold off on expires until later */} {/*
*/} {/* */} {/* */} {/*
*/}
)}
); } private get myPost(): boolean { return ( UserService.Instance.user && this.props.post.creator_id == UserService.Instance.user.id ); } get isMod(): boolean { return ( this.props.moderators && isMod( this.props.moderators.map(m => m.user_id), this.props.post.creator_id ) ); } get isAdmin(): boolean { return ( this.props.admins && isMod( this.props.admins.map(a => a.id), this.props.post.creator_id ) ); } get canMod(): boolean { if (this.props.admins && this.props.moderators) { let adminsThenMods = this.props.admins .map(a => a.id) .concat(this.props.moderators.map(m => m.user_id)); return canMod( UserService.Instance.user, adminsThenMods, this.props.post.creator_id ); } else { return false; } } get canModOnSelf(): boolean { if (this.props.admins && this.props.moderators) { let adminsThenMods = this.props.admins .map(a => a.id) .concat(this.props.moderators.map(m => m.user_id)); return canMod( UserService.Instance.user, adminsThenMods, this.props.post.creator_id, true ); } else { return false; } } get canAdmin(): boolean { return ( this.props.admins && canMod( UserService.Instance.user, this.props.admins.map(a => a.id), this.props.post.creator_id ) ); } get amCommunityCreator(): boolean { return ( this.props.moderators && UserService.Instance.user && this.props.post.creator_id != UserService.Instance.user.id && UserService.Instance.user.id == this.props.moderators[0].user_id ); } get amSiteCreator(): boolean { return ( this.props.admins && UserService.Instance.user && this.props.post.creator_id != UserService.Instance.user.id && UserService.Instance.user.id == this.props.admins[0].id ); } handlePostLike(i: PostListing) { if (!UserService.Instance.user) { this.context.router.history.push(`/login`); } let new_vote = i.state.my_vote == 1 ? 0 : 1; if (i.state.my_vote == 1) { i.state.score--; i.state.upvotes--; } else if (i.state.my_vote == -1) { i.state.downvotes--; i.state.upvotes++; i.state.score += 2; } else { i.state.upvotes++; i.state.score++; } i.state.my_vote = new_vote; let form: CreatePostLikeForm = { post_id: i.props.post.id, score: i.state.my_vote, }; WebSocketService.Instance.likePost(form); i.setState(i.state); setupTippy(); } handlePostDisLike(i: PostListing) { if (!UserService.Instance.user) { this.context.router.history.push(`/login`); } let new_vote = i.state.my_vote == -1 ? 0 : -1; if (i.state.my_vote == 1) { i.state.score -= 2; i.state.upvotes--; i.state.downvotes++; } else if (i.state.my_vote == -1) { i.state.downvotes--; i.state.score++; } else { i.state.downvotes++; i.state.score--; } i.state.my_vote = new_vote; let form: CreatePostLikeForm = { post_id: i.props.post.id, score: i.state.my_vote, }; WebSocketService.Instance.likePost(form); i.setState(i.state); setupTippy(); } handleEditClick(i: PostListing) { i.state.showEdit = true; i.setState(i.state); } handleEditCancel() { this.state.showEdit = false; this.setState(this.state); } // The actual editing is done in the recieve for post handleEditPost() { this.state.showEdit = false; this.setState(this.state); } handleDeleteClick(i: PostListing) { let deleteForm: DeletePostForm = { edit_id: i.props.post.id, deleted: !i.props.post.deleted, auth: null, }; WebSocketService.Instance.deletePost(deleteForm); } handleSavePostClick(i: PostListing) { let saved = i.props.post.saved == undefined ? true : !i.props.post.saved; let form: SavePostForm = { post_id: i.props.post.id, save: saved, }; WebSocketService.Instance.savePost(form); } get crossPostParams(): string { let params = `?title=${this.props.post.name}`; let post = this.props.post; if (post.url) { params += `&url=${post.url}`; } if (this.props.post.body) { params += `&body=${this.props.post.body}`; } return params; } handleModRemoveShow(i: PostListing) { i.state.showRemoveDialog = true; i.setState(i.state); } handleModRemoveReasonChange(i: PostListing, event: any) { i.state.removeReason = event.target.value; i.setState(i.state); } handleModRemoveSubmit(i: PostListing) { event.preventDefault(); let form: RemovePostForm = { edit_id: i.props.post.id, removed: !i.props.post.removed, reason: i.state.removeReason, auth: null, }; WebSocketService.Instance.removePost(form); i.state.showRemoveDialog = false; i.setState(i.state); } handleModLock(i: PostListing) { let form: LockPostForm = { edit_id: i.props.post.id, locked: !i.props.post.locked, auth: null, }; WebSocketService.Instance.lockPost(form); } handleModSticky(i: PostListing) { let form: StickyPostForm = { edit_id: i.props.post.id, stickied: !i.props.post.stickied, auth: null, }; WebSocketService.Instance.stickyPost(form); } handleModBanFromCommunityShow(i: PostListing) { i.state.showBanDialog = true; i.state.banType = BanType.Community; i.setState(i.state); } handleModBanShow(i: PostListing) { i.state.showBanDialog = true; i.state.banType = BanType.Site; i.setState(i.state); } handleModBanReasonChange(i: PostListing, event: any) { i.state.banReason = event.target.value; i.setState(i.state); } handleModBanExpiresChange(i: PostListing, event: any) { i.state.banExpires = event.target.value; i.setState(i.state); } handleModBanFromCommunitySubmit(i: PostListing) { i.state.banType = BanType.Community; i.setState(i.state); i.handleModBanBothSubmit(i); } handleModBanSubmit(i: PostListing) { i.state.banType = BanType.Site; i.setState(i.state); i.handleModBanBothSubmit(i); } handleModBanBothSubmit(i: PostListing) { event.preventDefault(); if (i.state.banType == BanType.Community) { let form: BanFromCommunityForm = { user_id: i.props.post.creator_id, community_id: i.props.post.community_id, ban: !i.props.post.banned_from_community, reason: i.state.banReason, expires: getUnixTime(i.state.banExpires), }; WebSocketService.Instance.banFromCommunity(form); } else { let form: BanUserForm = { user_id: i.props.post.creator_id, ban: !i.props.post.banned, reason: i.state.banReason, expires: getUnixTime(i.state.banExpires), }; WebSocketService.Instance.banUser(form); } i.state.showBanDialog = false; i.setState(i.state); } handleAddModToCommunity(i: PostListing) { let form: AddModToCommunityForm = { user_id: i.props.post.creator_id, community_id: i.props.post.community_id, added: !i.isMod, }; WebSocketService.Instance.addModToCommunity(form); i.setState(i.state); } handleAddAdmin(i: PostListing) { let form: AddAdminForm = { user_id: i.props.post.creator_id, added: !i.isAdmin, }; WebSocketService.Instance.addAdmin(form); i.setState(i.state); } handleShowConfirmTransferCommunity(i: PostListing) { i.state.showConfirmTransferCommunity = true; i.setState(i.state); } handleCancelShowConfirmTransferCommunity(i: PostListing) { i.state.showConfirmTransferCommunity = false; i.setState(i.state); } handleTransferCommunity(i: PostListing) { let form: TransferCommunityForm = { community_id: i.props.post.community_id, user_id: i.props.post.creator_id, }; WebSocketService.Instance.transferCommunity(form); i.state.showConfirmTransferCommunity = false; i.setState(i.state); } handleShowConfirmTransferSite(i: PostListing) { i.state.showConfirmTransferSite = true; i.setState(i.state); } handleCancelShowConfirmTransferSite(i: PostListing) { i.state.showConfirmTransferSite = false; i.setState(i.state); } handleTransferSite(i: PostListing) { let form: TransferSiteForm = { user_id: i.props.post.creator_id, }; WebSocketService.Instance.transferSite(form); i.state.showConfirmTransferSite = false; i.setState(i.state); } handleImageExpandClick(i: PostListing) { i.state.imageExpanded = !i.state.imageExpanded; i.setState(i.state); } handleViewSource(i: PostListing) { i.state.viewSource = !i.state.viewSource; i.setState(i.state); } handleShowAdvanced(i: PostListing) { i.state.showAdvanced = !i.state.showAdvanced; i.setState(i.state); setupTippy(); } get pointsTippy(): string { let points = i18n.t('number_of_points', { count: this.state.score, }); let upvotes = i18n.t('number_of_upvotes', { count: this.state.upvotes, }); let downvotes = i18n.t('number_of_downvotes', { count: this.state.downvotes, }); return `${points} • ${upvotes} • ${downvotes}`; } }