format

ts/components/conversation/Message.tsx

@@ -739,10 +739,10 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
 
     return (
       <ReadableMessage
-      id={id}
+        id={id}
-      className={classNames(divClasses)}
+        className={classNames(divClasses)}
-      onChange={onVisible}
+        onChange={onVisible}
-      onContextMenu={this.handleContextMenu}
+        onContextMenu={this.handleContextMenu}
       >
         {this.renderAvatar()}
         <div

ts/components/conversation/ReadableMessage.tsx

@@ -1,28 +1,22 @@
 import React from 'react';
-import { useFocus } from "../../hooks/useFocus"
+import { useFocus } from '../../hooks/useFocus';
 import { InView } from 'react-intersection-observer';
 
 type ReadableMessageProps = {
-    children: React.ReactNode;
+  children: React.ReactNode;
-    id: string;
+  id: string;
-    className: string;
+  className: string;
-    onChange: (inView: boolean) => void;
+  onChange: (inView: boolean) => void;
-    onContextMenu: (e: any) => void
+  onContextMenu: (e: any) => void;
-}
+};
 
 export const ReadableMessage = (props: ReadableMessageProps) => {
+  const { onChange } = props;
+  useFocus(onChange);
 
-    const { onChange } = props;
+  return (
-    useFocus(onChange);
+    <InView {...props} as="div" threshold={1} delay={200} triggerOnce={true}>
-
+      {props.children}
-    return (
+    </InView>
-        <InView
+  );
-        {...props}
+};
-        as="div"
-        threshold={1}
-        delay={200}
-        triggerOnce={true}
-        >
-        {props.children}
-        </InView>);
-}

ts/hooks/useFocus.ts

@@ -1,11 +1,10 @@
-import { useEffect } from "react";
+import { useEffect } from 'react';
 
 export const useFocus = (action: (param: any) => void) => {
-  
   useEffect(() => {
-    window.addEventListener("focus", action);
+    window.addEventListener('focus', action);
     return () => {
-      window.removeEventListener("focus", action);
+      window.removeEventListener('focus', action);
     };
   });
-}
+};

ts/models/message.ts

@@ -1047,6 +1047,8 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
   public async markRead(readAt: number) {
     this.markReadNoCommit(readAt);
 
+    this.getConversation()?.markRead(readAt);
+
     await this.commit();
   }