IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: add lazy loading for all client pages

Browse Source
This commit is contained in:
Timofey Boyko 2024-06-21 16:53:12 +03:00
parent 01185d8807
commit 6d9c54fba5
24 changed files with 612 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/Client.jsx
View File

@ -191,7 +191,7 @@ const ClientContent = (props) => {
);
};
const Client = inject(
export const Client = inject(
({
authStore,
clientLoadingStore,
@ -262,5 +262,3 @@ const Client = inject(
};
},
)(withTranslation("Common")(observer(ClientContent)));
export default () => <Client />;

28
packages/client/src/components/Error520Wrapper/index.tsx
View File

@ -33,17 +33,19 @@ const Error520Wrapper = (props: Error520Props) => {
return <Error520 {...props} />;
};
export default inject<TStore>(({ authStore, settingsStore, userStore }) => {
const { firebaseHelper, currentDeviceType, currentColorScheme } =
settingsStore;
const { user } = userStore;
const version = authStore.version;
export const Error520Component = inject<TStore>(
({ authStore, settingsStore, userStore }) => {
const { firebaseHelper, currentDeviceType, currentColorScheme } =
settingsStore;
const { user } = userStore;
const version = authStore.version;
return {
user,
version,
firebaseHelper,
currentDeviceType,
currentColorScheme,
};
})(observer(Error520Wrapper));
return {
user,
version,
firebaseHelper,
currentDeviceType,
currentColorScheme,
};
},
)(observer(Error520Wrapper));

2
packages/client/src/components/ErrorUnavailableWrapper/index.tsx
View File

@ -33,7 +33,7 @@ const ErrorUnavailableWrapper = (props: ErrorUnavailableProps) => {
return <ErrorUnavailable {...props} />;
};
export default inject<TStore>(({ settingsStore }) => {
export const Component = inject<TStore>(({ settingsStore }) => {
const { whiteLabelLogoUrls } = settingsStore;
return {

4
packages/client/src/components/System/index.js
View File

@ -29,7 +29,7 @@ import AppLoader from "@docspace/common/components/AppLoader";
import Error404 from "@docspace/shared/components/errors/Error404";
import ErrorBoundary from "../ErrorBoundaryWrapper";
import Error520 from "../Error520Wrapper";
import { Error520Component } from "../Error520Wrapper";
function loadComponent(scope, module) {
return async () => {
@ -115,7 +115,7 @@ const System = (props) => {
if (failed) {
console.log(`Failed to load dynamic script: ${props.system.url}`);
return <Error520 />;
return <Error520Component />;
}
const Component = React.lazy(

2
packages/client/src/components/dialogs/PreparationPortalDialog/index.js
View File

@ -28,7 +28,7 @@ import React from "react";
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
import { withTranslation } from "react-i18next";
import { inject, observer } from "mobx-react";
import PreparationPortal from "@docspace/shared/pages/PreparationPortal";
import { PreparationPortal } from "@docspace/shared/pages/PreparationPortal";
import StyledPreparationPortalDialog from "./StyledPreparationPortalDialog";
import { PRODUCT_NAME } from "@docspace/shared/constants";

4
packages/client/src/pages/About/index.js
View File

@ -49,7 +49,7 @@ const BodyWrapper = inject(({ settingsStore }) => {
};
})(withTranslation(["About", "Common"])(observer(Body)));
const About = (props) => {
export const About = (props) => {
return (
<SectionWrapper>
<Section.SectionHeader>
@ -61,5 +61,3 @@ const About = (props) => {
</SectionWrapper>
);
};
export default About;

2
packages/client/src/pages/FormGallery/index.js
View File

@ -127,7 +127,7 @@ const FormGallery = ({
);
};
export default inject(({ oformsStore }) => ({
export const WrappedComponent = inject(({ oformsStore }) => ({
oformsLoadError: oformsStore.oformsLoadError,
currentCategory: oformsStore.currentCategory,

4
packages/client/src/pages/Home/Section/SettingsBody/index.js
View File

@ -28,7 +28,7 @@ import React, { useCallback } from "react";
import { useTranslation } from "react-i18next";
import styled, { css } from "styled-components";
import Error520 from "../../../../components/Error520Wrapper";
import { Error520Component } from "../../../../components/Error520Wrapper";
import { inject, observer } from "mobx-react";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
import config from "PACKAGE_FILE";
@ -87,7 +87,7 @@ const SectionBodyContent = ({ isErrorSettings, user }) => {
//const showAdminSettings = user.isAdmin || user.isOwner;
return isErrorSettings ? (
<Error520 />
<Error520Component />
) : (
<StyledContainer>
<PersonalSettings

4
packages/client/src/pages/Home/View/Accounts.js
View File

@ -29,7 +29,7 @@ import { Consumer } from "@docspace/shared/utils";
import { AccountsSectionBodyContent } from "../Section";
const AccountsView = () => {
export const AccountsView = () => {
return (
<Consumer>
{(context) => (
@ -40,5 +40,3 @@ const AccountsView = () => {
</Consumer>
);
};
export default AccountsView;

4
packages/client/src/pages/Home/View/Files.js
View File

@ -29,7 +29,7 @@ import { Consumer } from "@docspace/shared/utils";
import { SectionBodyContent } from "../Section";
const FilesView = () => {
export const FilesView = () => {
return (
<Consumer>
{(context) => (
@ -42,5 +42,3 @@ const FilesView = () => {
</Consumer>
);
};
export default FilesView;

2
packages/client/src/pages/Home/index.js
View File

@ -422,7 +422,7 @@ const PureHome = (props) => {
const Home = withTranslation(["Files", "People"])(PureHome);
export default inject(
export const Component = inject(
({
authStore,
filesStore,

2
packages/client/src/pages/PortalUnavailable/index.js
View File

@ -123,7 +123,7 @@ const PortalUnavailable = ({ onLogoutClick }) => {
);
};
export default inject(({ profileActionsStore }) => {
export const Component = inject(({ profileActionsStore }) => {
const { onLogoutClick } = profileActionsStore;
return { onLogoutClick };

15
packages/client/src/pages/PublicPreview/PublicPreview.tsx
View File

@ -8,7 +8,7 @@ import { UrlActionType } from "@docspace/shared/enums";
import { toastr } from "@docspace/shared/components/toast";
import MediaViewer from "@docspace/shared/components/media-viewer/MediaViewer";
import { ViewerLoader } from "@docspace/shared/components/media-viewer/sub-components/ViewerLoader";
import Error403 from "@docspace/shared/components/errors/Error403";
import { Error403 } from "@docspace/shared/components/errors/Error403";
import type { TFile } from "@docspace/shared/api/files/types";
import type {
@ -132,9 +132,12 @@ const PublicPreview = ({
);
};
export default inject<TStore>(({ filesSettingsStore, settingsStore }) => {
const { getFilesSettings, getIcon, extsImagePreviewed } = filesSettingsStore;
const { openUrl } = settingsStore;
export const WrappedComponent = inject<TStore>(
({ filesSettingsStore, settingsStore }) => {
const { getFilesSettings, getIcon, extsImagePreviewed } =
filesSettingsStore;
const { openUrl } = settingsStore;
return { getFilesSettings, getIcon, openUrl, extsImagePreviewed };
})(observer(PublicPreview));
return { getFilesSettings, getIcon, openUrl, extsImagePreviewed };
},
)(observer(PublicPreview));

2
packages/client/src/pages/PublicRoom/index.js
View File

@ -127,7 +127,7 @@ const PublicRoom = (props) => {
);
};
export default inject(
export const WrappedComponent = inject(
({
settingsStore,
publicRoomStore,

2
packages/client/src/pages/Sdk/index.js
View File

@ -307,7 +307,7 @@ const Sdk = ({
return component;
};
export default inject(
export const Component = inject(
({
authStore,
settingsStore,

96
packages/client/src/pages/Wizard/index.js
View File

@ -525,54 +525,56 @@ const Wizard = (props) => {
);
};
export default inject(({ authStore, settingsStore, wizardStore }) => {
const {
passwordSettings,
wizardToken,
timezone,
urlLicense,
hashSettings,
setWizardComplete,
getPortalTimezones,
getPortalPasswordSettings,
theme,
} = settingsStore;
export const WrappedComponent = inject(
({ authStore, settingsStore, wizardStore }) => {
const {
passwordSettings,
wizardToken,
timezone,
urlLicense,
hashSettings,
setWizardComplete,
getPortalTimezones,
getPortalPasswordSettings,
theme,
} = settingsStore;
const { language } = authStore;
const {
isWizardLoaded,
machineName,
isLicenseRequired,
licenseUpload,
setIsWizardLoaded,
getMachineName,
getIsRequiredLicense,
const { language } = authStore;
const {
isWizardLoaded,
machineName,
isLicenseRequired,
licenseUpload,
setIsWizardLoaded,
getMachineName,
getIsRequiredLicense,
setLicense,
resetLicenseUploaded,
} = wizardStore;
setLicense,
resetLicenseUploaded,
} = wizardStore;
return {
theme,
isLoaded: authStore.isLoaded,
culture: language,
wizardToken,
passwordSettings,
timezone,
urlLicense,
hashSettings,
isWizardLoaded,
machineName,
isLicenseRequired,
licenseUpload,
setWizardComplete,
getPortalPasswordSettings,
getPortalTimezones,
setIsWizardLoaded,
getMachineName,
getIsRequiredLicense,
return {
theme,
isLoaded: authStore.isLoaded,
culture: language,
wizardToken,
passwordSettings,
timezone,
urlLicense,
hashSettings,
isWizardLoaded,
machineName,
isLicenseRequired,
licenseUpload,
setWizardComplete,
getPortalPasswordSettings,
getPortalTimezones,
setIsWizardLoaded,
getMachineName,
getIsRequiredLicense,
setLicense,
resetLicenseUploaded,
};
})(withCultureNames(observer(Wizard)));
setLicense,
resetLicenseUploaded,
};
},
)(withCultureNames(observer(Wizard)));

802
packages/client/src/routes/client.js
View File

@ -34,78 +34,38 @@ import Error404 from "@docspace/shared/components/errors/Error404";
import componentLoader from "@docspace/shared/utils/component-loader";
import ErrorBoundary from "../components/ErrorBoundaryWrapper";
import FilesView from "SRC_DIR/pages/Home/View/Files";
import AccountsView from "SRC_DIR/pages/Home/View/Accounts";
import SettingsView from "SRC_DIR/pages/Home/View/Settings";
const PublicPreview = loadable(() =>
componentLoader(() => import("../pages/PublicPreview/PublicPreview")),
);
import { generalRoutes } from "./general";
const Client = loadable(() => componentLoader(() => import("../Client")));
const Home = loadable(() => componentLoader(() => import("../pages/Home")));
const Sdk = loadable(() => componentLoader(() => import("../pages/Sdk")));
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("@docspace/shared/pages/PreparationPortal")),
);
const PortalUnavailable = loadable(() =>
componentLoader(() => import("../pages/PortalUnavailable")),
);
const ErrorUnavailable = loadable(() =>
componentLoader(() => import("../components/ErrorUnavailableWrapper")),
);
const Error401 = loadable(() =>
componentLoader(() => import("@docspace/shared/components/errors/Error401")),
);
const Error403 = loadable(() =>
componentLoader(() => import("@docspace/shared/components/errors/Error403")),
);
const Error520 = loadable(() =>
componentLoader(() => import("../components/Error520Wrapper")),
);
const ErrorAccessRestricted = loadable(() =>
componentLoader(
() => import("@docspace/shared/components/errors/AccessRestricted"),
),
);
const ErrorOffline = loadable(() =>
componentLoader(
() => import("@docspace/shared/components/errors/ErrorOffline"),
),
);
const ClientRoutes = [
{
path: "/",
element: (
<PrivateRoute>
<ErrorBoundary>
<Client />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { Client } = await import("SRC_DIR/Client");
const Component = () => (
<PrivateRoute>
<ErrorBoundary>
<Client />
</ErrorBoundary>
</PrivateRoute>
);
return { Component };
},
errorElement: <Error404 />,
children: [
{
path: "/",
element: <Home />,
async lazy() {
const { Component } = await import("SRC_DIR/pages/Home");
return { Component };
},
children: [
{
index: true,
@ -133,107 +93,237 @@ const ClientRoutes = [
},
{
path: "rooms/personal",
element: (
<PrivateRoute restricted withManager withCollaborator>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute restricted withManager withCollaborator>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "rooms/personal/filter",
element: (
<PrivateRoute restricted withManager withCollaborator>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute restricted withManager withCollaborator>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "files/trash",
element: (
<PrivateRoute restricted withManager withCollaborator>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute restricted withManager withCollaborator>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "files/trash/filter",
element: (
<PrivateRoute restricted withManager withCollaborator>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute restricted withManager withCollaborator>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "rooms/shared",
element: (
<PrivateRoute>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "rooms/shared/filter",
element: (
<PrivateRoute>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "rooms/shared/:room",
element: (
<PrivateRoute>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "rooms/shared/:room/filter",
element: (
<PrivateRoute>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "rooms/archived",
element: (
<PrivateRoute>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "rooms/archived/filter",
element: (
<PrivateRoute>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "rooms/archived/:room",
element: (
<PrivateRoute>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "rooms/archived/:room/filter",
element: (
<PrivateRoute>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "media/view/:id",
element: (
<PrivateRoute>
<FilesView />
</PrivateRoute>
),
async lazy() {
const { FilesView } = await import(
"SRC_DIR/pages/Home/View/Files"
);
const Component = () => {
return (
<PrivateRoute>
<FilesView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "accounts",
@ -273,11 +363,21 @@ const ClientRoutes = [
},
{
path: "accounts/people/filter",
element: (
<PrivateRoute restricted withManager>
<AccountsView />
</PrivateRoute>
),
async lazy() {
const { AccountsView } = await import(
"SRC_DIR/pages/Home/View/Accounts"
);
const Component = () => {
return (
<PrivateRoute restricted withManager>
<AccountsView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "accounts/groups",
@ -289,11 +389,21 @@ const ClientRoutes = [
},
{
path: "accounts/groups/filter",
element: (
<PrivateRoute restricted withManager>
<AccountsView />
</PrivateRoute>
),
async lazy() {
const { AccountsView } = await import(
"SRC_DIR/pages/Home/View/Accounts"
);
const Component = () => {
return (
<PrivateRoute restricted withManager>
<AccountsView />
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "accounts/groups/:groupId",
@ -305,36 +415,22 @@ const ClientRoutes = [
},
{
path: "accounts/groups/:groupId/filter",
element: (
<PrivateRoute restricted withManager>
<AccountsView />
</PrivateRoute>
),
async lazy() {
const { AccountsView } = await import(
"SRC_DIR/pages/Home/View/Accounts"
);
const Component = () => {
return (
<PrivateRoute restricted withManager>
<AccountsView />
</PrivateRoute>
);
};
return { Component };
},
},
/*{
path: "settings",
element: (
<PrivateRoute withCollaborator restricted>
<Navigate to="/settings/personal" replace />
</PrivateRoute>
),
},
{
path: "settings/personal",
element: (
<PrivateRoute withCollaborator restricted>
<SettingsView />
</PrivateRoute>
),
},
{
path: "settings/general",
element: (
<PrivateRoute withCollaborator restricted>
<SettingsView />
</PrivateRoute>
),
},*/
],
},
{
@ -355,186 +451,322 @@ const ClientRoutes = [
},
{
path: "/form-gallery",
element: (
<PrivateRoute>
<ErrorBoundary>
<FormGallery />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { WrappedComponent } = await import("SRC_DIR/pages/FormGallery");
const Component = () => (
<PrivateRoute>
<ErrorBoundary>
<WrappedComponent />
</ErrorBoundary>
</PrivateRoute>
);
return { Component };
},
},
{
path: "/form-gallery/:fromFolderId",
element: (
<PrivateRoute>
<ErrorBoundary>
<FormGallery />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { WrappedComponent } = await import("SRC_DIR/pages/FormGallery");
const Component = () => (
<PrivateRoute>
<ErrorBoundary>
<WrappedComponent />
</ErrorBoundary>
</PrivateRoute>
);
return { Component };
},
},
{
path: "/form-gallery/:fromFolderId/filter",
element: (
<PrivateRoute>
<ErrorBoundary>
<FormGallery />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { WrappedComponent } = await import("SRC_DIR/pages/FormGallery");
const Component = () => (
<PrivateRoute>
<ErrorBoundary>
<WrappedComponent />
</ErrorBoundary>
</PrivateRoute>
);
return { Component };
},
},
{
path: "/share/preview/:id",
element: (
<PublicRoute>
<ErrorBoundary>
<PublicPreview />
</ErrorBoundary>
</PublicRoute>
),
async lazy() {
const { WrappedComponent } = await import(
"SRC_DIR/pages/PublicPreview/PublicPreview"
);
const Component = () => (
<PublicRoute>
<ErrorBoundary>
<WrappedComponent />
</ErrorBoundary>
</PublicRoute>
);
return { Component };
},
},
{
path: "/rooms/share",
element: (
<PublicRoute>
<ErrorBoundary>
<PublicRoom />
</ErrorBoundary>
</PublicRoute>
),
async lazy() {
const { WrappedComponent } = await import("SRC_DIR/pages/PublicRoom");
const Component = () => (
<PublicRoute>
<ErrorBoundary>
<WrappedComponent />
</ErrorBoundary>
</PublicRoute>
);
return { Component };
},
errorElement: <Error404 />,
children: [
{
index: true,
element: (
<PublicRoute>
<FilesView />
</PublicRoute>
),
async lazy() {
const { FilesView } = await import("SRC_DIR/pages/Home/View/Files");
const Component = () => {
return (
<PublicRoute restricted withManager withCollaborator>
<FilesView />
</PublicRoute>
);
};
return { Component };
},
},
{
path: "media/view/:id",
element: (
<PublicRoute>
<FilesView />
</PublicRoute>
),
async lazy() {
const { FilesView } = await import("SRC_DIR/pages/Home/View/Files");
const Component = () => {
return (
<PublicRoute restricted withManager withCollaborator>
<FilesView />
</PublicRoute>
);
};
return { Component };
},
},
],
},
{
path: "/wizard",
element: (
<PublicRoute>
<ErrorBoundary>
<Wizard />
</ErrorBoundary>
</PublicRoute>
),
async lazy() {
const { WrappedComponent } = await import("SRC_DIR/pages/Wizard");
const Component = () => (
<PublicRoute>
<ErrorBoundary>
<WrappedComponent />
</ErrorBoundary>
</PublicRoute>
);
return { Component };
},
},
{
path: "/sdk/:mode",
element: <Sdk />,
lazy: () => import("SRC_DIR/pages/Sdk"),
},
{
path: "/about",
element: (
<PrivateRoute>
<ErrorBoundary>
<About />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { About } = await import("SRC_DIR/pages/About");
const Component = () => (
<PrivateRoute>
<ErrorBoundary>
<About />
</ErrorBoundary>
</PrivateRoute>
);
return { Component };
},
},
{
path: "/portal-unavailable",
element: (
<PrivateRoute>
<ErrorBoundary>
<PortalUnavailable />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { Component } = await import("SRC_DIR/pages/PortalUnavailable");
const WrappedComponent = () => (
<PrivateRoute>
<ErrorBoundary>
<Component />
</ErrorBoundary>
</PrivateRoute>
);
return { Component: WrappedComponent };
},
},
{
path: "/unavailable",
element: (
<PublicRoute>
<ErrorBoundary>
<ErrorUnavailable />
</ErrorBoundary>
</PublicRoute>
),
async lazy() {
const { Component } = await import(
"SRC_DIR/components/ErrorUnavailableWrapper"
);
const WrappedComponent = () => (
<PublicRoute>
<ErrorBoundary>
<Component />
</ErrorBoundary>
</PublicRoute>
);
return { Component: WrappedComponent };
},
},
{
path: "/access-restricted",
element: (
<PublicRoute>
<ErrorBoundary>
<ErrorAccessRestricted />
</ErrorBoundary>
</PublicRoute>
),
async lazy() {
const { AccessRestricted } = await import(
"@docspace/shared/components/errors/AccessRestricted"
);
const Component = () => (
<PublicRoute>
<ErrorBoundary>
<AccessRestricted />
</ErrorBoundary>
</PublicRoute>
);
return { Component };
},
},
{
path: "/preparation-portal",
element: (
<PublicRoute>
<ErrorBoundary>
<PreparationPortal />
</ErrorBoundary>
</PublicRoute>
),
async lazy() {
const { PreparationPortal } = await import(
"@docspace/shared/pages/PreparationPortal"
);
const Component = () => (
<PublicRoute>
<ErrorBoundary>
<PreparationPortal />
</ErrorBoundary>
</PublicRoute>
);
return { Component };
},
},
{
path: "/error/401",
element: (
<PrivateRoute>
<ErrorBoundary>
<Error401 />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { Error401 } = await import(
"@docspace/shared/components/errors/Error401"
);
const Component = () => {
return (
<PrivateRoute>
<ErrorBoundary>
<Error401 />
</ErrorBoundary>
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "/error/403",
element: (
<PrivateRoute>
<ErrorBoundary>
<Error403 />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { Error403 } = await import(
"@docspace/shared/components/errors/Error403"
);
const Component = () => {
return (
<PrivateRoute>
<ErrorBoundary>
<Error403 />
</ErrorBoundary>
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "/error/520",
element: (
<PrivateRoute>
<ErrorBoundary>
<Error520 />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { Error520Component } = await import(
"SRC_DIR/components/Error520Wrapper"
);
const Component = () => {
return (
<PrivateRoute>
<ErrorBoundary>
<Error520Component />
</ErrorBoundary>
</PrivateRoute>
);
};
return { Component };
},
},
{
path: "/error/access/restricted",
element: (
<PrivateRoute>
<ErrorBoundary>
<ErrorAccessRestricted />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { AccessRestricted } = await import(
"@docspace/shared/components/errors/AccessRestricted"
);
const Component = () => (
<PrivateRoute>
<ErrorBoundary>
<AccessRestricted />
</ErrorBoundary>
</PrivateRoute>
);
return { Component };
},
},
{
path: "/error/offline",
element: (
<PrivateRoute>
<ErrorBoundary>
<ErrorOffline />
</ErrorBoundary>
</PrivateRoute>
),
async lazy() {
const { ErrorOfflineContainer } = await import(
"@docspace/shared/components/errors/ErrorOffline"
);
const Component = () => (
<PrivateRoute>
<ErrorBoundary>
<ErrorOfflineContainer />
</ErrorBoundary>
</PrivateRoute>
);
return { Component };
},
},
];

2
packages/management/src/App.tsx
View File

@ -33,7 +33,7 @@ import { ThemeKeys } from "@docspace/shared/enums";
import { Toast } from "@docspace/shared/components/toast";
import { Portal } from "@docspace/shared/components/portal";
import AppLoader from "@docspace/shared/components/app-loader";
import Error403 from "@docspace/shared/components/errors/Error403";
import { Error403 } from "@docspace/shared/components/errors/Error403";
import tryRedirectTo from "@docspace/shared/utils/tryRedirectTo";

2
packages/management/src/router.tsx
View File

@ -41,7 +41,7 @@ import Bonus from "./categories/bonus";
import ErrorBoundary from "./components/ErrorBoundaryWrapper";
import Error404 from "@docspace/shared/components/errors/Error404";
import PreparationPortal from "@docspace/shared/pages/PreparationPortal";
import { PreparationPortal } from "@docspace/shared/pages/PreparationPortal";
const routes = [
{

4
packages/shared/components/errors/AccessRestricted.tsx
View File

@ -31,7 +31,7 @@ import ErrorContainer from "../error-container/ErrorContainer";
import { AccessRestrictedWrapper } from "./Errors.styled";
import { PRODUCT_NAME } from "../../constants";
const AccessRestricted = () => {
export const AccessRestricted = () => {
const { t, ready } = useTranslation("Common");
useEffect(() => {
@ -49,5 +49,3 @@ const AccessRestricted = () => {
)
);
};
export default AccessRestricted;

4
packages/shared/components/errors/Error401.tsx
View File

@ -27,10 +27,8 @@
import { useTranslation } from "react-i18next";
import ErrorContainer from "../error-container/ErrorContainer";
const Error401 = () => {
export const Error401 = () => {
const { t } = useTranslation("Common");
return <ErrorContainer headerText={t("Error401Text")} />;
};
export default Error401;

4
packages/shared/components/errors/Error403.tsx
View File

@ -29,10 +29,8 @@ import { useTranslation } from "react-i18next";
import ErrorContainer from "../error-container/ErrorContainer";
const Error403 = () => {
export const Error403 = () => {
const { t } = useTranslation("Common");
return <ErrorContainer headerText={t("Error403Text")} />;
};
export default Error403;

4
packages/shared/components/errors/ErrorOffline.tsx
View File

@ -29,10 +29,8 @@ import { useTranslation } from "react-i18next";
import ErrorContainer from "../error-container/ErrorContainer";
const ErrorOfflineContainer = () => {
export const ErrorOfflineContainer = () => {
const { t } = useTranslation("Common");
return <ErrorContainer headerText={t("ErrorOfflineText")} />;
};
export default ErrorOfflineContainer;

4
packages/shared/pages/PreparationPortal/index.tsx
View File

@ -46,7 +46,7 @@ const secondBound = 63;
let timerId: ReturnType<typeof setInterval> | null;
let progressTimerId: ReturnType<typeof setInterval> | null;
const PreparationPortal = (props: IPreparationPortal) => {
export const PreparationPortal = (props: IPreparationPortal) => {
const { withoutHeader, style, isDialog } = props;
const { t } = useTranslation(["PreparationPortal", "Common"]);
@ -127,5 +127,3 @@ const PreparationPortal = (props: IPreparationPortal) => {
</StyledPreparationPortal>
);
};
export default PreparationPortal;