4408 - PDF and Print: Show dash for empty comment sections (#4409)

* 4408 - Remove prop drilling showDashEmptyContent and use regex for checking empty HTML * 4408 - CommentableDescription: Remove defaultProps * 4408 - Update useDescriptionErrorState comment
openforis · Feb 27, 2025 · 1869f21 · 1869f21
1 parent 8da5326
commit 1869f21
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 44 deletions.
diff --git a/src/client/pages/Section/Descriptions/AnalysisDescriptions/AnalysisDescriptions.tsx b/src/client/pages/Section/Descriptions/AnalysisDescriptions/AnalysisDescriptions.tsx
@@ -8,12 +8,11 @@ import { useCycleRouteParams } from 'client/hooks/useRouteParams'
 import CommentableDescription from 'client/pages/Section/Descriptions/CommentableDescription'
 
 type Props = {
-  showDashEmptyContent?: boolean
   analysisAndProcessing: AnalysisAndProcessingDescription
 }
 
 const AnalysisDescriptions: React.FC<Props> = (props) => {
-  const { analysisAndProcessing, showDashEmptyContent } = props
+  const { analysisAndProcessing } = props
 
   const { t } = useTranslation()
   const { cycleName } = useCycleRouteParams()
@@ -24,24 +23,18 @@ const AnalysisDescriptions: React.FC<Props> = (props) => {
       {analysisAndProcessing.estimationAndForecasting && (
         <CommentableDescription
           name={CommentableDescriptionName.estimationAndForecasting}
-          showDashEmptyContent={showDashEmptyContent}
           title={t('description.estimationAndForecasting')}
         />
       )}
 
       {analysisAndProcessing.reclassification && (
         <CommentableDescription
           name={CommentableDescriptionName.reclassification}
-          showDashEmptyContent={showDashEmptyContent}
           title={t('description.reclassification', { cycleName })}
         />
       )}
     </div>
   )
 }
 
-AnalysisDescriptions.defaultProps = {
-  showDashEmptyContent: false,
-}
-
 export default AnalysisDescriptions
diff --git a/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx b/src/client/pages/Section/Descriptions/CommentableDescription/CommentableDescription.tsx
@@ -9,6 +9,7 @@ import {
   useHistoryLastApprovedIsActive,
 } from 'client/store/data'
 import { useCanEditDescription, useIsDescriptionEditable } from 'client/store/user/hooks'
+import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { DataCell, DataGrid, DataRow } from 'client/components/DataGrid'
 import EditorWYSIWYG from 'client/components/EditorWYSIWYG'
 import { useSectionContext } from 'client/pages/Section/context'
@@ -21,14 +22,13 @@ import DescriptionDiffView from './DescriptionDiffView'
 type Props = {
   name: CommentableDescriptionName
   repository?: boolean
-  showDashEmptyContent?: boolean
   template?: CommentableDescriptionValue
   title: string
 }
 
 const CommentableDescription: React.FC<Props> = (props) => {
-  const { name, showDashEmptyContent, repository, template, title } = props
-
+  const { name, repository, template = { text: '' }, title } = props
+  const { print } = useIsPrintRoute()
   const { sectionName } = useSectionContext()
   const value = useCommentableDescriptionValue({ name, sectionName, template })
   const { empty } = useDescriptionErrorState({ name, sectionName })
@@ -61,7 +61,7 @@ const CommentableDescription: React.FC<Props> = (props) => {
               disabled={!editable}
               onChange={(content) => onChange({ ...value, text: content })}
               repository={repository}
-              value={!editable && empty && showDashEmptyContent ? '-' : value.text}
+              value={empty && print ? '-' : value.text}
             />
           )}
         </DataCell>
@@ -70,10 +70,4 @@ const CommentableDescription: React.FC<Props> = (props) => {
   )
 }
 
-CommentableDescription.defaultProps = {
-  repository: false,
-  showDashEmptyContent: false,
-  template: { text: '' },
-}
-
 export default CommentableDescription
diff --git a/...lient/pages/Section/Descriptions/CommentableDescription/hooks/useDescriptionErrorState.ts b/...lient/pages/Section/Descriptions/CommentableDescription/hooks/useDescriptionErrorState.ts
@@ -5,8 +5,17 @@ import { Objects } from 'utils/objects'
 import { CommentableDescriptionName, SectionName } from 'meta/assessment'
 
 import { useCommentableDescriptionValue } from 'client/store/data'
-import { useIsPrintRoute } from 'client/hooks/useIsRoute'
-import { DOMs } from 'client/utils/dom'
+
+const isHTMLEmpty = (html: string): boolean => {
+  if (Objects.isEmpty(html?.trim())) return true
+
+  const strippedHtml = html
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/g, ' ')
+    .trim()
+
+  return !strippedHtml
+}
 
 type Props = {
   name: CommentableDescriptionName
@@ -17,16 +26,15 @@ type Returned = {
   empty: boolean
 }
 
+/*
+    Note: Return value of the hook is used only in print view
+*/
+
 export const useDescriptionErrorState = (props: Props): Returned => {
   const { name, sectionName } = props
-  const { print } = useIsPrintRoute()
-
   const value = useCommentableDescriptionValue({ name, sectionName })
 
   return useMemo<Returned>(() => {
-    if (print) return { empty: false }
-    const empty = Objects.isEmpty(DOMs.parseDOMValue(value.text))
-
-    return { empty }
-  }, [print, value.text])
+    return { empty: isHTMLEmpty(value.text) }
+  }, [value.text])
 }
diff --git a/src/client/pages/Section/Descriptions/Descriptions.tsx b/src/client/pages/Section/Descriptions/Descriptions.tsx
@@ -26,11 +26,9 @@ const Descriptions: React.FC<Props> = (props: Props) => {
   return (
     <>
       <div className="descriptions">
-        {nationalData && <NationalDataDescriptions nationalData={nationalData} showDashEmptyContent={print} />}
+        {nationalData && <NationalDataDescriptions nationalData={nationalData} />}
 
-        {analysisAndProcessing && (
-          <AnalysisDescriptions analysisAndProcessing={analysisAndProcessing} showDashEmptyContent={print} />
-        )}
+        {analysisAndProcessing && <AnalysisDescriptions analysisAndProcessing={analysisAndProcessing} />}
       </div>
       {print && !onlyTables && <div className="page-break" />}
     </>

diff --git a/src/client/pages/Section/Descriptions/NationalDataDescriptions/NationalDataDescriptions.tsx b/src/client/pages/Section/Descriptions/NationalDataDescriptions/NationalDataDescriptions.tsx
@@ -9,7 +9,6 @@ import DataSources from 'client/pages/Section/Descriptions/NationalDataDescripti
 
 type Props = {
   nationalData: NationalDataDescription
-  showDashEmptyContent?: boolean
 }
 
 type DataSourcesProps = {
@@ -18,7 +17,7 @@ type DataSourcesProps = {
 }
 
 const NationalDataDescriptions: React.FC<Props> = (props) => {
-  const { nationalData, showDashEmptyContent } = props
+  const { nationalData } = props
 
   const { t } = useTranslation()
 
@@ -39,7 +38,6 @@ const NationalDataDescriptions: React.FC<Props> = (props) => {
           {!dataSourcesProps.withTable && (
             <CommentableDescription
               name={CommentableDescriptionName.dataSources}
-              showDashEmptyContent={showDashEmptyContent}
               title={t('description.dataSourcesPlus')}
             />
           )}
@@ -49,24 +47,15 @@ const NationalDataDescriptions: React.FC<Props> = (props) => {
       {nationalData.nationalClassification && (
         <CommentableDescription
           name={CommentableDescriptionName.nationalClassificationAndDefinitions}
-          showDashEmptyContent={showDashEmptyContent}
           title={t('description.nationalClassificationAndDefinitions')}
         />
       )}
 
       {nationalData.originalData && (
-        <CommentableDescription
-          name={CommentableDescriptionName.originalData}
-          showDashEmptyContent={showDashEmptyContent}
-          title={t('description.originalData')}
-        />
+        <CommentableDescription name={CommentableDescriptionName.originalData} title={t('description.originalData')} />
       )}
     </div>
   )
 }
 
-NationalDataDescriptions.defaultProps = {
-  showDashEmptyContent: false,
-}
-
 export default NationalDataDescriptions