Fix dynamic post url changing issue.

This commit is contained in:
Dessalines 2020-02-17 16:00:18 -05:00
parent 1e5d93d9bb
commit 05648173ae
2 changed files with 28 additions and 19 deletions

View File

@ -52,7 +52,7 @@ export class IFramelyCard extends Component<
</a> </a>
{iframely.html && ( {iframely.html && (
<span <span
class="ml-2 pointer" class="ml-2 pointer text-monospace"
onClick={linkEvent(this, this.handleIframeExpand)} onClick={linkEvent(this, this.handleIframeExpand)}
> >
{this.state.expanded ? '[-]' : '[+]'} {this.state.expanded ? '[-]' : '[+]'}
@ -72,7 +72,7 @@ export class IFramelyCard extends Component<
)} )}
{this.state.expanded && ( {this.state.expanded && (
<div <div
class="my-2" class="mt-3 mb-2"
dangerouslySetInnerHTML={{ __html: iframely.html }} dangerouslySetInnerHTML={{ __html: iframely.html }}
/> />
)} )}

View File

@ -49,6 +49,7 @@ interface PostListingState {
score: number; score: number;
upvotes: number; upvotes: number;
downvotes: number; downvotes: number;
url: string;
iframely: FramelyData; iframely: FramelyData;
} }
@ -77,6 +78,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
score: this.props.post.score, score: this.props.post.score,
upvotes: this.props.post.upvotes, upvotes: this.props.post.upvotes,
downvotes: this.props.post.downvotes, downvotes: this.props.post.downvotes,
url: this.props.post.url,
iframely: null, iframely: null,
}; };
@ -89,7 +91,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.handleEditPost = this.handleEditPost.bind(this); this.handleEditPost = this.handleEditPost.bind(this);
this.handleEditCancel = this.handleEditCancel.bind(this); this.handleEditCancel = this.handleEditCancel.bind(this);
if (this.props.post.url) { if (this.state.url) {
this.fetchIframely(); this.fetchIframely();
} }
} }
@ -99,6 +101,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.state.upvotes = nextProps.post.upvotes; this.state.upvotes = nextProps.post.upvotes;
this.state.downvotes = nextProps.post.downvotes; this.state.downvotes = nextProps.post.downvotes;
this.state.score = nextProps.post.score; this.state.score = nextProps.post.score;
this.state.url = nextProps.post.url;
this.state.iframely = null;
if (nextProps.post.url) {
this.fetchIframely();
}
this.setState(this.state); this.setState(this.state);
} }
@ -163,7 +172,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
/> />
</span> </span>
)} )}
{post.url && isVideo(post.url) && ( {this.state.url && isVideo(this.state.url) && (
<video <video
playsinline playsinline
muted muted
@ -173,18 +182,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
height="100" height="100"
width="150" width="150"
> >
<source src={post.url} type="video/mp4" /> <source src={this.state.url} type="video/mp4" />
</video> </video>
)} )}
<div className="ml-4"> <div className="ml-4">
<div className="post-title"> <div className="post-title">
<h5 className="mb-0 d-inline"> <h5 className="mb-0 d-inline">
{this.props.showBody && post.url ? ( {this.props.showBody && this.state.url ? (
<a <a
className="text-body" className="text-body"
href={post.url} href={this.state.url}
target="_blank" target="_blank"
title={post.url} title={this.state.url}
> >
{post.name} {post.name}
</a> </a>
@ -198,15 +207,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</Link> </Link>
)} )}
</h5> </h5>
{post.url && ( {this.state.url && (
<small class="d-inline-block"> <small class="d-inline-block">
<a <a
className="ml-2 text-muted font-italic" className="ml-2 text-muted font-italic"
href={post.url} href={this.state.url}
target="_blank" target="_blank"
title={post.url} title={this.state.url}
> >
{new URL(post.url).hostname} {new URL(this.state.url).hostname}
<svg class="ml-1 icon"> <svg class="ml-1 icon">
<use xlinkHref="#icon-external-link"></use> <use xlinkHref="#icon-external-link"></use>
</svg> </svg>
@ -598,7 +607,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</li> </li>
)} )}
</ul> </ul>
{post.url && this.props.showBody && this.state.iframely && ( {this.state.url && this.props.showBody && this.state.iframely && (
<IFramelyCard iframely={this.state.iframely} /> <IFramelyCard iframely={this.state.iframely} />
)} )}
{this.state.showRemoveDialog && ( {this.state.showRemoveDialog && (
@ -752,7 +761,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
fetchIframely() { fetchIframely() {
fetch(`/iframely/oembed?url=${this.props.post.url}`) fetch(`/iframely/oembed?url=${this.state.url}`)
.then(res => res.json()) .then(res => res.json())
.then(res => { .then(res => {
this.state.iframely = res; this.state.iframely = res;
@ -765,15 +774,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
hasImage(): boolean { hasImage(): boolean {
return ( return (
(this.props.post.url && isImage(this.props.post.url)) || (this.state.url && isImage(this.state.url)) ||
(this.state.iframely && this.state.iframely.thumbnail_url !== undefined) (this.state.iframely && this.state.iframely.thumbnail_url !== undefined)
); );
} }
getImage(): string { getImage(): string {
let simpleImg = isImage(this.props.post.url); let simpleImg = isImage(this.state.url);
if (simpleImg) { if (simpleImg) {
return this.props.post.url; return this.state.url;
} else if (this.state.iframely) { } else if (this.state.iframely) {
let iframelyThumbnail = this.state.iframely.thumbnail_url; let iframelyThumbnail = this.state.iframely.thumbnail_url;
if (iframelyThumbnail) { if (iframelyThumbnail) {
@ -877,8 +886,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get crossPostParams(): string { get crossPostParams(): string {
let params = `?title=${this.props.post.name}`; let params = `?title=${this.props.post.name}`;
if (this.props.post.url) { if (this.state.url) {
params += `&url=${this.props.post.url}`; params += `&url=${this.state.url}`;
} }
if (this.props.post.body) { if (this.props.post.body) {
params += `&body=${this.props.post.body}`; params += `&body=${this.props.post.body}`;