Fix prompt component (#1223)

Co-authored-by: Dessalines <dessalines@users.noreply.github.com>

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 9e6e9bdf6543f80fe1fb4341fb2c005fd322b346..96857f31339d6657fce4297a1770df1347a19bc2 100644 (file)
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -1,8 +1,8 @@
 import { Component } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
-import { IsoDataOptionalSite } from "shared/interfaces";
 import { i18n } from "../../i18next";
+import { IsoDataOptionalSite } from "../../interfaces";
 import { routes } from "../../routes";
 import { isAuthPath, setIsoData } from "../../utils";
 import AuthGuard from "../common/auth-guard";

diff --git a/src/shared/components/comment/comment-form.tsx b/src/shared/components/comment/comment-form.tsx
index 41003971c3ce22e67b6c5c7319204401ae537c9a..42ed226d28cc9c0cf9089774ad28091bc2126440 100644 (file)
--- a/src/shared/components/comment/comment-form.tsx
+++ b/src/shared/components/comment/comment-form.tsx
@@ -11,8 +11,8 @@ import {
   wsUserOp,
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
-import { CommentNodeI } from "shared/interfaces";
 import { i18n } from "../../i18next";
+import { CommentNodeI } from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
 import {
   capitalizeFirstLetter,

diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 38a2c2ed5ae7c30c5ac1332598430880d0e39a1b..92b8e2b91d92c8275d9fe814a52f8626324e266b 100644 (file)
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -1,7 +1,6 @@
 import autosize from "autosize";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
-import { Prompt } from "inferno-router";
 import { Language } from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { UserService } from "../../services";
@@ -25,6 +24,7 @@ import {
 import { EmojiPicker } from "./emoji-picker";
 import { Icon, Spinner } from "./icon";
 import { LanguageSelect } from "./language-select";
+import NavigationPrompt from "./navigation-prompt";
 import ProgressBar from "./progress-bar";
 
 interface MarkdownTextAreaProps {
@@ -136,10 +136,7 @@ export class MarkdownTextArea extends Component<
 
     return (
       <form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
-        <Prompt
-          when={!this.props.hideNavigationWarnings && this.state.content}
-          message={i18n.t("block_leaving")}
-        />
+        <NavigationPrompt when={!!this.state.content} />
         <div className="form-group row">
           <div className={`col-sm-12`}>
             <textarea

diff --git a/src/shared/components/common/navigation-prompt.tsx b/src/shared/components/common/navigation-prompt.tsx
new file mode 100644 (file)
index 0000000..f76e695
--- /dev/null
+++ b/src/shared/components/common/navigation-prompt.tsx
@@ -0,0 +1,53 @@
+import { Component } from "inferno";
+import { i18n } from "../../../shared/i18next";
+
+export interface IPromptProps {
+  when: boolean;
+}
+
+export default class NavigationPrompt extends Component<IPromptProps, any> {
+  public unblock;
+
+  public enable() {
+    if (this.unblock) {
+      this.unblock();
+    }
+
+    this.unblock = this.context.router.history.block(tx => {
+      if (window.confirm(i18n.t("block_leaving"))) {
+        this.unblock();
+        tx.retry();
+      }
+    });
+  }
+
+  public disable() {
+    if (this.unblock) {
+      this.unblock();
+      this.unblock = null;
+    }
+  }
+  public componentWillMount() {
+    if (this.props.when) {
+      this.enable();
+    }
+  }
+
+  public componentWillReceiveProps(nextProps: IPromptProps) {
+    if (nextProps.when) {
+      if (!this.props.when) {
+        this.enable();
+      }
+    } else {
+      this.disable();
+    }
+  }
+
+  public componentWillUnmount() {
+    this.disable();
+  }
+
+  public render() {
+    return null;
+  }
+}

diff --git a/src/shared/components/common/progress-bar.tsx b/src/shared/components/common/progress-bar.tsx
index 5ddc5ca6389117d32a6c17dce8d9744071c99737..88aee7edba66de470ec7168b9e7b879622eb38d1 100644 (file)
--- a/src/shared/components/common/progress-bar.tsx
+++ b/src/shared/components/common/progress-bar.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { ThemeColor } from "shared/utils";
+import { ThemeColor } from "../../utils";
 
 interface ProgressBarProps {
   className?: string;

diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 2e147b83f83e85d0e83ec1985256f921c961878a..e2e352424e2627f5749970919ad675371904d478 100644 (file)
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -11,8 +11,8 @@ import {
   wsUserOp,
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
-import { InitialFetchRequest } from "shared/interfaces";
 import { i18n } from "../../i18next";
+import { InitialFetchRequest } from "../../interfaces";
 import { WebSocketService } from "../../services";
 import {
   QueryParams,

diff --git a/src/shared/components/community/community-form.tsx b/src/shared/components/community/community-form.tsx
index 372e66a641b947f83bc9b7d0213fba00d6050640..bbc8ba89788468c84e39bc29f986ca2bfe3cf63f 100644 (file)
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@@ -1,5 +1,4 @@
 import { Component, linkEvent } from "inferno";
-import { Prompt } from "inferno-router";
 import {
   CommunityResponse,
   CommunityView,
@@ -24,6 +23,7 @@ import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import NavigationPrompt from "../common/navigation-prompt";
 
 interface CommunityFormProps {
   community_view?: CommunityView; // If a community is given, that means this is an edit
@@ -119,14 +119,15 @@ export class CommunityForm extends Component<
   render() {
     return (
       <>
-        <Prompt
+        <NavigationPrompt
           when={
             !this.state.loading &&
-            (this.state.form.name ||
+            !!(
+              this.state.form.name ||
               this.state.form.title ||
-              this.state.form.description)
+              this.state.form.description
+            )
           }
-          message={i18n.t("block_leaving")}
         />
         <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
           {!this.props.community_view && (

diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx
index b2f65418f2d02751924cf98e526e99a3aaa3cd92..40588ac8cf1ed29df848aabea87d83726de092dd 100644 (file)
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@@ -4,7 +4,6 @@ import {
   InfernoMouseEvent,
   linkEvent,
 } from "inferno";
-import { Prompt } from "inferno-router";
 import {
   CreateSite,
   EditSite,
@@ -25,6 +24,7 @@ import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
 import { ListingTypeSelect } from "../common/listing-type-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import NavigationPrompt from "../common/navigation-prompt";
 
 interface SiteFormProps {
   siteRes: GetSiteResponse;
@@ -152,16 +152,17 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
     return (
       <>
-        <Prompt
+        <NavigationPrompt
           when={
             !this.state.loading &&
             !siteSetup &&
-            (this.state.siteForm.name ||
+            !!(
+              this.state.siteForm.name ||
               this.state.siteForm.sidebar ||
               this.state.siteForm.application_question ||
-              this.state.siteForm.description)
+              this.state.siteForm.description
+            )
           }
-          message={i18n.t("block_leaving")}
         />
         <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
           <h5>{`${

diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx
index 28418d10ff9d7492c02632e5716810a86e8d19da..f7cfcf15a652cfa5f4f7c746ad3e87cf980cb813 100644 (file)
--- a/src/shared/components/post/create-post.tsx
+++ b/src/shared/components/post/create-post.tsx
@@ -10,8 +10,8 @@ import {
   wsUserOp,
 } from "lemmy-js-client";
 import { Subscription } from "rxjs";
-import { InitialFetchRequest, PostFormParams } from "shared/interfaces";
 import { i18n } from "../../i18next";
+import { InitialFetchRequest, PostFormParams } from "../../interfaces";
 import { WebSocketService } from "../../services";
 import {
   Choice,

diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index 9174000fc2c8ad25deb8f6db83c3edd516e236d5..739a9e4417ce7beba9a2abb59efd8d2e4a448c83 100644 (file)
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@@ -1,6 +1,5 @@
 import autosize from "autosize";
 import { Component, linkEvent } from "inferno";
-import { Prompt } from "inferno-router";
 import {
   CreatePost,
   EditPost,
@@ -44,6 +43,7 @@ import {
 import { Icon, Spinner } from "../common/icon";
 import { LanguageSelect } from "../common/language-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import NavigationPrompt from "../common/navigation-prompt";
 import { SearchableSelect } from "../common/searchable-select";
 import { PostListings } from "./post-listings";
 
@@ -192,14 +192,15 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     const url = this.state.form.url;
     return (
       <div>
-        <Prompt
+        <NavigationPrompt
           when={
             !this.state.loading &&
-            (this.state.form.name ||
+            !!(
+              this.state.form.name ||
               this.state.form.url ||
-              this.state.form.body)
+              this.state.form.body
+            )
           }
-          message={i18n.t("block_leaving")}
         />
         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
           <div className="form-group row">

diff --git a/src/shared/components/private_message/private-message-form.tsx b/src/shared/components/private_message/private-message-form.tsx
index abd52eaa62e364be33ac2bdc7df9682f364ba0e2..469009a4fddea0afb2a75ee0e09825bd8ea1cd0b 100644 (file)
--- a/src/shared/components/private_message/private-message-form.tsx
+++ b/src/shared/components/private_message/private-message-form.tsx
@@ -1,6 +1,5 @@
 import { Component, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
-import { Prompt } from "inferno-router";
 import {
   CreatePrivateMessage,
   EditPrivateMessage,
@@ -26,6 +25,7 @@ import {
 } from "../../utils";
 import { Icon, Spinner } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import NavigationPrompt from "../common/navigation-prompt";
 import { PersonListing } from "../person/person-listing";
 
 interface PrivateMessageFormProps {
@@ -91,10 +91,7 @@ export class PrivateMessageForm extends Component<
   render() {
     return (
       <div>
-        <Prompt
-          when={!this.state.loading && this.state.content}
-          message={i18n.t("block_leaving")}
-        />
+        <NavigationPrompt when={!this.state.loading && !!this.state.content} />
         <form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
           {!this.props.privateMessageView && (
             <div className="form-group row">