🚚(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('/');
|
await page.goto('/');
|
||||||
});
|
});
|
||||||
|
|
||||||
test.describe('Doc Summary', () => {
|
test.describe('Doc Table Content', () => {
|
||||||
test('it checks the doc summary', async ({ page, browserName }) => {
|
test('it checks the doc table content', async ({ page, browserName }) => {
|
||||||
const [randomDoc] = await createDoc(page, 'doc-summary', browserName, 1);
|
const [randomDoc] = await createDoc(
|
||||||
|
page,
|
||||||
|
'doc-table-content',
|
||||||
|
browserName,
|
||||||
|
1,
|
||||||
|
);
|
||||||
|
|
||||||
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
|
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
|
||||||
|
|
||||||
@@ -9,7 +9,7 @@ import { Panel } from '@/components/Panel';
|
|||||||
import { useCunninghamTheme } from '@/cunningham';
|
import { useCunninghamTheme } from '@/cunningham';
|
||||||
import { DocHeader } from '@/features/docs/doc-header';
|
import { DocHeader } from '@/features/docs/doc-header';
|
||||||
import { Doc } from '@/features/docs/doc-management';
|
import { Doc } from '@/features/docs/doc-management';
|
||||||
import { Summary } from '@/features/docs/doc-summary';
|
import { TableContent } from '@/features/docs/doc-table-content';
|
||||||
import {
|
import {
|
||||||
VersionList,
|
VersionList,
|
||||||
Versions,
|
Versions,
|
||||||
@@ -70,7 +70,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
|
|||||||
<VersionList doc={doc} />
|
<VersionList doc={doc} />
|
||||||
</Panel>
|
</Panel>
|
||||||
)}
|
)}
|
||||||
<Summary doc={doc} />
|
<TableContent doc={doc} />
|
||||||
</Box>
|
</Box>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import {
|
|||||||
ModalShare,
|
ModalShare,
|
||||||
ModalUpdateDoc,
|
ModalUpdateDoc,
|
||||||
} from '@/features/docs/doc-management';
|
} 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 { useDocVersionStore } from '@/features/docs/doc-versioning';
|
||||||
|
|
||||||
import { ModalPDF } from './ModalExport';
|
import { ModalPDF } from './ModalExport';
|
||||||
@@ -26,7 +26,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
|
|||||||
const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
|
const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
|
||||||
const [isDropOpen, setIsDropOpen] = useState(false);
|
const [isDropOpen, setIsDropOpen] = useState(false);
|
||||||
const { setIsPanelVersionOpen } = useDocVersionStore();
|
const { setIsPanelVersionOpen } = useDocVersionStore();
|
||||||
const { setIsPanelSummaryOpen } = useDocSummaryStore();
|
const { setIsPanelTableContentOpen } = useDocTableContentStore();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
@@ -83,7 +83,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
|
|||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsPanelSummaryOpen(true);
|
setIsPanelTableContentOpen(true);
|
||||||
setIsPanelVersionOpen(false);
|
setIsPanelVersionOpen(false);
|
||||||
setIsDropOpen(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 { useDocStore } from '@/features/docs/doc-editor';
|
||||||
import { Doc } from '@/features/docs/doc-management';
|
import { Doc } from '@/features/docs/doc-management';
|
||||||
|
|
||||||
import { useDocSummaryStore } from '../stores';
|
import { useDocTableContentStore } from '../stores';
|
||||||
|
|
||||||
import { Heading } from './Heading';
|
import { Heading } from './Heading';
|
||||||
|
|
||||||
@@ -20,11 +20,11 @@ type HeadingBlock = {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
interface SummaryProps {
|
interface TableContentProps {
|
||||||
doc: Doc;
|
doc: Doc;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Summary = ({ doc }: SummaryProps) => {
|
export const TableContent = ({ doc }: TableContentProps) => {
|
||||||
const { docsStore } = useDocStore();
|
const { docsStore } = useDocStore();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
@@ -38,11 +38,12 @@ export const Summary = ({ doc }: SummaryProps) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const [headings, setHeadings] = useState<HeadingBlock[]>();
|
const [headings, setHeadings] = useState<HeadingBlock[]>();
|
||||||
const { setIsPanelSummaryOpen, isPanelSummaryOpen } = useDocSummaryStore();
|
const { setIsPanelTableContentOpen, isPanelTableContentOpen } =
|
||||||
|
useDocTableContentStore();
|
||||||
const [hasBeenClose, setHasBeenClose] = useState(false);
|
const [hasBeenClose, setHasBeenClose] = useState(false);
|
||||||
const setClosePanel = () => {
|
const setClosePanel = () => {
|
||||||
setHasBeenClose(true);
|
setHasBeenClose(true);
|
||||||
setIsPanelSummaryOpen(false);
|
setIsPanelTableContentOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const [headingIdHighlight, setHeadingIdHighlight] = useState<string>();
|
const [headingIdHighlight, setHeadingIdHighlight] = useState<string>();
|
||||||
@@ -50,16 +51,16 @@ export const Summary = ({ doc }: SummaryProps) => {
|
|||||||
// Open the panel if there are more than 1 heading
|
// Open the panel if there are more than 1 heading
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (headings?.length && headings.length > 1 && !hasBeenClose) {
|
if (headings?.length && headings.length > 1 && !hasBeenClose) {
|
||||||
setIsPanelSummaryOpen(true);
|
setIsPanelTableContentOpen(true);
|
||||||
}
|
}
|
||||||
}, [setIsPanelSummaryOpen, headings, hasBeenClose]);
|
}, [setIsPanelTableContentOpen, headings, hasBeenClose]);
|
||||||
|
|
||||||
// Close the panel unmount
|
// Close the panel unmount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
setIsPanelSummaryOpen(false);
|
setIsPanelTableContentOpen(false);
|
||||||
};
|
};
|
||||||
}, [setIsPanelSummaryOpen]);
|
}, [setIsPanelTableContentOpen]);
|
||||||
|
|
||||||
// To highlight the first heading in the viewport
|
// To highlight the first heading in the viewport
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -112,7 +113,7 @@ export const Summary = ({ doc }: SummaryProps) => {
|
|||||||
setHeadings(headingFiltering());
|
setHeadings(headingFiltering());
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!isPanelSummaryOpen) {
|
if (!isPanelTableContentOpen) {
|
||||||
return null;
|
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