refactor: simplify code (#3231)
This commit is contained in:
@@ -15,7 +15,7 @@ import {
|
|||||||
UnpinIcon,
|
UnpinIcon,
|
||||||
ViewLayersIcon,
|
ViewLayersIcon,
|
||||||
} from '@blocksuite/icons';
|
} from '@blocksuite/icons';
|
||||||
import type { PageMeta } from '@blocksuite/store';
|
import type { PageMeta, Workspace } from '@blocksuite/store';
|
||||||
import type { DragEndEvent } from '@dnd-kit/core';
|
import type { DragEndEvent } from '@dnd-kit/core';
|
||||||
import { useDroppable } from '@dnd-kit/core';
|
import { useDroppable } from '@dnd-kit/core';
|
||||||
import * as Collapsible from '@radix-ui/react-collapsible';
|
import * as Collapsible from '@radix-ui/react-collapsible';
|
||||||
@@ -25,7 +25,6 @@ import type { ReactElement } from 'react';
|
|||||||
import React, { useCallback, useMemo, useState } from 'react';
|
import React, { useCallback, useMemo, useState } from 'react';
|
||||||
|
|
||||||
import { useGetPageInfoById } from '../../../../hooks/use-get-page-info';
|
import { useGetPageInfoById } from '../../../../hooks/use-get-page-info';
|
||||||
import type { AllWorkspace } from '../../../../shared';
|
|
||||||
import { filterPage } from '../../../../utils/filter';
|
import { filterPage } from '../../../../utils/filter';
|
||||||
import type { CollectionsListProps } from '../index';
|
import type { CollectionsListProps } from '../index';
|
||||||
import { Page } from './page';
|
import { Page } from './page';
|
||||||
@@ -126,7 +125,7 @@ const CollectionRenderer = ({
|
|||||||
}: {
|
}: {
|
||||||
collection: Collection;
|
collection: Collection;
|
||||||
pages: PageMeta[];
|
pages: PageMeta[];
|
||||||
workspace: AllWorkspace;
|
workspace: Workspace;
|
||||||
getPageInfo: GetPageInfoById;
|
getPageInfo: GetPageInfoById;
|
||||||
}) => {
|
}) => {
|
||||||
const [collapsed, setCollapsed] = React.useState(true);
|
const [collapsed, setCollapsed] = React.useState(true);
|
||||||
@@ -189,7 +188,7 @@ const CollectionRenderer = ({
|
|||||||
return (
|
return (
|
||||||
<Collapsible.Root open={!collapsed}>
|
<Collapsible.Root open={!collapsed}>
|
||||||
<EditCollectionModel
|
<EditCollectionModel
|
||||||
propertiesMeta={workspace.blockSuiteWorkspace.meta.properties}
|
propertiesMeta={workspace.meta.properties}
|
||||||
getPageInfo={getPageInfo}
|
getPageInfo={getPageInfo}
|
||||||
init={collection}
|
init={collection}
|
||||||
onConfirm={setting.saveCollection}
|
onConfirm={setting.saveCollection}
|
||||||
@@ -253,9 +252,9 @@ const CollectionRenderer = ({
|
|||||||
</Collapsible.Root>
|
</Collapsible.Root>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export const CollectionsList = ({ currentWorkspace }: CollectionsListProps) => {
|
export const CollectionsList = ({ workspace }: CollectionsListProps) => {
|
||||||
const metas = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
|
const metas = useBlockSuitePageMeta(workspace);
|
||||||
const { savedCollections } = useSavedCollections(currentWorkspace.id);
|
const { savedCollections } = useSavedCollections(workspace.id);
|
||||||
const getPageInfo = useGetPageInfoById();
|
const getPageInfo = useGetPageInfoById();
|
||||||
return (
|
return (
|
||||||
<div data-testid="collections" className={styles.wrapper}>
|
<div data-testid="collections" className={styles.wrapper}>
|
||||||
@@ -268,7 +267,7 @@ export const CollectionsList = ({ currentWorkspace }: CollectionsListProps) => {
|
|||||||
key={view.id}
|
key={view.id}
|
||||||
collection={view}
|
collection={view}
|
||||||
pages={metas}
|
pages={metas}
|
||||||
workspace={currentWorkspace}
|
workspace={workspace}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -19,7 +19,6 @@ import React, { useCallback, useMemo } from 'react';
|
|||||||
|
|
||||||
import { pageSettingFamily } from '../../../../atoms';
|
import { pageSettingFamily } from '../../../../atoms';
|
||||||
import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
|
import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
|
||||||
import type { AllWorkspace } from '../../../../shared';
|
|
||||||
import { ReferencePage } from '../components/reference-page';
|
import { ReferencePage } from '../components/reference-page';
|
||||||
import * as styles from './styles.css';
|
import * as styles from './styles.css';
|
||||||
|
|
||||||
@@ -130,7 +129,7 @@ export const Page = ({
|
|||||||
removeFromAllowList: (id: string) => void;
|
removeFromAllowList: (id: string) => void;
|
||||||
inExcludeList: boolean;
|
inExcludeList: boolean;
|
||||||
addToExcludeList: (id: string) => void;
|
addToExcludeList: (id: string) => void;
|
||||||
workspace: AllWorkspace;
|
workspace: Workspace;
|
||||||
allPageMeta: Record<string, PageMeta>;
|
allPageMeta: Record<string, PageMeta>;
|
||||||
}) => {
|
}) => {
|
||||||
const [collapsed, setCollapsed] = React.useState(true);
|
const [collapsed, setCollapsed] = React.useState(true);
|
||||||
@@ -140,10 +139,7 @@ export const Page = ({
|
|||||||
const active = router.query.pageId === pageId;
|
const active = router.query.pageId === pageId;
|
||||||
const setting = useAtomValue(pageSettingFamily(pageId));
|
const setting = useAtomValue(pageSettingFamily(pageId));
|
||||||
const icon = setting?.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
|
const icon = setting?.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
|
||||||
const references = useBlockSuitePageReferences(
|
const references = useBlockSuitePageReferences(workspace, pageId);
|
||||||
workspace.blockSuiteWorkspace,
|
|
||||||
pageId
|
|
||||||
);
|
|
||||||
const clickPage = useCallback(() => {
|
const clickPage = useCallback(() => {
|
||||||
return router.push(`/workspace/${workspace.id}/${page.id}`);
|
return router.push(`/workspace/${workspace.id}/${page.id}`);
|
||||||
}, [page.id, router, workspace.id]);
|
}, [page.id, router, workspace.id]);
|
||||||
@@ -170,7 +166,7 @@ export const Page = ({
|
|||||||
inExcludeList={inExcludeList}
|
inExcludeList={inExcludeList}
|
||||||
addToExcludeList={addToExcludeList}
|
addToExcludeList={addToExcludeList}
|
||||||
page={page}
|
page={page}
|
||||||
workspace={workspace.blockSuiteWorkspace}
|
workspace={workspace}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@@ -189,7 +185,7 @@ export const Page = ({
|
|||||||
return (
|
return (
|
||||||
<ReferencePage
|
<ReferencePage
|
||||||
key={id}
|
key={id}
|
||||||
workspace={workspace.blockSuiteWorkspace}
|
workspace={workspace}
|
||||||
pageId={id}
|
pageId={id}
|
||||||
metaMapping={allPageMeta}
|
metaMapping={allPageMeta}
|
||||||
parentIds={new Set([pageId])}
|
parentIds={new Set([pageId])}
|
||||||
|
|||||||
@@ -6,8 +6,8 @@ import { ReferencePage } from '../components/reference-page';
|
|||||||
import type { FavoriteListProps } from '../index';
|
import type { FavoriteListProps } from '../index';
|
||||||
import EmptyItem from './empty-item';
|
import EmptyItem from './empty-item';
|
||||||
|
|
||||||
export const FavoriteList = ({ currentWorkspace }: FavoriteListProps) => {
|
export const FavoriteList = ({ workspace }: FavoriteListProps) => {
|
||||||
const metas = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
|
const metas = useBlockSuitePageMeta(workspace);
|
||||||
|
|
||||||
const favoriteList = useMemo(
|
const favoriteList = useMemo(
|
||||||
() => metas.filter(p => p.favorite && !p.trash),
|
() => metas.filter(p => p.favorite && !p.trash),
|
||||||
@@ -36,7 +36,7 @@ export const FavoriteList = ({ currentWorkspace }: FavoriteListProps) => {
|
|||||||
pageId={pageMeta.id}
|
pageId={pageMeta.id}
|
||||||
// memo?
|
// memo?
|
||||||
parentIds={new Set()}
|
parentIds={new Set()}
|
||||||
workspace={currentWorkspace.blockSuiteWorkspace}
|
workspace={workspace}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import type { AllWorkspace } from '../../../shared';
|
import type { Workspace } from '@blocksuite/store';
|
||||||
|
|
||||||
export type FavoriteListProps = {
|
export type FavoriteListProps = {
|
||||||
currentWorkspace: AllWorkspace;
|
workspace: Workspace;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type CollectionsListProps = {
|
export type CollectionsListProps = {
|
||||||
currentWorkspace: AllWorkspace;
|
workspace: Workspace;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -189,13 +189,9 @@ export const RootAppSidebar = ({
|
|||||||
|
|
||||||
<SidebarScrollableContainer>
|
<SidebarScrollableContainer>
|
||||||
<CategoryDivider label={t['Favorites']()} />
|
<CategoryDivider label={t['Favorites']()} />
|
||||||
{blockSuiteWorkspace && (
|
<FavoriteList workspace={blockSuiteWorkspace} />
|
||||||
<FavoriteList currentWorkspace={currentWorkspace} />
|
|
||||||
)}
|
|
||||||
<CategoryDivider label={t['Collections']()} />
|
<CategoryDivider label={t['Collections']()} />
|
||||||
{blockSuiteWorkspace && (
|
<CollectionsList workspace={blockSuiteWorkspace} />
|
||||||
<CollectionsList currentWorkspace={currentWorkspace} />
|
|
||||||
)}
|
|
||||||
<CategoryDivider label={t['others']()} />
|
<CategoryDivider label={t['others']()} />
|
||||||
<RouteMenuLinkItem
|
<RouteMenuLinkItem
|
||||||
ref={trashDroppable.setNodeRef}
|
ref={trashDroppable.setNodeRef}
|
||||||
|
|||||||
Reference in New Issue
Block a user