refactor(page): rename pageId

apps/ligo-virgo/src/pages/workspace/Edgeless.tsx

@@ -14,7 +14,7 @@ type EdgelessProps = {
 };
 
 export const Edgeless = (props: EdgelessProps) => {
-    const { page_id } = useParams();
+    const { pageId } = useParams();
     const { user } = useUserAndSpaces();
 
     useEffect(() => {
@@ -31,7 +31,5 @@ export const Edgeless = (props: EdgelessProps) => {
         update_recent_pages();
     }, [user, props.workspace]);
 
-    return (
+    return <MemoAffineBoard workspace={props.workspace} rootBlockId={pageId} />;
-        <MemoAffineBoard workspace={props.workspace} rootBlockId={page_id} />
-    );
 };

apps/ligo-virgo/src/pages/workspace/WorkspaceContainer.tsx

@@ -15,11 +15,11 @@ export function WorkspaceContainer() {
             <Route path="/" element={<WorkspaceRootContainer />}>
                 <Route path="/pages" element={<Pages />} />
                 <Route
-                    path="/:page_id/edgeless"
+                    path="/:pageId/edgeless"
                     element={<Edgeless workspace={workspaceId} />}
                 />
                 <Route
-                    path="/:page_id"
+                    path="/:pageId"
                     element={<Page workspace={workspaceId} />}
                 />
                 <Route path="/" element={<WorkspaceHome />} />

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -34,7 +34,7 @@ export function Page(props: PageProps) {
     const [activeTab, setActiveTab] = useState(
         TabMap.get(TAB_TITLE.PAGES).value
     );
-    const { page_id } = useParams();
+    const { pageId } = useParams();
     const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } =
         useShowSpaceSidebar();
     const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
@@ -79,7 +79,7 @@ export function Page(props: PageProps) {
                                 </div>
                                 <div>
                                     <CollapsiblePageTree title="PAGES">
-                                        {page_id ? <PageTree /> : null}
+                                        {pageId ? <PageTree /> : null}
                                     </CollapsiblePageTree>
                                 </div>
                             </div>
@@ -91,7 +91,7 @@ export function Page(props: PageProps) {
                     </WorkspaceSidebarContent>
                 </WorkspaceSidebar>
             </LigoLeftContainer>
-            <EditorContainer workspace={props.workspace} pageId={page_id} />
+            <EditorContainer workspace={props.workspace} pageId={pageId} />
         </LigoApp>
     );
 }

apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx

@@ -38,7 +38,7 @@ export type CollapsiblePageTreeProps = {
 export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
     const { className, style, children, title, initialOpen = true } = props;
     const navigate = useNavigate();
-    const { workspaceId, page_id } = useParams();
+    const { workspaceId, pageId } = useParams();
 
     const { handleAddPage } = usePageTree();
     const { addPageToday } = useCalendarHeatmap();
@@ -46,7 +46,7 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
     const [open, setOpen] = useState(initialOpen);
 
     const create_page = useCallback(async () => {
-        if (page_id) {
+        if (pageId) {
             const newPage = await services.api.editorBlock.create({
                 workspace: workspaceId,
                 type: 'page' as const,
@@ -57,7 +57,7 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
 
             navigate(`/${workspaceId}/${newPage.id}`);
         }
-    }, [addPageToday, handleAddPage, navigate, page_id, workspaceId]);
+    }, [addPageToday, handleAddPage, navigate, pageId, workspaceId]);
 
     const [newPageBtnVisible, setNewPageBtnVisible] = useState<boolean>(false);
 

apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx

@@ -116,7 +116,7 @@ const renderTOCContent = tocDataSource => {
 };
 
 export const TOC = () => {
-    const { page_id } = useParams();
+    const { pageId } = useParams();
     const [tocDataSource, setTocDataSource] = useState<TOCType[]>([]);
     const [activeBlockId, setActiveBlockId] = useState('');
 
@@ -124,7 +124,7 @@ export const TOC = () => {
     const listenerMapRef = useRef<ListenerMap>(new Map());
 
     const { currentEditors } = useCurrentEditors();
-    const editor = currentEditors[page_id] as Virgo;
+    const editor = currentEditors[pageId] as Virgo;
 
     const updateTocDataSource = useCallback(async () => {
         if (!editor) {
@@ -134,7 +134,7 @@ export const TOC = () => {
         const listenerMap = listenerMapRef.current;
 
         /* page listener: trigger update-notice when add new group */
-        const pageAsyncBlock = (await editor.getBlockByIds([page_id]))?.[0];
+        const pageAsyncBlock = (await editor.getBlockByIds([pageId]))?.[0];
         if (!listenerMap.has(pageAsyncBlock.id)) {
             listenerMap.set(
                 pageAsyncBlock.id,
@@ -144,7 +144,7 @@ export const TOC = () => {
 
         /* block listener: trigger update-notice when change block content */
         const { children = [] } =
-            (await editor.queryByPageId(page_id))?.[0] || {};
+            (await editor.queryByPageId(pageId))?.[0] || {};
         const asyncBlocks = (await editor.getBlockByIds(children)) || [];
         const { tocContents } = await getContentByAsyncBlocks(
             asyncBlocks,
@@ -155,7 +155,7 @@ export const TOC = () => {
         /* toc: flat content */
         const tocDataSource = getPageTOC(asyncBlocks, tocContents);
         setTocDataSource(tocDataSource);
-    }, [editor, page_id]);
+    }, [editor, pageId]);
 
     /* init toc and add page/block update-listener & unmount-listener */
     useEffect(() => {

libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx

@@ -6,16 +6,16 @@ import { CreateView } from '@toeverything/framework/virgo';
 type RefLinkView = CreateView;
 
 export const RefLinkView = ({ block, editor }: RefLinkView) => {
-    const page_id = useMemo(() => block.getProperty('reference'), [block]);
+    const pageId = useMemo(() => block.getProperty('reference'), [block]);
 
     const [block_content, set_block] =
         useState<Awaited<ReturnType<typeof editor.search>>[number]>();
 
     useEffect(() => {
         editor
-            .search({ tag: `id:${page_id}` })
+            .search({ tag: `id:${pageId}` })
             .then(block => set_block(block[0]));
-    }, [editor, page_id]);
+    }, [editor, pageId]);
 
-    return <InlineRefLink block={block_content} pageId={page_id} />;
+    return <InlineRefLink block={block_content} pageId={pageId} />;
 };

libs/components/editor-plugins/src/comment/use-add-comment.ts

@@ -8,7 +8,7 @@ export const useAddComment = ({
     selectionInfo,
     setShow,
 }: WithEditorSelectionType) => {
-    const { workspaceId, page_id: pageId } = useParams();
+    const { workspaceId, pageId } = useParams();
     const [currentComment, setCurrentComment] = useState('');
 
     const createComment = useCallback(async (): Promise<{

libs/components/editor-plugins/src/menu/double-link-menu/DoubleLinkMenu.tsx

@@ -44,7 +44,7 @@ export const DoubleLinkMenu = ({
     hooks,
     style,
 }: DoubleLinkMenuProps) => {
-    const { page_id: curPageId } = useParams();
+    const { pageId: curPageId } = useParams();
     const [isOpen, setIsOpen] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const dialogRef = useRef<HTMLDivElement>();

libs/components/editor-plugins/src/menu/link-menu/LinkMenu.tsx

@@ -42,7 +42,7 @@ const normalizeUrl = (url: string) => {
 };
 
 export const LinkMenu = ({ editor, hooks }: LinkMenuProps) => {
-    const { page_id: curPageId } = useParams();
+    const { pageId: curPageId } = useParams();
     const [isOpen, setIsOpen] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const dialogRef = useRef<HTMLDivElement>();

libs/components/layout/src/settings-sidebar/Comments/use-comments.ts

@@ -9,7 +9,7 @@ import { useParams } from 'react-router-dom';
 import type { CommentInfo } from './type';
 
 export const useComments = () => {
-    const { workspaceId, page_id: pageId } = useParams();
+    const { workspaceId, pageId } = useParams();
 
     const [comments, setComments] = useState<CommentInfo[]>([]);
     const [observeIds, setObserveIds] = useState<string[]>([]);
@@ -71,7 +71,7 @@ export const useComments = () => {
 };
 
 export const useActiveComment = () => {
-    const { workspaceId, page_id: pageId } = useParams();
+    const { workspaceId, pageId } = useParams();
     const { currentEditors } = useCurrentEditors();
     const editor = useMemo(() => {
         return currentEditors[pageId] as Virgo;

libs/components/layout/src/workspace-sidebar/calendar-heatmap/utils.ts

@@ -47,8 +47,8 @@ export async function fetchActivitiesHeatmap(
     // const pages = await db.getByType('page');
     const pages_with_ids = (await Promise.all(
         flattenedItems.map(async (page_item: any) => {
-            const page_id = page_item.id;
+            const pageId = page_item.id;
-            return [page_id, await db.get(page_id as 'page')];
+            return [pageId, await db.get(pageId as 'page')];
         })
     )) as [string, BlockImplInstance][];
     const pages = new Map(pages_with_ids);

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx

@@ -57,7 +57,9 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
         },
         ref
     ) => {
-        const { workspaceId, page_id } = useParams();
+        const params = useParams();
+        const workspaceId = params['workspaceId'];
+        const curPageId = params['pageId'];
         const BooleanPageTreeItemMoreActions = useFlag(
             'BooleanPageTreeItemMoreActions',
             true
@@ -71,7 +73,7 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                 disableSelection={disableSelection}
                 disableInteraction={disableInteraction}
                 spacing={`${indentationWidth * depth + 12}px`}
-                active={pageId === page_id}
+                active={pageId === curPageId}
                 {...props}
             >
                 {childCount !== 0 ? (

libs/components/layout/src/workspace-sidebar/page-tree/use-page-tree.ts

@@ -19,7 +19,7 @@ import {
 const page_tree_atom = atom<TreeItems | undefined>([]);
 
 export const usePageTree = ({ indentationWidth = 16 }: DndTreeProps = {}) => {
-    const { workspaceId, page_id } = useParams();
+    const { workspaceId, pageId } = useParams();
     const navigate = useNavigate();
     const [items] = useAtom(page_tree_atom);
     const [activeId, setActiveId] = useState<string | undefined>(undefined);
@@ -132,7 +132,7 @@ export const usePageTree = ({ indentationWidth = 16 }: DndTreeProps = {}) => {
             await services.api.userConfig.removePage(workspaceId, id);
             //remove page from jwst
             await services.api.pageTree.removePage(workspaceId, id);
-            if (id === page_id) {
+            if (id === pageId) {
                 navigate(`/${workspaceId}`);
             }
         },
@@ -140,8 +140,8 @@ export const usePageTree = ({ indentationWidth = 16 }: DndTreeProps = {}) => {
     );
 
     const handleAddPage = useCallback(
-        async (page_id?: string) => {
+        async (pageId?: string) => {
-            await savePageTreeData([{ id: page_id, children: [] }, ...items]);
+            await savePageTreeData([{ id: pageId, children: [] }, ...items]);
         },
         [items, savePageTreeData]
     );
@@ -177,7 +177,7 @@ export const usePageTree = ({ indentationWidth = 16 }: DndTreeProps = {}) => {
 
 export const useDndTreeAutoUpdate = () => {
     const [, set_items] = useAtom(page_tree_atom);
-    const { workspaceId, page_id } = useParams();
+    const { workspaceId, pageId } = useParams();
 
     const fetch_page_tree_data = useCallback(async () => {
         const pages = await services.api.pageTree.getPageTree<TreeItem>(
@@ -191,11 +191,11 @@ export const useDndTreeAutoUpdate = () => {
     }, [fetch_page_tree_data]);
 
     useEffect(() => {
-        if (!page_id) return () => {};
+        if (!pageId) return () => {};
         let unobserve: () => void;
         const auto_update_page_tree = async () => {
             unobserve = await services.api.pageTree.observe(
-                { workspace: workspaceId, page: page_id },
+                { workspace: workspaceId, page: pageId },
                 () => {
                     fetch_page_tree_data();
                 }
@@ -206,5 +206,5 @@ export const useDndTreeAutoUpdate = () => {
         return () => {
             unobserve?.();
         };
-    }, [fetch_page_tree_data, page_id, workspaceId]);
+    }, [fetch_page_tree_data, pageId, workspaceId]);
 };

libs/datasource/db-service/src/services/editor-block/index.ts

@@ -266,36 +266,33 @@ export class EditorBlock extends ServiceBaseClass {
     }
     async copyPage(
         workspaceId: string,
-        source_page_id: string,
+        sourcePageId: string,
-        new_page_id: string
+        newPageId: string
     ): Promise<boolean> {
         const db = await this.database.getDatabase(workspaceId);
 
-        const source_page = await this.getBlock(
+        const sourcePage = await this.getBlock(
             workspaceId,
-            source_page_id as 'block'
+            sourcePageId as 'block'
         );
-        const new_page = await this.getBlock(
+        const newPage = await this.getBlock(workspaceId, newPageId as 'block');
-            workspaceId,
+        if (!sourcePage) {
-            new_page_id as 'block'
-        );
-        if (!source_page) {
             return false;
         }
-        const source_page_children = source_page.children;
+        const sourcePageChildren = sourcePage.children;
-        const decorations = source_page.getDecorations();
+        const decorations = sourcePage.getDecorations();
         Object.entries(decorations).forEach(([key, value]) => {
-            new_page?.setDecoration(key, source_page.getDecoration(key));
+            newPage?.setDecoration(key, sourcePage.getDecoration(key));
         });
 
         //@ts-ignore
-        this.decorate_page_title(new_page, 'copy from ');
+        this.decorate_page_title(newPage, 'copy from ');
 
-        for (let i = 0; i < source_page_children.length; i++) {
+        for (let i = 0; i < sourcePageChildren.length; i++) {
-            const source_page_child = await db.get(
+            const sourcePageChild = await db.get(
-                source_page_children[i] as 'block'
+                sourcePageChildren[i] as 'block'
             );
-            new_page?.insertChildren(source_page_child);
+            newPage?.insertChildren(sourcePageChild);
         }
         return true;
     }

libs/datasource/jwt/src/yjs/index.ts

@@ -350,7 +350,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
                     const [file] = (await fromEvent(handles)) as File[];
                     const binary = await file?.arrayBuffer();
                     console.log(this._provider.providers);
-                    let { indexeddb } = (
+                    const { indexeddb } = (
                         this._provider.providers as any[]
                     ).find(p => p.indexeddb);
                     await indexeddb?.idb?.clearData();
@@ -391,9 +391,9 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
             },
             parse: () => this._doc.toJSON(),
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            parse_page: (page_id: string) => {
+            parse_page: (pageId: string) => {
                 const blocks = this._blocks.toJSON();
-                return resolve_block(blocks, page_id);
+                return resolve_block(blocks, pageId);
             },
             // eslint-disable-next-line @typescript-eslint/naming-convention
             parse_pages: (resolve = false) => {

libs/datasource/state/src/page.ts

@@ -9,7 +9,7 @@ const _currentEditors = atom<EditorsMap>({} as EditorsMap);
 
 /** hook for using editors outside page */
 export const useCurrentEditors = () => {
-    const { workspaceId, page_id: pageId } = useParams();
+    const { workspaceId, pageId } = useParams();
     const { pathname } = useLocation();
     const [currentEditors, setCurrentEditors] = useAtom(_currentEditors);
 

libs/utils/src/utils.ts

@@ -6,8 +6,8 @@ export function getUserDisplayName(user?: UserInfo) {
 }
 
 /**
- * Get page_id from URL
+ * Get pageId from URL
- * @returns page_id
+ * @returns pageId
  */
 export function getPageId() {
     const path = window.location.pathname.match(/\/(\w+)\/(\w+)/);