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/Items.js b/packages/client/src/components/Article/Body/Items.js index 2e2bb0b23b..168613c6e9 100644 --- a/packages/client/src/components/Article/Body/Items.js +++ b/packages/client/src/components/Article/Body/Items.js @@ -11,11 +11,17 @@ import { import { withTranslation } from "react-i18next"; import DragAndDrop from "@docspace/components/drag-and-drop"; import { isMobile } from "react-device-detect"; +import SettingsItem from "./SettingsItem"; +import AccountsItem from "./AccountsItem"; const StyledDragAndDrop = styled(DragAndDrop)` display: contents; `; +const CatalogDivider = styled.div` + height: 16px; +`; + const Item = ({ t, item, @@ -152,6 +158,7 @@ const Items = ({ trashIsEmpty, onHide, + firstLoad, }) => { useEffect(() => { data.forEach((elem) => { @@ -329,44 +336,11 @@ const Items = ({ ); }); - const roomsHeader = ( - - ); + if (!firstLoad) items.splice(3, 0, ); + if (!isVisitor) items.splice(3, 0, ); - const filesHeader = ( - - ); - - const otherHeader = ( - - ); - - if (isVisitor) { - items.length > 2 && items.splice(2, 0, filesHeader); - } else { - items.splice(3, 0, filesHeader); - } - - items.unshift(roomsHeader); - items.push(otherHeader); + if (!isVisitor) items.splice(3, 0, ); + else items.splice(2, 0, ); return items; }, @@ -386,6 +360,8 @@ const Items = ({ uploadEmptyFolders, trashIsEmpty, isAdmin, + isVisitor, + firstLoad, ] ); @@ -417,6 +393,7 @@ export default inject( setDragging, setStartDrag, trashIsEmpty, + firstLoad, } = filesStore; const { startUpload } = uploadDataStore; @@ -455,6 +432,7 @@ export default inject( setEmptyTrashDialogVisible, trashIsEmpty, rootFolderType, + firstLoad, }; } )(withTranslation(["Files", "Common", "Translations"])(observer(Items))); diff --git a/packages/client/src/components/Article/Body/index.js b/packages/client/src/components/Article/Body/index.js index 36576126b7..179b43318b 100644 --- a/packages/client/src/components/Article/Body/index.js +++ b/packages/client/src/components/Article/Body/index.js @@ -9,8 +9,6 @@ import Items from "./Items"; import { isMobile, tablet } from "@docspace/components/utils/device"; import FilesFilter from "@docspace/common/api/files/filter"; import RoomsFilter from "@docspace/common/api/rooms/filter"; -import SettingsItem from "./SettingsItem"; -import AccountsItem from "./AccountsItem"; import { combineUrl } from "@docspace/common/utils"; import { isDesktop, isTablet, isMobileOnly } from "react-device-detect"; //import ThirdPartyList from "./ThirdPartyList"; @@ -51,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); @@ -150,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 ( <> @@ -162,8 +171,7 @@ const ArticleBodyContent = (props) => { showText={showText} onHide={toggleArticleOpen} /> - {!personal && !isVisitor && } - {!personal && !firstLoad && } + {!isDesktopClient && showText && !docSpace && ( {/* {enableThirdParty && !isVisitor && } */} diff --git a/packages/client/src/components/QuickButtons.js b/packages/client/src/components/QuickButtons.js index 3ed2c82050..5d257f5c5c 100644 --- a/packages/client/src/components/QuickButtons.js +++ b/packages/client/src/components/QuickButtons.js @@ -83,7 +83,7 @@ const QuickButtons = (props) => { hoverColor={theme.filesQuickButtons.sharedColor} /> )} - {fileExst && !isTrashFolder && displayBadges && ( + {/* {fileExst && !isTrashFolder && displayBadges && ( { onClick={setFavorite} hoverColor={theme.filesQuickButtons.hoverColor} /> - )} + )} */} ); }; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js index 2de33d64b8..dcccfe70b2 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js @@ -18,6 +18,14 @@ const TagDropdown = ({ const [dropdownMaxHeight, setDropdownMaxHeight] = useState(0); + useEffect(() => { + document.getElementById("tags-input").addEventListener("keyup", onKeyPress); + + return () => document.removeEventListener("keyup", onKeyPress); + }); + + const onKeyPress = (e) => e.key === "Enter" && addNewTag(); + const chosenTags = tagHandler.tags.map((tag) => tag.name); const tagsForDropdown = tagHandler.fetchedTags.filter( 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} />