From 1c898a0083fcf559ae285b1a5f5424cd94ca17ff Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Tue, 20 Feb 2024 12:15:00 +0300 Subject: [PATCH] Client: add component loader for fix failed upload chunk --- packages/client/src/routes/client.js | 37 ++-- packages/client/src/routes/confirm.js | 41 +++-- packages/client/src/routes/general.js | 6 +- packages/client/src/routes/portalSettings.js | 165 ++++++++++++------ packages/components/utils/component-loader.ts | 22 +++ 5 files changed, 191 insertions(+), 80 deletions(-) create mode 100644 packages/components/utils/component-loader.ts diff --git a/packages/client/src/routes/client.js b/packages/client/src/routes/client.js index e758382415..71241fdcaf 100644 --- a/packages/client/src/routes/client.js +++ b/packages/client/src/routes/client.js @@ -5,6 +5,7 @@ import loadable from "@loadable/component"; import PrivateRoute from "@docspace/common/components/PrivateRoute"; import PublicRoute from "@docspace/common/components/PublicRoute"; import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import componentLoader from "@docspace/components/utils/component-loader"; import Error404 from "SRC_DIR/pages/Errors/404"; import FilesView from "SRC_DIR/pages/Home/View/Files"; @@ -13,24 +14,36 @@ import SettingsView from "SRC_DIR/pages/Home/View/Settings"; import { generalRoutes } from "./general"; -const Client = loadable(() => import("../Client")); +const Client = loadable(() => componentLoader(() => import("../Client"))); -const Home = loadable(() => import("../pages/Home")); +const Home = loadable(() => componentLoader(() => import("../pages/Home"))); -const Sdk = loadable(() => import("../pages/Sdk")); +const Sdk = loadable(() => componentLoader(() => import("../pages/Sdk"))); -const FormGallery = loadable(() => import("../pages/FormGallery")); -const PublicRoom = loadable(() => import("../pages/PublicRoom")); -const About = loadable(() => import("../pages/About")); -const Wizard = loadable(() => import("../pages/Wizard")); -const PreparationPortal = loadable(() => import("../pages/PreparationPortal")); -const PortalUnavailable = loadable(() => import("../pages/PortalUnavailable")); -const ErrorUnavailable = loadable(() => import("../pages/Errors/Unavailable")); +const FormGallery = loadable(() => + componentLoader(() => import("../pages/FormGallery")) +); +const PublicRoom = loadable(() => + componentLoader(() => import("../pages/PublicRoom")) +); +const About = loadable(() => componentLoader(() => import("../pages/About"))); +const Wizard = loadable(() => componentLoader(() => import("../pages/Wizard"))); +const PreparationPortal = loadable(() => + componentLoader(() => import("../pages/PreparationPortal")) +); +const PortalUnavailable = loadable(() => + componentLoader(() => import("../pages/PortalUnavailable")) +); +const ErrorUnavailable = loadable(() => + componentLoader(() => import("../pages/Errors/Unavailable")) +); const AccessRestricted = loadable(() => - import("../pages/Errors/AccessRestricted") + componentLoader(() => import("../pages/Errors/AccessRestricted")) ); -const Error401 = loadable(() => import("client/Error401")); +const Error401 = loadable(() => + componentLoader(() => import("client/Error401")) +); const ClientRoutes = [ { diff --git a/packages/client/src/routes/confirm.js b/packages/client/src/routes/confirm.js index 76737071a3..de0602cc15 100644 --- a/packages/client/src/routes/confirm.js +++ b/packages/client/src/routes/confirm.js @@ -3,52 +3,63 @@ import loadable from "@loadable/component"; import ConfirmRoute from "../helpers/confirmRoute"; import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import componentLoader from "@docspace/components/utils/component-loader"; import Error404 from "SRC_DIR/pages/Errors/404"; import { AuthenticatedAction } from "../helpers/constants"; -const Confirm = loadable(() => import("../pages/Confirm")); +const Confirm = loadable(() => + componentLoader(() => import("../pages/Confirm")) +); const ActivateUserForm = loadable(() => - import("../pages/Confirm/sub-components/activateUser") + componentLoader(() => import("../pages/Confirm/sub-components/activateUser")) ); const CreateUserForm = loadable(() => - import("../pages/Confirm/sub-components/createUser") + componentLoader(() => import("../pages/Confirm/sub-components/createUser")) ); const ChangePasswordForm = loadable(() => - import("../pages/Confirm/sub-components/changePassword") + componentLoader(() => + import("../pages/Confirm/sub-components/changePassword") + ) ); const ActivateEmailForm = loadable(() => - import("../pages/Confirm/sub-components/activateEmail") + componentLoader(() => import("../pages/Confirm/sub-components/activateEmail")) ); const ChangeEmailForm = loadable(() => - import("../pages/Confirm/sub-components/changeEmail") + componentLoader(() => import("../pages/Confirm/sub-components/changeEmail")) ); const ChangePhoneForm = loadable(() => - import("../pages/Confirm/sub-components/changePhone") + componentLoader(() => import("../pages/Confirm/sub-components/changePhone")) ); const ProfileRemoveForm = loadable(() => - import("../pages/Confirm/sub-components/profileRemove") + componentLoader(() => import("../pages/Confirm/sub-components/profileRemove")) ); const ChangeOwnerForm = loadable(() => - import("../pages/Confirm/sub-components/changeOwner") + componentLoader(() => import("../pages/Confirm/sub-components/changeOwner")) ); const TfaAuthForm = loadable(() => - import("../pages/Confirm/sub-components/tfaAuth") + componentLoader(() => import("../pages/Confirm/sub-components/tfaAuth")) ); const TfaActivationForm = loadable(() => - import("../pages/Confirm/sub-components/tfaActivation") + componentLoader(() => import("../pages/Confirm/sub-components/tfaActivation")) ); const RemovePortal = loadable(() => - import("../pages/Confirm/sub-components/removePortal") + componentLoader(() => import("../pages/Confirm/sub-components/removePortal")) ); const DeactivatePortal = loadable(() => - import("../pages/Confirm/sub-components/deactivatePortal") + componentLoader(() => + import("../pages/Confirm/sub-components/deactivatePortal") + ) ); const ContinuePortal = loadable(() => - import("../pages/Confirm/sub-components/continuePortal") + componentLoader(() => + import("../pages/Confirm/sub-components/continuePortal") + ) +); +const Auth = loadable(() => + componentLoader(() => import("../pages/Confirm/sub-components/auth")) ); -const Auth = loadable(() => import("../pages/Confirm/sub-components/auth")); const confirmRoutes = [ { diff --git a/packages/client/src/routes/general.js b/packages/client/src/routes/general.js index 55008ca8f5..58f477a317 100644 --- a/packages/client/src/routes/general.js +++ b/packages/client/src/routes/general.js @@ -1,11 +1,13 @@ import React from "react"; import { Navigate } from "react-router-dom"; - import loadable from "@loadable/component"; import PrivateRoute from "@docspace/common/components/PrivateRoute"; +import componentLoader from "@docspace/components/utils/component-loader"; -const Profile = loadable(() => import("../pages/Profile")); +const Profile = loadable(() => + componentLoader(() => import("../pages/Profile")) +); const generalRoutes = [ { diff --git a/packages/client/src/routes/portalSettings.js b/packages/client/src/routes/portalSettings.js index 1ce45bad8e..16617f401d 100644 --- a/packages/client/src/routes/portalSettings.js +++ b/packages/client/src/routes/portalSettings.js @@ -4,136 +4,199 @@ import loadable from "@loadable/component"; import PrivateRoute from "@docspace/common/components/PrivateRoute"; import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; +import componentLoader from "@docspace/components/utils/component-loader"; import Error404 from "SRC_DIR/pages/Errors/404"; import { generalRoutes } from "./general"; -const PortalSettings = loadable(() => import("../pages/PortalSettings")); +const PortalSettings = loadable(() => + componentLoader(() => import("../pages/PortalSettings")) +); const CustomizationSettings = loadable(() => - import("../pages/PortalSettings/categories/common/index.js") + componentLoader(() => + import("../pages/PortalSettings/categories/common/index.js") + ) ); const LanguageAndTimeZoneSettings = loadable(() => - import( - "../pages/PortalSettings/categories/common/Customization/language-and-time-zone" + componentLoader(() => + import( + "../pages/PortalSettings/categories/common/Customization/language-and-time-zone" + ) ) ); const WelcomePageSettings = loadable(() => - import( - "../pages/PortalSettings/categories/common/Customization/welcome-page-settings" + componentLoader(() => + import( + "../pages/PortalSettings/categories/common/Customization/welcome-page-settings" + ) ) ); const DNSSettings = loadable(() => - import("../pages/PortalSettings/categories/common/Customization/dns-settings") + componentLoader(() => + import( + "../pages/PortalSettings/categories/common/Customization/dns-settings" + ) + ) ); const PortalRenaming = loadable(() => - import( - "../pages/PortalSettings/categories/common/Customization/portal-renaming" + componentLoader(() => + import( + "../pages/PortalSettings/categories/common/Customization/portal-renaming" + ) ) ); const WhiteLabel = loadable(() => - import("../pages/PortalSettings/categories/common/Branding/whitelabel") + componentLoader(() => + import("../pages/PortalSettings/categories/common/Branding/whitelabel") + ) ); const CompanyInfoSettings = loadable(() => - import( - "../pages/PortalSettings/categories/common/Branding/companyInfoSettings" + componentLoader(() => + import( + "../pages/PortalSettings/categories/common/Branding/companyInfoSettings" + ) ) ); const AdditionalResources = loadable(() => - import( - "../pages/PortalSettings/categories/common/Branding/additionalResources" + componentLoader(() => + import( + "../pages/PortalSettings/categories/common/Branding/additionalResources" + ) ) ); const SecuritySettings = loadable(() => - import("../pages/PortalSettings/categories/security/index.js") + componentLoader(() => + import("../pages/PortalSettings/categories/security/index.js") + ) ); const TfaPage = loadable(() => - import("../pages/PortalSettings/categories/security/access-portal/tfa") + componentLoader(() => + import("../pages/PortalSettings/categories/security/access-portal/tfa") + ) ); const PasswordStrengthPage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/passwordStrength" + componentLoader(() => + import( + "../pages/PortalSettings/categories/security/access-portal/passwordStrength" + ) ) ); const TrustedMailPage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/trustedMail" + componentLoader(() => + import( + "../pages/PortalSettings/categories/security/access-portal/trustedMail" + ) ) ); const IpSecurityPage = loadable(() => - import("../pages/PortalSettings/categories/security/access-portal/ipSecurity") + componentLoader(() => + import( + "../pages/PortalSettings/categories/security/access-portal/ipSecurity" + ) + ) ); const BruteForceProtectionPage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/bruteForceProtection" + componentLoader(() => + import( + "../pages/PortalSettings/categories/security/access-portal/bruteForceProtection" + ) ) ); const AdminMessagePage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/adminMessage" + componentLoader(() => + import( + "../pages/PortalSettings/categories/security/access-portal/adminMessage" + ) ) ); const SessionLifetimePage = loadable(() => - import( - "../pages/PortalSettings/categories/security/access-portal/sessionLifetime" + componentLoader(() => + import( + "../pages/PortalSettings/categories/security/access-portal/sessionLifetime" + ) ) ); const Integration = loadable(() => - import("../pages/PortalSettings/categories/integration") + componentLoader(() => + import("../pages/PortalSettings/categories/integration") + ) ); const Payments = loadable(() => - import("../pages/PortalSettings/categories/payments") + componentLoader(() => import("../pages/PortalSettings/categories/payments")) ); const ThirdParty = loadable(() => - import( - "../pages/PortalSettings/categories/integration/ThirdPartyServicesSettings" + componentLoader(() => + import( + "../pages/PortalSettings/categories/integration/ThirdPartyServicesSettings" + ) ) ); const DocumentService = loadable(() => - import("../pages/PortalSettings/categories/integration/DocumentService") + componentLoader(() => + import("../pages/PortalSettings/categories/integration/DocumentService") + ) ); const SingleSignOn = loadable(() => - import("../pages/PortalSettings/categories/integration/SingleSignOn") + componentLoader(() => + import("../pages/PortalSettings/categories/integration/SingleSignOn") + ) ); const SPSettings = loadable(() => - import( - "../pages/PortalSettings/categories/integration/SingleSignOn/SPSettings" + componentLoader(() => + import( + "../pages/PortalSettings/categories/integration/SingleSignOn/SPSettings" + ) ) ); const SPMetadata = loadable(() => - import( - "../pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata" + componentLoader(() => + import( + "../pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata" + ) ) ); const DeveloperTools = loadable(() => - import("../pages/PortalSettings/categories/developer-tools/index.js") + componentLoader(() => + import("../pages/PortalSettings/categories/developer-tools/index.js") + ) ); const WebhookHistory = loadable(() => - import( - "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory" + componentLoader(() => + import( + "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory" + ) ) ); const WebhookDetails = loadable(() => - import( - "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails" + componentLoader(() => + import( + "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails" + ) ) ); const Backup = loadable(() => - import("../pages/PortalSettings/categories/data-management/index") -); -const DeleteDataPage = loadable(() => - import("../pages/PortalSettings/categories/delete-data") -); -const RestoreBackup = loadable(() => - import( - "../pages/PortalSettings/categories/data-management/backup/restore-backup/index" + componentLoader(() => + import("../pages/PortalSettings/categories/data-management/index") ) ); -const Bonus = loadable(() => import("../pages/Bonus")); +const DeleteDataPage = loadable(() => + componentLoader(() => + import("../pages/PortalSettings/categories/delete-data") + ) +); +const RestoreBackup = loadable(() => + componentLoader(() => + import( + "../pages/PortalSettings/categories/data-management/backup/restore-backup/index" + ) + ) +); +const Bonus = loadable(() => componentLoader(() => import("../pages/Bonus"))); const PortalSettingsRoutes = { path: "portal-settings/", diff --git a/packages/components/utils/component-loader.ts b/packages/components/utils/component-loader.ts new file mode 100644 index 0000000000..4f3f2d3b2f --- /dev/null +++ b/packages/components/utils/component-loader.ts @@ -0,0 +1,22 @@ +export default function componentLoader( + lazyComponent: Function, + attemptsLeft: number = 3 +) { + return new Promise((resolve, reject) => { + lazyComponent() + .then(resolve) + .catch((error: unknown) => { + // let us retry after 1500 ms + setTimeout(() => { + if (attemptsLeft === 1) { + reject(error); + return; + } + componentLoader(lazyComponent, attemptsLeft - 1).then( + resolve, + reject + ); + }, 1500); + }); + }); +}