fix: yarn upgrade, node lts, lint warnings

package.json

@@ -15,7 +15,7 @@
         "d2-utilizr": "^0.2.16",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
-        "react-grid-layout": "1.2.2",
+        "react-grid-layout": "1.5.3",
         "react-redux": "^7.2.9",
         "react-router-dom": "^5.2.0",
         "redux": "^4.1.0",

patches/react-grid-layout+1.5.3.patch

@@ -0,0 +1,21 @@
+diff --git a/node_modules/react-grid-layout/lib/utils.js b/node_modules/react-grid-layout/lib/utils.js
+index 6d06348..933b961 100644
+--- a/node_modules/react-grid-layout/lib/utils.js
++++ b/node_modules/react-grid-layout/lib/utils.js
+@@ -294,6 +294,7 @@ function resolveCompactionCollision(
+       return layoutItem.i;
+     })
+     .indexOf(item.i);
++  const layoutHasStatics = getStatics(layout).length > 0;
+
+   // Go through each item we collide with.
+   for (let i = itemIndex + 1; i < layout.length; i++) {
+@@ -303,7 +304,7 @@ function resolveCompactionCollision(
+
+     // Optimization: we can break early if we know we're past this el
+     // We can do this b/c it's a sorted layout
+-    if (otherItem.y > item.y + item.h) break;
++    if (!layoutHasStatics && otherItem.y > item.y + item.h) break;
+
+     if (collides(item, otherItem)) {
+       resolveCompactionCollision(

src/pages/edit/EditDashboard.jsx

@@ -22,7 +22,7 @@ import ItemGrid from './ItemGrid.jsx'
 import classes from './styles/EditDashboard.module.css'
 import TitleBar from './TitleBar.jsx'
 
-const EditDashboard = (props) => {
+const EditDashboard = ({ id, isPrintPreviewView, setEditDashboard }) => {
     const dataEngine = useDataEngine()
     const { width } = useWindowDimensions()
     const [redirectUrl, setRedirectUrl] = useState(null)
@@ -32,29 +32,28 @@ const EditDashboard = (props) => {
     useEffect(() => {
         const loadDashboard = async () => {
             try {
-                const dashboard = await apiFetchDashboard(
-                    dataEngine,
-                    props.id,
-                    { mode: EDIT }
-                )
-                props.setEditDashboard(dashboard)
+                const dashboard = await apiFetchDashboard(dataEngine, id, {
+                    mode: EDIT,
+                })
+                setEditDashboard(dashboard)
                 setHasUpdateAccess(dashboard.access?.update || false)
                 setIsLoading(false)
             } catch (error) {
                 console.error('Error fetching dashboard:', error)
-                setRedirectUrl(props.id ? `/${props.id}` : '/')
+                setRedirectUrl(id ? `/${id}` : '/')
                 setIsLoading(false)
             }
         }
 
         if (isSmallScreen(width)) {
-            setRedirectUrl(props.id ? `/${props.id}` : '/')
+            setRedirectUrl(id ? `/${id}` : '/')
             return
         }
         setHeaderbarVisible(true)
 
         loadDashboard()
-    }, [props.id])
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dataEngine, id, setEditDashboard])
 
     if (redirectUrl) {
         return <Redirect to={redirectUrl} />
@@ -71,7 +70,7 @@ const EditDashboard = (props) => {
     }
 
     const renderGrid = () => {
-        if (props.isPrintPreviewView) {
+        if (isPrintPreviewView) {
             return <LayoutPrintPreview fromEdit={true} />
         }
         return (

src/pages/edit/LayoutModal.jsx

@@ -30,6 +30,7 @@ export const LayoutModal = ({ columns, onSaveLayout, onClose }) => {
     const { isDisconnected: offline } = useDhis2ConnectionStatus()
     const [cols, setCols] = useState(columns)
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => setCols(columns), [])
 
     const setColsWrapper = (value) => {

src/pages/edit/NewDashboard.jsx

@@ -32,7 +32,8 @@ const NewDashboard = (props) => {
 
         dispatch(acSetEditNewDashboard())
         dispatch(acClearSelected())
-    }, [])
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatch])
 
     if (redirectUrl) {
         return <Redirect to={redirectUrl} />

src/pages/print/PrintDashboard.jsx

@@ -98,7 +98,14 @@ const PrintDashboard = ({
         setHeaderbarVisible(false)
 
         loadDashboard()
-    }, [id])
+    }, [
+        id,
+        dataEngine,
+        setPrintDashboard,
+        addDashboardItem,
+        removeDashboardItem,
+        updateDashboardItem,
+    ])
 
     if (redirectUrl) {
         return <Redirect to={redirectUrl} />

src/pages/print/PrintLayoutDashboard.jsx

@@ -45,34 +45,38 @@ const PrintLayoutDashboard = ({
     const [redirectUrl, setRedirectUrl] = useState(null)
     const [isLoading, setIsLoading] = useState(true)
 
-    const customizePrintLayoutDashboard = (dboard) => {
-        // If any items are taller than one page, reduce it to one
-        // page (react-grid-layout units)
-        dboard.dashboardItems.forEach((item) => {
-            if (item.h > MAX_ITEM_GRID_HEIGHT) {
-                item.shortened = true
-                updateDashboardItem({ ...item, h: MAX_ITEM_GRID_HEIGHT })
-            }
-        })
-
-        addPageBreaks(dboard.dashboardItems, addDashboardItem)
-
-        addDashboardItem({
-            type: PRINT_TITLE_PAGE,
-            isOneItemPerPage: false,
-        })
-
-        setIsLoading(false)
-    }
-
     useEffect(() => {
+        const customizePrintLayoutDashboard = (dboard) => {
+            // If any items are taller than one page, reduce it to one
+            // page (react-grid-layout units)
+            dboard.dashboardItems.forEach((item) => {
+                if (item.h > MAX_ITEM_GRID_HEIGHT) {
+                    item.shortened = true
+                    updateDashboardItem({ ...item, h: MAX_ITEM_GRID_HEIGHT })
+                }
+            })
+
+            addPageBreaks(dboard.dashboardItems, addDashboardItem)
+
+            addDashboardItem({
+                type: PRINT_TITLE_PAGE,
+                isOneItemPerPage: false,
+            })
+
+            setIsLoading(false)
+        }
+
         const loadDashboard = async () => {
             try {
-                const dashboard = await apiFetchDashboard(dataEngine, id, {
-                    mode: VIEW,
-                })
-                setPrintDashboard(dashboard)
-                customizePrintLayoutDashboard(dashboard)
+                const fetchedDashboard = await apiFetchDashboard(
+                    dataEngine,
+                    id,
+                    {
+                        mode: VIEW,
+                    }
+                )
+                setPrintDashboard(fetchedDashboard)
+                customizePrintLayoutDashboard(fetchedDashboard)
             } catch (error) {
                 console.error('Error loading dashboard:', error)
                 setRedirectUrl(id ? `/${id}` : '/')
@@ -88,7 +92,14 @@ const PrintLayoutDashboard = ({
             setPrintDashboard(dashboard)
             customizePrintLayoutDashboard(dashboard)
         }
-    }, [dashboard])
+    }, [
+        dashboard,
+        dataEngine,
+        id,
+        setPrintDashboard,
+        addDashboardItem,
+        updateDashboardItem,
+    ])
 
     if (redirectUrl) {
         return <Redirect to={redirectUrl} />

src/pages/start/LandingPage.jsx

@@ -4,9 +4,10 @@
 import StartScreen from './StartScreen.jsx'
 
 const LandingPage = ({ username, onMount }) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => {
         onMount()
     }, [])
 
     return (
         <>

src/pages/start/StartScreen.jsx

@@ -24,7 +24,7 @@ const StartScreen = ({ username }) => {
             }
         }
         populateMostViewedDashboards(dataEngine)
-    }, [username, online])
+    }, [username, online, dataEngine])
 
     const getContent = () => (
         <div data-test="start-screen">

yarn.lock

@@ -5396,7 +5396,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.x, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
+classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -5543,10 +5543,10 @@ cloneable-readable@^1.0.0:
     process-nextick-args "^2.0.0"
     readable-stream "^2.3.5"
 
-clsx@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 cmd-shim@^5.0.0:
   version "5.0.0"
@@ -7431,6 +7431,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-equals@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-4.0.3.tgz#72884cc805ec3c6679b99875f6b7654f39f0e8c7"
+  integrity sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==
+
 fast-fifo@^1.2.0, fast-fifo@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
@@ -10459,11 +10464,6 @@ lodash.isboolean@^3.0.3:
   resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
   integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
 
-lodash.isequal@^4.0.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
-  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
-
 lodash.isfunction@^3.0.8:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
@@ -12338,7 +12338,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@15.x, prop-types@^15.0.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.x, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -12515,12 +12515,12 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
-react-draggable@^4.0.0, react-draggable@^4.0.3:
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
-  integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==
+react-draggable@^4.4.6, react-draggable@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.5.0.tgz#0b274ccb6965fcf97ed38fcf7e3cc223bc48cdf5"
+  integrity sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==
   dependencies:
-    clsx "^1.1.1"
+    clsx "^2.1.1"
     prop-types "^15.8.1"
 
 react-error-boundary@^3.1.0:
@@ -12542,16 +12542,17 @@ react-final-form@^6.5.3:
   dependencies:
     "@babel/runtime" "^7.15.4"
 
-react-grid-layout@1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.2.2.tgz#42cdb4b27fcdc4fad1655d8862b9d54c6f011d6d"
-  integrity sha512-i5/xPkyi0llA6PCEW2B26e7pTY+JLp0zPvs6MYbbEXWaO1FWG0xr6Q/FqPrh6K86glV5ZRU7DEbvnedZVdFglg==
+react-grid-layout@1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.5.3.tgz#802de040616c443b0162d73cecde792cb5beeaa2"
+  integrity sha512-KaG6IbjD6fYhagUtIvOzhftXG+ViKZjCjADe86X1KHl7C/dsBN2z0mi14nbvZKTkp0RKiil9RPcJBgq3LnoA8g==
   dependencies:
-    classnames "2.x"
-    lodash.isequal "^4.0.0"
-    prop-types "^15.0.0"
-    react-draggable "^4.0.0"
-    react-resizable "^1.10.0"
+    clsx "^2.1.1"
+    fast-equals "^4.0.3"
+    prop-types "^15.8.1"
+    react-draggable "^4.4.6"
+    react-resizable "^3.0.5"
+    resize-observer-polyfill "^1.5.1"
 
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
@@ -12611,13 +12612,13 @@ react-refresh@^0.14.2:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
-react-resizable@^1.10.0:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.11.1.tgz#02ca6850afa7a22c1b3e623e64aef71ee252af69"
-  integrity sha512-S70gbLaAYqjuAd49utRHibtHLrHXInh7GuOR+6OO6RO6uleQfuBnWmZjRABfqNEx3C3Z6VPLg0/0uOYFrkfu9Q==
+react-resizable@^3.0.5:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.1.3.tgz#b8c3f8aeffb7b0b2c2306bfc7a742462e58125fb"
+  integrity sha512-liJBNayhX7qA4tBJiBD321FDhJxgGTJ07uzH5zSORXoE8h7PyEZ8mLqmosST7ppf6C4zUsbd2gzDMmBCfFp9Lw==
   dependencies:
     prop-types "15.x"
-    react-draggable "^4.0.3"
+    react-draggable "^4.5.0"
 
 react-router-dom@^5.2.0:
   version "5.2.1"