From a69c5f354ca87ce581ee00e855eaa727dce16f60 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sat, 12 Jul 2025 19:33:26 +0200
Subject: [PATCH] react 19 type migration

---
 .../src/common/hooks/useFollowComponent.ts    | 24 ++++++++-----------
 .../cuesheet-table-elements/EventRow.tsx      |  4 ++--
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/common/hooks/useFollowComponent.ts b/apps/client/src/common/hooks/useFollowComponent.ts
index bb1c1a85d..60f187f87 100644
--- a/apps/client/src/common/hooks/useFollowComponent.ts
+++ b/apps/client/src/common/hooks/useFollowComponent.ts
@@ -1,10 +1,10 @@
-import { MutableRefObject, useCallback, useEffect, useRef } from 'react';
+import { RefObject, useCallback, useEffect, useRef } from 'react';
 
 import { useSelectedEventId } from './useSocket';
 
 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: MutableRefObject<ComponentRef>,
-  scrollRef: MutableRefObject<ScrollRef>,
+  componentRef: RefObject<ComponentRef>,
+  scrollRef: RefObject<ScrollRef>,
   topOffset: number,
 ) {
   if (!componentRef.current || !scrollRef.current) {
@@ -19,8 +19,8 @@ function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends H
 }
 
 function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: MutableRefObject<ComponentRef>,
-  scrollRef: MutableRefObject<ScrollRef>,
+  componentRef: RefObject<ComponentRef>,
+  scrollRef: RefObject<ScrollRef>,
   topOffset: number,
 ) {
   if (!componentRef.current || !scrollRef.current) {
@@ -36,8 +36,8 @@ function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTM
 }
 
 interface UseFollowComponentProps {
-  followRef: MutableRefObject<HTMLElement | null>;
-  scrollRef: MutableRefObject<HTMLElement | null>;
+  followRef: RefObject<HTMLElement | null>;
+  scrollRef: RefObject<HTMLElement | null>;
   doFollow: boolean;
   topOffset?: number;
   setScrollFlag?: (newValue: boolean) => void;
@@ -56,11 +56,7 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
       setScrollFlag?.(true);
       // Use requestAnimationFrame to ensure the component is fully loaded
       window.requestAnimationFrame(() => {
-        scrollToComponent(
-          followRef as MutableRefObject<HTMLElement>,
-          scrollRef as MutableRefObject<HTMLElement>,
-          topOffset,
-        );
+        scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
         setScrollFlag?.(false);
       });
     }
@@ -97,8 +93,8 @@ export function useFollowSelected(doFollow: boolean, topOffset = 100) {
       // Use requestAnimationFrame to ensure the component is fully loaded
       window.requestAnimationFrame(() => {
         snapToComponent(
-          { current: selectedRef.current } as MutableRefObject<HTMLElement>,
-          { current: scrollRef.current } as MutableRefObject<HTMLElement>,
+          { current: selectedRef.current } as RefObject<HTMLElement>,
+          { current: scrollRef.current } as RefObject<HTMLElement>,
           topOffset,
         );
       });
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
index 245fd6094..81740b8b9 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useRef } from 'react';
+import { RefObject, useEffect, useRef } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { useSessionStorage } from '@mantine/hooks';
 import { flexRender, Table } from '@tanstack/react-table';
@@ -22,7 +22,7 @@ interface EventRowProps {
   eventIndex: number;
   rowIndex: number;
   isPast?: boolean;
-  selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
+  selectedRef?: RefObject<HTMLTableRowElement | null>;
   skip?: boolean;
   colour?: string;
   rowBgColour?: string;