From e4712831f26a6c88e265ea9da9fc25222e36fc37 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 10 Sep 2024 11:50:01 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(frontend)=20standalone=20component?=
 =?UTF-8?q?=20DocTagPublic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want to rerender the public tag when we update
the visibility of a document. The problem is that
the public tag is not a standalone component, so
to have it rerender we needed to rerender the whole
document, it is not visually nice.
We created a standalone component for
the public tag, so when we update the visibility
of a document, only the public tag will be rerender.
---
 .../apps/e2e/__tests__/app-impress/common.ts  |  6 +++
 .../docs/doc-header/components/DocHeader.tsx  | 14 +------
 .../doc-header/components/DocTagPublic.tsx    | 39 +++++++++++++++++++
 .../docs/doc-management/api/useDoc.tsx        |  1 +
 .../components/DocVisibility.tsx              |  4 +-
 5 files changed, 50 insertions(+), 14 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-header/components/DocTagPublic.tsx

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"
         >
           <Box $direction="row" $align="center" $gap="0.5rem 2rem" $wrap="wrap">
-            {doc.is_public && (
-              <Text
-                $weight="bold"
-                $background={colorsTokens()['primary-600']}
-                $color="white"
-                $padding="xtiny"
-                $radius="3px"
-                $size="s"
-              >
-                {t('Public')}
-              </Text>
-            )}
+            <DocTagPublic />
             <Text $size="s" $display="inline">
               {t('Created at')} <strong>{formatDate(doc.created_at)}</strong>
             </Text>
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 (
+    <Text
+      $weight="bold"
+      $background={colorsTokens()['primary-600']}
+      $color="white"
+      $padding="xtiny"
+      $radius="3px"
+      $size="s"
+    >
+      {t('Public')}
+    </Text>
+  );
+};
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<Doc> => {
 };
 
 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 (