User inferno prompt instead of handrolled one (#1867)

package.json

@@ -50,7 +50,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "cookie": "^0.5.0",
     "copy-webpack-plugin": "^11.0.0",
-    "cross-fetch": "^3.1.5",
+    "cross-fetch": "^4.0.0",
     "css-loader": "^6.7.3",
     "date-fns": "^2.30.0",
     "emoji-mart": "^5.4.0",
@@ -58,14 +58,14 @@
     "express": "~4.18.2",
     "history": "^5.3.0",
     "html-to-text": "^9.0.5",
-    "i18next": "^22.4.15",
+    "i18next": "^23.2.8",
-    "inferno": "^8.1.1",
+    "inferno": "^8.2.2",
-    "inferno-create-element": "^8.1.1",
+    "inferno-create-element": "^8.2.2",
     "inferno-helmet": "^5.2.1",
-    "inferno-hydrate": "^8.1.1",
+    "inferno-hydrate": "^8.2.2",
     "inferno-i18next-dess": "0.0.2",
-    "inferno-router": "^8.1.1",
+    "inferno-router": "^8.2.2",
-    "inferno-server": "^8.1.1",
+    "inferno-server": "^8.2.2",
     "jwt-decode": "^3.1.2",
     "lemmy-js-client": "0.18.1",
     "lodash.isequal": "^4.5.0",
@@ -81,17 +81,17 @@
     "mini-css-extract-plugin": "^2.7.5",
     "register-service-worker": "^1.7.2",
     "run-node-webpack-plugin": "^1.3.0",
-    "sanitize-html": "^2.10.0",
+    "sanitize-html": "^2.11.0",
-    "sass": "^1.62.1",
+    "sass": "^1.63.6",
-    "sass-loader": "^13.2.2",
+    "sass-loader": "^13.3.2",
     "serialize-javascript": "^6.0.1",
     "service-worker-webpack": "^1.0.0",
     "sharp": "^0.32.1",
     "tippy.js": "^6.3.7",
     "toastify-js": "^1.12.0",
     "tributejs": "^5.1.3",
-    "webpack": "5.82.1",
+    "webpack": "5.88.1",
-    "webpack-cli": "^5.1.1",
+    "webpack-cli": "^5.1.4",
     "webpack-node-externals": "^3.0.0"
   },
   "devDependencies": {
@@ -104,32 +104,32 @@
     "@types/lodash.isequal": "^4.5.6",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.5",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.4.0",
     "@types/path-browserify": "^1.0.0",
     "@types/sanitize-html": "^2.9.0",
     "@types/serialize-javascript": "^5.0.1",
     "@types/toastify-js": "^1.11.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/parser": "^5.61.0",
-    "eslint": "^8.40.0",
+    "eslint": "^8.44.0",
     "eslint-plugin-inferno": "^7.32.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
     "import-sort-style-module": "^6.0.0",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^13.2.3",
     "prettier": "^2.8.8",
     "prettier-plugin-import-sort": "^0.0.7",
     "prettier-plugin-organize-imports": "^3.2.2",
-    "prettier-plugin-packagejson": "^2.4.3",
+    "prettier-plugin-packagejson": "^2.4.4",
     "rimraf": "^5.0.0",
     "sortpack": "^2.3.4",
     "style-loader": "^3.3.2",
-    "terser": "^5.17.3",
+    "terser": "^5.18.2",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.6",
     "typescript-language-server": "^3.3.2",
     "webpack-bundle-analyzer": "^4.9.0",
-    "webpack-dev-server": "4.15.0"
+    "webpack-dev-server": "4.15.1"
   },
   "packageManager": "yarn@1.22.19",
   "engines": {

src/client/index.tsx

@@ -1,8 +1,8 @@
 import { initializeSite, setupDateFns } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
-import { Router } from "inferno-router";
+import { BrowserRouter } from "inferno-router";
 import { App } from "../shared/components/app/app";
-import { HistoryService, UserService } from "../shared/services";
+import { UserService } from "../shared/services";
 
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
@@ -13,9 +13,9 @@ async function startClient() {
   await setupDateFns();
 
   const wrapper = (
-    <Router history={HistoryService.history}>
+    <BrowserRouter>
       <App user={UserService.Instance.myUserInfo} />
-    </Router>
+    </BrowserRouter>
   );
 
   const root = document.getElementById("root");

src/shared/components/common/markdown-textarea.tsx

@@ -4,6 +4,7 @@ import autosize from "autosize";
 import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
+import { Prompt } from "inferno-router";
 import { Language } from "lemmy-js-client";
 import {
   concurrentImageUpload,
@@ -19,7 +20,6 @@ import { pictrsDeleteToast, toast } from "../../toast";
 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 {
@@ -138,18 +138,14 @@ export class MarkdownTextArea extends Component<
   render() {
     const languageId = this.state.languageId;
 
-    // TODO add these prompts back in at some point
-    // <Prompt
-    //   when={!this.props.hideNavigationWarnings && this.state.content}
-    //   message={I18NextService.i18n.t("block_leaving")}
-    // />
     return (
       <form
         className="markdown-textarea"
         id={this.formId}
         onSubmit={linkEvent(this, this.handleSubmit)}
       >
-        <NavigationPrompt
+        <Prompt
+          message={I18NextService.i18n.t("block_leaving")}
           when={
             !this.props.hideNavigationWarnings &&
             !!this.state.content &&

src/shared/components/common/navigation-prompt.tsx

@@ -1,53 +0,0 @@
-import { Component } from "inferno";
-import { I18NextService } from "../../services";
-
-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(I18NextService.i18n.t("block_leaving") ?? undefined)) {
-        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/community/community-form.tsx

@@ -1,6 +1,7 @@
 import { myAuthRequired } from "@utils/app";
 import { capitalizeFirstLetter, randomStr } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
+import { Prompt } from "inferno-router";
 import {
   CommunityView,
   CreateCommunity,
@@ -12,7 +13,6 @@ 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
@@ -90,7 +90,8 @@ export class CommunityForm extends Component<
         className="community-form"
         onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
       >
-        <NavigationPrompt
+        <Prompt
+          message={I18NextService.i18n.t("block_leaving")}
           when={
             !this.props.loading &&
             !!(

src/shared/components/home/site-form.tsx

@@ -7,6 +7,7 @@ import {
   InfernoNode,
   linkEvent,
 } from "inferno";
+import { Prompt } from "inferno-router";
 import {
   CreateSite,
   EditSite,
@@ -21,7 +22,6 @@ 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 {
   blockedInstances?: Instance[];
@@ -123,7 +123,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
         className="site-form"
         onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}
       >
-        <NavigationPrompt
+        <Prompt
+          message={I18NextService.i18n.t("block_leaving")}
           when={
             !this.props.loading &&
             !siteSetup &&

src/shared/components/post/post-form.tsx

@@ -15,6 +15,7 @@ import { isImage } from "@utils/media";
 import { Choice } from "@utils/types";
 import autosize from "autosize";
 import { Component, InfernoNode, linkEvent } from "inferno";
+import { Prompt } from "inferno-router";
 import {
   CommunityView,
   CreatePost,
@@ -39,7 +40,6 @@ import { toast } from "../../toast";
 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";
 
@@ -332,7 +332,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
 
     return (
       <form className="post-form" onSubmit={linkEvent(this, handlePostSubmit)}>
-        <NavigationPrompt
+        <Prompt
+          message={I18NextService.i18n.t("block_leaving")}
           when={
             !!(
               this.state.form.name ||

src/shared/components/private_message/private-message-form.tsx

@@ -2,6 +2,7 @@ import { myAuthRequired } from "@utils/app";
 import { capitalizeFirstLetter } from "@utils/helpers";
 import { Component, InfernoNode } from "inferno";
 import { T } from "inferno-i18next-dess";
+import { Prompt } from "inferno-router";
 import {
   CreatePrivateMessage,
   EditPrivateMessage,
@@ -13,7 +14,6 @@ import { I18NextService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
-import NavigationPrompt from "../common/navigation-prompt";
 import { PersonListing } from "../person/person-listing";
 
 interface PrivateMessageFormProps {
@@ -62,16 +62,12 @@ export class PrivateMessageForm extends Component<
       this.setState({ loading: false, content: undefined, previewMode: false });
     }
   }
-  // TODO
-  // <Prompt
-  //   when={!this.state.loading && this.state.content}
-  //   message={I18NextService.i18n.t("block_leaving")}
-  // />
 
   render() {
     return (
       <form className="private-message-form">
-        <NavigationPrompt
+        <Prompt
+          message={I18NextService.i18n.t("block_leaving")}
           when={
             !this.state.loading && !!this.state.content && !this.state.submitted
           }

src/shared/services/HistoryService.ts

@@ -1,18 +0,0 @@
-import { History, createBrowserHistory } from "history";
-
-export class HistoryService {
-  static #_instance: HistoryService;
-  #history: History;
-
-  private constructor() {
-    this.#history = createBrowserHistory();
-  }
-
-  static get #Instance() {
-    return this.#_instance ?? (this.#_instance = new this());
-  }
-
-  public static get history() {
-    return this.#Instance.#history;
-  }
-}

src/shared/services/index.ts

@@ -1,5 +1,4 @@
 export { FirstLoadService } from "./FirstLoadService";
-export { HistoryService } from "./HistoryService";
 export { HomeCacheService } from "./HomeCacheService";
 export { HttpService } from "./HttpService";
 export { I18NextService } from "./I18NextService";