Replace deprecated MutableRefObject (#5492)

Author: nicodh

packages/frontend/src/components/composer/Composer.tsx

@@ -61,8 +61,8 @@ const Composer = forwardRef<
   {
     isContactRequest: boolean
     selectedChat: Type.FullChat
-    regularMessageInputRef: React.MutableRefObject<ComposerMessageInput | null>
-    editMessageInputRef: React.MutableRefObject<ComposerMessageInput | null>
+    regularMessageInputRef: React.RefObject<ComposerMessageInput | null>
+    editMessageInputRef: React.RefObject<ComposerMessageInput | null>
     draftState: DraftObject
     onSelectReplyToShortcut: ReturnType<
       typeof useDraft
@@ -766,7 +766,7 @@ export function useDraft(
   chatId: number | null,
   isContactRequest: boolean,
   canSend: boolean, // no draft needed in chats we can't send messages
-  inputRef: React.MutableRefObject<ComposerMessageInput | null>
+  inputRef: React.RefObject<ComposerMessageInput | null>
 ): {
   draftState: DraftObject
   onSelectReplyToShortcut: (
@@ -1075,7 +1075,7 @@ export function useDraft(
 function useMessageEditing(
   accountId: number,
   chatId: T.BasicChat['id'],
-  editMessageInputRef: React.MutableRefObject<ComposerMessageInput | null>
+  editMessageInputRef: React.RefObject<ComposerMessageInput | null>
 ) {
   const tx = useTranslationFunction()
   const { userFeedback } = useContext(ScreenContext)

packages/frontend/src/components/dialogs/FullscreenAvatar.tsx

@@ -16,9 +16,9 @@ export default function FullscreenAvatar(
   const tx = useTranslationFunction()
   const { onClose, imagePath } = props
 
-  const resetImageZoom = useRef<(() => void) | null>(
-    null
-  ) as React.MutableRefObject<(() => void) | null>
+  const resetImageZoom = useRef<(() => void) | null>(null) as React.RefObject<
+    (() => void) | null
+  >
 
   const saveAs = () => {
     runtime.downloadFile(imagePath, basename(imagePath))

packages/frontend/src/components/dialogs/FullscreenMedia.tsx

@@ -49,9 +49,9 @@ export default function FullscreenMedia(props: Props & DialogProps) {
   const { onClose } = props
 
   const [msg, setMsg] = useState(props.msg)
-  const resetImageZoom = useRef<(() => void) | null>(
-    null
-  ) as React.MutableRefObject<(() => void) | null>
+  const resetImageZoom = useRef<(() => void) | null>(null) as React.RefObject<
+    (() => void) | null
+  >
   const previousNextMessageId = useRef<[number | null, number | null]>([
     null,
     null,

packages/frontend/src/components/helpers/hooks.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useRef, useState } from 'react'
+import { RefObject, useEffect, useRef, useState } from 'react'
 import { debounce } from 'debounce'
 
 /** debounce workaround so it can be useful in useFunctions that are used from multiple places at once
@@ -26,7 +26,7 @@ export function useRefLock(): {
     setLock: (lock: boolean) => {
       return (lockRef.current = lock)
     },
-  }) as MutableRefObject<any>
+  }) as RefObject<any>
 
   return stableRef.current
 }

packages/frontend/src/components/message/MessageList.tsx

@@ -2,7 +2,7 @@ import React, {
   useRef,
   useCallback,
   useLayoutEffect,
-  MutableRefObject,
+  RefObject,
   useEffect,
   useState,
   useMemo,
@@ -219,7 +219,7 @@ export default function MessageList({ accountId, chat, refComposer }: Props) {
       }
     })
   }
-  const unreadMessageInViewIntersectionObserver: MutableRefObject<IntersectionObserver> =
+  const unreadMessageInViewIntersectionObserver: RefObject<IntersectionObserver> =
     useRef(
       new IntersectionObserver(onUnreadMessageInView, {
         root: null,
@@ -744,10 +744,10 @@ export const MessageListInner = React.memo(
     messageListItems: T.MessageListItem[]
     activeView: T.MessageListItem[]
     messageCache: { [msgId: number]: T.MessageLoadResult | undefined }
-    messageListRef: React.MutableRefObject<HTMLDivElement | null>
+    messageListRef: React.RefObject<HTMLDivElement | null>
     chat: T.FullChat
     loaded: boolean
-    unreadMessageInViewIntersectionObserver: React.MutableRefObject<IntersectionObserver | null>
+    unreadMessageInViewIntersectionObserver: React.RefObject<IntersectionObserver | null>
     loadMissingMessages: () => Promise<void>
   }) => {
     const tx = useTranslationFunction()

packages/frontend/src/components/message/MessageWrapper.tsx

@@ -12,7 +12,7 @@ type RenderMessageProps = {
   chat: T.FullChat
   message: T.Message
   conversationType: ConversationType
-  unreadMessageInViewIntersectionObserver: React.MutableRefObject<IntersectionObserver | null>
+  unreadMessageInViewIntersectionObserver: React.RefObject<IntersectionObserver | null>
 }
 
 const log = getLogger('renderer/message/MessageWrapper')

packages/frontend/src/contexts/ChatContext.tsx

@@ -4,7 +4,7 @@ import { ActionEmitter, KeybindAction } from '../keybindings'
 import { markChatAsSeen, saveLastChatId } from '../backend/chat'
 import { BackendRemote } from '../backend-com'
 
-import type { MutableRefObject, PropsWithChildren } from 'react'
+import type { RefObject, PropsWithChildren } from 'react'
 import type { T } from '@deltachat/jsonrpc-client'
 import { useRpcFetch } from '../hooks/useFetch'
 import { getLogger } from '@deltachat-desktop/shared/logger'
@@ -63,7 +63,7 @@ type Props = {
    * the ref gives us a handle to reset the component without moving it up in the hierarchy.
    * a class component would give us the option to call methods on the component,
    * but we are using a functional component here so we need to pass this as a property instead*/
-  unselectChatRef: MutableRefObject<UnselectChat | null>
+  unselectChatRef: RefObject<UnselectChat | null>
 }
 
 export const ChatContext = React.createContext<ChatContextValue | null>(null)