Web:Client: update fetch files

This commit is contained in:
Timofey Boyko 2023-05-30 17:00:39 +03:00
parent e64f541d22
commit 1b48dadfeb
13 changed files with 269 additions and 158 deletions

View File

@ -26,10 +26,9 @@ const EmptyFolderContainer = ({
setIsLoading,
parentId,
linkStyles,
isRooms,
editAccess,
sectionWidth,
canCreateFiles,
canInviteUsers,
onClickInviteUsers,
folderId,
@ -43,10 +42,19 @@ const EmptyFolderContainer = ({
const navigate = useNavigate();
const location = useLocation();
const isRoom =
rootFolderType === null
? location.state.rootFolderType === FolderType.Archive ||
location.state.rootFolderType === FolderType.Rooms
: rootFolderType === FolderType.Archive ||
rootFolderType === FolderType.Rooms;
const canInviteUsers = isRoom && editAccess;
const onBackToParentFolder = () => {
setIsLoading(true);
if (isRooms) {
if (isRoom) {
const path =
rootFolderType === FolderType.Archive
? "rooms/archived"
@ -99,7 +107,7 @@ const EmptyFolderContainer = ({
};
const onInviteUsersClick = () => {
if (!isRooms) return;
if (!isRoom) return;
onClickInviteUsers && onClickInviteUsers(folderId);
};
@ -140,7 +148,7 @@ const EmptyFolderContainer = ({
</Link>
</div>
{isRooms ? (
{isRoom ? (
canInviteUsers ? (
<>
<div className="empty-folder_container-links second-description">
@ -189,14 +197,14 @@ const EmptyFolderContainer = ({
return (
<EmptyContainer
headerText={isRooms ? t("RoomCreated") : t("EmptyScreenFolder")}
headerText={isRoom ? t("RoomCreated") : t("EmptyScreenFolder")}
style={{ gridColumnGap: "39px", marginTop: 32 }}
descriptionText={
canCreateFiles
? t("EmptyFolderDecription")
: t("EmptyFolderDescriptionUser")
}
imageSrc={isRooms ? emptyScreenCorporateSvg : emptyScreenAltSvg}
imageSrc={isRoom ? emptyScreenCorporateSvg : emptyScreenAltSvg}
buttons={buttons}
sectionWidth={sectionWidth}
isEmptyFolderContainer={true}
@ -218,7 +226,7 @@ export default inject(
parentId,
id: folderId,
roomType,
security,
rootFolderType,
} = selectedFolderStore;
@ -229,25 +237,20 @@ export default inject(
id = elem.id;
}
const isRooms = !!roomType;
const { canCreateFiles } = accessRightsStore;
const { onClickInviteUsers } = contextOptionsStore;
const canInviteUsers = isRooms && security?.EditAccess; // skip sub-folders
return {
setIsLoading: filesStore.setIsLoading,
parentId: id ?? parentId,
isRooms,
canCreateFiles,
canInviteUsers,
navigationPath,
rootFolderType,
clearFiles,
editAccess: security?.EditAccess,
onClickInviteUsers,
folderId,

View File

@ -402,7 +402,7 @@ export default inject(
title,
myFolderId,
filter,
fetchFiles,
isLoading,
setIsLoading,
rootFolderType,

View File

@ -4,6 +4,8 @@ import Button from "@docspace/components/button";
import { withTranslation } from "react-i18next";
import toastr from "@docspace/components/toast/toastr";
import { inject, observer } from "mobx-react";
import { useNavigate, useLocation } from "react-router-dom";
import FilesFilter from "@docspace/common/api/files/filter";
const DeleteThirdPartyDialog = (props) => {
const {
@ -12,8 +14,9 @@ const DeleteThirdPartyDialog = (props) => {
visible,
providers,
removeItem,
fetchFiles,
currentFolderId,
deleteThirdParty,
setThirdPartyProviders,
setDeleteThirdPartyDialogVisible,
@ -23,6 +26,9 @@ const DeleteThirdPartyDialog = (props) => {
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const location = useLocation();
const onClose = () => setDeleteThirdPartyDialogVisible(false);
const onDeleteThirdParty = () => {
@ -46,8 +52,13 @@ const DeleteThirdPartyDialog = (props) => {
deleteThirdParty(+removeItem.id)
.then(() => {
setThirdPartyProviders(newProviders);
if (currentFolderId) fetchFiles(currentFolderId, null, true, true);
else {
if (currentFolderId) {
const filter = FilesFilter.getDefault();
filter.folder = currentFolderId;
navigate(`${location.pathname}?${filter.toUrlParams()}`);
} else {
toastr.success(
t("SuccessDeleteThirdParty", { service: removeItem.title })
);
@ -105,7 +116,7 @@ export default inject(
}) => {
const { providers, setThirdPartyProviders, deleteThirdParty } =
settingsStore.thirdPartyStore;
const { fetchFiles } = filesStore;
const { setIsLoading } = filesStore;
const { selectedThirdPartyAccount: backupConnectionItem } = backup;
const {
deleteThirdPartyDialogVisible: visible,
@ -115,13 +126,17 @@ export default inject(
const removeItem = backupConnectionItem ?? storeItem;
const { id } = selectedFolderStore;
return {
currentFolderId: selectedFolderStore.id,
currentFolderId: id,
setIsLoadingStore: setIsLoading,
providers,
visible,
removeItem,
fetchFiles,
setThirdPartyProviders,
deleteThirdParty,
setDeleteThirdPartyDialogVisible,

View File

@ -23,6 +23,11 @@ import { combineUrl } from "@docspace/common/utils";
import config from "PACKAGE_FILE";
import Loaders from "@docspace/common/components/Loaders";
import withLoader from "../../../HOCs/withLoader";
import {
getCategoryTypeByFolderType,
getCategoryUrl,
} from "SRC_DIR/helpers/utils";
import FilesFilter from "@docspace/common/api/files/filter";
const SharingBodyStyle = { height: `calc(100vh - 156px)` };
@ -81,8 +86,9 @@ class NewFilesPanel extends React.Component {
})
.catch((err) => toastr.error(err))
.finally(() => {
this.setState({ inProgress: false });
this.onClose();
this.setState({ inProgress: false }, () => {
this.onClose();
});
});
};
@ -123,21 +129,46 @@ class NewFilesPanel extends React.Component {
};
onFileClick = (item) => {
const { id, fileExst, webUrl, fileType, providerKey } = item;
const {
filter,
id,
fileExst,
webUrl,
fileType,
providerKey,
rootFolderType,
filesCount,
foldersCount,
title,
} = item;
const {
setMediaViewerData,
fetchFiles,
addFileToRecentlyViewed,
playlist,
setCurrentItem,
currentFolderId,
setIsLoading,
clearFiles,
} = this.props;
if (!fileExst) {
fetchFiles(id, filter)
.catch((err) => toastr.error(err))
.finally(() => this.onClose());
const categoryType = getCategoryTypeByFolderType(rootFolderType, id);
const isEmpty = filesCount === 0 && foldersCount === 0;
const state = { title, rootFolderType, isEmpty, isRoot: false };
setIsLoading(true);
clearFiles(isEmpty);
const url = getCategoryUrl(categoryType, id);
const filter = FilesFilter.getDefault();
filter.folder = id;
window.DocSpace.navigate(`${url}?${filter.toUrlParams()}`, { state });
this.setState({ inProgress: false }, () => {
this.onClose();
});
} else {
const canEdit = [5, 6, 7].includes(fileType); //TODO: maybe dirty
@ -165,13 +196,33 @@ class NewFilesPanel extends React.Component {
if (isMedia) {
if (currentFolderId !== item.folderId) {
fetchFiles(item.folderId, null)
.then(() => {
const mediaItem = { visible: true, id };
setMediaViewerData(mediaItem);
})
.catch((err) => toastr.error(err))
.finally(() => this.onClose());
const categoryType = getCategoryTypeByFolderType(
rootFolderType,
item.folderId
);
const state = {
title: "",
rootFolderType,
isEmpty: false,
isRoot: false,
};
setIsLoading(true);
clearFiles(false);
const url = getCategoryUrl(categoryType, item.folderId);
const filter = FilesFilter.getDefault();
filter.folder = id;
window.DocSpace.navigate(`${url}?${filter.toUrlParams()}`, { state });
const mediaItem = { visible: true, id };
setMediaViewerData(mediaItem);
this.setState({ inProgress: false }, () => {
this.onClose();
});
} else {
const mediaItem = { visible: true, id };
setMediaViewerData(mediaItem);
@ -316,8 +367,6 @@ export default inject(
settingsStore,
}) => {
const {
fetchFiles,
filter,
addFileToRecentlyViewed,
//setIsLoading,
isLoading,
@ -326,6 +375,8 @@ export default inject(
//updateFoldersBadge,
hasNew,
refreshFiles,
clearFiles,
setIsLoading,
} = filesStore;
//const { updateRootBadge } = treeFoldersStore;
const { playlist, setMediaViewerData, setCurrentItem } =
@ -342,7 +393,6 @@ export default inject(
} = dialogsStore;
return {
filter,
pathParts,
visible,
newFiles,
@ -354,7 +404,7 @@ export default inject(
currentFolderId,
//setIsLoading,
fetchFiles,
setMediaViewerData,
addFileToRecentlyViewed,
getIcon,
@ -369,6 +419,9 @@ export default inject(
theme: auth.settingsStore.theme,
hasNew,
refreshFiles,
clearFiles,
setIsLoading,
};
}
)(

View File

@ -108,9 +108,12 @@ const useFiles = ({
});
}, 1);
return;
return setIsLoading(false);
}
if (window.location.href.indexOf("/#preview") > 1)
return setIsLoading(false);
const isRoomFolder = getObjectByLocation(window.location)?.folder;
if (

View File

@ -75,7 +75,6 @@ const FilesMediaViewer = (props) => {
fetchFiles(previewFile.folderId).finally(() => {
setIsLoading(false);
setFirstLoad(false);
setAlreadyFetchingRooms(false);
});
}
}, [previewFile]);

View File

@ -337,7 +337,7 @@ class FilesTableHeader extends React.Component {
};
onFilter = (sortBy) => {
const { filter, selectedFolderId, setIsLoading, fetchFiles } = this.props;
const { filter, setIsLoading } = this.props;
const newFilter = filter.clone();
if (newFilter.sortBy !== sortBy) {
@ -348,7 +348,10 @@ class FilesTableHeader extends React.Component {
}
setIsLoading(true);
fetchFiles(selectedFolderId, newFilter).finally(() => setIsLoading(false));
window.DocSpace.navigate(
`${window.DocSpace.location.pathname}?${newFilter.toUrlParams}`
);
};
onRoomsFilter = (sortBy) => {
@ -426,7 +429,7 @@ export default inject(
isHeaderChecked,
setIsLoading,
filter,
fetchFiles,
canShare,
firstElemChecked,
headerBorder,
@ -476,7 +479,6 @@ export default inject(
sortingVisible,
setIsLoading,
fetchFiles,
roomsFilter,

View File

@ -278,14 +278,14 @@ TileContainer.defaultProps = {
export default inject(({ auth, filesStore, treeFoldersStore }) => {
const { personal } = auth.settingsStore;
const { fetchFiles, filter, setIsLoading } = filesStore;
const { filter, setIsLoading } = filesStore;
const { isFavoritesFolder, isRecentFolder } = treeFoldersStore;
const isDesc = filter?.sortOrder === "desc";
return {
personal,
fetchFiles,
setIsLoading,
isFavoritesFolder,
isRecentFolder,

View File

@ -86,9 +86,7 @@ class ContextOptionsStore {
}
onOpenFolder = (item) => {
const { id, folderId, fileExst } = item;
const locationId = !fileExst ? id : folderId;
this.filesActionsStore.openLocationAction(locationId);
this.filesActionsStore.openLocationAction(item);
};
onClickLinkFillForm = (item) => {
@ -151,10 +149,8 @@ class ContextOptionsStore {
};
onClickMakeForm = (item, t) => {
const {
setConvertPasswordDialogVisible,
setFormCreationInfo,
} = this.dialogsStore;
const { setConvertPasswordDialogVisible, setFormCreationInfo } =
this.dialogsStore;
const { title, id, folderId, fileExst } = item;
const newTitle =
@ -190,8 +186,6 @@ class ContextOptionsStore {
};
onOpenLocation = (item) => {
const { parentId, folderId, fileExst } = item;
const locationId = !fileExst ? parentId : folderId;
this.filesActionsStore.openLocationAction(locationId);
};
@ -208,10 +202,8 @@ class ContextOptionsStore {
};
showVersionHistory = (id, security) => {
const {
fetchFileVersions,
setIsVerHistoryPanel,
} = this.versionHistoryStore;
const { fetchFileVersions, setIsVerHistoryPanel } =
this.versionHistoryStore;
if (this.treeFoldersStore.isRecycleBinFolder) return;
@ -241,9 +233,8 @@ class ContextOptionsStore {
lockFile = (item, t) => {
const { id, locked } = item;
const {
setSelection: setInfoPanelSelection,
} = this.authStore.infoPanelStore;
const { setSelection: setInfoPanelSelection } =
this.authStore.infoPanelStore;
this.filesActionsStore
.lockFileAction(id, !locked)
@ -408,19 +399,13 @@ class ContextOptionsStore {
};
onClickDeleteSelectedFolder = (t, isRoom) => {
const {
setIsFolderActions,
setDeleteDialogVisible,
setIsRoomDelete,
} = this.dialogsStore;
const { setIsFolderActions, setDeleteDialogVisible, setIsRoomDelete } =
this.dialogsStore;
const { confirmDelete } = this.settingsStore;
const { deleteAction, deleteRoomsAction } = this.filesActionsStore;
const { id: selectedFolderId } = this.selectedFolderStore;
const {
isThirdPartySelection,
getFolderInfo,
setBufferSelection,
} = this.filesStore;
const { isThirdPartySelection, getFolderInfo, setBufferSelection } =
this.filesStore;
setIsFolderActions(true);
@ -462,10 +447,8 @@ class ContextOptionsStore {
onClickDelete = (item, t) => {
const { id, title, providerKey, rootFolderId, isFolder, isRoom } = item;
const {
setRemoveItem,
setDeleteThirdPartyDialogVisible,
} = this.dialogsStore;
const { setRemoveItem, setDeleteThirdPartyDialogVisible } =
this.dialogsStore;
if (id === this.selectedFolderStore.id) {
this.onClickDeleteSelectedFolder(t, isRoom);
@ -1155,11 +1138,8 @@ class ContextOptionsStore {
const { personal } = this.authStore.settingsStore;
const { selection, allFilesIsEditing } = this.filesStore;
const { setDeleteDialogVisible } = this.dialogsStore;
const {
isRecycleBinFolder,
isRoomsFolder,
isArchiveFolder,
} = this.treeFoldersStore;
const { isRecycleBinFolder, isRoomsFolder, isArchiveFolder } =
this.treeFoldersStore;
const { pinRooms, unpinRooms, deleteRooms } = this.filesActionsStore;

View File

@ -1,6 +1,7 @@
import { makeAutoObservable } from "mobx";
import toastr from "@docspace/components/toast/toastr";
import { isMobile } from "react-device-detect";
import FilesFilter from "@docspace/common/api/files/filter";
class CreateEditRoomStore {
roomParams = null;
@ -136,12 +137,12 @@ class CreateEditRoomStore {
this.onClose();
}
!withPaging && this.onOpenNewRoom(room.id);
!withPaging && this.onOpenNewRoom(room);
URL.revokeObjectURL(img.src);
};
img.src = url;
});
} else !withPaging && this.onOpenNewRoom(room.id);
} else !withPaging && this.onOpenNewRoom(room);
this.roomIsCreated = true;
} catch (err) {
@ -156,20 +157,36 @@ class CreateEditRoomStore {
}
};
onOpenNewRoom = async (id) => {
const { fetchFiles } = this.filesStore;
onOpenNewRoom = async (room) => {
const { setIsLoading, clearFiles } = this.filesStore;
const { setView, setIsVisible } = this.infoPanelStore;
setView("info_members");
fetchFiles(id)
.then(() => {
!isMobile && setIsVisible(true);
})
.finally(() => {
this.setIsLoading(false);
this.setConfirmDialogIsLoading(false);
this.onClose();
});
const isEmpty = room.filesCount + room.foldersCount === 0;
const state = {
isRoot: false,
title: room.title,
isEmpty,
rootFolderType: room.rootFolderType,
};
const newFilter = FilesFilter.getDefault();
newFilter.folder = room.id;
setIsLoading(true);
clearFiles(isEmpty);
window.DocSpace.navigate(
`rooms/shared/${room.id}/filter?${newFilter.toUrlParams()}`,
{ state }
);
!isMobile && setIsVisible(true);
this.setIsLoading(false);
this.setConfirmDialogIsLoading(false);
this.onClose();
};
}

View File

@ -46,6 +46,10 @@ import { getObjectByLocation } from "@docspace/common/utils";
import uniqueid from "lodash/uniqueId";
import FilesFilter from "@docspace/common/api/files/filter";
import {
getCategoryTypeByFolderType,
getCategoryUrl,
} from "SRC_DIR/helpers/utils";
class FilesActionStore {
authStore;
@ -101,8 +105,9 @@ class FilesActionStore {
this.uploadDataStore.secondaryProgressDataStore;
const {
filter,
fetchFiles,
fetchRooms,
filter,
roomsFilter,
isEmptyLastPageAfterOperation,
@ -133,14 +138,16 @@ class FilesActionStore {
}
if (isRoomsFolder || isArchiveFolder || isArchiveFolderRoot) {
const currentFilter = newFilter ? newFilter : roomsFilter.clone();
window.DocSpace.navigate(
`${window.DocSpace.location.pathname}?${currentFilter.toUrlParams()}`
);
this.dialogsStore.setIsFolderActions(false);
return setTimeout(() => clearSecondaryProgressData(operationId), TIMEOUT);
fetchRooms(
updatedFolder,
newFilter ? newFilter : roomsFilter.clone()
).finally(() => {
this.dialogsStore.setIsFolderActions(false);
return setTimeout(
() => clearSecondaryProgressData(operationId),
TIMEOUT
);
});
} else {
fetchFiles(
updatedFolder,
@ -1224,28 +1231,71 @@ class FilesActionStore {
}
};
openLocationAction = async (locationId) => {
openLocationAction = async (item) => {
this.filesStore.setBufferSelection(null);
const files = await this.filesStore.fetchFiles(locationId, null);
return files;
const {
id,
title,
rootFolderType,
filesCount,
foldersCount,
} = item;
const categoryType = getCategoryTypeByFolderType(rootFolderType, id);
const isEmpty = filesCount === 0 && foldersCount === 0;
const state = { title, isEmpty, rootFolderType, isRoot: false };
const filter = FilesFilter.getDefault();
filter.folder = id;
const url = getCategoryUrl(categoryType, id);
this.filesStore.clearFiles(isEmpty);
this.filesStore.setIsLoading(true);
window.DocSpace.navigate(`${url}?${filter.toUrlParams()}`, { state });
};
checkAndOpenLocationAction = async (item) => {
const { filter, setHighlightFile, fetchFiles } = this.filesStore;
const newFilter = filter.clone();
const { setIsLoading, clearFiles, categoryType } = this.filesStore;
const { myRoomsId, myFolderId, archiveRoomsId, recycleBinFolderId } =
this.treeFoldersStore;
const { rootFolderType } = this.selectedFolderStore;
const { ExtraLocationTitle, ExtraLocation, fileExst } = item;
const isRoot =
ExtraLocation === myRoomsId ||
ExtraLocation === myFolderId ||
ExtraLocation === archiveRoomsId ||
ExtraLocation === recycleBinFolderId;
const isEmpty = false;
const state = {
title: ExtraLocationTitle,
isEmpty,
isRoot,
fileExst,
highlightFileId: item.id,
isFileHasExst: !item.fileExst,
rootFolderType,
};
const url = getCategoryUrl(categoryType, ExtraLocation);
const newFilter = FilesFilter.getDefault();
newFilter.page = 0;
newFilter.search = item.title;
newFilter.folder = ExtraLocation;
fetchFiles(item.ExtraLocation, newFilter)
.then(() => {
setHighlightFile({
highlightFileId: item.id,
isFileHasExst: !item.fileExst,
});
})
.catch((err) => toastr.error(err));
clearFiles(isEmpty);
setIsLoading(true);
window.DocSpace.navigate(`${url}?${newFilter.toUrlParams()}`, { state });
};
setThirdpartyInfo = (providerKey) => {
@ -2059,11 +2109,15 @@ class FilesActionStore {
let path = `rooms/shared`;
const state = {
title: this.selectedFolderStore?.navigationPath[0]?.title || "",
title:
this.selectedFolderStore?.navigationPath[
this.selectedFolderStore?.navigationPath.length - 1
]?.title || "",
isRoot: true,
isEmpty: false,
rootFolderType: this.selectedFolderStore.rootFolderType,
};
setIsLoading(true);
clearFiles(false);

View File

@ -1378,6 +1378,13 @@ class FilesStore {
})
.finally(() => {
this.setIsLoadedFetchFiles(true);
if (window?.DocSpace?.location?.state?.highlightFileId) {
this.setHighlightFile({
highlightFileId: window.DocSpace.location.state.highlightFileId,
isFileHasExst: window.DocSpace.location.state.isFileHasExst,
});
}
});
};

View File

@ -390,11 +390,8 @@ class UploadDataStore {
};
startConversion = async (t, isOpen = false) => {
const {
isRecentFolder,
isFavoritesFolder,
isShareFolder,
} = this.treeFoldersStore;
const { isRecentFolder, isFavoritesFolder, isShareFolder } =
this.treeFoldersStore;
if (!this.converted) return;
@ -777,14 +774,8 @@ class UploadDataStore {
};
refreshFiles = async (currentFile) => {
const {
files,
setFiles,
folders,
setFolders,
filter,
setFilter,
} = this.filesStore;
const { files, setFiles, folders, setFolders, filter, setFilter } =
this.filesStore;
const { withPaging } = this.authStore.settingsStore;
@ -1335,10 +1326,8 @@ class UploadDataStore {
deleteAfter,
operationId
) => {
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = this.secondaryProgressDataStore;
const { setSecondaryProgressBarData, clearSecondaryProgressData } =
this.secondaryProgressDataStore;
return copyToFolder(
destFolderId,
@ -1389,10 +1378,8 @@ class UploadDataStore {
deleteAfter,
operationId
) => {
const {
setSecondaryProgressBarData,
clearSecondaryProgressData,
} = this.secondaryProgressDataStore;
const { setSecondaryProgressBarData, clearSecondaryProgressData } =
this.secondaryProgressDataStore;
return moveToFolder(
destFolderId,
@ -1493,10 +1480,8 @@ class UploadDataStore {
};
loopFilesOperations = async (data, pbData, isDownloadAction) => {
const {
clearSecondaryProgressData,
setSecondaryProgressBarData,
} = this.secondaryProgressDataStore;
const { clearSecondaryProgressData, setSecondaryProgressBarData } =
this.secondaryProgressDataStore;
const label = this.secondaryProgressDataStore.label;
let progress = data.progress;
@ -1543,11 +1528,8 @@ class UploadDataStore {
removeFiles,
} = this.filesStore;
const {
clearSecondaryProgressData,
setSecondaryProgressBarData,
label,
} = this.secondaryProgressDataStore;
const { clearSecondaryProgressData, setSecondaryProgressBarData, label } =
this.secondaryProgressDataStore;
const { withPaging } = this.authStore.settingsStore;
let receivedFolder = destFolderId;
@ -1625,12 +1607,8 @@ class UploadDataStore {
};
clearActiveOperations = (fileIds = [], folderIds = []) => {
const {
activeFiles,
activeFolders,
setActiveFiles,
setActiveFolders,
} = this.filesStore;
const { activeFiles, activeFolders, setActiveFiles, setActiveFolders } =
this.filesStore;
const newActiveFiles = activeFiles.filter((el) => !fileIds?.includes(el));
const newActiveFolders = activeFolders.filter(