Merge pull request #390 from toeverything/feat/route

Feat/route

apps/ligo-virgo/src/pages/AppRoutes.tsx

@@ -21,7 +21,7 @@ export function LigoVirgoRoutes() {
                 />
                 <Route path="/ui" element={<UIPage />} />
                 <Route
-                    path="/:workspace_id/*"
+                    path="/:workspaceId/*"
                     element={
                         <RoutePrivate>
                             <WorkspaceContainer />

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/Home.tsx

@@ -5,22 +5,23 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 export function WorkspaceHome() {
     const navigate = useNavigate();
-    const { workspace_id } = useParams();
+    const { workspaceId } = useParams();
     const { user } = useUserAndSpaces();
 
     useEffect(() => {
-        const navigate_to_user_initial_page = async () => {
-            const [recent_pages, user_initial_page_id] = await Promise.all([
-                services.api.userConfig.getRecentPages(workspace_id, user.id),
+        const navigateToUserInitialPage = async () => {
+            const [recentPages, userInitialPageId] = await Promise.all([
+                services.api.userConfig.getRecentPages(workspaceId, user.id),
                 services.api.userConfig.getUserInitialPage(
-                    workspace_id,
+                    workspaceId,
                     user.id
                 ),
             ]);
-            if (recent_pages.length === 0) {
+            // if recent pages if null, run initialize task
+            if (recentPages.length === 0) {
                 await services.api.editorBlock.copyTemplateToPage(
-                    workspace_id,
-                    user_initial_page_id,
+                    workspaceId,
+                    userInitialPageId,
                     TemplateFactory.generatePageTemplateByGroupKeys({
                         name: '👋 Get Started with AFFiNE',
                         groupKeys: [
@@ -31,11 +32,12 @@ export function WorkspaceHome() {
                     })
                 );
             }
-
-            navigate(`/${workspace_id}/${user_initial_page_id}`);
+            if (userInitialPageId) {
+                navigate(`/${workspaceId}/${userInitialPageId}`);
+            }
         };
-        navigate_to_user_initial_page();
-    }, [navigate, user.id, workspace_id]);
+        navigateToUserInitialPage();
+    }, [navigate, user.id, workspaceId]);
 
     return null;
 }

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

@@ -7,27 +7,20 @@ import { WorkspaceHome } from './Home';
 import Pages from './pages';
 
 export function WorkspaceContainer() {
-    const { workspace_id } = useParams();
+    const { workspaceId } = useParams();
     const { user, currentSpaceId } = useUserAndSpaces();
 
-    if (
-        user &&
-        ![currentSpaceId, 'affine2vin277tcmafwq'].includes(workspace_id)
-    ) {
-        // return <Navigate to={`/${currentSpaceId}`} replace={true} />;
-    }
-
     return (
         <Routes>
             <Route path="/" element={<WorkspaceRootContainer />}>
                 <Route path="/pages" element={<Pages />} />
                 <Route
-                    path="/:page_id/edgeless"
-                    element={<Edgeless workspace={workspace_id} />}
+                    path="/:pageId/edgeless"
+                    element={<Edgeless workspace={workspaceId} />}
                 />
                 <Route
-                    path="/:page_id"
-                    element={<Page workspace={workspace_id} />}
+                    path="/:pageId"
+                    element={<Page workspace={workspaceId} />}
                 />
                 <Route path="/" element={<WorkspaceHome />} />
             </Route>

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 { workspace_id, page_id } = useParams();
+    const { workspaceId, pageId } = useParams();
 
     const { handleAddPage } = usePageTree();
     const { addPageToday } = useCalendarHeatmap();
@@ -46,18 +46,18 @@ 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: workspace_id,
+                workspace: workspaceId,
                 type: 'page' as const,
             });
 
             await handleAddPage(newPage.id);
             addPageToday();
 
-            navigate(`/${workspace_id}/${newPage.id}`);
+            navigate(`/${workspaceId}/${newPage.id}`);
         }
-    }, [addPageToday, handleAddPage, navigate, page_id, workspace_id]);
+    }, [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(() => {