Merge branch 'bugfix/tile-rerender' of github.com:ONLYOFFICE/DocSpace-client into bugfix/tile-rerender

This commit is contained in:
Akmal Isomadinov 2024-08-23 16:10:41 +05:00
commit 42861136fd
14 changed files with 71 additions and 69 deletions

View File

@ -25,13 +25,19 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { permanentRedirect, redirect } from "next/navigation";
import dynamic from "next/dynamic";
import { getBaseUrl } from "@docspace/shared/utils/next-ssr-helper";
import { EditorConfigErrorType } from "@docspace/shared/enums";
import { createFile, fileCopyAs, getEditorUrl } from "@/utils/actions";
import CreateFileError from "@/components/CreateFileError";
import Editor from "@/components/Editor";
import { EditorConfigErrorType } from "@docspace/shared/enums";
const Editor = dynamic(() => import("@/components/Editor"), {
ssr: false,
});
const CreateFileError = dynamic(() => import("@/components/CreateFileError"), {
ssr: false,
});
type TSearchParams = {
parentId: string;

View File

@ -55,18 +55,14 @@ export default async function RootLayout({
return <></>;
}
const startDate = new Date();
const [user, settings, colorTheme] = await Promise.all([
getUser(),
getSettings(),
getColorTheme(),
]);
const timer = new Date().getTime() - startDate.getTime();
if (settings === "access-restricted") redirect(`${getBaseUrl()}/${settings}`);
const api_host = process.env.API_HOST?.trim();
return (
<html lang="en" translate="no">
<head>
@ -82,11 +78,7 @@ export default async function RootLayout({
</head>
<body>
<StyledComponentsRegistry>
<Providers
contextData={{ user, settings, systemTheme, colorTheme }}
api_host={api_host}
timer={timer}
>
<Providers contextData={{ user, settings, systemTheme, colorTheme }}>
{children}
</Providers>
</StyledComponentsRegistry>

View File

@ -26,6 +26,7 @@
import { headers } from "next/headers";
import Script from "next/script";
import dynamic from "next/dynamic";
import { getSelectorsByUserAgent } from "react-device-detect";
@ -34,7 +35,10 @@ import { ValidationStatus } from "@docspace/shared/enums";
import { getData, validatePublicRoomKey } from "@/utils/actions";
import { RootPageProps } from "@/types";
import Root from "@/components/Root";
import FilePassword from "@/components/file-password";
const FilePassword = dynamic(() => import("@/components/file-password"), {
ssr: false,
});
const initialSearchParams: RootPageProps["searchParams"] = {
fileId: undefined,

View File

@ -27,7 +27,7 @@
"use client";
import React from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useSearchParams } from "next/navigation";
import { useTranslation } from "react-i18next";
import { DocumentEditor } from "@onlyoffice/document-editor-react";
@ -51,7 +51,6 @@ import {
} from "@/utils/events";
import useInit from "@/hooks/useInit";
import useEditorEvents from "@/hooks/useEditorEvents";
import useFilesSettings from "@/hooks/useFilesSettings";
type IConfigType = IConfig & {
events?: {
@ -77,6 +76,8 @@ const Editor = ({
errorMessage,
isSkipError,
filesSettings,
onDownloadAs,
onSDKRequestSharingSettings,
onSDKRequestSaveAs,
@ -88,9 +89,7 @@ const Editor = ({
}: EditorProps) => {
const { t, i18n } = useTranslation(["Common", "Editor", "DeepLink"]);
const router = useRouter();
const searchParams = useSearchParams();
const { filesSettings } = useFilesSettings({});
const openOnNewPage = IS_ZOOM ? false : !filesSettings?.openEditorInSameTab;

View File

@ -9,7 +9,6 @@ import type { TFirebaseSettings } from "@docspace/shared/api/settings/types";
import useI18N from "@/hooks/useI18N";
import useTheme from "@/hooks/useTheme";
import useDeviceType from "@/hooks/useDeviceType";
import useWhiteLabel from "@/hooks/useWhiteLabel";
import pkg from "../../../package.json";
@ -18,7 +17,7 @@ import { ErrorProps } from "./Error.types";
const Error = ({ settings, user, error }: ErrorProps) => {
const { i18n } = useI18N({ settings, user });
const { currentDeviceType } = useDeviceType();
const { logoUrls } = useWhiteLabel();
const { theme } = useTheme({ user });
const firebaseHelper = useMemo(() => {
@ -32,7 +31,6 @@ const Error = ({ settings, user, error }: ErrorProps) => {
errorLog={error}
version={pkg.version}
user={user ?? ({} as TUser)}
whiteLabelLogoUrls={logoUrls}
firebaseHelper={firebaseHelper}
currentDeviceType={currentDeviceType}
/>

View File

@ -25,15 +25,21 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
"use client";
import dynamic from "next/dynamic";
import React, { useEffect } from "react";
import React from "react";
import { useTranslation } from "react-i18next";
import ErrorContainer from "@docspace/shared/components/error-container/ErrorContainer";
const ErrorContainer = dynamic(
() => import("@docspace/shared/components/error-container/ErrorContainer"),
{
ssr: false,
},
);
import { TResponse } from "@/types";
import useError from "@/hooks/useError";
import useError from "@/hooks/useError";
import useRootInit from "@/hooks/useRootInit";
import useDeepLink from "@/hooks/useDeepLink";
import useSelectFileDialog from "@/hooks/useSelectFileDialog";
@ -44,14 +50,31 @@ import useFilesSettings from "@/hooks/useFilesSettings";
import useUpdateSearchParamId from "@/hooks/useUpdateSearchParamId";
import useStartFillingSelectDialog from "@/hooks/useStartFillingSelectDialog";
import DeepLink from "./deep-link";
import Editor from "./Editor";
import SelectFileDialog from "./SelectFileDialog";
import SelectFolderDialog from "./SelectFolderDialog";
import SharingDialog from "./ShareDialog";
const DeepLink = dynamic(() => import("./deep-link"), {
ssr: false,
});
const SelectFileDialog = dynamic(() => import("./SelectFileDialog"), {
ssr: false,
});
const SelectFolderDialog = dynamic(() => import("./SelectFolderDialog"), {
ssr: false,
});
const SharingDialog = dynamic(() => import("./ShareDialog"), {
ssr: false,
});
const StartFillingSelectorDialog = dynamic(
() => import("./StartFillingSelectDialog"),
{
ssr: false,
},
);
const ConflictResolveDialog = dynamic(() => import("./ConflictResolveDialog"), {
ssr: false,
});
import { calculateAsideHeight } from "@/utils";
import StartFillingSelectorDialog from "./StartFillingSelectDialog";
import ConflictResolveDialog from "./ConflictResolveDialog";
const Root = ({
settings,
@ -64,7 +87,6 @@ const Root = ({
doc,
fileId,
hash,
timer,
}: TResponse) => {
const editorRef = React.useRef<null | HTMLElement>(null);
@ -81,11 +103,6 @@ const Root = ({
const { t } = useTranslation(["Editor", "Common"]);
useEffect(() => {
console.log("editor timer: ", timer);
console.log("openEdit timer: ", config?.timer);
}, [config?.timer, timer]);
useRootInit({
documentType: config?.documentType,
});
@ -214,6 +231,7 @@ const Root = ({
errorMessage={error?.message}
isSkipError={!!isSkipError}
onDownloadAs={onDownloadAs}
filesSettings={filesSettings}
onSDKRequestSharingSettings={onSDKRequestSharingSettings}
onSDKRequestSaveAs={onSDKRequestSaveAs}
onSDKRequestInsertImage={onSDKRequestInsertImage}

View File

@ -178,7 +178,7 @@ const FilePassword = ({ shareKey, title, entryTitle }: FilePasswordProps) => {
id="password"
inputName="password"
placeholder={t("Common:Password")}
type={InputType.password}
inputType={InputType.password}
inputValue={password}
hasError={!!errorMessage}
size={InputSize.large}

View File

@ -30,28 +30,21 @@ import { getSettingsFiles } from "@docspace/shared/api/files";
import { TFilesSettings } from "@docspace/shared/api/files/types";
const useFilesSettings = ({}) => {
const [settings, setSettings] = React.useState({} as TFilesSettings);
const requestRunning = React.useRef(false);
const initSettings = React.useCallback(async () => {
if (requestRunning.current) return;
requestRunning.current = true;
const res = await getSettingsFiles();
setSettings(res);
requestRunning.current = false;
}, []);
const [settings, setSettings] = React.useState<TFilesSettings>(
{} as TFilesSettings,
);
React.useEffect(() => {
if (settings.extsArchive) return;
const initSettings = async () => {
const res = await getSettingsFiles();
setSettings(res);
};
initSettings();
}, [initSettings, settings.extsArchive]);
}, []);
return { filesSettings: settings };
};
export default useFilesSettings;

View File

@ -95,7 +95,7 @@ const useSocketHelper = ({ socketUrl, user }: UseSocketHelperProps) => {
});
setSocketHelper(socketIOHelper);
}, [socketHelper, socketUrl]);
}, [socketHelper, socketUrl, user?.id, user?.loginEventId]);
return { socketHelper };
};

View File

@ -90,17 +90,17 @@ const useTheme = ({
const isRequestRunning = React.useRef(false);
const getCurrentColorTheme = React.useCallback(async () => {
if (isRequestRunning.current) return;
if (isRequestRunning.current || colorTheme) return;
isRequestRunning.current = true;
const colorThemes = await getAppearanceTheme();
const colorTheme = colorThemes.themes.find(
const curColorTheme = colorThemes.themes.find(
(t) => t.id === colorThemes.selected,
);
isRequestRunning.current = false;
if (colorTheme) setCurrentColorTheme(colorTheme);
}, []);
if (curColorTheme) setCurrentColorTheme(curColorTheme);
}, [colorTheme]);
const getUserTheme = React.useCallback(() => {
const SYSTEM_THEME = getSystemTheme();

View File

@ -44,16 +44,9 @@ const TranslationProvider = ({
children,
settings,
user,
api_host,
timer,
}: TTranslationProvider) => {
const { i18n } = useI18N({ settings, user });
React.useEffect(() => {
console.log("API_HOST: ", api_host);
console.log("LAYOUT API timer:", timer);
}, [api_host, timer]);
return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
};

View File

@ -48,9 +48,9 @@ export type TProviders = {
contextData: TContextData;
};
const Providers = ({ children, contextData, api_host, timer }: TProviders) => {
const Providers = ({ children, contextData }: TProviders) => {
return (
<TranslationProvider {...contextData} api_host={api_host} timer={timer}>
<TranslationProvider {...contextData}>
<ThemeProvider {...contextData}>
<ErrorProvider {...contextData}>
{children}

View File

@ -229,6 +229,7 @@ export type EditorProps = {
isSharingAccess?: boolean;
errorMessage?: string;
isSkipError?: boolean;
filesSettings: TFilesSettings;
onDownloadAs?: (obj: object) => void;
onSDKRequestSharingSettings?: () => void;

View File

@ -65,8 +65,6 @@ export async function getFillingSession(
);
try {
console.log({ request });
const response = await fetch(request);
if (response.ok) return await response.json();