From ba2bf9642332323d18c81de5da1597d8316e722f Mon Sep 17 00:00:00 2001
From: SimonLaux <mobile.info@simonlaux.de>
Date: Mon, 1 Jul 2024 21:37:49 +0200
Subject: [PATCH 1/2] refactor into proper function components, otherwise we
 would not be allowed to use hooks in those functions if they just return JSX
 without being a component.

fixes #3945
---
 CHANGELOG.md                                |  1 +
 src/renderer/components/message/Message.tsx | 90 ++++++++++++---------
 2 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 834c64acfa..45fe873aeb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
 - "Realtime Webxdc Channels" toggle not reflecting actual setting value #3992
 - even faster load of contact lists in "New Chat" and "New Group" #3927
 - really hide 3dot menu when it is hidden #3998
+- fix react crash when downloading a video message on demand #4000
 
 <a id="1_46_1"></a>
 
diff --git a/src/renderer/components/message/Message.tsx b/src/renderer/components/message/Message.tsx
index 509625adad..8f8968a068 100644
--- a/src/renderer/components/message/Message.tsx
+++ b/src/renderer/components/message/Message.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react'
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react'
 import reactStringReplace from 'react-string-replace'
 import classNames from 'classnames'
 import { C, T } from '@deltachat/jsonrpc-client'
@@ -50,10 +56,13 @@ import styles from './styles.module.scss'
 import type { OpenDialog } from '../../contexts/DialogContext'
 import type { PrivateReply } from '../../hooks/chat/usePrivateReply'
 
-const Avatar = (
-  contact: T.Contact,
+const Avatar = ({
+  contact,
+  onContactClick,
+}: {
+  contact: T.Contact
   onContactClick: (contact: T.Contact) => void
-) => {
+}) => {
   const { profileImage, color, displayName } = contact
 
   const onClick = () => onContactClick(contact)
@@ -83,11 +92,15 @@ const Avatar = (
   }
 }
 
-const AuthorName = (
-  contact: T.Contact,
-  onContactClick: (contact: T.Contact) => void,
-  overrideSenderName?: string
-) => {
+const AuthorName = ({
+  contact,
+  onContactClick,
+  overrideSenderName,
+}: {
+  contact: T.Contact
+  onContactClick: (contact: T.Contact) => void
+  overrideSenderName: string | null
+}) => {
   const accountId = selectedAccountId()
   const { color, id } = contact
   const [displayName, setDisplayName] = useState<string>(contact.displayName)
@@ -118,13 +131,19 @@ const AuthorName = (
   )
 }
 
-const ForwardedTitle = (
-  contact: T.Contact,
-  onContactClick: (contact: T.Contact) => void,
-  direction: 'incoming' | 'outgoing',
-  conversationType: ConversationType,
-  overrideSenderName?: string
-) => {
+const ForwardedTitle = ({
+  contact,
+  onContactClick,
+  direction,
+  conversationType,
+  overrideSenderName,
+}: {
+  contact: T.Contact
+  onContactClick: (contact: T.Contact) => void
+  direction: 'incoming' | 'outgoing'
+  conversationType: ConversationType
+  overrideSenderName: string | null
+}) => {
   const tx = useTranslationFunction()
 
   const { displayName, color } = contact
@@ -555,9 +574,7 @@ export default function Message(props: {
     )
   }
 
-  // we need this typeconversion, if we don't have it esbuild tries bundling deltachat-node again,
-  // which fails because it imports stuff only available in nodejs
-  const downloadState = message.downloadState
+  const { downloadState } = message
 
   if (downloadState !== 'Done') {
     content = (
@@ -605,22 +622,23 @@ export default function Message(props: {
       })}
       id={message.id.toString()}
     >
-      {showAuthor &&
-        direction === 'incoming' &&
-        Avatar(message.sender, onContactClick)}
+      {showAuthor && direction === 'incoming' && (
+        <Avatar contact={message.sender} onContactClick={onContactClick} />
+      )}
       <div
         onContextMenu={showContextMenu}
         className='msg-container'
         style={{ borderColor: message.sender.color }}
       >
-        {message.isForwarded &&
-          ForwardedTitle(
-            message.sender,
-            onContactClick,
-            direction,
-            conversationType,
-            message.overrideSenderName || undefined
-          )}
+        {message.isForwarded && (
+          <ForwardedTitle
+            contact={message.sender}
+            onContactClick={onContactClick}
+            direction={direction}
+            conversationType={conversationType}
+            overrideSenderName={message.overrideSenderName}
+          />
+        )}
         {!message.isForwarded && (
           <div
             className={classNames('author-wrapper', {
@@ -629,11 +647,11 @@ export default function Message(props: {
                 !showAuthor,
             })}
           >
-            {AuthorName(
-              message.sender,
-              onContactClick,
-              message.overrideSenderName || undefined
-            )}
+            <AuthorName
+              contact={message.sender}
+              onContactClick={onContactClick}
+              overrideSenderName={message.overrideSenderName}
+            />
           </div>
         )}
         <div
@@ -785,7 +803,7 @@ export const Quote = ({
 
 export function getAuthorName(
   displayName: string,
-  overrideSenderName?: string
+  overrideSenderName?: string | null
 ) {
   return overrideSenderName ? `~${overrideSenderName}` : displayName
 }

From ca1dfcb6652a39cd73bc3caad96d0ca6b2e623a7 Mon Sep 17 00:00:00 2001
From: SimonLaux <mobile.info@simonlaux.de>
Date: Mon, 1 Jul 2024 21:40:55 +0200
Subject: [PATCH 2/2] fix lint

---
 src/renderer/components/message/Message.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/renderer/components/message/Message.tsx b/src/renderer/components/message/Message.tsx
index 8f8968a068..43b7bddc38 100644
--- a/src/renderer/components/message/Message.tsx
+++ b/src/renderer/components/message/Message.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import reactStringReplace from 'react-string-replace'
 import classNames from 'classnames'
 import { C, T } from '@deltachat/jsonrpc-client'