4206 - Data History: Fix and Simplify Data Sources differences (#4402)

* 4206 - Data History: Fix and Simplify Data Sources differences

* 4206 - fix br DiffText

package.json

@@ -170,6 +170,7 @@
     "@reduxjs/toolkit": "^1.8.1",
     "@socket.io/redis-streams-adapter": "^0.1.0",
     "@types/lodash.chunk": "^4.2.9",
+    "@types/lodash.union": "^4.6.9",
     "@types/multer": "^1.4.7",
     "archiver": "^6.0.2",
     "assert": "^2.0.0",
@@ -222,6 +223,7 @@
     "lodash.range": "^3.2.0",
     "lodash.reverse": "^4.0.1",
     "lodash.throttle": "^4.1.1",
+    "lodash.union": "^4.6.0",
     "lodash.uniqby": "^4.7.0",
     "lodash.uniqwith": "^4.5.0",
     "lodash.unset": "^4.5.2",

src/client/components/DiffText/DiffText.tsx

@@ -22,8 +22,8 @@ const DiffText: React.FC<Props> = (props) => {
           <React.Fragment key={key}>
             {value.split('\n\r').map((text, j) => (
               <React.Fragment key={`${key}_${String(j)}`}>
+                {j !== 0 && <br />}
                 <span className={classNames({ added, removed })}>{text}</span>
-                <br />
               </React.Fragment>
             ))}
           </React.Fragment>

src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/_getDataSourceHistoryCompares.ts

@@ -0,0 +1,30 @@
+import { Arrays } from 'utils/arrays'
+
+import { DataSource } from 'meta/assessment'
+
+import { DataSourceHistoryCompare } from '../types'
+
+type Props = {
+  dataSources: Array<DataSource>
+  dataSourcesHistory: Array<DataSource>
+}
+type RecordDataSources = Record<string, DataSource>
+
+const _getRecordDataSources = (dataSources: Array<DataSource>): RecordDataSources =>
+  dataSources.reduce<RecordDataSources>((acc, dataSource) => ({ ...acc, [dataSource.uuid]: dataSource }), {})
+
+export const getDataSourceHistoryCompares = (props: Props): Array<DataSourceHistoryCompare> => {
+  const { dataSources, dataSourcesHistory } = props
+
+  const recordDataSources = _getRecordDataSources(dataSources)
+  const recordDataSourcesHistory = _getRecordDataSources(dataSourcesHistory)
+
+  const uuids = Arrays.union(Object.keys(recordDataSources), Object.keys(recordDataSourcesHistory))
+
+  return uuids.map<DataSourceHistoryCompare>((uuid) => {
+    const dataItem = recordDataSources[uuid]
+    const historyItem = recordDataSourcesHistory[uuid]
+
+    return { dataItem, historyItem }
+  })
+}

src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistoryActivities.ts

@@ -3,13 +3,16 @@ import { useMemo } from 'react'
 import { CommentableDescription, CommentableDescriptionName, DataSource } from 'meta/assessment'
 
 import { useHistoryActivitiesCompareItem } from 'client/store/data'
-import { DataSourceHistoryCompare } from 'client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types'
+
+import { DataSourceHistoryCompare } from '../types'
+import { getDataSourceHistoryCompares } from './_getDataSourceHistoryCompares'
 
 type ActivityLogTarget = { description: CommentableDescription }
 
 type Props = {
   dataSources: Array<DataSource>
 }
+
 type Returned = Array<DataSourceHistoryCompare> | undefined
 
 export const useDataSourcesHistoryActivities = (props: Props): Returned => {
@@ -20,40 +23,8 @@ export const useDataSourcesHistoryActivities = (props: Props): Returned => {
   return useMemo<Returned>(() => {
     if (!compareItem) return undefined
 
-    const items: Returned = []
     const dataSourcesHistory = compareItem.target?.description?.value?.dataSources ?? []
 
-    const dataLength = dataSources.length
-    const historyLength = dataSourcesHistory.length
-
-    let dataIndex = 0
-    let historyIndex = 0
-    for (let i = 0; i < Math.max(dataLength, historyLength); i += 1) {
-      let dataItem: DataSource
-      let historyItem: DataSource
-
-      const data = dataSources[dataIndex]
-      const history = dataSourcesHistory[historyIndex]
-      if (data?.uuid === history?.uuid) {
-        dataItem = data
-        dataIndex += 1
-        historyItem = history
-        historyIndex += 1
-      } else {
-        const onlyData = Boolean(data?.uuid) && !dataSourcesHistory.some((d) => d.uuid === data.uuid)
-
-        if (onlyData) {
-          dataItem = data
-          dataIndex += 1
-        } else {
-          historyItem = history
-          historyIndex += 1
-        }
-      }
-
-      items.push({ dataItem, historyItem })
-    }
-
-    return items
+    return getDataSourceHistoryCompares({ dataSources, dataSourcesHistory })
   }, [compareItem, dataSources])
 }

src/client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/hooks/useDataSourcesHistoryLastApproved.ts

@@ -3,7 +3,9 @@ import { useMemo } from 'react'
 import { CommentableDescriptionName, DataSource } from 'meta/assessment'
 
 import { useHistoryLastApprovedIsActive, useLastApprovedHistoryDescriptions } from 'client/store/data'
-import { DataSourceHistoryCompare } from 'client/pages/Section/Descriptions/NationalDataDescriptions/DataSources/types'
+
+import { DataSourceHistoryCompare } from '../types'
+import { getDataSourceHistoryCompares } from './_getDataSourceHistoryCompares'
 
 type Props = {
   dataSources: Array<DataSource>
@@ -23,23 +25,6 @@ export const useDataSourcesHistoryLastApproved = (props: Props): Returned => {
     const dataSourcesHistory =
       lastApprovedHistoryDescriptions?.[CommentableDescriptionName.dataSources]?.dataSources ?? []
 
-    const items: Returned = []
-
-    const dataLength = dataSources.length
-    const historyLength = dataSourcesHistory.length
-
-    let dataIndex = 0
-    let historyIndex = 0
-    for (let i = 0; i < Math.max(dataLength, historyLength); i += 1) {
-      const dataItem = dataSources[dataIndex]
-      // TODO: Handle non-empty history items by matching dataSources
-      const historyItem = dataSourcesHistory[historyIndex]
-
-      dataIndex += 1
-      historyIndex += 1
-      items.push({ dataItem, historyItem })
-    }
-
-    return items
+    return getDataSourceHistoryCompares({ dataSources, dataSourcesHistory })
   }, [dataSources, historyLastApprovedIsActive, lastApprovedHistoryDescriptions])
 }

src/utils/arrays.ts

@@ -7,6 +7,8 @@ import * as range from 'lodash.range'
 // @ts-ignore
 import * as reverse from 'lodash.reverse'
 // @ts-ignore
+import * as union from 'lodash.union'
+// @ts-ignore
 import * as uniqueBy from 'lodash.uniqby'
 // @ts-ignore
 import * as uniqWith from 'lodash.uniqwith'
@@ -29,6 +31,7 @@ export const Arrays = {
   range,
   reverse,
   startsWith,
+  union,
   unique,
   uniqueBy,
 }

yarn.lock

@@ -3641,6 +3641,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.union@^4.6.9":
+  version "4.6.9"
+  resolved "https://registry.yarnpkg.com/@types/lodash.union/-/lodash.union-4.6.9.tgz#953e63e3c97ecb7a704a4589e7584645e9315f0f"
+  integrity sha512-l/GEj9Xp2DptsfFYZ1JUczg6W/6JGbbDi0mVK8urg8XLUMguNJ2L1ya0QJzMctrtlP9+t5lfyL4QLF6P9/6ssQ==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash.uniqby@^4.7.0":
   version "4.7.9"
   resolved "https://registry.yarnpkg.com/@types/lodash.uniqby/-/lodash.uniqby-4.7.9.tgz#10bacba9cf3263c6e07ae11d953de6ada6605104"
@@ -10572,6 +10579,11 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
 
+lodash.union@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
+  integrity sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"