refactor(page): rename pageId

This commit is contained in:
tzhangchi 2022-09-08 19:20:37 +08:00
parent 9442c023e5
commit 281c3f6c44
17 changed files with 58 additions and 61 deletions

View File

@ -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} />;
};

View File

@ -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 />} />

View File

@ -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>
);
}

View File

@ -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);

View File

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

View File

@ -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} />;
};

View File

@ -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<{

View File

@ -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>();

View File

@ -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>();

View File

@ -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;

View File

@ -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;
return [page_id, await db.get(page_id as 'page')];
const pageId = page_item.id;
return [pageId, await db.get(pageId as 'page')];
})
)) as [string, BlockImplInstance][];
const pages = new Map(pages_with_ids);

View File

@ -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 ? (

View File

@ -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) => {
await savePageTreeData([{ id: page_id, children: [] }, ...items]);
async (pageId?: string) => {
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]);
};

View File

@ -266,36 +266,33 @@ export class EditorBlock extends ServiceBaseClass {
}
async copyPage(
workspaceId: string,
source_page_id: string,
new_page_id: string
sourcePageId: 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(
workspaceId,
new_page_id as 'block'
);
if (!source_page) {
const newPage = await this.getBlock(workspaceId, newPageId as 'block');
if (!sourcePage) {
return false;
}
const source_page_children = source_page.children;
const decorations = source_page.getDecorations();
const sourcePageChildren = sourcePage.children;
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++) {
const source_page_child = await db.get(
source_page_children[i] as 'block'
for (let i = 0; i < sourcePageChildren.length; i++) {
const sourcePageChild = await db.get(
sourcePageChildren[i] as 'block'
);
new_page?.insertChildren(source_page_child);
newPage?.insertChildren(sourcePageChild);
}
return true;
}

View File

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

View File

@ -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);

View File

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