From 32d43b85b942e7b9d12b462a13c3dd52252acc6c Mon Sep 17 00:00:00 2001 From: Dessalines Date: Wed, 8 Jul 2020 14:32:37 -0400 Subject: [PATCH] Blocking page refresh when forms are filled. Fixes #671 --- ui/src/components/comment-form.tsx | 9 +++++++++ ui/src/components/community-form.tsx | 14 ++++++++++++++ ui/src/components/post-form.tsx | 14 ++++++++++++++ ui/src/components/private-message-form.tsx | 9 +++++++++ ui/src/components/site-form.tsx | 16 ++++++++++++++++ 5 files changed, 62 insertions(+) diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index 61ee3d77b..770c127c7 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -108,8 +108,17 @@ export class CommentForm extends Component { }); } + componentDidUpdate() { + if (this.state.commentForm.content) { + window.onbeforeunload = () => true; + } else { + window.onbeforeunload = undefined; + } + } + componentWillUnmount() { this.subscription.unsubscribe(); + window.onbeforeunload = null; } render() { diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx index 46d62ef53..95d9c1f74 100644 --- a/ui/src/components/community-form.tsx +++ b/ui/src/components/community-form.tsx @@ -97,8 +97,22 @@ export class CommunityForm extends Component< }); } + componentDidUpdate() { + if ( + !this.state.loading && + (this.state.communityForm.name || + this.state.communityForm.title || + this.state.communityForm.description) + ) { + window.onbeforeunload = () => true; + } else { + window.onbeforeunload = undefined; + } + } + componentWillUnmount() { this.subscription.unsubscribe(); + window.onbeforeunload = null; } render() { diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 8c693ac06..a88d38c7e 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -151,8 +151,22 @@ export class PostForm extends Component { setupTippy(); } + componentDidUpdate() { + if ( + !this.state.loading && + (this.state.postForm.name || + this.state.postForm.url || + this.state.postForm.body) + ) { + window.onbeforeunload = () => true; + } else { + window.onbeforeunload = undefined; + } + } + componentWillUnmount() { this.subscription.unsubscribe(); + window.onbeforeunload = null; } render() { diff --git a/ui/src/components/private-message-form.tsx b/ui/src/components/private-message-form.tsx index 9f7fb32c6..6ae7efe71 100644 --- a/ui/src/components/private-message-form.tsx +++ b/ui/src/components/private-message-form.tsx @@ -110,8 +110,17 @@ export class PrivateMessageForm extends Component< setupTippy(); } + componentDidUpdate() { + if (!this.state.loading && this.state.privateMessageForm.content) { + window.onbeforeunload = () => true; + } else { + window.onbeforeunload = undefined; + } + } + componentWillUnmount() { this.subscription.unsubscribe(); + window.onbeforeunload = null; } render() { diff --git a/ui/src/components/site-form.tsx b/ui/src/components/site-form.tsx index a51286c81..291251d33 100644 --- a/ui/src/components/site-form.tsx +++ b/ui/src/components/site-form.tsx @@ -64,6 +64,22 @@ export class SiteForm extends Component { this.setState(this.state); } + componentDidUpdate() { + if ( + !this.state.loading && + !this.props.site && + (this.state.siteForm.name || this.state.siteForm.description) + ) { + window.onbeforeunload = () => true; + } else { + window.onbeforeunload = undefined; + } + } + + componentWillUnmount() { + window.onbeforeunload = null; + } + render() { return ( <>