4247 - Data History: Split activities vs lastApproved comparison mode (…

…#4268)

src/client/components/Navigation/NavAssessment/History/History.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 
-import { useHistory } from 'client/store/data/hooks/useHistory'
+import { useHistoryActivities } from 'client/store/data'
 import Items from 'client/components/Navigation/NavAssessment/History/Items'
 
 import { useResetHistory } from './hooks/useResetHistory'
 
 const History: React.FC = () => {
-  const history = useHistory()
+  const history = useHistoryActivities()
 
   useResetHistory()
 

src/client/components/Navigation/NavAssessment/History/Items/Item/Item.tsx

@@ -9,7 +9,7 @@ import { ApiEndPoint } from 'meta/api/endpoint'
 import { ActivityLogs } from 'meta/assessment'
 import { Users } from 'meta/user'
 
-import { useHistoryCompareItem } from 'client/store/data'
+import { useHistoryActivitiesCompareItem } from 'client/store/data'
 import Icon from 'client/components/Icon'
 
 import { useOnClick } from './hooks/useOnClick'
@@ -20,7 +20,7 @@ const Item: React.FC<Props> = (props) => {
   const { user } = activity
 
   const { i18n, t } = useTranslation()
-  const compareItem = useHistoryCompareItem(target)
+  const compareItem = useHistoryActivitiesCompareItem(target)
   const onClick = useOnClick(props)
 
   const diffActive = compareItem?.id === activity.id

src/client/components/Navigation/NavAssessment/History/Items/Item/hooks/useOnClick.ts

@@ -13,6 +13,6 @@ export const useOnClick = (props: Props): Returned => {
   const dispatch = useAppDispatch()
 
   return useCallback<Returned>(() => {
-    dispatch(DataActions.toggleCompareHistoryItem({ datum, target }))
+    dispatch(DataActions.toggleHistoryActivitiesCompareItem({ datum, target }))
   }, [datum, dispatch, target])
 }

src/client/components/Navigation/NavAssessment/History/Items/Items.tsx

@@ -4,14 +4,14 @@ import { useTranslation } from 'react-i18next'
 
 import { ApiEndPoint } from 'meta/api/endpoint'
 
-import { HistoryItemState } from 'client/store/data'
+import { HistoryActivitiesItemState } from 'client/store/data'
 import { ItemSkeleton } from 'client/components/Navigation/NavAssessment/History/Items/Item'
 import TablePaginated, { TablePaginatedCounterComponent } from 'client/components/TablePaginated'
 
 import { useColumns } from './hooks/useColumns'
 
 type Props = {
-  items: HistoryItemState
+  items: HistoryActivitiesItemState
 }
 
 const Counter: TablePaginatedCounterComponent = (props) => {
@@ -42,7 +42,7 @@ const Items: React.FC<Props> = (props: Props) => {
         limit={12}
         marginPagesDisplayed={1}
         pageRangeDisplayed={1}
-        path={ApiEndPoint.CycleData.history(target)}
+        path={ApiEndPoint.CycleData.History.Activities.one(target)}
         skeleton={{ baseColor: 'var(--ui-bg-hover)', highlightColor: '#c2c2c2', Component: ItemSkeleton }}
         wrapCells={false}
       />

src/client/components/Navigation/NavAssessment/History/hooks/useResetHistory.ts

@@ -15,11 +15,11 @@ export const useResetHistory = () => {
   useEffect(() => {
     return () => {
       // reset table paginated data. add all supported items here
-      const pathDataSources = ApiEndPoint.CycleData.history(CommentableDescriptionName.dataSources)
+      const pathDataSources = ApiEndPoint.CycleData.History.Activities.one(CommentableDescriptionName.dataSources)
       dispatch(TablePaginatedActions.resetPaths({ paths: [pathDataSources] }))
 
       // reset history
-      dispatch(DataActions.resetHistory())
+      dispatch(DataActions.resetHistoryActivities())
     }
   }, [dispatch, location.pathname])
 }

src/client/components/Navigation/NavAssessment/NavAssessment.tsx

@@ -9,7 +9,7 @@ import { Objects } from 'utils/objects'
 import { Areas, CountryIso } from 'meta/area'
 import { Routes } from 'meta/routes'
 
-import { useIsHistoryActive } from 'client/store/data'
+import { useHistoryActivitiesIsActive } from 'client/store/data'
 import { useSections } from 'client/store/metadata'
 import { useCountryRouteParams } from 'client/hooks/useRouteParams'
 import Hr from 'client/components/Hr'
@@ -23,7 +23,7 @@ const NavAssessment: React.FC = () => {
   const { t } = useTranslation()
   const { assessmentName, cycleName, countryIso } = useCountryRouteParams<CountryIso>()
   const sections = useSections()
-  const historyActive = useIsHistoryActive()
+  const historyActive = useHistoryActivitiesIsActive()
 
   const [showSections, setShowSections] = useState<boolean>(false)
 

src/client/components/PageLayout/Toolbar/Lock/Lock.tsx

@@ -5,7 +5,7 @@ import MediaQuery from 'react-responsive'
 import classNames from 'classnames'
 
 import { useAppDispatch } from 'client/store'
-import { useIsHistoryActive } from 'client/store/data'
+import { useHistoryActivitiesIsActive } from 'client/store/data'
 import { useShowOriginalDatapoints } from 'client/store/ui/assessmentSection'
 import { DataLockActions, useIsDataLocked } from 'client/store/ui/dataLock'
 import { useCanEditCycleData } from 'client/store/user'
@@ -18,16 +18,16 @@ const Lock: React.FC = () => {
   const canEditCycleData = useCanEditCycleData()
   const locked = useIsDataLocked()
   const showOdps = useShowOriginalDatapoints()
-  const historyActive = useIsHistoryActive()
+  const historyActive = useHistoryActivitiesIsActive()
 
   const [disabled, setDisabled] = useState<boolean>(false)
   const [over, setOver] = useState<boolean>(false)
   const lockRef = useRef<boolean>(showOdps)
-  
+
   const toggleLock = useCallback(() => dispatch(DataLockActions.toggleDataLock()), [dispatch])
-  
+
   useEffect(() => {
-    if(canEditCycleData){
+    if (canEditCycleData) {
       if (historyActive || !showOdps) {
         setDisabled(true)
         if (!locked) {

src/client/pages/Section/Descriptions/CommentableDescription/Title/ButtonEdit/ButtonEdit.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 
 import { CommentableDescriptionName } from 'meta/assessment'
 
-import { useIsHistoryActive } from 'client/store/data'
+import { useHistoryActivitiesIsActive } from 'client/store/data'
 import { useCanEditDescription, useIsDescriptionEditable } from 'client/store/user/hooks'
 import Button, { ButtonSize } from 'client/components/Buttons/Button'
 import { useSectionContext } from 'client/pages/Section/context'
@@ -21,7 +21,7 @@ const ButtonEdit: React.FC<Props> = (props) => {
   const canEdit = useCanEditDescription({ sectionName })
   const editable = useIsDescriptionEditable({ sectionName, name })
   const toggleEdit = useToggleEdit({ name, sectionName })
-  const disabled = useIsHistoryActive()
+  const disabled = useHistoryActivitiesIsActive()
 
   if (!canEdit) return null
 

src/client/pages/Section/Descriptions/CommentableDescription/Title/ButtonHistory/ButtonHistory.tsx

@@ -5,8 +5,7 @@ import { Objects } from 'utils/objects'
 
 import { CommentableDescriptionName } from 'meta/assessment'
 
-import { useIsHistoryActive } from 'client/store/data'
-import { useHistory } from 'client/store/data/hooks/useHistory'
+import { useHistoryActivities, useHistoryActivitiesIsActive } from 'client/store/data'
 import { useCanViewHistory, useIsDescriptionEditable } from 'client/store/user/hooks'
 import Button, { ButtonSize, ButtonType } from 'client/components/Buttons/Button'
 import { useSectionContext } from 'client/pages/Section/context'
@@ -27,12 +26,12 @@ const ButtonHistory: React.FC<Props> = (props) => {
   const loading = false // TODO: useLoading..()
   const disabled = loading || editable
 
-  const historyActive = useIsHistoryActive()
+  const historyActive = useHistoryActivitiesIsActive()
   const onClick = useToggleHistory({ target })
 
   const isDataSources = target === CommentableDescriptionName.dataSources
 
-  const history = useHistory()
+  const history = useHistoryActivities()
   // Show toggle button when browsing history for current section
   const currentSectionEnabled = !Objects.isEmpty(history.items?.[target])
 

src/client/pages/Section/Descriptions/CommentableDescription/Title/ButtonHistory/hooks/useToggleHistory.ts

@@ -16,6 +16,6 @@ export const useToggleHistory = (props: Props): Returned => {
   const dispatch = useAppDispatch()
 
   return useCallback(() => {
-    dispatch(DataActions.toggleHistory({ labelKey: 'description.dataSourcesPlus', target }))
+    dispatch(DataActions.toggleHistoryActivities({ labelKey: 'description.dataSourcesPlus', target }))
   }, [dispatch, target])
 }

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 
 import { CommentableDescription, CommentableDescriptionName, DataSource } from 'meta/assessment'
 
-import { useHistoryCompareItem } from 'client/store/data'
+import { useHistoryActivitiesCompareItem } from 'client/store/data'
 
 export type DataSourceHistoryCompare = {
   dataItem?: DataSource
@@ -18,7 +18,7 @@ type Returned = Array<DataSourceHistoryCompare> | undefined
 export const useDataSourcesHistory = (props: Props): Returned => {
   const { dataSources } = props
 
-  const compareItem = useHistoryCompareItem<ActivityLogTarget>(CommentableDescriptionName.dataSources)
+  const compareItem = useHistoryActivitiesCompareItem<ActivityLogTarget>(CommentableDescriptionName.dataSources)
 
   return useMemo<Returned>(() => {
     if (!compareItem) return undefined

src/client/pages/Section/hooks/useGetTableData/useGetTableData.ts

@@ -4,7 +4,7 @@ import { CountryIso } from 'meta/area'
 
 import { useAppDispatch } from 'client/store'
 import { AssessmentActions } from 'client/store/assessment'
-import { DataActions } from 'client/store/data/slice'
+import { DataActions } from 'client/store/data'
 import { useCanEdit } from 'client/store/user'
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
 import { useCountryRouteParams } from 'client/hooks/useRouteParams'

src/client/store/data/actions/index.ts

@@ -0,0 +1,47 @@
+import { DataSlice } from 'client/store/data/slice'
+
+import { clearTableData } from './clearTableData'
+import { copyPreviousDatasources } from './copyPreviousDatasources'
+import { createContact } from './createContact'
+import { deleteContact } from './deleteContact'
+import { deleteDataSource } from './deleteDataSource'
+import { getContacts } from './getContacts'
+import { getDescription } from './getDescription'
+import { getLinkedDataSources } from './getLinkedDataSources'
+import { getNodeValuesEstimations } from './getNodeValuesEstimations'
+import { getODPLastUpdatedTimestamp } from './getODPLastUpdatedTimestamp'
+import { getTableData } from './getTableData'
+import { postEstimate } from './postEstimate'
+import { setNodeValues } from './setNodeValues'
+import { updateContact } from './updateContact'
+import { updateDescription } from './updateDescription'
+import { updateNodeValues } from './updateNodeValues'
+
+export const DataActions = {
+  ...DataSlice.actions,
+  // Table data
+  setNodeValues,
+  clearTableData,
+  getTableData,
+  updateNodeValues,
+  getNodeValuesEstimations,
+
+  // Original Data Point
+  getODPLastUpdatedTimestamp,
+
+  // Estimations
+  postEstimate,
+
+  // Descriptions
+  getDescription,
+  updateDescription,
+  copyPreviousDatasources,
+  deleteDataSource,
+  getLinkedDataSources,
+
+  // Contacts
+  createContact,
+  deleteContact,
+  getContacts,
+  updateContact,
+}

src/client/store/data/hooks/useHistoryActivities.ts

@@ -0,0 +1,7 @@
+import { DataSelector } from 'client/store/data/selectors'
+import { HistoryActivitiesState } from 'client/store/data/state'
+import { useAppSelector } from 'client/store/store'
+
+export const useHistoryActivities = (): HistoryActivitiesState => {
+  return useAppSelector(DataSelector.History.getHistoryActivities)
+}

src/client/store/data/hooks/useHistoryCompareItem.ts → src/client/store/data/hooks/useHistoryActivitiesCompareItem.ts

@@ -4,6 +4,6 @@ import { HistoryTarget } from 'meta/cycleData'
 import { DataSelector } from 'client/store/data/selectors'
 import { useAppSelector } from 'client/store/store'
 
-export const useHistoryCompareItem = <Target>(target: HistoryTarget): ActivityLog<Target> | undefined => {
+export const useHistoryActivitiesCompareItem = <Target>(target: HistoryTarget): ActivityLog<Target> | undefined => {
   return useAppSelector((state) => DataSelector.History.getHistoryCompareItem(state, target))
 }

src/client/store/data/hooks/useIsHistoryActive.ts → src/client/store/data/hooks/useHistoryActivitiesIsActive.ts

@@ -3,7 +3,7 @@ import { Objects } from 'utils/objects'
 import { DataSelector } from 'client/store/data/selectors'
 import { useAppSelector } from 'client/store/store'
 
-export const useIsHistoryActive = (): boolean => {
+export const useHistoryActivitiesIsActive = (): boolean => {
   const items = useAppSelector(DataSelector.History.getHistoryItems)
   return !Objects.isEmpty(items)
 }

src/client/store/data/index.ts

@@ -1,9 +1,11 @@
+export { DataActions } from './actions'
 export { useCommentableDescriptionValue } from './hooks/useCommentableDescriptionValue'
 export { useContacts } from './hooks/useContacts'
 export { useDataSourcesLinked } from './hooks/useDataSourcesLinked'
 export { useHasOriginalDataPointData } from './hooks/useHasOriginalDataPointData'
-export { useHistoryCompareItem } from './hooks/useHistoryCompareItem'
-export { useIsHistoryActive } from './hooks/useIsHistoryActive'
+export { useHistoryActivities } from './hooks/useHistoryActivities'
+export { useHistoryActivitiesCompareItem } from './hooks/useHistoryActivitiesCompareItem'
+export { useHistoryActivitiesIsActive } from './hooks/useHistoryActivitiesIsActive'
 export { useIsOdpTableDataFetched } from './hooks/useIsOdpTableDataFetched'
 export { useIsSectionDataEmpty } from './hooks/useIsSectionDataEmpty'
 export { useIsSomeTableDataFetching } from './hooks/useIsSomeTableDataFetching'
@@ -12,14 +14,13 @@ export { useNodeValueValidation, useTableHasErrors } from './hooks/useNodeValueV
 export { useOdpLastUpdatedTimestamp } from './hooks/useOdpLastUpdatedTimestamp'
 export { useOriginalDataPointYears } from './hooks/useOriginalDataPointYears'
 export { useRecordAssessmentData, useRecordAssessmentDataWithOdp } from './hooks/useRecordAssessmentData'
-export { DataActions } from './slice'
 export type {
   DataState,
-  HistoryItemState,
+  HistoryActivitiesItemState,
   RecordAssessmentValidationsState,
   RecordCountryValidationsState,
   RecordCycleValidationsState,
-  RecordTableDataStatus,
   RecordTableValidationsState,
+  TableDataStatusState,
 } from './state'
 export { TableDataStatus } from './state'

src/client/store/data/reducers/resetHistory.ts → src/client/store/data/reducers/resetHistoryActivities.ts

@@ -2,8 +2,8 @@ import { Draft } from '@reduxjs/toolkit'
 
 import { DataState } from 'client/store/data/state'
 
-export const resetHistory = (state: Draft<DataState>) => {
-  state.history = {}
+export const resetHistoryActivities = (state: Draft<DataState>) => {
+  state.history.activities = {}
 
   return state
 }

src/client/store/data/reducers/toggleHistoryActivities.ts

@@ -0,0 +1,16 @@
+import { Draft, PayloadAction } from '@reduxjs/toolkit'
+import { Objects } from 'utils/objects'
+
+import { DataState, HistoryActivitiesItemState } from 'client/store/data/state'
+
+export const toggleHistoryActivities = (state: Draft<DataState>, action: PayloadAction<HistoryActivitiesItemState>) => {
+  const { labelKey, target } = action.payload
+
+  if (state.history.activities?.items?.[target]) {
+    Objects.unset(state.history.activities.items, [target])
+  } else {
+    const path = ['history', 'activities', 'items', target]
+    Objects.setInPath({ obj: state, path, value: { labelKey, target } })
+  }
+  return state
+}

src/client/store/data/reducers/toggleCompareHistoryItem.ts → src/client/store/data/reducers/toggleHistoryActivitiesCompareItem.ts

@@ -11,13 +11,13 @@ type Action = PayloadAction<{
   target: HistoryTarget
 }>
 
-export const toggleCompareHistoryItem = (state: Draft<DataState>, action: Action) => {
+export const toggleHistoryActivitiesCompareItem = (state: Draft<DataState>, action: Action) => {
   const { datum, target } = action.payload
 
-  if (state.history.compareItem?.[target]?.id === datum.id) {
-    Objects.unset(state.history.compareItem, [target])
+  if (state.history.activities?.compareItem?.[target]?.id === datum.id) {
+    Objects.unset(state.history.activities.compareItem, [target])
   } else {
-    const path = ['history', 'compareItem', target]
+    const path = ['history', 'activities', 'compareItem', target]
     Objects.setInPath({ obj: state, path, value: datum })
   }
 }