Files
gitmost/apps/client/src/features/page/services/page-service.ts
claude code agent 227 f7b99f9fb3 feat(editor): recursive tree mode for the subpages node (#150)
The `subpages` node showed only one level of direct children. Add a `recursive`
attribute that renders the FULL descendant tree of the current page — fully
expanded, unlimited depth. Default `false`, so every previously-inserted node
stays flat (backward compatible). No backend changes: `POST /pages/tree` (via the
`getSpaceTree` wrapper) already returns the whole subtree as a flat `IPage[]`
(recursive CTE, permission-filtered); the nested tree is built on the client by
`parentPageId`.

- editor-ext `subpages.ts`: `recursive` attribute (parse/render `data-recursive`),
  shared by client + server so the collab ProseMirror schema keeps the attribute.
- `getSpaceTree`: arg loosened to `{ spaceId?; pageId? }` (the endpoint accepts
  either); new `useGetPageTreeQuery(pageId)` react-query hook.
- `subpages-view.tsx`: split into `FlatSubpages` (unchanged) and
  `RecursiveSubpages`; `buildSubtree` assembles the nested tree (cycle/self-parent
  guard, `sortPositionKeys` per level, root excluded) and a recursive `TreeNode`
  renders it (16px indent per depth, soft "showing N" note past 300 — data never
  capped). Shared/public context reads the already-nested shared tree, no
  `/pages/tree` request.
- toggles: bubble-menu flat⇄tree button + a second slash-menu item "Page tree".

Review follow-ups folded in: invalidate `["page-tree"]` from the create / update /
move / delete cache helpers so an open recursive tree refreshes (no stale data);
mode icon made reactive on editor transactions; `t` threaded into `TreeNode`
(no per-node useTranslation); shared-subtree hook deduped to a thin alias.

editor-ext build + client `tsc --noEmit` both clean. Backend untouched.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-24 14:33:07 +03:00

205 lines
5.3 KiB
TypeScript

import api from "@/lib/api-client";
import {
ICopyPageToSpace,
IExportPageParams,
IMovePage,
IMovePageToSpace,
IPage,
IPageInput,
SidebarPagesParams,
} from '@/features/page/types/page.types';
import { QueryParams } from "@/lib/types";
import { IPagination } from "@/lib/types.ts";
import { saveAs } from "file-saver";
import { InfiniteData } from "@tanstack/react-query";
import { IFileTask } from '@/features/file-task/types/file-task.types.ts';
import { IAttachment } from '@/features/attachments/types/attachment.types.ts';
export async function createPage(data: Partial<IPage>): Promise<IPage> {
const req = await api.post<IPage>("/pages/create", data);
return req.data;
}
export async function getPageById(
pageInput: Partial<IPageInput>,
): Promise<IPage> {
const req = await api.post<IPage>("/pages/info", pageInput);
return req.data;
}
export async function updatePage(data: Partial<IPageInput>): Promise<IPage> {
const req = await api.post<IPage>("/pages/update", data);
return req.data;
}
export async function deletePage(pageId: string, permanentlyDelete = false): Promise<void> {
await api.post("/pages/delete", { pageId, permanentlyDelete });
}
export async function getDeletedPages(
spaceId: string,
params?: QueryParams,
): Promise<IPagination<IPage>> {
const req = await api.post("/pages/trash", { spaceId, ...params });
return req.data;
}
export async function restorePage(pageId: string): Promise<IPage> {
const response = await api.post<IPage>("/pages/restore", { pageId });
return response.data;
}
export async function movePage(data: IMovePage): Promise<void> {
await api.post<void>("/pages/move", data);
}
export async function movePageToSpace(data: IMovePageToSpace): Promise<void> {
await api.post<void>("/pages/move-to-space", data);
}
export async function duplicatePage(data: ICopyPageToSpace): Promise<IPage> {
const req = await api.post<IPage>("/pages/duplicate", data);
return req.data;
}
export async function getSidebarPages(
params: SidebarPagesParams,
): Promise<IPagination<IPage>> {
const req = await api.post("/pages/sidebar-pages", params);
return req.data;
}
export async function getAllSidebarPages(
params: SidebarPagesParams,
): Promise<InfiniteData<IPagination<IPage>, unknown>> {
let cursor: string | undefined = undefined;
const pages: IPagination<IPage>[] = [];
const pageParams: (string | undefined)[] = [];
do {
const req = await api.post("/pages/sidebar-pages", { ...params, cursor, limit: 100 });
const data: IPagination<IPage> = req.data;
pages.push(data);
pageParams.push(cursor);
cursor = data.meta.nextCursor ?? undefined;
} while (cursor);
return {
pageParams,
pages,
};
}
export async function getSpaceTree(params: {
spaceId?: string;
pageId?: string;
}): Promise<IPage[]> {
const req = await api.post<{ items: IPage[] }>("/pages/tree", params);
return req.data.items;
}
export async function getPageBreadcrumbs(
pageId: string,
): Promise<Partial<IPage[]>> {
const req = await api.post("/pages/breadcrumbs", { pageId });
return req.data;
}
export async function getRecentChanges(
params?: QueryParams & { spaceId?: string },
): Promise<IPagination<IPage>> {
const req = await api.post("/pages/recent", params);
return req.data;
}
export async function getCreatedByPages(
params?: QueryParams & { userId?: string; spaceId?: string },
): Promise<IPagination<IPage>> {
const req = await api.post("/pages/created-by-user", params);
return req.data;
}
export async function exportPage(data: IExportPageParams): Promise<void> {
const req = await api.post("/pages/export", data, {
responseType: "blob",
});
const fileName = req?.headers["content-disposition"]
.split("filename=")[1]
.replace(/"/g, "");
let decodedFileName = fileName;
try {
decodedFileName = decodeURIComponent(fileName);
} catch (err) {
// fallback to raw filename
}
saveAs(req.data, decodedFileName);
}
export async function importPage(file: File, spaceId: string) {
const formData = new FormData();
formData.append("spaceId", spaceId);
formData.append("file", file);
const req = await api.post<IPage>("/pages/import", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
return req.data;
}
export async function importZip(
file: File,
spaceId: string,
source?: string,
): Promise<IFileTask> {
const formData = new FormData();
formData.append("spaceId", spaceId);
formData.append("source", source);
formData.append("file", file);
const req = await api.post<any>("/pages/import-zip", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
return req.data;
}
export async function getAttachmentInfo(
attachmentId: string,
): Promise<IAttachment> {
const req = await api.post<IAttachment>("/files/info", {
attachmentId,
});
return req.data;
}
export async function uploadFile(
file: File,
pageId: string,
attachmentId?: string,
): Promise<IAttachment> {
const formData = new FormData();
if (attachmentId) {
formData.append("attachmentId", attachmentId);
}
formData.append("pageId", pageId);
formData.append("file", file);
const req = await api.post<IAttachment>("/files/upload", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
return req as unknown as IAttachment;
}