Fix prompt component (#1223)

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

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";

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,

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
+        <NavigationPrompt when={!!this.state.content} />
-          when={!this.props.hideNavigationWarnings && this.state.content}
-          message={i18n.t("block_leaving")}
-        />
         <div className="form-group row">
           <div className={`col-sm-12`}>
             <textarea

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;
+  }
+}

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;

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,

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 && (

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>{`${

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,

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">

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
+        <NavigationPrompt when={!this.state.loading && !!this.state.content} />
-          when={!this.state.loading && this.state.content}
-          message={i18n.t("block_leaving")}
-        />
         <form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
           {!this.props.privateMessageView && (
             <div className="form-group row">