fix: interpretations panel renders with flashing when liking or unlik…

…ing an interpretation (#1643) Fixes: https://dhis2.atlassian.net/browse/DHIS2-16392 Backport of #1600 --------- Co-authored-by: Edoardo Sabadelli <[email protected]>
dhis2 · Apr 2, 2024 · 4148bf9 · 4148bf9
1 parent bb1e150
commit 4148bf9
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 11 deletions.
diff --git a/src/components/Interpretations/InterpretationModal/InterpretationModal.js b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
@@ -82,7 +82,7 @@ const InterpretationModal = ({
     })
     const interpretation = data?.interpretation
     const shouldRenderModalContent = !error && interpretation
-    const shouldCssHideModal = loading || isVisualizationLoading
+    const loadingInProgress = loading || isVisualizationLoading
     const handleClose = () => {
         if (isDirty) {
             onInterpretationUpdate()
@@ -96,6 +96,13 @@ const InterpretationModal = ({
         }
         refetch({ id: interpretationId })
     }
+
+    const onLikeToggled = ({ likedBy }) => {
+        setIsDirty(true)
+        interpretation.likedBy = likedBy
+        interpretation.likes = likedBy.length
+    }
+
     const onInterpretationDeleted = () => {
         setIsDirty(false)
         onInterpretationUpdate()
@@ -110,7 +117,7 @@ const InterpretationModal = ({
 
     return (
         <>
-            {shouldCssHideModal && (
+            {loadingInProgress && (
                 <Layer>
                     <CenteredContent>
                         <CircularLoader />
@@ -121,7 +128,7 @@ const InterpretationModal = ({
                 fluid
                 onClose={handleClose}
                 className={cx(modalCSS.className, {
-                    hidden: shouldCssHideModal,
+                    hidden: loadingInProgress,
                 })}
                 dataTest="interpretation-modal"
             >
@@ -182,6 +189,7 @@ const InterpretationModal = ({
                                         downloadMenuComponent={
                                             downloadMenuComponent
                                         }
+                                        onLikeToggled={onLikeToggled}
                                     />
                                 </div>
                             </div>

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationThread.js b/src/components/Interpretations/InterpretationModal/InterpretationThread.js
@@ -13,6 +13,7 @@ const InterpretationThread = ({
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu,
@@ -47,6 +48,7 @@ const InterpretationThread = ({
                         onReplyIconClick={() => focusRef.current?.focus()}
                         onUpdated={() => onThreadUpdated(true)}
                         onDeleted={onInterpretationDeleted}
+                        onLikeToggled={onLikeToggled}
                     />
                     <div className={'comments'}>
                         {interpretation.comments.map((comment) => (
@@ -145,6 +147,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,

diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationList.js b/src/components/Interpretations/InterpretationsUnit/InterpretationList.js
@@ -22,6 +22,7 @@ export const InterpretationList = ({
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
     disabled,
@@ -64,6 +65,7 @@ export const InterpretationList = ({
                                         interpretation={interpretation}
                                         currentUser={currentUser}
                                         onClick={onInterpretationClick}
+                                        onLikeToggled={onLikeToggled}
                                         onReplyIconClick={onReplyIconClick}
                                         onDeleted={refresh}
                                         onUpdated={refresh}
@@ -116,6 +118,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,
 }
diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js b/src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js
@@ -52,11 +52,14 @@ export const InterpretationsUnit = forwardRef(
         ref
     ) => {
         const [isExpanded, setIsExpanded] = useState(true)
+        const [interpretations, setInterpretations] = useState([])
 
-        const { data, loading, fetching, refetch } = useDataQuery(
+        const { loading, fetching, refetch } = useDataQuery(
             interpretationsQuery,
             {
                 lazy: true,
+                onComplete: (data) =>
+                    setInterpretations(data.interpretations.interpretations),
             }
         )
 
@@ -78,6 +81,14 @@ export const InterpretationsUnit = forwardRef(
             }
         }, [type, id, renderId, refetch])
 
+        const onLikeToggled = ({ id, likedBy }) => {
+            const interpretation = interpretations.find(
+                (interp) => interp.id === id
+            )
+            interpretation.likedBy = likedBy
+            interpretation.likes = likedBy.length
+        }
+
         return (
             <div
                 className={cx('container', {
@@ -107,7 +118,7 @@ export const InterpretationsUnit = forwardRef(
                                 <CircularLoader small />
                             </div>
                         )}
-                        {data && (
+                        {interpretations && (
                             <>
                                 <InterpretationForm
                                     currentUser={currentUser}
@@ -118,12 +129,11 @@ export const InterpretationsUnit = forwardRef(
                                 />
                                 <InterpretationList
                                     currentUser={currentUser}
-                                    interpretations={
-                                        data.interpretations.interpretations
-                                    }
+                                    interpretations={interpretations}
                                     onInterpretationClick={
                                         onInterpretationClick
                                     }
+                                    onLikeToggled={onLikeToggled}
                                     onReplyIconClick={onReplyIconClick}
                                     refresh={onCompleteAction}
                                     disabled={disabled}

diff --git a/src/components/Interpretations/common/Interpretation/Interpretation.js b/src/components/Interpretations/common/Interpretation/Interpretation.js
@@ -22,13 +22,18 @@ export const Interpretation = ({
     onDeleted,
     disabled,
     onReplyIconClick,
+    onLikeToggled,
 }) => {
     const [isUpdateMode, setIsUpdateMode] = useState(false)
     const [showSharingDialog, setShowSharingDialog] = useState(false)
     const { toggleLike, isLikedByCurrentUser, toggleLikeInProgress } = useLike({
         interpretation,
         currentUser,
-        onComplete: onUpdated,
+        onComplete: (likedBy) =>
+            onLikeToggled({
+                id: interpretation.id,
+                likedBy,
+            }),
     })
     const shouldShowButton = !!onClick && !disabled
 
@@ -121,6 +126,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,

diff --git a/src/components/Interpretations/common/Interpretation/useLike.js b/src/components/Interpretations/common/Interpretation/useLike.js
@@ -7,11 +7,28 @@ const useLike = ({ interpretation, currentUser, onComplete }) => {
     const unlikeMutationRef = useRef({ resource, type: 'delete' })
     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)
     const toggleLike = () => {