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}
/>
diff --git a/packages/common/components/Loaders/DialogAsideLoader/DialogAsideLoader.js b/packages/common/components/Loaders/DialogAsideLoader/DialogAsideLoader.js
index 4dc735cc0f..74ae6e6ecb 100644
--- a/packages/common/components/Loaders/DialogAsideLoader/DialogAsideLoader.js
+++ b/packages/common/components/Loaders/DialogAsideLoader/DialogAsideLoader.js
@@ -13,7 +13,11 @@ const DialogAsideLoader = ({
const renderClearDialogAsideLoader = () => {
return (
-
+
@@ -23,6 +27,7 @@ const DialogAsideLoader = ({
+
);
@@ -32,7 +37,7 @@ const DialogAsideLoader = ({
renderClearDialogAsideLoader()
) : (
<>
-
+