diff --git a/packages/client/src/components/FilesPanels/index.js b/packages/client/src/components/FilesPanels/index.js index 572d366eef..776209ee9e 100644 --- a/packages/client/src/components/FilesPanels/index.js +++ b/packages/client/src/components/FilesPanels/index.js @@ -26,10 +26,9 @@ import React, { useMemo, useState, useCallback, useEffect } from "react"; -import { useTranslation, Trans } from "react-i18next"; +import { useTranslation } from "react-i18next"; import { inject, observer } from "mobx-react"; -import { toastr } from "@docspace/shared/components/toast"; import { Events, FilesSelectorFilterTypes, @@ -78,7 +77,6 @@ import FilesSelector from "../FilesSelector"; import LeaveRoomDialog from "../dialogs/LeaveRoomDialog"; import ChangeRoomOwnerPanel from "../panels/ChangeRoomOwnerPanel"; -import { CreatedPDFFormDialog } from "../dialogs/CreatedPDFFormDialog"; import { PDFFormEditingDialog } from "../dialogs/PDFFormEditingDialog"; import { SharePDFFormDialog } from "../dialogs/SharePDFFormDialog"; import { FillPDFDialog } from "../dialogs/FillPDFDialog"; @@ -141,13 +139,6 @@ const Panels = (props) => { shareCollectSelector, } = props; - const [createPDFFormFile, setCreatePDFFormFile] = useState({ - visible: false, - file: null, - localKey: "", - onClose: null, - }); - const [sharePDFForm, setSharePDFForm] = useState({ visible: false, data: null, @@ -175,41 +166,6 @@ const Panels = (props) => { return text[selectFileFormRoomFilterParam]; }, [selectFileFormRoomFilterParam, t]); - const handleCreatePDFFormFile = useCallback( - /** - * @param {CustomEvent} event - */ - (event) => { - const { file, show, localKey } = event.detail; - - if (!show) { - return toastr.success( - }} - values={{ filename: file.title }} - />, - ); - } - - setCreatePDFFormFile({ - visible: true, - file, - localKey, - onClose: () => { - setCreatePDFFormFile({ - visible: false, - onClose: null, - file: null, - localKey: "", - }); - }, - }); - }, - [], - ); - const handleSharePDFForm = useCallback( /** * @param {CustomEvent} event @@ -229,20 +185,12 @@ const Panels = (props) => { ); useEffect(() => { - window.addEventListener( - Events.CREATE_PDF_FORM_FILE, - handleCreatePDFFormFile, - ); window.addEventListener(Events.Share_PDF_Form, handleSharePDFForm); return () => { - window.removeEventListener( - Events.CREATE_PDF_FORM_FILE, - handleCreatePDFFormFile, - ); window.removeEventListener(Events.Share_PDF_Form, handleSharePDFForm); }; - }, [handleCreatePDFFormFile, handleSharePDFForm]); + }, [handleSharePDFForm]); return [ settingsPluginDialogVisible && ( @@ -357,12 +305,6 @@ const Panels = (props) => { ), shareFolderDialogVisible && , - createPDFFormFile.visible && ( - - ), pdfFormEditVisible && , sharePDFForm.visible && ( diff --git a/packages/client/src/components/GlobalEvents/index.js b/packages/client/src/components/GlobalEvents/index.js index 8fc4942699..f139c2a0f8 100644 --- a/packages/client/src/components/GlobalEvents/index.js +++ b/packages/client/src/components/GlobalEvents/index.js @@ -24,12 +24,13 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import { useState, useEffect, useCallback, useRef, memo } from "react"; - +import { useState, useEffect, useCallback, useRef } from "react"; +import { Trans } from "react-i18next"; import { inject, observer } from "mobx-react"; import { FileAction } from "@docspace/shared/enums"; import { Events } from "@docspace/shared/enums"; +import { toastr } from "@docspace/shared/components/toast"; import CreateEvent from "./CreateEvent"; import RenameEvent from "./RenameEvent"; @@ -40,6 +41,8 @@ import EditGroupEvent from "./GroupEvents/EditGroupEvent"; import ChangeUserTypeEvent from "./ChangeUserTypeEvent"; import CreatePluginFile from "./CreatePluginFileEvent"; import ChangeQuotaEvent from "./ChangeQuotaEvent"; +import { CreatedPDFFormDialog } from "../dialogs/CreatedPDFFormDialog"; + const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => { const [createDialogProps, setCreateDialogProps] = useState({ visible: false, @@ -98,6 +101,13 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => { onClose: null, }); + const [createPDFFormFile, setCreatePDFFormFile] = useState({ + visible: false, + file: null, + localKey: "", + onClose: null, + }); + const eventHandlersList = useRef([]); const onCreate = useCallback((e) => { @@ -236,6 +246,45 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => { [enablePlugins], ); + const handleCreatePDFFormFile = useCallback( + /** + * @typedef {Object} DetailType + * @property {import("@docspace/shared/api/files/types").TFile} file + * @property {boolean} show + * @property {string} localKey + * @param {CustomEvent} event + */ + (event) => { + const { file, show, localKey } = event.detail; + + if (!show) { + return toastr.success( + }} + values={{ filename: file.title }} + />, + ); + } + + setCreatePDFFormFile({ + visible: true, + file, + localKey, + onClose: () => { + setCreatePDFFormFile({ + visible: false, + onClose: null, + file: null, + localKey: "", + }); + }, + }); + }, + [], + ); + const onChangeQuota = useCallback((e) => { const { payload } = e; @@ -261,6 +310,21 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => { }, }); }, []); + + useEffect(() => { + window.addEventListener( + Events.CREATE_PDF_FORM_FILE, + handleCreatePDFFormFile, + ); + + return () => { + window.removeEventListener( + Events.CREATE_PDF_FORM_FILE, + handleCreatePDFFormFile, + ); + }; + }, [handleCreatePDFFormFile]); + useEffect(() => { window.addEventListener(Events.CREATE, onCreate); window.addEventListener(Events.RENAME, onRename); @@ -360,6 +424,12 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => { changeQuotaDialog.visible && ( ), + createPDFFormFile.visible && !createDialogProps.visible && ( + + ), ]; }; diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 3b2c34d282..26bcf0e656 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -53,6 +53,7 @@ import config from "PACKAGE_FILE"; import { thumbnailStatuses } from "@docspace/client/src/helpers/filesConstants"; import { getDaysRemaining } from "@docspace/shared/utils/common"; import { + LOADER_TIMEOUT, MEDIA_VIEW_URL, PDF_FORM_DIALOG_KEY, ROOMS_PROVIDER_TYPE_NAME, @@ -380,7 +381,7 @@ class FilesStore { socketHelper.on("s:modify-room", (option) => { switch (option.cmd) { case "create-form": - this.wsCreatedPDFForm(option); + setTimeout(() => this.wsCreatedPDFForm(option), LOADER_TIMEOUT * 2); break; default: