🚚(frontend) rename feature summary to table of content
We rename the feature summary to table of content to better reflect the feature purpose.
This commit is contained in:
@@ -6,9 +6,14 @@ test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
});
|
||||
|
||||
test.describe('Doc Summary', () => {
|
||||
test('it checks the doc summary', async ({ page, browserName }) => {
|
||||
const [randomDoc] = await createDoc(page, 'doc-summary', browserName, 1);
|
||||
test.describe('Doc Table Content', () => {
|
||||
test('it checks the doc table content', async ({ page, browserName }) => {
|
||||
const [randomDoc] = await createDoc(
|
||||
page,
|
||||
'doc-table-content',
|
||||
browserName,
|
||||
1,
|
||||
);
|
||||
|
||||
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
|
||||
|
||||
@@ -9,7 +9,7 @@ import { Panel } from '@/components/Panel';
|
||||
import { useCunninghamTheme } from '@/cunningham';
|
||||
import { DocHeader } from '@/features/docs/doc-header';
|
||||
import { Doc } from '@/features/docs/doc-management';
|
||||
import { Summary } from '@/features/docs/doc-summary';
|
||||
import { TableContent } from '@/features/docs/doc-table-content';
|
||||
import {
|
||||
VersionList,
|
||||
Versions,
|
||||
@@ -70,7 +70,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
|
||||
<VersionList doc={doc} />
|
||||
</Panel>
|
||||
)}
|
||||
<Summary doc={doc} />
|
||||
<TableContent doc={doc} />
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
ModalShare,
|
||||
ModalUpdateDoc,
|
||||
} from '@/features/docs/doc-management';
|
||||
import { useDocSummaryStore } from '@/features/docs/doc-summary';
|
||||
import { useDocTableContentStore } from '@/features/docs/doc-table-content';
|
||||
import { useDocVersionStore } from '@/features/docs/doc-versioning';
|
||||
|
||||
import { ModalPDF } from './ModalExport';
|
||||
@@ -26,7 +26,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
|
||||
const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
|
||||
const [isDropOpen, setIsDropOpen] = useState(false);
|
||||
const { setIsPanelVersionOpen } = useDocVersionStore();
|
||||
const { setIsPanelSummaryOpen } = useDocSummaryStore();
|
||||
const { setIsPanelTableContentOpen } = useDocTableContentStore();
|
||||
|
||||
return (
|
||||
<Box
|
||||
@@ -83,7 +83,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
|
||||
)}
|
||||
<Button
|
||||
onClick={() => {
|
||||
setIsPanelSummaryOpen(true);
|
||||
setIsPanelTableContentOpen(true);
|
||||
setIsPanelVersionOpen(false);
|
||||
setIsDropOpen(false);
|
||||
}}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export * from './Summary';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './useDocSummaryStore';
|
||||
@@ -1,13 +0,0 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
export interface UseDocSummaryStore {
|
||||
isPanelSummaryOpen: boolean;
|
||||
setIsPanelSummaryOpen: (isOpen: boolean) => void;
|
||||
}
|
||||
|
||||
export const useDocSummaryStore = create<UseDocSummaryStore>((set) => ({
|
||||
isPanelSummaryOpen: false,
|
||||
setIsPanelSummaryOpen: (isPanelSummaryOpen) => {
|
||||
set(() => ({ isPanelSummaryOpen }));
|
||||
},
|
||||
}));
|
||||
@@ -6,7 +6,7 @@ import { Panel } from '@/components/Panel';
|
||||
import { useDocStore } from '@/features/docs/doc-editor';
|
||||
import { Doc } from '@/features/docs/doc-management';
|
||||
|
||||
import { useDocSummaryStore } from '../stores';
|
||||
import { useDocTableContentStore } from '../stores';
|
||||
|
||||
import { Heading } from './Heading';
|
||||
|
||||
@@ -20,11 +20,11 @@ type HeadingBlock = {
|
||||
};
|
||||
};
|
||||
|
||||
interface SummaryProps {
|
||||
interface TableContentProps {
|
||||
doc: Doc;
|
||||
}
|
||||
|
||||
export const Summary = ({ doc }: SummaryProps) => {
|
||||
export const TableContent = ({ doc }: TableContentProps) => {
|
||||
const { docsStore } = useDocStore();
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -38,11 +38,12 @@ export const Summary = ({ doc }: SummaryProps) => {
|
||||
);
|
||||
|
||||
const [headings, setHeadings] = useState<HeadingBlock[]>();
|
||||
const { setIsPanelSummaryOpen, isPanelSummaryOpen } = useDocSummaryStore();
|
||||
const { setIsPanelTableContentOpen, isPanelTableContentOpen } =
|
||||
useDocTableContentStore();
|
||||
const [hasBeenClose, setHasBeenClose] = useState(false);
|
||||
const setClosePanel = () => {
|
||||
setHasBeenClose(true);
|
||||
setIsPanelSummaryOpen(false);
|
||||
setIsPanelTableContentOpen(false);
|
||||
};
|
||||
|
||||
const [headingIdHighlight, setHeadingIdHighlight] = useState<string>();
|
||||
@@ -50,16 +51,16 @@ export const Summary = ({ doc }: SummaryProps) => {
|
||||
// Open the panel if there are more than 1 heading
|
||||
useEffect(() => {
|
||||
if (headings?.length && headings.length > 1 && !hasBeenClose) {
|
||||
setIsPanelSummaryOpen(true);
|
||||
setIsPanelTableContentOpen(true);
|
||||
}
|
||||
}, [setIsPanelSummaryOpen, headings, hasBeenClose]);
|
||||
}, [setIsPanelTableContentOpen, headings, hasBeenClose]);
|
||||
|
||||
// Close the panel unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setIsPanelSummaryOpen(false);
|
||||
setIsPanelTableContentOpen(false);
|
||||
};
|
||||
}, [setIsPanelSummaryOpen]);
|
||||
}, [setIsPanelTableContentOpen]);
|
||||
|
||||
// To highlight the first heading in the viewport
|
||||
useEffect(() => {
|
||||
@@ -112,7 +113,7 @@ export const Summary = ({ doc }: SummaryProps) => {
|
||||
setHeadings(headingFiltering());
|
||||
});
|
||||
|
||||
if (!isPanelSummaryOpen) {
|
||||
if (!isPanelTableContentOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from './TableContent';
|
||||
@@ -0,0 +1 @@
|
||||
export * from './useDocTableContentStore';
|
||||
@@ -0,0 +1,15 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
export interface UseDocTableContentStore {
|
||||
isPanelTableContentOpen: boolean;
|
||||
setIsPanelTableContentOpen: (isOpen: boolean) => void;
|
||||
}
|
||||
|
||||
export const useDocTableContentStore = create<UseDocTableContentStore>(
|
||||
(set) => ({
|
||||
isPanelTableContentOpen: false,
|
||||
setIsPanelTableContentOpen: (isPanelTableContentOpen) => {
|
||||
set(() => ({ isPanelTableContentOpen }));
|
||||
},
|
||||
}),
|
||||
);
|
||||
Reference in New Issue
Block a user