Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-16 17:46:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: page list all, favorite, trash

Browse Source
This commit is contained in:
alt0
2022-12-20 02:01:53 +08:00
parent 49f4c49426
commit f3644385a8
11 changed files with 135 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/header/header.tsx
+12 -4
View File
@@ -30,8 +30,14 @@ import { SyncIcon } from './sync-icon';
import { toast } from '@/components/toast';
const PopoverContent = () => {
const { getPageMeta, editor, currentPage } = useAppState();
const { mode, setMode, toggleFavoritePage, toggleDeletePage } = useEditor();
const {
getPageMeta,
editor,
currentPage,
toggleFavoritePage,
toggleDeletePage,
} = useAppState();
const { mode, setMode } = useEditor();
const { confirm } = useConfirm();
const { id, favorite, title } = (currentPage?.id
@@ -47,6 +53,7 @@ const PopoverContent = () => {
<MenuItem
onClick={() => {
toggleFavoritePage(id);
toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
}}
icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
>
@@ -125,7 +132,8 @@ const BrowserWarning = ({
};
const HeaderRight = () => {
const { pageList, toggleDeletePage, permanentlyDeletePage } = useEditor();
const { pageList, permanentlyDeletePage } = useEditor();
const { currentWorkspaceId, toggleDeletePage } = useAppState();
const { confirm } = useConfirm();
const router = useRouter();
const currentPageMeta = pageList.find(p => p.id === router.query.pageId);
@@ -158,7 +166,7 @@ const HeaderRight = () => {
confirmType: 'danger',
}).then(confirm => {
if (confirm) {
router.push({ pathname: '/page-list/all' });
router.push(`/workspace/${currentWorkspaceId}/all`);
permanentlyDeletePage(id);
}
});
packages/app/src/components/page-list/index.tsx
+11 -6
View File
@@ -19,13 +19,16 @@ import React from 'react';
import DateCell from '@/components/page-list/date-cell';
import { IconButton } from '@/ui/button';
import { Tooltip } from '@/ui/tooltip';
import { router } from 'next/client';
import { useRouter } from 'next/router';
import { useAppState } from '@/providers/app-state-provider/context';
import { toast } from '@/components/toast';
const FavoriteTag = ({
pageMeta: { favorite, id },
}: {
pageMeta: PageMeta;
}) => {
const { toggleFavoritePage } = useEditor();
const { toggleFavoritePage } = useAppState();
return (
<Tooltip
content={favorite ? 'Favourited' : 'Favourite'}
@@ -37,6 +40,7 @@ const FavoriteTag = ({
onClick={e => {
e.stopPropagation();
toggleFavoritePage(id);
toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
}}
>
{favorite ? <FavouritedIcon /> : <FavouritesIcon />}
@@ -54,6 +58,8 @@ export const PageList = ({
showFavoriteTag?: boolean;
isTrash?: boolean;
}) => {
const router = useRouter();
const { currentWorkspaceId } = useAppState();
if (pageList.length === 0) {
return <Empty />;
}
@@ -77,10 +83,9 @@ export const PageList = ({
<StyledTableRow
key={`${pageMeta.id}-${index}`}
onClick={() => {
router.push({
pathname: '/',
query: { pageId: pageMeta.id },
});
router.push(
`/workspace/${currentWorkspaceId}/${pageMeta.id}`
);
}}
>
<TableCell>
packages/app/src/components/page-list/operation-cell.tsx
+4 -3
View File
@@ -20,7 +20,7 @@ import { toast } from '@/components/toast';
export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
const { id, favorite } = pageMeta;
const goToPage = useGoToPage();
const { toggleFavoritePage, toggleDeletePage } = useEditor();
const { toggleFavoritePage, toggleDeletePage } = useAppState();
const { confirm } = useConfirm();
const OperationMenu = (
@@ -28,6 +28,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
<MenuItem
onClick={() => {
toggleFavoritePage(id);
toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
}}
icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
>
@@ -73,8 +74,8 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
const { id } = pageMeta;
const goToPage = useGoToPage();
const { getPageMeta } = useAppState();
const { permanentlyDeletePage, toggleDeletePage } = useEditor();
const { getPageMeta, toggleDeletePage } = useAppState();
const { permanentlyDeletePage } = useEditor();
const { confirm } = useConfirm();
return (
packages/app/src/components/quick-search/config.ts
+2
View File
@@ -1,4 +1,6 @@
import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
// FIXME: href changed
export const List = [
{
title: 'All pages',
packages/app/src/components/workspace-slider-bar/index.tsx
+26 -10
View File
@@ -26,6 +26,7 @@ import { Tooltip } from '@/ui/tooltip';
import { useEditor } from '@/providers/editor-provider';
import { useModal } from '@/providers/global-modal-provider';
import { useGoToPage } from '@/providers/app-state-provider/hooks';
import { useAppState } from '@/providers/app-state-provider/context';
import { IconButton } from '@/ui/button';
import { WorkspaceSelector } from './WorkspaceSelector';
@@ -62,9 +63,9 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
);
};
export const WorkSpaceSliderBar = () => {
const { triggerQuickSearchModal, triggerImportModal } = useModal();
const { triggerQuickSearchModal } = useModal();
const [showSubFavorite, setShowSubFavorite] = useState(true);
const { createPage } = useEditor();
const { createPage, currentWorkspaceId } = useAppState();
const goToPage = useGoToPage();
const router = useRouter();
@@ -85,13 +86,21 @@ export const WorkSpaceSliderBar = () => {
>
<SearchIcon /> Quick search
</StyledListItem>
<Link href={{ pathname: '/page-list/all' }}>
<StyledListItem active={router.pathname === '/page-list/all'}>
<Link href={{ pathname: `/workspace/${currentWorkspaceId}/all` }}>
<StyledListItem
active={router.pathname === `/workspace/${currentWorkspaceId}/all`}
>
<AllPagesIcon /> <span>All pages</span>
</StyledListItem>
</Link>
<StyledListItem active={router.pathname === '/page-list/favorite'}>
<StyledLink href={{ pathname: '/page-list/favorite' }}>
<StyledListItem
active={
router.pathname === `/workspace/${currentWorkspaceId}/favorite`
}
>
<StyledLink
href={{ pathname: `/workspace/${currentWorkspaceId}/favorite` }}
>
<FavouritesIcon />
Favourites
</StyledLink>
@@ -121,15 +130,22 @@ export const WorkSpaceSliderBar = () => {
</StyledListItem>
</Tooltip>
<Link href={{ pathname: '/page-list/trash' }}>
<StyledListItem active={router.pathname === '/page-list/trash'}>
<Link href={{ pathname: `/workspace/${currentWorkspaceId}/trash` }}>
<StyledListItem
active={
router.pathname === `/workspace/${currentWorkspaceId}/trash`
}
>
<TrashIcon /> Trash
</StyledListItem>
</Link>
<StyledNewPageButton
onClick={async () => {
const page = await createPage();
goToPage(page.pageId);
const pageId = await createPage();
console.log('pageID', pageId);
if (pageId) {
goToPage(pageId);
}
}}
>
<AddIcon /> New Page
packages/app/src/pages/page-list/all.tsx → packages/app/src/pages/workspace/[workspaceId]/all.tsx
+7 -5
View File
@@ -1,12 +1,14 @@
import { useEditor } from '@/providers/editor-provider';
import { usePageList } from '@/providers/app-state-provider/usePageList';
import { useLoadWorkspace } from '@/providers/app-state-provider/hooks';
import { PageList } from '@/components/page-list';
import { AllPagesIcon } from '@blocksuite/icons';
import { PageListHeader } from '@/components/header';
export const All = () => {
const { pageList: allPageList } = useEditor();
return (
const All = () => {
const workspace = useLoadWorkspace();
const allPageList = usePageList(workspace);
return workspace ? (
<>
<PageListHeader icon={<AllPagesIcon />}>All Page</PageListHeader>
<PageList
@@ -14,7 +16,7 @@ export const All = () => {
showFavoriteTag={true}
/>
</>
);
) : null;
};
export default All;
packages/app/src/pages/page-list/favorite.tsx → packages/app/src/pages/workspace/[workspaceId]/favorite.tsx
+6 -4
View File
@@ -1,16 +1,18 @@
import { usePageList } from '@/providers/app-state-provider/usePageList';
import { useLoadWorkspace } from '@/providers/app-state-provider/hooks';
import { PageListHeader } from '@/components/header';
import { useEditor } from '@/providers/editor-provider';
import { PageList } from '@/components/page-list';
import { FavouritesIcon } from '@blocksuite/icons';
export const Favorite = () => {
const { pageList: allPageList } = useEditor();
return (
const workspace = useLoadWorkspace();
const allPageList = usePageList(workspace);
return workspace ? (
<>
<PageListHeader icon={<FavouritesIcon />}>Favourites</PageListHeader>
<PageList pageList={allPageList.filter(p => p.favorite && !p.trash)} />
</>
);
) : null;
};
export default Favorite;
packages/app/src/pages/page-list/trash.tsx → packages/app/src/pages/workspace/[workspaceId]/trash.tsx
+6 -4
View File
@@ -1,15 +1,17 @@
import { usePageList } from '@/providers/app-state-provider/usePageList';
import { useLoadWorkspace } from '@/providers/app-state-provider/hooks';
import { PageListHeader } from '@/components/header';
import { useEditor } from '@/providers/editor-provider';
import { PageList } from '@/components/page-list';
import { TrashIcon } from '@blocksuite/icons';
export const Trash = () => {
const { pageList: allPageList } = useEditor();
return (
const workspace = useLoadWorkspace();
const allPageList = usePageList(workspace);
return workspace ? (
<>
<PageListHeader icon={<TrashIcon />}>Trash</PageListHeader>
<PageList pageList={allPageList.filter(p => p.trash)} isTrash={true} />
</>
);
) : null;
};
export default Trash;
packages/app/src/providers/app-state-provider/context.ts
+4
View File
@@ -30,6 +30,8 @@ export interface AppStateContext extends AppStateValue {
loadPage: (pageId: string) => Promise<StorePage | null> | null;
createPage: (pageId?: string) => Promise<string | null> | null;
getPageMeta: (pageId: string) => PageMeta | null;
toggleFavoritePage: (pageId: string) => void;
toggleDeletePage: (pageId: string) => void;
}
export const AppState = createContext<AppStateContext>({
@@ -50,6 +52,8 @@ export const AppState = createContext<AppStateContext>({
loadPage: () => null,
createPage: () => null,
getPageMeta: () => null,
toggleFavoritePage: () => {},
toggleDeletePage: () => {},
});
export const useAppState = () => {
packages/app/src/providers/app-state-provider/provider.tsx
+26
View File
@@ -124,6 +124,32 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
null
);
},
toggleFavoritePage: (pageId: string) => {
const { currentWorkspace } = state;
if (!currentWorkspace) {
return;
}
const pageMeta = currentWorkspace.meta.pageMetas.find(
p => p.id === pageId
);
if (pageMeta) {
currentWorkspace.setPageMeta(pageId, {
favorite: !pageMeta.favorite,
});
}
},
toggleDeletePage: (pageId: string) => {
const { currentWorkspace } = state;
const pageMeta = currentWorkspace?.meta.pageMetas.find(
p => p.id === pageId
);
if (pageMeta) {
currentWorkspace!.setPageMeta(pageId, {
trash: !pageMeta.trash,
trashDate: +new Date(),
});
}
},
}),
[state, setState, loadWorkspaceHandler, createEditorHandler]
);
packages/app/src/providers/app-state-provider/usePageList.ts
+31
View File
@@ -0,0 +1,31 @@
import { useState, useEffect } from 'react';
import type { Workspace } from '@blocksuite/store';
import type { PageMeta as OriginalPageMeta } from '@blocksuite/store';
import type { EditorContainer } from '@blocksuite/editor';
export type PageMeta = {
favorite: boolean;
trash: boolean;
trashDate: number | void;
updatedDate: number | void;
mode: EditorContainer['mode'];
} & OriginalPageMeta;
export const usePageList = (workspace: Workspace | null) => {
const [pageList, setPageList] = useState<PageMeta[]>([]);
useEffect(() => {
if (!workspace) {
return;
}
setPageList(workspace.meta.pageMetas as PageMeta[]);
const dispose = workspace.meta.pagesUpdated.on(res => {
setPageList(workspace.meta.pageMetas as PageMeta[]);
}).dispose;
return () => {
dispose();
};
}, [workspace]);
return pageList;
};