Blocking page refresh when forms are filled. Fixes #671

diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx
index 61ee3d77b8f9b1d386b7960b6f70e629ab2cb0a8..770c127c7f45e54aa697479721bd60bdcd7477a6 100644 (file)
--- a/ui/src/components/comment-form.tsx
+++ b/ui/src/components/comment-form.tsx
@@ -108,8 +108,17 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     });
   }
 
+  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 46d62ef5392b96135bdc1ef6dc5b7bb6879e75ff..95d9c1f745958e9ddac65572681eac63568a4a55 100644 (file)
--- 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 8c693ac06de8287994a22d839d5e4203664ab2b9..a88d38c7e302a839c15cd5f69052fc09da026efb 100644 (file)
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -151,8 +151,22 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     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 9f7fb32c6d5754f9d936cd2600158da315d5236d..6ae7efe71d003836e70ce58d2689a46459ab7609 100644 (file)
--- 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 a51286c81cd54972fda3a0bd12b156ad0060a020..291251d3304f2161a3a27b480b0ccd92d30e0401 100644 (file)
--- a/ui/src/components/site-form.tsx
+++ b/ui/src/components/site-form.tsx
@@ -64,6 +64,22 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     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 (
       <>