binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1116] chore: add fallback for the live server (#5622)

Browse source 
* chore: add fallback for the live server

* fix: update provider document after patch request

* chore: make the health check call only on connection fail

* chore: update debounce interval

* refactor: remove useSwr call for healtch check

* fix: pages fallback init
This commit is contained in:
Aaryan Khandelwal 2024-09-23 15:35:06 +05:30 • committed by GitHub
parent ae1a63f832
commit f9a8896486
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 165 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web/core/components/pages/editor/editor-body.tsx
View file

@ -205,7 +205,6 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
},
}}
realtimeConfig={realtimeConfig}
serverHandler={serverHandler}
user={{
id: currentUser?.id ?? "",
name: currentUser?.display_name ?? "",

15
web/core/components/pages/editor/header/extra-options.tsx
View file

@ -1,7 +1,6 @@
"use client";
import { observer } from "mobx-react";
import { CircleAlert } from "lucide-react";
// editor
import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
// ui
@ -19,13 +18,12 @@ import { IPage } from "@/store/pages/page";
type Props = {
editorRef: React.RefObject<EditorRefApi>;
handleDuplicatePage: () => void;
hasConnectionFailed: boolean;
page: IPage;
readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
};
export const PageExtraOptions: React.FC<Props> = observer((props) => {
const { editorRef, handleDuplicatePage, hasConnectionFailed, page, readOnlyEditorRef } = props;
const { editorRef, handleDuplicatePage, page, readOnlyEditorRef } = props;
// derived values
const {
archived_at,
@ -79,17 +77,6 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
</div>
</Tooltip>
)}
{hasConnectionFailed && isOnline && (
<Tooltip
tooltipHeading="Connection failed"
tooltipContent="All changes made will be saved locally and will be synced when the connection is re-established."
>
<div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-red-500/20 px-3 py-0.5 text-xs font-medium text-red-500">
<CircleAlert className="flex-shrink-0 size-3" />
<span>Server error</span>
</div>
</Tooltip>
)}
{canCurrentUserFavoritePage && (
<FavoriteStar
selected={is_favorite}

3
web/core/components/pages/editor/header/mobile-root.tsx
View file

@ -12,7 +12,6 @@ type Props = {
editorReady: boolean;
editorRef: React.RefObject<EditorRefApi>;
handleDuplicatePage: () => void;
hasConnectionFailed: boolean;
page: IPage;
readOnlyEditorReady: boolean;
readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
@ -25,7 +24,6 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
editorReady,
editorRef,
handleDuplicatePage,
hasConnectionFailed,
page,
readOnlyEditorReady,
readOnlyEditorRef,
@ -53,7 +51,6 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
<PageExtraOptions
editorRef={editorRef}
handleDuplicatePage={handleDuplicatePage}
hasConnectionFailed={hasConnectionFailed}
page={page}
readOnlyEditorRef={readOnlyEditorRef}
/>

4
web/core/components/pages/editor/header/root.tsx
View file

@ -14,7 +14,6 @@ type Props = {
editorReady: boolean;
editorRef: React.RefObject<EditorRefApi>;
handleDuplicatePage: () => void;
hasConnectionFailed: boolean;
page: IPage;
readOnlyEditorReady: boolean;
readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
@ -27,7 +26,6 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
editorReady,
editorRef,
handleDuplicatePage,
hasConnectionFailed,
page,
readOnlyEditorReady,
readOnlyEditorRef,
@ -67,7 +65,6 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
<PageExtraOptions
editorRef={editorRef}
handleDuplicatePage={handleDuplicatePage}
hasConnectionFailed={hasConnectionFailed}
page={page}
readOnlyEditorRef={readOnlyEditorRef}
/>
@ -79,7 +76,6 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
editorReady={editorReady}
readOnlyEditorReady={readOnlyEditorReady}
handleDuplicatePage={handleDuplicatePage}
hasConnectionFailed={hasConnectionFailed}
page={page}
sidePeekVisible={sidePeekVisible}
setSidePeekVisible={setSidePeekVisible}

28
web/core/components/pages/editor/page-root.tsx
View file

@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useSearchParams } from "next/navigation";
// editor
import { EditorRefApi } from "@plane/editor";
import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
// types
import { TPage } from "@plane/types";
// ui
@ -12,9 +12,11 @@ import { PageEditorHeaderRoot, PageEditorBody, PageVersionsOverlay, PagesVersion
// hooks
import { useProjectPages } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router";
import { usePageFallback } from "@/hooks/use-page-fallback";
import { useQueryParams } from "@/hooks/use-query-params";
// services
import { ProjectPageVersionService } from "@/services/page";
import { ProjectPageService, ProjectPageVersionService } from "@/services/page";
const projectPageService = new ProjectPageService();
const projectPageVersionService = new ProjectPageVersionService();
// store
import { IPage } from "@/store/pages/page";
@ -29,8 +31,8 @@ export const PageRoot = observer((props: TPageRootProps) => {
const { projectId, workspaceSlug, page } = props;
// states
const [editorReady, setEditorReady] = useState(false);
const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
const [hasConnectionFailed, setHasConnectionFailed] = useState(false);
const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768);
const [isVersionsOverlayOpen, setIsVersionsOverlayOpen] = useState(false);
// refs
@ -43,8 +45,17 @@ export const PageRoot = observer((props: TPageRootProps) => {
// store hooks
const { createPage } = useProjectPages();
// derived values
const { access, description_html, name, isContentEditable } = page;
const { access, description_html, name, isContentEditable, updateDescription } = page;
// page fallback
usePageFallback({
editorRef,
fetchPageDescription: async () => {
if (!page.id) return;
return await projectPageService.fetchDescriptionBinary(workspaceSlug, projectId, page.id);
},
hasConnectionFailed,
updatePageDescription: async (data) => await updateDescription(data),
});
// update query params
const { updateQueryParams } = useQueryParams();
@ -53,7 +64,7 @@ export const PageRoot = observer((props: TPageRootProps) => {
const handleDuplicatePage = async () => {
const formData: Partial<TPage> = {
name: "Copy of " + name,
description_html: editorRef.current?.getHTML() ?? description_html ?? "<p></p>",
description_html: editorRef.current?.getDocument().html ?? description_html ?? "<p></p>",
access,
};
@ -89,8 +100,8 @@ export const PageRoot = observer((props: TPageRootProps) => {
editorRef.current?.setEditorValue(descriptionHTML);
};
const currentVersionDescription = isContentEditable
? editorRef.current?.getHTML()
: readOnlyEditorRef.current?.getHTML();
? editorRef.current?.getDocument().html
: readOnlyEditorRef.current?.getDocument().html;
return (
<>
@ -125,7 +136,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
editorReady={editorReady}
editorRef={editorRef}
handleDuplicatePage={handleDuplicatePage}
hasConnectionFailed={hasConnectionFailed}
page={page}
readOnlyEditorReady={readOnlyEditorReady}
readOnlyEditorRef={readOnlyEditorRef}

8
web/core/hooks/use-auto-save.tsx
View file

@ -1,9 +1,9 @@
import { useEffect, useRef } from "react";
import { debounce } from "lodash";
const AUTO_SAVE_TIME = 10000;
const AUTO_SAVE_TIME = 30000;
const useAutoSave = (handleSaveDescription: (forceSync?: boolean, yjsAsUpdate?: Uint8Array) => void) => {
const useAutoSave = (handleSaveDescription: () => void) => {
const intervalIdRef = useRef<any>(null);
const handleSaveDescriptionRef = useRef(handleSaveDescription);
@ -16,7 +16,7 @@ const useAutoSave = (handleSaveDescription: (forceSync?: boolean, yjsAsUpdate?:
useEffect(() => {
intervalIdRef.current = setInterval(() => {
try {
handleSaveDescriptionRef.current(true);
handleSaveDescriptionRef.current();
} catch (error) {
console.error("Autosave before manual save failed:", error);
}
@ -43,7 +43,7 @@ const useAutoSave = (handleSaveDescription: (forceSync?: boolean, yjsAsUpdate?:
clearInterval(intervalIdRef.current);
intervalIdRef.current = setInterval(() => {
try {
handleSaveDescriptionRef.current(true);
handleSaveDescriptionRef.current();
} catch (error) {
console.error("Autosave after manual save failed:", error);
}

48
web/core/hooks/use-page-fallback.ts Normal file
View file

@ -0,0 +1,48 @@
import { useCallback, useEffect } from "react";
// plane editor
import { EditorRefApi } from "@plane/editor";
// plane types
import { TDocumentPayload } from "@plane/types";
// hooks
import useAutoSave from "@/hooks/use-auto-save";
type TArgs = {
editorRef: React.RefObject<EditorRefApi>;
fetchPageDescription: () => Promise<any>;
hasConnectionFailed: boolean;
updatePageDescription: (data: TDocumentPayload) => Promise<void>;
};
export const usePageFallback = (args: TArgs) => {
const { editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription } = args;
const handleUpdateDescription = useCallback(async () => {
if (!hasConnectionFailed) return;
const editor = editorRef.current;
if (!editor) return;
const latestEncodedDescription = await fetchPageDescription();
const latestDecodedDescription = latestEncodedDescription
? new Uint8Array(latestEncodedDescription)
: new Uint8Array();
editor.setProviderDocument(latestDecodedDescription);
const { binary, html, json } = editor.getDocument();
if (!binary || !json) return;
const encodedBinary = Buffer.from(binary).toString("base64");
await updatePageDescription({
description_binary: encodedBinary,
description_html: html,
description: json,
});
}, [hasConnectionFailed]);
useEffect(() => {
if (hasConnectionFailed) {
handleUpdateDescription();
}
}, [hasConnectionFailed]);
useAutoSave(handleUpdateDescription);
};

9
web/core/services/page/project-page.service.ts
View file

@ -1,5 +1,5 @@
// types
import { TPage } from "@plane/types";
import { TDocumentPayload, TPage } from "@plane/types";
// helpers
import { API_BASE_URL } from "@/helpers/common.helper";
// services
@ -128,7 +128,7 @@ export class ProjectPageService extends APIService {
});
}
async fetchDescriptionYJS(workspaceSlug: string, projectId: string, pageId: string): Promise<any> {
async fetchDescriptionBinary(workspaceSlug: string, projectId: string, pageId: string): Promise<any> {
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`, {
headers: {
"Content-Type": "application/octet-stream",
@ -145,10 +145,7 @@ export class ProjectPageService extends APIService {
workspaceSlug: string,
projectId: string,
pageId: string,
data: {
description_binary: string;
description_html: string;
}
data: TDocumentPayload
): Promise<any> {
return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`, data)
.then((response) => response?.data)

16
web/core/store/pages/page.ts
View file

@ -1,7 +1,7 @@
import set from "lodash/set";
import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
// types
import { TLogoProps, TPage } from "@plane/types";
import { TDocumentPayload, TLogoProps, TPage } from "@plane/types";
// constants
import { EPageAccess } from "@/constants/page";
import { EUserPermissions } from "@/plane-web/constants/user-permissions";
@ -33,7 +33,7 @@ export interface IPage extends TPage {
// actions
update: (pageData: Partial<TPage>) => Promise<TPage | undefined>;
updateTitle: (title: string) => void;
updateDescription: (binaryString: string, descriptionHTML: string) => Promise<void>;
updateDescription: (document: TDocumentPayload) => Promise<void>;
makePublic: () => Promise<void>;
makePrivate: () => Promise<void>;
lock: () => Promise<void>;
@ -367,23 +367,19 @@ export class Page implements IPage {
/**
* @description update the page description
* @param {string} binaryString
* @param {string} descriptionHTML
* @param {TDocumentPayload} document
*/
updateDescription = async (binaryString: string, descriptionHTML: string) => {
updateDescription = async (document: TDocumentPayload) => {
const { workspaceSlug, projectId } = this.store.router;
if (!workspaceSlug || !projectId || !this.id) return undefined;
const currentDescription = this.description_html;
runInAction(() => {
this.description_html = descriptionHTML;
this.description_html = document.description_html;
});
try {
await this.pageService.updateDescriptionYJS(workspaceSlug, projectId, this.id, {
description_binary: binaryString,
description_html: descriptionHTML,
});
await this.pageService.updateDescriptionYJS(workspaceSlug, projectId, this.id, document);
} catch (error) {
runInAction(() => {
this.description_html = currentDescription;