@dhis2/analytics 24.10.2 → 24.10.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [24.10.4](https://github.com/dhis2/analytics/compare/v24.10.3...v24.10.4) (2024-04-02)
+
+
+### Bug Fixes
+
+* interpretations panel renders with flashing when liking or unliking an interpretation ([#1643](https://github.com/dhis2/analytics/issues/1643)) ([4148bf9](https://github.com/dhis2/analytics/commit/4148bf9ae1c8aa386abd7b2b7ad2c01636d8b06d)), closes [#1600](https://github.com/dhis2/analytics/issues/1600)
+
+## [24.10.3](https://github.com/dhis2/analytics/compare/v24.10.2...v24.10.3) (2024-03-20)
+
+
+### Bug Fixes
+
+* show correct date and time in About AO Unit [DHIS2-15825, DHIS2-16365] [24.x] ([#1642](https://github.com/dhis2/analytics/issues/1642)) ([1c9068c](https://github.com/dhis2/analytics/commit/1c9068c9d153798ccbd61f6b916c1ee94ec122f8))
+
 ## [24.10.2](https://github.com/dhis2/analytics/compare/v24.10.1...v24.10.2) (2023-10-25)
 
 

package/build/cjs/components/AboutAOUnit/AboutAOUnit.js

@@ -81,6 +81,9 @@ const AboutAOUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     renderId
   } = _ref3;
   const [isExpanded, setIsExpanded] = (0, _react.useState)(true);
+  const {
+    fromServerDate
+  } = (0, _appRuntime.useTimeZoneConversion)();
   const queries = (0, _react.useMemo)(() => getQueries(type), [type]);
   const {
     data,
@@ -194,16 +197,16 @@ const AboutAOUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   }, /*#__PURE__*/_react.default.createElement(_ui.IconClock16, {
     color: _ui.colors.grey700
   }), _d2I18n.default.t('Last updated {{time}}', {
-    time: (0, _moment.default)(data.ao.lastUpdated).fromNow()
+    time: (0, _moment.default)(fromServerDate(data.ao.lastUpdated)).fromNow()
   })), /*#__PURE__*/_react.default.createElement("p", {
     className: "jsx-".concat(_AboutAOUnitStyle.default.__hash) + " " + "detailLine"
   }, /*#__PURE__*/_react.default.createElement(_ui.IconUser16, {
     color: _ui.colors.grey700
   }), (_data$ao$createdBy = data.ao.createdBy) !== null && _data$ao$createdBy !== void 0 && _data$ao$createdBy.displayName ? _d2I18n.default.t('Created {{time}} by {{author}}', {
-    time: (0, _moment.default)(data.ao.created).fromNow(),
+    time: (0, _moment.default)(fromServerDate(data.ao.created)).fromNow(),
     author: data.ao.createdBy.displayName
   }) : _d2I18n.default.t('Created {{time}}', {
-    time: (0, _moment.default)(data.ao.created).fromNow()
+    time: (0, _moment.default)(fromServerDate(data.ao.created)).fromNow()
   })), /*#__PURE__*/_react.default.createElement("p", {
     className: "jsx-".concat(_AboutAOUnitStyle.default.__hash) + " " + "detailLine"
   }, /*#__PURE__*/_react.default.createElement(_ui.IconView16, {

package/build/cjs/components/Interpretations/InterpretationModal/InterpretationModal.js

@@ -90,7 +90,7 @@ const InterpretationModal = _ref2 => {
   });
   const interpretation = data === null || data === void 0 ? void 0 : data.interpretation;
   const shouldRenderModalContent = !error && interpretation;
-  const shouldCssHideModal = loading || isVisualizationLoading;
+  const loadingInProgress = loading || isVisualizationLoading;
 
   const handleClose = () => {
     if (isDirty) {
@@ -111,6 +111,15 @@ const InterpretationModal = _ref2 => {
     });
   };
 
+  const onLikeToggled = _ref3 => {
+    let {
+      likedBy
+    } = _ref3;
+    setIsDirty(true);
+    interpretation.likedBy = likedBy;
+    interpretation.likes = likedBy.length;
+  };
+
   const onInterpretationDeleted = () => {
     setIsDirty(false);
     onInterpretationUpdate();
@@ -124,11 +133,11 @@ const InterpretationModal = _ref2 => {
       });
     }
   }, [interpretationId, refetch]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldCssHideModal && /*#__PURE__*/_react.default.createElement(_ui.Layer, null, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null))), /*#__PURE__*/_react.default.createElement(_ui.Modal, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loadingInProgress && /*#__PURE__*/_react.default.createElement(_ui.Layer, null, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null))), /*#__PURE__*/_react.default.createElement(_ui.Modal, {
     fluid: true,
     onClose: handleClose,
     className: (0, _classnames.default)(modalCSS.className, {
-      hidden: shouldCssHideModal
+      hidden: loadingInProgress
     }),
     dataTest: "interpretation-modal"
   }, /*#__PURE__*/_react.default.createElement("h1", {
@@ -166,7 +175,8 @@ const InterpretationModal = _ref2 => {
     onInterpretationDeleted: onInterpretationDeleted,
     onThreadUpdated: onThreadUpdated,
     initialFocus: initialFocus,
-    downloadMenuComponent: downloadMenuComponent
+    downloadMenuComponent: downloadMenuComponent,
+    onLikeToggled: onLikeToggled
   }))))), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     disabled: fetching,
     onClick: handleClose

package/build/cjs/components/Interpretations/InterpretationModal/InterpretationThread.js

@@ -7,6 +7,8 @@ exports.InterpretationThread = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
+var _appRuntime = require("@dhis2/app-runtime");
+
 var _ui = require("@dhis2/ui");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -35,10 +37,14 @@ const InterpretationThread = _ref => {
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu
   } = _ref;
+  const {
+    fromServerDate
+  } = (0, _appRuntime.useTimeZoneConversion)();
   const focusRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     if (initialFocus && focusRef.current) {
@@ -57,7 +63,7 @@ const InterpretationThread = _ref => {
     className: "jsx-615306698" + " " + 'title'
   }, /*#__PURE__*/_react.default.createElement(_ui.IconClock16, {
     color: _ui.colors.grey700
-  }), (0, _moment.default)(interpretation.created).format('LLL')), DownloadMenu && /*#__PURE__*/_react.default.createElement(DownloadMenu, {
+  }), (0, _moment.default)(fromServerDate(interpretation.created)).format('LLL')), DownloadMenu && /*#__PURE__*/_react.default.createElement(DownloadMenu, {
     relativePeriodDate: interpretation.created,
     className: "jsx-615306698"
   }), /*#__PURE__*/_react.default.createElement("div", {
@@ -71,7 +77,8 @@ const InterpretationThread = _ref => {
       return (_focusRef$current = focusRef.current) === null || _focusRef$current === void 0 ? void 0 : _focusRef$current.focus();
     },
     onUpdated: () => onThreadUpdated(true),
-    onDeleted: onInterpretationDeleted
+    onDeleted: onInterpretationDeleted,
+    onLikeToggled: onLikeToggled
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "jsx-615306698" + " " + 'comments'
   }, interpretation.comments.map(comment => /*#__PURE__*/_react.default.createElement(_Comment.Comment, {
@@ -96,6 +103,7 @@ InterpretationThread.propTypes = {
   fetching: _propTypes.default.bool.isRequired,
   interpretation: _propTypes.default.object.isRequired,
   onInterpretationDeleted: _propTypes.default.func.isRequired,
+  onLikeToggled: _propTypes.default.func.isRequired,
   downloadMenuComponent: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
   initialFocus: _propTypes.default.bool,
   onThreadUpdated: _propTypes.default.func

package/build/cjs/components/Interpretations/InterpretationsUnit/InterpretationList.js

@@ -7,6 +7,8 @@ exports.InterpretationList = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
+var _appRuntime = require("@dhis2/app-runtime");
+
 var _ui = require("@dhis2/ui");
 
 var _moment = _interopRequireDefault(require("moment"));
@@ -39,10 +41,14 @@ const InterpretationList = _ref => {
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
     disabled
   } = _ref;
+  const {
+    fromServerDate
+  } = (0, _appRuntime.useTimeZoneConversion)();
   const interpretationsByDate = interpretations.reduce((groupedInterpretations, interpretation) => {
     const date = interpretation.created.split('T')[0];
 
@@ -67,13 +73,14 @@ const InterpretationList = _ref => {
   }), /*#__PURE__*/_react.default.createElement("time", {
     dateTime: date,
     className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]]) + " " + "date-header"
-  }, (0, _moment.default)(date).format('ll'))), /*#__PURE__*/_react.default.createElement("ol", {
+  }, (0, _moment.default)(fromServerDate(date)).format('ll'))), /*#__PURE__*/_react.default.createElement("ol", {
     className: _style.default.dynamic([["4058400613", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]]]) + " " + "interpretation-list"
   }, interpretationsByDate[date].sort(sortByCreatedDateDesc).map(interpretation => /*#__PURE__*/_react.default.createElement(_index.Interpretation, {
     key: interpretation.id,
     interpretation: interpretation,
     currentUser: currentUser,
     onClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     onDeleted: refresh,
     onUpdated: refresh,
@@ -90,6 +97,7 @@ InterpretationList.propTypes = {
   interpretations: _propTypes.default.array.isRequired,
   refresh: _propTypes.default.func.isRequired,
   onInterpretationClick: _propTypes.default.func.isRequired,
+  onLikeToggled: _propTypes.default.func.isRequired,
   onReplyIconClick: _propTypes.default.func.isRequired,
   disabled: _propTypes.default.bool
 };

package/build/cjs/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js

@@ -55,13 +55,14 @@ const InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     renderId
   } = _ref2;
   const [isExpanded, setIsExpanded] = (0, _react.useState)(true);
+  const [interpretations, setInterpretations] = (0, _react.useState)([]);
   const {
-    data,
     loading,
     fetching,
     refetch
   } = (0, _appRuntime.useDataQuery)(interpretationsQuery, {
-    lazy: true
+    lazy: true,
+    onComplete: data => setInterpretations(data.interpretations.interpretations)
   });
   const onCompleteAction = (0, _react.useCallback)(() => {
     refetch({
@@ -80,6 +81,17 @@ const InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       });
     }
   }, [type, id, renderId, refetch]);
+
+  const onLikeToggled = _ref3 => {
+    let {
+      id,
+      likedBy
+    } = _ref3;
+    const interpretation = interpretations.find(interp => interp.id === id);
+    interpretation.likedBy = likedBy;
+    interpretation.likes = likedBy.length;
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + ((0, _classnames.default)('container', {
       expanded: isExpanded
@@ -101,7 +113,7 @@ const InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "loader"
   }, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
     small: true
-  })), data && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InterpretationForm.InterpretationForm, {
+  })), interpretations && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InterpretationForm.InterpretationForm, {
     currentUser: currentUser,
     type: type,
     id: id,
@@ -109,8 +121,9 @@ const InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     disabled: disabled
   }), /*#__PURE__*/_react.default.createElement(_InterpretationList.InterpretationList, {
     currentUser: currentUser,
-    interpretations: data.interpretations.interpretations,
+    interpretations: interpretations,
     onInterpretationClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     refresh: onCompleteAction,
     disabled: disabled

package/build/cjs/components/Interpretations/common/Interpretation/Interpretation.js

@@ -35,7 +35,8 @@ const Interpretation = _ref => {
     onUpdated,
     onDeleted,
     disabled,
-    onReplyIconClick
+    onReplyIconClick,
+    onLikeToggled
   } = _ref;
   const [isUpdateMode, setIsUpdateMode] = (0, _react.useState)(false);
   const [showSharingDialog, setShowSharingDialog] = (0, _react.useState)(false);
@@ -46,7 +47,10 @@ const Interpretation = _ref => {
   } = (0, _useLike.useLike)({
     interpretation,
     currentUser,
-    onComplete: onUpdated
+    onComplete: likedBy => onLikeToggled({
+      id: interpretation.id,
+      likedBy
+    })
   });
   const shouldShowButton = !!onClick && !disabled;
   return isUpdateMode ? /*#__PURE__*/_react.default.createElement(_InterpretationUpdateForm.InterpretationUpdateForm, {
@@ -107,6 +111,7 @@ Interpretation.propTypes = {
   currentUser: _propTypes.default.object.isRequired,
   interpretation: _propTypes.default.object.isRequired,
   onDeleted: _propTypes.default.func.isRequired,
+  onLikeToggled: _propTypes.default.func.isRequired,
   onReplyIconClick: _propTypes.default.func.isRequired,
   onUpdated: _propTypes.default.func.isRequired,
   disabled: _propTypes.default.bool,

package/build/cjs/components/Interpretations/common/Interpretation/useLike.js

@@ -27,12 +27,22 @@ const useLike = _ref => {
   const [like, {
     loading: likeLoading
   }] = (0, _appRuntime.useDataMutation)(likeMutationRef.current, {
-    onComplete
+    onComplete: () => {
+      const newLikedBy = interpretation.likedBy.concat({
+        id: currentUser.id
+      });
+      setIsLikedByCurrentUser(true);
+      onComplete(newLikedBy);
+    }
   });
   const [unlike, {
     loading: unlikeLoading
   }] = (0, _appRuntime.useDataMutation)(unlikeMutationRef.current, {
-    onComplete
+    onComplete: () => {
+      const newLikedBy = interpretation.likedBy.filter(lb => lb.id !== currentUser.id);
+      setIsLikedByCurrentUser(false);
+      onComplete(newLikedBy);
+    }
   });
   const [isLikedByCurrentUser, setIsLikedByCurrentUser] = (0, _react.useState)(false);
 

package/build/cjs/components/Interpretations/common/Message/Message.js

@@ -7,6 +7,8 @@ exports.Message = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
+var _appRuntime = require("@dhis2/app-runtime");
+
 var _d2UiRichText = require("@dhis2/d2-ui-rich-text");
 
 var _ui = require("@dhis2/ui");
@@ -26,24 +28,27 @@ const Message = _ref => {
     created,
     username
   } = _ref;
+  const {
+    fromServerDate
+  } = (0, _appRuntime.useTimeZoneConversion)();
   return /*#__PURE__*/_react.default.createElement("li", {
-    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "container"
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "container"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "header"
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "header"
   }, /*#__PURE__*/_react.default.createElement(_ui.UserAvatar, {
     name: username,
     extrasmall: true
   }), username, /*#__PURE__*/_react.default.createElement("time", {
     dateTime: created,
-    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]])
-  }, (0, _moment.default)(created).format('lll'))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "content"
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]])
+  }, (0, _moment.default)(fromServerDate(created)).format('lll'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "content"
   }, /*#__PURE__*/_react.default.createElement(_d2UiRichText.Parser, null, text)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["2436588813", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "footer"
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "footer"
   }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2436588813",
+    id: "4031345705",
     dynamic: [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]
-  }, [".container.__jsx-style-dynamic-selector{padding:".concat(_ui.spacers.dp8, ";background-color:").concat(_ui.colors.grey100, ";border-radius:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(_ui.spacers.dp8, ";}"), ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:13px;line-height:16px;color:".concat(_ui.colors.grey900, ";}"), ".header.__jsx-style-dynamic-selector time.__jsx-style-dynamic-selector{font-size:12px;color:".concat(_ui.colors.grey600, ";}"), ".content.__jsx-style-dynamic-selector{font-size:14px;line-height:19px;color:".concat(_ui.colors.grey900, ";}"), ".content.__jsx-style-dynamic-selector p:first-child{margin:0;}", ".footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:".concat(_ui.spacers.dp8, ";}")]));
+  }, [".container.__jsx-style-dynamic-selector{padding:".concat(_ui.spacers.dp8, ";background-color:").concat(_ui.colors.grey100, ";border-radius:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(_ui.spacers.dp8, ";}"), ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:13px;line-height:16px;color:".concat(_ui.colors.grey900, ";}"), ".header.__jsx-style-dynamic-selector time.__jsx-style-dynamic-selector{font-size:12px;color:".concat(_ui.colors.grey600, ";}"), ".content.__jsx-style-dynamic-selector{font-size:14px;line-height:19px;color:".concat(_ui.colors.grey900, ";word-break:break-word;white-space:pre-line;}"), ".content.__jsx-style-dynamic-selector p:first-child{margin:0;}", ".footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:".concat(_ui.spacers.dp8, ";}")]));
 };
 
 exports.Message = Message;

package/build/es/components/AboutAOUnit/AboutAOUnit.js

@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-import { useDataQuery, useDataMutation } from '@dhis2/app-runtime';
+import { useDataQuery, useDataMutation, useTimeZoneConversion } from '@dhis2/app-runtime';
 import i18n from '@dhis2/d2-i18n';
 import { Parser as RichTextParser } from '@dhis2/d2-ui-rich-text';
 import { Button, CircularLoader, IconChevronDown24, IconChevronUp24, IconClock16, IconShare16, IconSubscribe24, IconSubscribeOff24, IconUser16, IconView16, colors } from '@dhis2/ui';
@@ -56,6 +56,9 @@ const AboutAOUnit = /*#__PURE__*/forwardRef((_ref3, ref) => {
     renderId
   } = _ref3;
   const [isExpanded, setIsExpanded] = useState(true);
+  const {
+    fromServerDate
+  } = useTimeZoneConversion();
   const queries = useMemo(() => getQueries(type), [type]);
   const {
     data,
@@ -169,16 +172,16 @@ const AboutAOUnit = /*#__PURE__*/forwardRef((_ref3, ref) => {
   }, /*#__PURE__*/React.createElement(IconClock16, {
     color: colors.grey700
   }), i18n.t('Last updated {{time}}', {
-    time: moment(data.ao.lastUpdated).fromNow()
+    time: moment(fromServerDate(data.ao.lastUpdated)).fromNow()
   })), /*#__PURE__*/React.createElement("p", {
     className: "jsx-".concat(styles.__hash) + " " + "detailLine"
   }, /*#__PURE__*/React.createElement(IconUser16, {
     color: colors.grey700
   }), (_data$ao$createdBy = data.ao.createdBy) !== null && _data$ao$createdBy !== void 0 && _data$ao$createdBy.displayName ? i18n.t('Created {{time}} by {{author}}', {
-    time: moment(data.ao.created).fromNow(),
+    time: moment(fromServerDate(data.ao.created)).fromNow(),
     author: data.ao.createdBy.displayName
   }) : i18n.t('Created {{time}}', {
-    time: moment(data.ao.created).fromNow()
+    time: moment(fromServerDate(data.ao.created)).fromNow()
   })), /*#__PURE__*/React.createElement("p", {
     className: "jsx-".concat(styles.__hash) + " " + "detailLine"
   }, /*#__PURE__*/React.createElement(IconView16, {

package/build/es/components/Interpretations/InterpretationModal/InterpretationModal.js

@@ -68,7 +68,7 @@ const InterpretationModal = _ref2 => {
   });
   const interpretation = data === null || data === void 0 ? void 0 : data.interpretation;
   const shouldRenderModalContent = !error && interpretation;
-  const shouldCssHideModal = loading || isVisualizationLoading;
+  const loadingInProgress = loading || isVisualizationLoading;
 
   const handleClose = () => {
     if (isDirty) {
@@ -89,6 +89,15 @@ const InterpretationModal = _ref2 => {
     });
   };
 
+  const onLikeToggled = _ref3 => {
+    let {
+      likedBy
+    } = _ref3;
+    setIsDirty(true);
+    interpretation.likedBy = likedBy;
+    interpretation.likes = likedBy.length;
+  };
+
   const onInterpretationDeleted = () => {
     setIsDirty(false);
     onInterpretationUpdate();
@@ -102,11 +111,11 @@ const InterpretationModal = _ref2 => {
       });
     }
   }, [interpretationId, refetch]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, shouldCssHideModal && /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, null))), /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loadingInProgress && /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, null))), /*#__PURE__*/React.createElement(Modal, {
     fluid: true,
     onClose: handleClose,
     className: cx(modalCSS.className, {
-      hidden: shouldCssHideModal
+      hidden: loadingInProgress
     }),
     dataTest: "interpretation-modal"
   }, /*#__PURE__*/React.createElement("h1", {
@@ -144,7 +153,8 @@ const InterpretationModal = _ref2 => {
     onInterpretationDeleted: onInterpretationDeleted,
     onThreadUpdated: onThreadUpdated,
     initialFocus: initialFocus,
-    downloadMenuComponent: downloadMenuComponent
+    downloadMenuComponent: downloadMenuComponent,
+    onLikeToggled: onLikeToggled
   }))))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(Button, {
     disabled: fetching,
     onClick: handleClose

package/build/es/components/Interpretations/InterpretationModal/InterpretationThread.js

@@ -1,4 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
+import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import { IconClock16, colors } from '@dhis2/ui';
 import cx from 'classnames';
 import moment from 'moment';
@@ -14,10 +15,14 @@ const InterpretationThread = _ref => {
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu
   } = _ref;
+  const {
+    fromServerDate
+  } = useTimeZoneConversion();
   const focusRef = useRef();
   useEffect(() => {
     if (initialFocus && focusRef.current) {
@@ -36,7 +41,7 @@ const InterpretationThread = _ref => {
     className: "jsx-615306698" + " " + 'title'
   }, /*#__PURE__*/React.createElement(IconClock16, {
     color: colors.grey700
-  }), moment(interpretation.created).format('LLL')), DownloadMenu && /*#__PURE__*/React.createElement(DownloadMenu, {
+  }), moment(fromServerDate(interpretation.created)).format('LLL')), DownloadMenu && /*#__PURE__*/React.createElement(DownloadMenu, {
     relativePeriodDate: interpretation.created,
     className: "jsx-615306698"
   }), /*#__PURE__*/React.createElement("div", {
@@ -50,7 +55,8 @@ const InterpretationThread = _ref => {
       return (_focusRef$current = focusRef.current) === null || _focusRef$current === void 0 ? void 0 : _focusRef$current.focus();
     },
     onUpdated: () => onThreadUpdated(true),
-    onDeleted: onInterpretationDeleted
+    onDeleted: onInterpretationDeleted,
+    onLikeToggled: onLikeToggled
   }), /*#__PURE__*/React.createElement("div", {
     className: "jsx-615306698" + " " + 'comments'
   }, interpretation.comments.map(comment => /*#__PURE__*/React.createElement(Comment, {
@@ -74,6 +80,7 @@ InterpretationThread.propTypes = {
   fetching: PropTypes.bool.isRequired,
   interpretation: PropTypes.object.isRequired,
   onInterpretationDeleted: PropTypes.func.isRequired,
+  onLikeToggled: PropTypes.func.isRequired,
   downloadMenuComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   initialFocus: PropTypes.bool,
   onThreadUpdated: PropTypes.func

package/build/es/components/Interpretations/InterpretationsUnit/InterpretationList.js

@@ -1,4 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
+import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import { IconCalendar24, colors, spacers } from '@dhis2/ui';
 import moment from 'moment';
 import PropTypes from 'prop-types';
@@ -25,10 +26,14 @@ export const InterpretationList = _ref => {
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
     disabled
   } = _ref;
+  const {
+    fromServerDate
+  } = useTimeZoneConversion();
   const interpretationsByDate = interpretations.reduce((groupedInterpretations, interpretation) => {
     const date = interpretation.created.split('T')[0];
 
@@ -53,13 +58,14 @@ export const InterpretationList = _ref => {
   }), /*#__PURE__*/React.createElement("time", {
     dateTime: date,
     className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]]) + " " + "date-header"
-  }, moment(date).format('ll'))), /*#__PURE__*/React.createElement("ol", {
+  }, moment(fromServerDate(date)).format('ll'))), /*#__PURE__*/React.createElement("ol", {
     className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]]) + " " + "interpretation-list"
   }, interpretationsByDate[date].sort(sortByCreatedDateDesc).map(interpretation => /*#__PURE__*/React.createElement(Interpretation, {
     key: interpretation.id,
     interpretation: interpretation,
     currentUser: currentUser,
     onClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     onDeleted: refresh,
     onUpdated: refresh,
@@ -74,6 +80,7 @@ InterpretationList.propTypes = {
   interpretations: PropTypes.array.isRequired,
   refresh: PropTypes.func.isRequired,
   onInterpretationClick: PropTypes.func.isRequired,
+  onLikeToggled: PropTypes.func.isRequired,
   onReplyIconClick: PropTypes.func.isRequired,
   disabled: PropTypes.bool
 };

package/build/es/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js

@@ -33,13 +33,14 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
     renderId
   } = _ref2;
   const [isExpanded, setIsExpanded] = useState(true);
+  const [interpretations, setInterpretations] = useState([]);
   const {
-    data,
     loading,
     fetching,
     refetch
   } = useDataQuery(interpretationsQuery, {
-    lazy: true
+    lazy: true,
+    onComplete: data => setInterpretations(data.interpretations.interpretations)
   });
   const onCompleteAction = useCallback(() => {
     refetch({
@@ -58,6 +59,17 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
       });
     }
   }, [type, id, renderId, refetch]);
+
+  const onLikeToggled = _ref3 => {
+    let {
+      id,
+      likedBy
+    } = _ref3;
+    const interpretation = interpretations.find(interp => interp.id === id);
+    interpretation.likedBy = likedBy;
+    interpretation.likes = likedBy.length;
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + (cx('container', {
       expanded: isExpanded
@@ -79,7 +91,7 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
     className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "loader"
   }, /*#__PURE__*/React.createElement(CircularLoader, {
     small: true
-  })), data && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InterpretationForm, {
+  })), interpretations && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InterpretationForm, {
     currentUser: currentUser,
     type: type,
     id: id,
@@ -87,8 +99,9 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
     disabled: disabled
   }), /*#__PURE__*/React.createElement(InterpretationList, {
     currentUser: currentUser,
-    interpretations: data.interpretations.interpretations,
+    interpretations: interpretations,
     onInterpretationClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     refresh: onCompleteAction,
     disabled: disabled

package/build/es/components/Interpretations/common/Interpretation/Interpretation.js

@@ -14,7 +14,8 @@ export const Interpretation = _ref => {
     onUpdated,
     onDeleted,
     disabled,
-    onReplyIconClick
+    onReplyIconClick,
+    onLikeToggled
   } = _ref;
   const [isUpdateMode, setIsUpdateMode] = useState(false);
   const [showSharingDialog, setShowSharingDialog] = useState(false);
@@ -25,7 +26,10 @@ export const Interpretation = _ref => {
   } = useLike({
     interpretation,
     currentUser,
-    onComplete: onUpdated
+    onComplete: likedBy => onLikeToggled({
+      id: interpretation.id,
+      likedBy
+    })
   });
   const shouldShowButton = !!onClick && !disabled;
   return isUpdateMode ? /*#__PURE__*/React.createElement(InterpretationUpdateForm, {
@@ -84,6 +88,7 @@ Interpretation.propTypes = {
   currentUser: PropTypes.object.isRequired,
   interpretation: PropTypes.object.isRequired,
   onDeleted: PropTypes.func.isRequired,
+  onLikeToggled: PropTypes.func.isRequired,
   onReplyIconClick: PropTypes.func.isRequired,
   onUpdated: PropTypes.func.isRequired,
   disabled: PropTypes.bool,

package/build/es/components/Interpretations/common/Interpretation/useLike.js

@@ -19,12 +19,22 @@ const useLike = _ref => {
   const [like, {
     loading: likeLoading
   }] = useDataMutation(likeMutationRef.current, {
-    onComplete
+    onComplete: () => {
+      const newLikedBy = interpretation.likedBy.concat({
+        id: currentUser.id
+      });
+      setIsLikedByCurrentUser(true);
+      onComplete(newLikedBy);
+    }
   });
   const [unlike, {
     loading: unlikeLoading
   }] = useDataMutation(unlikeMutationRef.current, {
-    onComplete
+    onComplete: () => {
+      const newLikedBy = interpretation.likedBy.filter(lb => lb.id !== currentUser.id);
+      setIsLikedByCurrentUser(false);
+      onComplete(newLikedBy);
+    }
   });
   const [isLikedByCurrentUser, setIsLikedByCurrentUser] = useState(false);
 

package/build/es/components/Interpretations/common/Message/Message.js

@@ -1,4 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
+import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import { Parser as RichTextParser } from '@dhis2/d2-ui-rich-text';
 import { UserAvatar, spacers, colors } from '@dhis2/ui';
 import moment from 'moment';
@@ -12,24 +13,27 @@ const Message = _ref => {
     created,
     username
   } = _ref;
+  const {
+    fromServerDate
+  } = useTimeZoneConversion();
   return /*#__PURE__*/React.createElement("li", {
-    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "container"
+    className: _JSXStyle.dynamic([["4031345705", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "header"
+    className: _JSXStyle.dynamic([["4031345705", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "header"
   }, /*#__PURE__*/React.createElement(UserAvatar, {
     name: username,
     extrasmall: true
   }), username, /*#__PURE__*/React.createElement("time", {
     dateTime: created,
-    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]])
-  }, moment(created).format('lll'))), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "content"
+    className: _JSXStyle.dynamic([["4031345705", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]])
+  }, moment(fromServerDate(created)).format('lll'))), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4031345705", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "content"
   }, /*#__PURE__*/React.createElement(RichTextParser, null, text)), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "footer"
+    className: _JSXStyle.dynamic([["4031345705", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "footer"
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2436588813",
+    id: "4031345705",
     dynamic: [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]
-  }, [".container.__jsx-style-dynamic-selector{padding:".concat(spacers.dp8, ";background-color:").concat(colors.grey100, ";border-radius:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(spacers.dp8, ";}"), ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:13px;line-height:16px;color:".concat(colors.grey900, ";}"), ".header.__jsx-style-dynamic-selector time.__jsx-style-dynamic-selector{font-size:12px;color:".concat(colors.grey600, ";}"), ".content.__jsx-style-dynamic-selector{font-size:14px;line-height:19px;color:".concat(colors.grey900, ";}"), ".content.__jsx-style-dynamic-selector p:first-child{margin:0;}", ".footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:".concat(spacers.dp8, ";}")]));
+  }, [".container.__jsx-style-dynamic-selector{padding:".concat(spacers.dp8, ";background-color:").concat(colors.grey100, ";border-radius:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(spacers.dp8, ";}"), ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:13px;line-height:16px;color:".concat(colors.grey900, ";}"), ".header.__jsx-style-dynamic-selector time.__jsx-style-dynamic-selector{font-size:12px;color:".concat(colors.grey600, ";}"), ".content.__jsx-style-dynamic-selector{font-size:14px;line-height:19px;color:".concat(colors.grey900, ";word-break:break-word;white-space:pre-line;}"), ".content.__jsx-style-dynamic-selector p:first-child{margin:0;}", ".footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:".concat(spacers.dp8, ";}")]));
 };
 
 Message.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "24.10.2",
+    "version": "24.10.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {