@dhis2/analytics 24.10.3 → 24.10.4

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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)
 
 

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

@@ -37,6 +37,7 @@ const InterpretationThread = _ref => {
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu
@@ -76,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, {
@@ -101,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

@@ -41,6 +41,7 @@ const InterpretationList = _ref => {
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
     disabled
@@ -79,6 +80,7 @@ const InterpretationList = _ref => {
     interpretation: interpretation,
     currentUser: currentUser,
     onClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     onDeleted: refresh,
     onUpdated: refresh,
@@ -95,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/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

@@ -15,6 +15,7 @@ const InterpretationThread = _ref => {
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu
@@ -54,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, {
@@ -78,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

@@ -26,6 +26,7 @@ export const InterpretationList = _ref => {
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
     disabled
@@ -64,6 +65,7 @@ export const InterpretationList = _ref => {
     interpretation: interpretation,
     currentUser: currentUser,
     onClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     onDeleted: refresh,
     onUpdated: refresh,
@@ -78,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/package.json

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