Merge branch 'release/v1.0.0' of https://github.com/ONLYOFFICE/DocSpace into release/v1.0.0

packages/client/src/components/EmptyContainer/EmptyFolderContainer.js

@@ -5,7 +5,7 @@ import EmptyScreenAltSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_alt_dark.sv
 import EmptyScreenCorporateSvgUrl from "PUBLIC_DIR/images/empty_screen_corporate.svg?url";
 import EmptyScreenCorporateDarkSvgUrl from "PUBLIC_DIR/images/empty_screen_corporate_dark.svg?url";
 import { inject, observer } from "mobx-react";
-import React from "react";
+import React, { useEffect } from "react";
 import { withTranslation } from "react-i18next";
 import EmptyContainer from "./EmptyContainer";
 import Link from "@docspace/components/link";
@@ -13,6 +13,7 @@ import Box from "@docspace/components/box";
 import { Text } from "@docspace/components";
 import { ReactSVG } from "react-svg";
 import Loaders from "@docspace/common/components/Loaders";
+import { showLoader, hideLoader } from "./EmptyFolderContainerUtils";
 
 const EmptyFolderContainer = ({
   t,
@@ -43,7 +44,7 @@ const EmptyFolderContainer = ({
       : fetchFiles(parentId).finally(() => setIsLoading(false));
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isLoadedFetchFiles && tReady) {
       setIsLoadedEmptyPage(true);
     } else {
@@ -51,7 +52,7 @@ const EmptyFolderContainer = ({
     }
   }, [isLoadedFetchFiles, tReady]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsEmptyPage(true);
 
     return () => {
@@ -149,14 +150,25 @@ const EmptyFolderContainer = ({
     ? EmptyScreenAltSvgUrl
     : EmptyScreenAltSvgDarkUrl;
 
+  useEffect(
+    () => (!isLoadedFetchFiles || !tReady ? showLoader() : hideLoader()),
+    [isLoadedFetchFiles, tReady]
+  );
+
   if (!isLoadedFetchFiles || !tReady) {
-    return <Loaders.EmptyContainerLoader viewAs={viewAs} />;
+    return (
+      <Loaders.EmptyContainerLoader
+        style={{ display: "none", marginTop: 32 }}
+        id="empty-container-loader"
+        viewAs={viewAs}
+      />
+    );
   }
 
   return (
     <EmptyContainer
       headerText={isRooms ? t("RoomCreated") : t("EmptyScreenFolder")}
-      style={{ gridColumnGap: "39px" }}
+      style={{ gridColumnGap: "39px", marginTop: 32 }}
       descriptionText={
         canCreateFiles
           ? t("EmptyFolderDecription")

packages/client/src/components/EmptyContainer/EmptyFolderContainerUtils.js

@@ -0,0 +1,21 @@
+let timer = null;
+
+const startInterval = () => {
+  const elem = document.getElementById("empty-container-loader");
+  if (elem) elem.style.display = "grid";
+};
+
+export function showLoader() {
+  hideLoader();
+  timer = setTimeout(() => startInterval(), 300);
+}
+
+export function hideLoader() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+
+  const elem = document.getElementById("empty-container-loader");
+  if (elem) elem.style.display = "none";
+}

packages/client/src/components/EmptyContainer/RootFolderContainer.js

@@ -2,7 +2,7 @@
 import PersonSvgUrl from "PUBLIC_DIR/images/person.svg?url";
 import PlusSvgUrl from "PUBLIC_DIR/images/plus.svg?url";
 import EmptyFolderImageSvgUrl from "PUBLIC_DIR/images/empty-folder-image.svg?url";
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import { FolderType } from "@docspace/common/constants";
 import { inject, observer } from "mobx-react";
@@ -33,6 +33,8 @@ import EmptyScreenTrashSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_trash_dar
 import EmptyScreenArchiveUrl from "PUBLIC_DIR/images/empty_screen_archive.svg?url";
 import EmptyScreenArchiveDarkUrl from "PUBLIC_DIR/images/empty_screen_archive_dark.svg?url";
 
+import { showLoader, hideLoader } from "./EmptyFolderContainerUtils";
+
 const StyledPlusIcon = styled(PlusIcon)`
   path {
     fill: #657077;
@@ -99,9 +101,7 @@ const RootFolderContainer = (props) => {
 
   const roomHeader = "Welcome to DocSpace";
 
-  const [showLoader, setShowLoader] = React.useState(false);
-
-  React.useEffect(() => {
+  useEffect(() => {
     if (rootFolderType !== FolderType.COMMON) {
       setIsEmptyPage(true);
     } else {
@@ -114,7 +114,7 @@ const RootFolderContainer = (props) => {
     };
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsLoadedEmptyPage(!isLoading);
   }, [isLoading]);
 
@@ -353,8 +353,16 @@ const RootFolderContainer = (props) => {
   const headerText = isPrivacyFolder ? privateRoomHeader : title;
   const emptyFolderProps = getEmptyFolderProps();
 
+  useEffect(() => (isLoading ? showLoader() : hideLoader()), [isLoading]);
+
   if (isLoading) {
-    return <Loaders.EmptyContainerLoader viewAs={viewAs} />;
+    return (
+      <Loaders.EmptyContainerLoader
+        style={{ display: "none", marginTop: 32 }}
+        id="empty-container-loader"
+        viewAs={viewAs}
+      />
+    );
   }
 
   return (
@@ -362,6 +370,7 @@ const RootFolderContainer = (props) => {
       headerText={headerText}
       isEmptyPage={isEmptyPage}
       sectionWidth={sectionWidth}
+      style={{ marginTop: 32 }}
       {...emptyFolderProps}
     />
   );

packages/client/src/components/GlobalEvents/CreateEvent.js

@@ -49,6 +49,7 @@ const CreateEvent = ({
   setEventDialogVisible,
   eventDialogVisible,
   keepNewFileName,
+  setPortalTariff,
 }) => {
   const [headerTitle, setHeaderTitle] = React.useState(null);
   const [startValue, setStartValue] = React.useState("");
@@ -119,6 +120,10 @@ const CreateEvent = ({
           )
         : null;
 
+    const isPaymentRequiredError = (err) => {
+      if (err?.response?.status === 402) setPortalTariff();
+    };
+
     if (!extension) {
       createFolder(parentId, newValue)
         .then((folder) => {
@@ -128,7 +133,10 @@ const CreateEvent = ({
           setCreatedItem({ id: createdFolderId, type: "folder" });
         })
         .then(() => completeAction(item, type, true))
-        .catch((e) => toastr.error(e))
+        .catch((e) => {
+          isPaymentRequiredError(e);
+          toastr.error(e);
+        })
         .finally(() => {
           const folderIds = [+id];
           createdFolderId && folderIds.push(createdFolderId);
@@ -149,6 +157,8 @@ const CreateEvent = ({
           })
           .then(() => completeAction(item, type))
           .catch((err) => {
+            isPaymentRequiredError(e);
+
             let errorMessage = "";
             if (typeof err === "object") {
               errorMessage =
@@ -208,7 +218,10 @@ const CreateEvent = ({
             return open && openDocEditor(file.id, file.providerKey, tab);
           })
           .then(() => completeAction(item, type))
-          .catch((e) => toastr.error(e))
+          .catch((e) => {
+            isPaymentRequiredError(e);
+            toastr.error(e);
+          })
           .finally(() => {
             const fileIds = [+id];
             createdFileId && fileIds.push(createdFileId);
@@ -244,7 +257,10 @@ const CreateEvent = ({
             return open && openDocEditor(file.id, file.providerKey, tab);
           })
           .then(() => completeAction(item, type))
-          .catch((e) => toastr.error(e))
+          .catch((e) => {
+            isPaymentRequiredError(e);
+            toastr.error(e);
+          })
           .finally(() => {
             const fileIds = [+id];
             createdFileId && fileIds.push(createdFileId);
@@ -311,10 +327,16 @@ export default inject(
 
     const { id: parentId } = selectedFolderStore;
 
-    const { replaceFileStream, setEncryptionAccess } = auth;
+    const {
+      replaceFileStream,
+      setEncryptionAccess,
+      currentTariffStatusStore,
+    } = auth;
 
     const { isDesktopClient } = auth.settingsStore;
 
+    const { setPortalTariff } = currentTariffStatusStore;
+
     const {
       setConvertPasswordDialogVisible,
       setEventDialogVisible,
@@ -325,6 +347,7 @@ export default inject(
     const { keepNewFileName } = settingsStore;
 
     return {
+      setPortalTariff,
       setEventDialogVisible,
       eventDialogVisible,
       setIsLoading,

packages/client/src/pages/AccountsHome/index.js

@@ -43,6 +43,7 @@ const PureHome = ({
   setSelectedNode,
   withPaging,
   onClickBack,
+  setPortalTariff,
 }) => {
   const { location } = history;
   const { pathname } = location;
@@ -63,11 +64,15 @@ const PureHome = ({
       setIsRefresh(true);
       const newFilter = Filter.getFilter(location);
       //console.log("PEOPLE URL changed", pathname, newFilter);
-      getUsersList(newFilter, true).finally(() => {
-        setFirstLoad(false);
-        setIsLoading(false);
-        setIsRefresh(false);
-      });
+      getUsersList(newFilter, true)
+        .catch((err) => {
+          if (err?.response?.status === 402) setPortalTariff();
+        })
+        .finally(() => {
+          setFirstLoad(false);
+          setIsLoading(false);
+          setIsRefresh(false);
+        });
     }
   }, [pathname, location, setSelectedNode]);
 
@@ -132,7 +137,8 @@ const Home = withTranslation("People")(PureHome);
 
 export default inject(
   ({ auth, peopleStore, treeFoldersStore, filesActionsStore }) => {
-    const { settingsStore } = auth;
+    const { settingsStore, currentTariffStatusStore } = auth;
+    const { setPortalTariff } = currentTariffStatusStore;
     const { showCatalog, withPaging } = settingsStore;
     const {
       usersStore,
@@ -153,6 +159,7 @@ export default inject(
     } = loadingStore;
 
     return {
+      setPortalTariff,
       isAdmin: auth.isAdmin,
       isLoading,
       getUsersList,

packages/client/src/pages/Home/Section/Filter/FilterUtils.js

@@ -0,0 +1,21 @@
+let timer = null;
+
+const startInterval = () => {
+  const elem = document.getElementById("filter-loader");
+  if (elem) elem.style.display = "grid";
+};
+
+export function showLoader() {
+  hideLoader();
+  timer = setTimeout(() => startInterval(), 300);
+}
+
+export function hideLoader() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+
+  const elem = document.getElementById("filter-loader");
+  if (elem) elem.style.display = "none";
+}

packages/client/src/pages/Home/Section/Filter/index.js

@@ -1,6 +1,6 @@
 import ViewRowsReactSvgUrl from "PUBLIC_DIR/images/view-rows.react.svg?url";
 import ViewTilesReactSvgUrl from "PUBLIC_DIR/images/view-tiles.react.svg?url";
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";
 import { withRouter } from "react-router";
@@ -26,6 +26,7 @@ import { getDefaultRoomName } from "@docspace/client/src/helpers/filesUtils";
 
 import withLoader from "../../../../HOCs/withLoader";
 import { TableVersions } from "SRC_DIR/helpers/constants";
+import { showLoader, hideLoader } from "./FilterUtils";
 
 const getFilterType = (filterValues) => {
   const filterType = result(
@@ -180,7 +181,7 @@ const SectionFilterContent = ({
   const [selectedFilterValues, setSelectedFilterValues] = React.useState(null);
   const [isLoadedFilter, setIsLoadedFilter] = React.useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isEmptyPage) {
       setIsLoadedFilter(isLoadedEmptyPage);
     }
@@ -1443,8 +1444,12 @@ const SectionFilterContent = ({
     }
   };
 
+  useEffect(() => (!!isLoadedFilter ? showLoader() : hideLoader()), [
+    isLoadedFilter,
+  ]);
+
   if (!isLoadedFilter) {
-    return <Loaders.Filter />;
+    return <Loaders.Filter style={{ display: "none" }} id="filter-loader" />;
   }
 
   return (

packages/client/src/pages/Home/index.js

@@ -552,12 +552,6 @@ class PureHome extends React.Component {
             </Section.SectionFilter>
           )}
 
-          {isLoadedEmptyPage && (
-            <Section.SectionFilter>
-              <div style={{ height: "32px" }} />
-            </Section.SectionFilter>
-          )}
-
           <Section.SectionBody>
             <Consumer>
               {(context) => (

packages/client/src/store/FilesStore.js

@@ -1295,6 +1295,9 @@ class FilesStore {
       })
       .catch((err) => {
         console.error(err);
+      
+        if (err?.response?.status === 402)
+          this.authStore.currentTariffStatusStore.setPortalTariff();
 
         if (requestCounter > 0) return;
 
@@ -1427,6 +1430,9 @@ class FilesStore {
           return Promise.resolve(selectedFolder);
         })
         .catch((err) => {
+          if (err?.response?.status === 402)
+            this.authStore.currentTariffStatusStore.setPortalTariff();
+
           if (axios.isCancel(err)) {
             console.log("Request canceled", err.message);
           } else {

packages/common/components/Loaders/EmptyContainerLoader/EmptyContainerLoader.js

@@ -3,7 +3,7 @@ import Loaders from "../../Loaders";
 import { isMobileOnly, isTablet } from "react-device-detect";
 import { size } from "@docspace/components/utils/device";
 
-const EmptyContainerLoader = ({ viewAs }) => {
+const EmptyContainerLoader = ({ viewAs, style, ...rest }) => {
   const [viewMobile, setViewMobile] = useState(false);
   const [viewTablet, setViewTablet] = useState(false);
 
@@ -33,7 +33,7 @@ const EmptyContainerLoader = ({ viewAs }) => {
   };
 
   return (
-    <>
+    <div {...rest} style={{ display: "contents", style }}>
       {viewAs === "tile" ? (
         !viewMobile && !viewTablet ? (
           <Loaders.Tiles filesCount={7} />
@@ -43,7 +43,7 @@ const EmptyContainerLoader = ({ viewAs }) => {
       ) : (
         <Loaders.Rows count={(viewMobile && 8) || (viewTablet && 12) || 9} />
       )}
-    </>
+    </div>
   );
 };