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 (
-        <MemoAffineBoard workspace={props.workspace} rootBlockId={page_id} />
-    );
+    return <MemoAffineBoard workspace={props.workspace} rootBlockId={pageId} />;
 };

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(() => {