4350 - Data history: UI ODP diffs - Render logic (#4376)

* 4350 - Show odp diffs when data is fetched * 4350 - Calculate diffs when data is fetched
openforis · Feb 13, 2025 · 6aec025 · 6aec025
1 parent e62cb08
commit 6aec025
Show file tree

Hide file tree

Showing 25 changed files with 115 additions and 117 deletions.
diff --git a/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx b/src/client/pages/OriginalDataPoint/components/Comments/Comments.tsx
@@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next'
 
 import classNames from 'classnames'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsDataLocked } from 'client/store/ui/dataLock'
 import { useOriginalDataPoint } from 'client/store/ui/originalDataPoint'
 import Button, { ButtonSize } from 'client/components/Buttons/Button'
 import { DataCell, DataGrid, DataRow } from 'client/components/DataGrid'
 import EditorWYSIWYG from 'client/components/EditorWYSIWYG'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 
 import { useUpdateDescription } from './hooks/useUpdateDescription'
@@ -27,7 +27,7 @@ const Comments: React.FC<Props> = (props) => {
   const updateDescription = useUpdateDescription()
   const actions = useCommentsActions()
   const [open, setOpen] = useState<boolean>(false)
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   useEffect(() => {
     if (open && isDataLocked) {
@@ -55,7 +55,7 @@ const Comments: React.FC<Props> = (props) => {
       </DataRow>
 
       <DataCell editable={open} gridColumn={canEditData ? `1/-1` : undefined} lastCol lastRow noBorder={!open}>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText originalDataPoint={originalDataPoint} path={['description']} />
         ) : (
           <div className={classNames('description__editor-container', { editable: open })}>

diff --git a/.../pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx b/.../pages/OriginalDataPoint/components/DataSources/AdditionalComments/AdditionalComments.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next'
 import { OriginalDataPoint } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { DataCell, DataRow, DataRowAction, DataRowActionType } from 'client/components/DataGrid'
 import TextArea from 'client/components/Inputs/TextArea'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -25,7 +25,7 @@ const AdditionalComments: React.FC<Props> = (props: Props) => {
   const disabled = useIsDisabled()
   const updateOriginalDataPoint = useUpdateDataSources()
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const onChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
     (event) => {
@@ -62,7 +62,7 @@ const AdditionalComments: React.FC<Props> = (props: Props) => {
         {t('nationalDataPoint.additionalComments')}
       </DataCell>
       <DataCell lastCol lastRow>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="input-text disabled"
             originalDataPoint={originalDataPoint}

diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/MethodsUsed/MethodsUsed.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next'
 import { ODPDataSourceMethod, OriginalDataPoint } from 'meta/assessment/originalDataPoint'
 import { Topics } from 'meta/messageCenter'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { DataCell, DataRow, DataRowAction, DataRowActionType } from 'client/components/DataGrid'
 import Select, { Option } from 'client/components/Inputs/Select'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -26,7 +26,7 @@ const MethodsUsed: React.FC<Props> = (props: Props) => {
   const reviewIndicator = useShowReviewIndicator()
   const disabled = useIsDisabled()
   const updateOriginalDataPoint = useUpdateDataSources()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const options = useMemo<Array<Option>>(
     () =>
@@ -61,7 +61,7 @@ const MethodsUsed: React.FC<Props> = (props: Props) => {
     <DataRow actions={actions}>
       <DataCell header>{t('nationalDataPoint.methodsUsed')}</DataCell>
       <DataCell lastCol>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="input-text disabled"
             originalDataPoint={originalDataPoint}

diff --git a/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx b/src/client/pages/OriginalDataPoint/components/DataSources/References/References.tsx
@@ -6,9 +6,9 @@ import { Objects } from 'utils/objects'
 import { OriginalDataPoint } from 'meta/assessment'
 import { Topics } from 'meta/messageCenter'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { DataCell, DataRow, DataRowAction, DataRowActionType } from 'client/components/DataGrid'
 import { EditorWYSIWYGLinks } from 'client/components/EditorWYSIWYG'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 import { useShowReviewIndicator } from 'client/pages/OriginalDataPoint/hooks/useShowReviewIndicator'
 
@@ -27,7 +27,7 @@ const References: React.FC<Props> = (props: Props) => {
 
   const reviewIndicator = useShowReviewIndicator()
   const disabled = useIsDisabled()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const updateOriginalDataPoint = useUpdateDataSources()
 
@@ -56,7 +56,7 @@ const References: React.FC<Props> = (props: Props) => {
     <DataRow actions={actions}>
       <DataCell header>{t('nationalDataPoint.references')}</DataCell>
       <DataCell lastCol>
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="input-text disabled"
             originalDataPoint={originalDataPoint}

diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx
@@ -5,12 +5,12 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs, OriginalDataPoint } from 'meta/assessment/originalDataPoint'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { useCycleRouteParams } from 'client/hooks/useRouteParams'
 import ButtonTableExport from 'client/components/ButtonTableExport'
 import DefinitionLink from 'client/components/DefinitionLink'
 import DiffText from 'client/components/DiffText'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 import { useTotalsChange } from './hooks/useTotalsChange'
 import ExtentOfForestRow from './ExtentOfForestRow'
@@ -44,7 +44,7 @@ const ExtentOfForest: React.FC<Props> = (props) => {
   )
   const totalLandArea = Numbers.format(ODPs.calcTotalLandArea({ originalDataPoint }))
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const _totals = { totalArea, totalForestPercentArea, totalLandArea, totalOtherWoodedLandPercentArea }
   const totalsChange = useTotalsChange(_totals)
@@ -112,24 +112,24 @@ const ExtentOfForest: React.FC<Props> = (props) => {
               <tr>
                 <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
                 <td className="fra-table__calculated-cell fra-table__divider">
-                  {historyLastApprovedIsActive ? <DiffText changes={totalsChange?.totalArea} /> : totalArea}
+                  {displayHistory ? <DiffText changes={totalsChange?.totalArea} /> : totalArea}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalForestPercentArea} />
                   ) : (
                     totalForestPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalOtherWoodedLandPercentArea} />
                   ) : (
                     totalOtherWoodedLandPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? <DiffText changes={totalsChange?.totalLandArea} /> : totalLandArea}
+                  {displayHistory ? <DiffText changes={totalsChange?.totalLandArea} /> : totalLandArea}
                 </td>
               </tr>
             </tbody>

diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForestRow.tsx
@@ -9,11 +9,11 @@ import { Topics } from 'meta/messageCenter'
 import { TooltipId } from 'meta/tooltip'
 
 import { useCycle } from 'client/store/assessment'
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import DiffText from 'client/components/DiffText'
 import PercentInput from 'client/components/PercentInput'
 import ReviewIndicator from 'client/components/ReviewIndicator'
 import ThousandSeparatedDecimalInput from 'client/components/ThousandSeparatedDecimalInput'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import { Columns, useOnPaste } from 'client/pages/OriginalDataPoint/components/hooks/useOnPaste'
 import { useUpdateOriginalData } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalData'
 import { useUpdateOriginalDataField } from 'client/pages/OriginalDataPoint/components/hooks/useUpdateOriginalDataField'
@@ -49,15 +49,15 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
   const target = [originalDataPoint.id, 'class', `${uuid}`, 'value'] as string[]
   const classNameRowComments = useNationalClassNameComments(target)
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   let validationErrorMessage = useNationalClassValidations({
     index,
     originalDataPoint,
     variable: 'validExtentOfForestPercentage',
   })
 
-  validationErrorMessage = historyLastApprovedIsActive ? null : validationErrorMessage
+  validationErrorMessage = displayHistory ? null : validationErrorMessage
 
   const otherLandPercent = ODPs.calculateNationalClassOtherLandPercent(nationalClass)
 
@@ -75,7 +75,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
   return (
     <tr className={classNameRowComments}>
       <th className="fra-table__category-cell">
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText originalDataPoint={originalDataPoint} path={['nationalClasses', index, 'name']} />
         ) : (
           name
@@ -86,7 +86,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
           error: !nationalClassValidation.validArea,
         })}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <ODPDiffText
             className="odp-data-input-diff"
             format="decimal"
@@ -117,7 +117,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <ODPDiffText
               format="percent"
@@ -148,7 +148,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
         data-tooltip-content={validationErrorMessage}
         data-tooltip-id={TooltipId.error}
       >
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-percent-diff">
             <ODPDiffText
               format="percent"
@@ -175,7 +175,7 @@ const ExtentOfForestRow: React.FC<Props> = (props) => {
       </td>
 
       <td className="fra-table__calculated-cell">
-        {historyLastApprovedIsActive ? (
+        {displayHistory ? (
           <div className="odp-calculated-percent-diff">
             <DiffText changes={otherLandPercentChange} />
             <span>%</span>

diff --git a/...ient/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts b/...ient/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useOtherLandPercentChange.ts
@@ -6,8 +6,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   nationalClassIndex: number
@@ -20,16 +20,16 @@ export const useOtherLandPercentChange = (props: Props): Returned => {
   const { nationalClassIndex, otherLandPercent: otherLandPercentCurrent } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
   const nationalClass = originalDataPointHistory?.nationalClasses?.[nationalClassIndex]
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(nationalClass)
 
     const otherLandPercentPrev = canCalculate ? ODPs.calculateNationalClassOtherLandPercent(nationalClass) : null
 
     return Diff.diffLines(otherLandPercentPrev ?? '', otherLandPercentCurrent ?? '')
-  }, [historyLastApprovedIsActive, nationalClass, otherLandPercentCurrent])
+  }, [displayHistory, nationalClass, otherLandPercentCurrent])
 }
diff --git a/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts b/src/client/pages/OriginalDataPoint/components/ExtentOfForest/hooks/useTotalsChange.ts
@@ -7,8 +7,8 @@ import { Objects } from 'utils/objects'
 
 import { ODPs } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useLastApprovedOriginalDataPoint } from 'client/store/data/hooks/useLastApprovedOriginalDataPoint'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 type Props = {
   totalArea: string | null
@@ -32,10 +32,10 @@ export const useTotalsChange = (props: Props): Returned => {
   } = props
 
   const originalDataPointHistory = useLastApprovedOriginalDataPoint()
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   return useMemo<Returned>(() => {
-    if (!historyLastApprovedIsActive) return undefined
+    if (!displayHistory) return undefined
 
     const canCalculate = !Objects.isEmpty(originalDataPointHistory)
 
@@ -66,7 +66,7 @@ export const useTotalsChange = (props: Props): Returned => {
 
     return { totalArea, totalForestPercentArea, totalLandArea, totalOtherWoodedLandPercentArea }
   }, [
-    historyLastApprovedIsActive,
+    displayHistory,
     originalDataPointHistory,
     totalAreaCurrent,
     totalForestPercentAreaCurrent,

diff --git a/...client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx b/...client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx
@@ -5,12 +5,12 @@ import { Numbers } from 'utils/numbers'
 
 import { ODPs, OriginalDataPoint } from 'meta/assessment'
 
-import { useHistoryLastApprovedIsActive } from 'client/store/data'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { useCycleRouteParams } from 'client/hooks/useRouteParams'
 import ButtonTableExport from 'client/components/ButtonTableExport'
 import DefinitionLink from 'client/components/DefinitionLink'
 import DiffText from 'client/components/DiffText'
+import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 
 import { useForestCharacteristicsTotalsChange } from './hooks/useForestCharacteristicsTotalsChange'
 import { useHistoryHasNaturallyRegeneratingAndPlantationForest } from './hooks/useHistoryHasNaturallyRegeneratingAndPlantationForest'
@@ -57,7 +57,7 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
     })
   )
 
-  const historyLastApprovedIsActive = useHistoryLastApprovedIsActive()
+  const displayHistory = useODPDisplayHistory()
 
   const totalsChange = useForestCharacteristicsTotalsChange({
     totalForestNaturalPercentArea,
@@ -150,28 +150,28 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
               <tr>
                 <th className="fra-table__header-cell-left">{t('nationalDataPoint.total')}</th>
                 <th className="fra-table__calculated-cell fra-table__divider">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalForestPercentArea} />
                   ) : (
                     totalForestPercentArea
                   )}
                 </th>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalForestNaturalPercentArea} />
                   ) : (
                     totalForestNaturalPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalForestPlantationPercentArea} />
                   ) : (
                     totalForestPlantationPercentArea
                   )}
                 </td>
                 <td className="fra-table__calculated-cell">
-                  {historyLastApprovedIsActive ? (
+                  {displayHistory ? (
                     <DiffText changes={totalsChange?.totalOtherPlantedForestPercentArea} />
                   ) : (
                     totalOtherPlantedForestPercentArea