From 3d37331fce0bddac2fe2ae0a10c1e77ea5954f8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Z=C3=ADpek?= <jan@zipek.cz>
Date: Sat, 3 Sep 2022 22:28:25 +0200
Subject: [PATCH] Fixed grid not updating properly

---
 .../components/DashboardGrid/DashboardGrid.tsx        |  1 -
 .../DashboardGrid/components/EditableBox.tsx          |  4 ++--
 .../src/pages/dashboard/contexts/DashboardContext.tsx | 11 +++++++++--
 client/src/utils/nextFrame.ts                         |  2 ++
 4 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 client/src/utils/nextFrame.ts

diff --git a/client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx b/client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx
index 65907e3..0c192a3 100644
--- a/client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx
+++ b/client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx
@@ -12,7 +12,6 @@ export const DashboardGrid = () => {
 					<EditableBox
 						box={b}
 						key={b.id}
-						boxes={boxes}
 						onPosition={(p) => {
 							setBoxes((previous) =>
 								normalizeBoxes(
diff --git a/client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx b/client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx
index bedd900..f70e0d6 100644
--- a/client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx
+++ b/client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx
@@ -13,7 +13,6 @@ import { BoxSettings } from '../../BoxSettings/BoxSettings'
 
 type Props = {
 	box: BoxDefinition
-	boxes: BoxDefinition[]
 	onPosition: (p: { x: number; y: number }) => void
 	onResize: (p: { w: number; h: number }) => void
 	onEdit: (box: BoxDefinition) => void
@@ -22,12 +21,13 @@ type Props = {
 
 export const EditableBox = ({
 	box,
-	boxes,
 	onPosition,
 	onResize,
 	onEdit,
 	onRemove,
 }: Props) => {
+	const { boxes } = useDashboardContext()
+
 	const [boxRef, setBoxRef] = useState<HTMLDivElement>()
 	const refreshRef = useRef<() => void>(null)
 
diff --git a/client/src/pages/dashboard/contexts/DashboardContext.tsx b/client/src/pages/dashboard/contexts/DashboardContext.tsx
index 310718e..5c2a8a8 100644
--- a/client/src/pages/dashboard/contexts/DashboardContext.tsx
+++ b/client/src/pages/dashboard/contexts/DashboardContext.tsx
@@ -7,6 +7,7 @@ import {
 import { parseDashboard } from '@/utils/dashboard/parseDashboard'
 import { useViewportSize } from '@/utils/hooks/useViewportSize'
 import { intervalToRange } from '@/utils/intervalToRange'
+import { nextFrame } from '@/utils/nextFrame'
 import { ComponentChild, createContext } from 'preact'
 import {
 	StateUpdater,
@@ -62,9 +63,15 @@ export const DashboardContextProvider = ({
 	const [boxes, setBoxes] = useState(dashboardContent?.boxes ?? [])
 
 	const handleChange = useCallback(
-		(cb: (boxes: BoxDefinition[]) => BoxDefinition[]) => {
+		async (cb: (boxes: BoxDefinition[]) => BoxDefinition[]) => {
 			const newBoxes = cb(boxes)
 
+			// Some nasty preact optimizations will result into the updated box
+			// not being updated unless we make this async. Probably because
+			// the modified box called this cb and it decided that it doesn't
+			// need to know the update result?
+			await nextFrame()
+
 			setBoxes(newBoxes)
 
 			if (dashboard.data && dashboardContent) {
@@ -77,7 +84,7 @@ export const DashboardContextProvider = ({
 				})
 			}
 		},
-		[dashboard.data]
+		[dashboard.data, boxes, dashboardContent]
 	)
 
 	useEffect(() => {
diff --git a/client/src/utils/nextFrame.ts b/client/src/utils/nextFrame.ts
new file mode 100644
index 0000000..1133989
--- /dev/null
+++ b/client/src/utils/nextFrame.ts
@@ -0,0 +1,2 @@
+export const nextFrame = () =>
+	new Promise((resolve) => requestAnimationFrame(resolve))