diff --git a/src/frontend/apps/e2e/__tests__/app-impress/common.ts b/src/frontend/apps/e2e/__tests__/app-impress/common.ts index 1c6a7005..df903e52 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/common.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/common.ts @@ -67,6 +67,12 @@ export const createDoc = async ( await page.locator('.c__modal__backdrop').click({ position: { x: 0, y: 0 }, }); + + await expect( + page + .getByLabel('It is the card information about the document.') + .getByText('Public'), + ).toBeVisible(); } } diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx index 90622191..ad99f4f1 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx @@ -13,6 +13,7 @@ import { import { ModalVersion, Versions } from '@/features/docs/doc-versioning'; import { useDate } from '@/hook'; +import { DocTagPublic } from './DocTagPublic'; import { DocToolBox } from './DocToolBox'; interface DocHeaderProps { @@ -84,18 +85,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => { $wrap="wrap" > - {doc.is_public && ( - - {t('Public')} - - )} + {t('Created at')} {formatDate(doc.created_at)} diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTagPublic.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTagPublic.tsx new file mode 100644 index 00000000..1b6d1ae9 --- /dev/null +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTagPublic.tsx @@ -0,0 +1,39 @@ +import { useRouter } from 'next/router'; +import { useTranslation } from 'react-i18next'; + +import { Text } from '@/components'; +import { useCunninghamTheme } from '@/cunningham'; +import { KEY_DOC_VISIBILITY, useDoc } from '@/features/docs/doc-management'; + +export const DocTagPublic = () => { + const { colorsTokens } = useCunninghamTheme(); + const { t } = useTranslation(); + const { + query: { id }, + } = useRouter(); + + const { data: doc } = useDoc( + { id: id as string }, + { + enabled: !!id, + queryKey: [KEY_DOC_VISIBILITY, { id }], + }, + ); + + if (!doc?.is_public) { + return null; + } + + return ( + + {t('Public')} + + ); +}; diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/api/useDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/api/useDoc.tsx index 9aeb9bda..ebbb1d54 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/api/useDoc.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/api/useDoc.tsx @@ -19,6 +19,7 @@ export const getDoc = async ({ id }: DocParams): Promise => { }; export const KEY_DOC = 'doc'; +export const KEY_DOC_VISIBILITY = 'doc-visibility'; export function useDoc( param: DocParams, diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx index 57cc0d2f..cadff5a3 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx @@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'; import { Box, Card, IconBG } from '@/components'; -import { KEY_DOC, KEY_LIST_DOC, useUpdateDoc } from '../api'; +import { KEY_DOC_VISIBILITY, KEY_LIST_DOC, useUpdateDoc } from '../api'; import { Doc } from '../types'; interface DocVisibilityProps { @@ -30,7 +30,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => { }, ); }, - listInvalideQueries: [KEY_LIST_DOC], + listInvalideQueries: [KEY_LIST_DOC, KEY_DOC_VISIBILITY], }); return (