User inferno prompt instead of handrolled one (#1867)

This commit is contained in:
SleeplessOne1917 2023-07-07 23:33:03 +00:00 committed by GitHub
parent 45333d8c10
commit 3d58baea7c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 2056 additions and 1841 deletions

View file

@ -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",
"inferno": "^8.1.1",
"inferno-create-element": "^8.1.1",
"i18next": "^23.2.8",
"inferno": "^8.2.2",
"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-server": "^8.1.1",
"inferno-router": "^8.2.2",
"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",
"sass": "^1.62.1",
"sass-loader": "^13.2.2",
"sanitize-html": "^2.11.0",
"sass": "^1.63.6",
"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-cli": "^5.1.1",
"webpack": "5.88.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/parser": "^5.59.5",
"eslint": "^8.40.0",
"@typescript-eslint/eslint-plugin": "^5.61.0",
"@typescript-eslint/parser": "^5.61.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",
"typescript": "^5.0.4",
"terser": "^5.18.2",
"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": {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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
}

View file

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

View file

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

3740
yarn.lock

File diff suppressed because it is too large Load diff