From 9d767a08acf595b9c7775a50e188906f38a3e60a Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Mon, 30 May 2022 16:43:01 +0200
Subject: [PATCH] Hotfix for the aggregate tracks not getting updated on
 changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fülöp <fulopkovacs@users.noreply.github.com>
---
 packages/react/src/index.ts                   |  6 ++++-
 .../AggregateKeyframeEditor.tsx               | 19 ++++++++--------
 theatre/studio/src/refreshEvery.tsx           | 22 +++++++++++++++++++
 3 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 theatre/studio/src/refreshEvery.tsx

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index d0a318d..920d714 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -42,10 +42,14 @@ function useForceUpdate(debugLabel?: string) {
  * whenever there's a change in the values of the dependency array, or in the
  * derivations that are used within the callback function.
  *
- *
  * @param fn - The callback function
  * @param deps - The dependency array
  * @param debugLabel - The label used by the debugger
+ *
+ * @remarks
+ *
+ * A common mistake with `usePrism()` is not including its deps in its dependency array. Let's
+ * have an eslint rule to catch that.
  */
 export function usePrism<T>(
   fn: () => T,
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor.tsx
index ddad2e0..fb16056 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor.tsx
@@ -164,9 +164,10 @@ function useAggregateKeyframeEditorUtils(
     'index' | 'aggregateKeyframes' | 'selection' | 'viewModel'
   >,
 ) {
-  return usePrism(() => {
-    const {index, aggregateKeyframes} = props
+  const {index, aggregateKeyframes, selection} = props
+  const sheetObjectAddress = props.viewModel.sheetObject.address
 
+  return usePrism(() => {
     const cur = aggregateKeyframes[index]
     const next = aggregateKeyframes[index + 1]
 
@@ -187,24 +188,24 @@ function useAggregateKeyframeEditorUtils(
     const aggregatedConnections: AggregatedKeyframeConnection[] = !connected
       ? []
       : cur.keyframes.map(({kf, track}, i) => ({
-          ...props.viewModel.sheetObject.address,
+          ...sheetObjectAddress,
           trackId: track.id,
           left: kf,
           right: next.keyframes[i].kf,
         }))
 
-    const {projectId, sheetId} = props.viewModel.sheetObject.address
+    const {projectId, sheetId} = sheetObjectAddress
 
     const selectedConnections = prism
       .memo(
         'selectedConnections',
         () =>
           selectedKeyframeConnections(
-            props.viewModel.sheetObject.address.projectId,
-            props.viewModel.sheetObject.address.sheetId,
-            props.selection,
+            sheetObjectAddress.projectId,
+            sheetObjectAddress.sheetId,
+            selection,
           ),
-        [projectId, sheetId, props.selection],
+        [projectId, sheetId, selection],
       )
       .getValue()
 
@@ -215,7 +216,7 @@ function useAggregateKeyframeEditorUtils(
     )
 
     return {cur, connected, isAggregateEditingInCurvePopover, allConnections}
-  }, [])
+  }, [index, aggregateKeyframes, selection, sheetObjectAddress])
 }
 
 const AggregateCurveEditorPopover: React.FC<
diff --git a/theatre/studio/src/refreshEvery.tsx b/theatre/studio/src/refreshEvery.tsx
new file mode 100644
index 0000000..10015d6
--- /dev/null
+++ b/theatre/studio/src/refreshEvery.tsx
@@ -0,0 +1,22 @@
+import {useEffect, useState} from 'react'
+
+/**
+ * Little utility hook that refreshes a react element every `ms` milliseconds. Use
+ * it to debug whether the props of the element, or the return values of its hooks
+ * are getting properly updated.
+ *
+ * @param ms - interval in milliseconds
+ */
+export default function useDebugRefreshEvery(ms: number = 500) {
+  const [_, setState] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setState((i) => i + 1)
+    }, ms)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+}