diff --git a/packages/client/src/HOCs/withBadges.js b/packages/client/src/HOCs/withBadges.js index 0a57219265..b89ba00db1 100644 --- a/packages/client/src/HOCs/withBadges.js +++ b/packages/client/src/HOCs/withBadges.js @@ -12,6 +12,12 @@ import config from "PACKAGE_FILE"; export default function withBadges(WrappedComponent) { class WithBadges extends React.Component { + constructor(props) { + super(props); + + this.state = { disableBadgeClick: false, disableUnpinClick: false }; + } + onShowVersionHistory = () => { const { homepage, @@ -28,22 +34,42 @@ export default function withBadges(WrappedComponent) { }; onBadgeClick = () => { + if (this.state.disableBadgeClick) return; + const { item, markAsRead, setNewFilesPanelVisible } = this.props; + this.setState(() => ({ + disableBadgeClick: true, + })); + + const enableBadgeClick = () => { + this.setState({ disableBadgeClick: false }); + }; + if (item.fileExst) { - markAsRead([], [item.id], item); + markAsRead([], [item.id], item).then(() => { + enableBadgeClick(); + }); } else { - setNewFilesPanelVisible(true, null, item); + setNewFilesPanelVisible(true, null, item).then(() => { + enableBadgeClick(); + }); } }; onUnpinClick = (e) => { + if (this.state.disableUnpinClick) return; + + this.setState({ disableUnpinClick: true }); + const { t, setPinAction } = this.props; const { action, id } = e.target.closest(".is-pinned").dataset; if (!action && !id) return; - setPinAction(action, id, t); + setPinAction(action, id, t).then(() => { + this.setState({ disableUnpinClick: false }); + }); }; setConvertDialogVisible = () => { diff --git a/packages/client/src/components/Article/Body/index.js b/packages/client/src/components/Article/Body/index.js index 6b48b25e8f..179b43318b 100644 --- a/packages/client/src/components/Article/Body/index.js +++ b/packages/client/src/components/Article/Body/index.js @@ -49,6 +49,8 @@ const ArticleBodyContent = (props) => { archiveFolderId, } = props; + const [disableBadgeClick, setDisableBadgeClick] = React.useState(false); + const campaigns = (localStorage.getItem("campaigns") || "") .split(",") .filter((campaign) => campaign.length > 0); @@ -148,9 +150,18 @@ const ArticleBodyContent = (props) => { [categoryType, roomsFolderId, archiveFolderId] ); - const onShowNewFilesPanel = React.useCallback((folderId) => { - props.setNewFilesPanelVisible(true, [`${folderId}`]); - }, []); + const onShowNewFilesPanel = React.useCallback( + async (folderId) => { + if (disableBadgeClick) return; + + setDisableBadgeClick(true); + + await props.setNewFilesPanelVisible(true, [`${folderId}`]); + + setDisableBadgeClick(false); + }, + [disableBadgeClick] + ); return ( <> diff --git a/packages/client/src/components/panels/NewFilesPanel/index.js b/packages/client/src/components/panels/NewFilesPanel/index.js index 524f18e532..9ffbd5db43 100644 --- a/packages/client/src/components/panels/NewFilesPanel/index.js +++ b/packages/client/src/components/panels/NewFilesPanel/index.js @@ -33,6 +33,7 @@ class NewFilesPanel extends React.Component { state = { readingFiles: [], inProgress: false }; onClose = () => { + if (this.state.inProgress) return; this.props.setNewFilesPanelVisible(false); }; @@ -52,16 +53,27 @@ class NewFilesPanel extends React.Component { }; onMarkAsRead = () => { - const fileIds = []; - const folderIds = []; - - for (let item of this.props.newFiles) { - if (item.fileExst) fileIds.push(item.id); - else folderIds.push(item.id); - } + const { inProgress, readingFiles } = this.state; + if (inProgress) return; this.setState({ inProgress: true }); + const files = []; + const folders = []; + + for (let item of this.props.newFiles) { + if (item.fileExst) files.push(item); + else folders.push(item); + } + + const fileIds = files + .filter((f) => !readingFiles.includes(f.id.toString())) + .map((f) => f.id); + + const folderIds = folders + .filter((f) => !readingFiles.includes(f.id.toString())) + .map((f) => f.id); + this.props .markAsRead(folderIds, fileIds) .then(() => this.setNewBadgeCount()) @@ -78,6 +90,10 @@ class NewFilesPanel extends React.Component { }; onNewFileClick = (e) => { + if (this.state.inProgress) return; + + this.setState({ inProgress: true }); + const { id, extension: fileExst } = e.target.dataset; const { @@ -92,16 +108,23 @@ class NewFilesPanel extends React.Component { const item = newFiles.find((file) => file.id.toString() === id); - if (readingFiles.includes(id)) return this.onFileClick(item); + if (readingFiles.includes(id)) { + this.setState({ inProgress: false }); + return this.onFileClick(item); + } + markAsRead(folderIds, fileIds, item) .then(() => { //updateFolderBadge(folderId, 1); readingFiles.push(id); - this.setState({ readingFiles }); + this.setState({ readingFiles, inProgress: false }); + this.onFileClick(item); }) - .then(() => refreshFiles()) + .then(() => { + refreshFiles(); + }) .catch((err) => toastr.error(err)); }; @@ -159,7 +182,11 @@ class NewFilesPanel extends React.Component { newFiles, } = this.props; - const filesCount = newFiles.length; + const { readingFiles } = this.state; + + const filesCount = newFiles.filter( + (f) => !readingFiles.includes(f.id.toString()) + ).length; updateRootBadge(+newFilesIds[0], filesCount); if (newFilesIds.length <= 1) { @@ -175,6 +202,7 @@ class NewFilesPanel extends React.Component { render() { //console.log("NewFiles panel render"); const { t, visible, isLoading, newFiles, theme } = this.props; + const { inProgress } = this.state; const zIndex = 310; return ( @@ -244,12 +272,13 @@ class NewFilesPanel extends React.Component { size="normal" primary onClick={this.onMarkAsRead} - isLoading={this.state.inProgress} + isLoading={inProgress} />