From cd922c2c2c25fde63df0cf4e9afc46570097b00d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Castro?=
 <36093456+Scroody@users.noreply.github.com>
Date: Wed, 6 Sep 2023 11:24:42 -0300
Subject: [PATCH]  Fix: TypeScript and Lint Errors in Chat List/Page, Message,
 and Content Modules (#18648)

* rules addition and ts errors fixed on chat list component

* TS fixes and list for chat  list:page, content and message

* Additional fixes

* additional changes

* any type removed

* Update componet.tsx

* Update .eslintrc.js

* fixes

* fixing chat issues
---
 .../chat-message-list/component.tsx           | 16 ++--
 .../page/chat-message/componet.tsx            | 93 +++++++++----------
 .../text-content/component.tsx                | 17 +++-
 .../message-content/text-content/styles.ts    | 10 +-
 .../page/chat-message/styles.ts               | 29 +++---
 .../chat-message-list/page/component.tsx      | 85 +++++++++--------
 .../ui/components/chat/chat-graphql/styles.ts | 10 +-
 7 files changed, 133 insertions(+), 127 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx
index 98eb3b8f3f..b2e8c1a695 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx
@@ -16,6 +16,8 @@ import { Chat } from '/imports/ui/Types/chat';
 import { Message } from '/imports/ui/Types/message';
 import { useCurrentUser } from '/imports/ui/core/hooks/useCurrentUser';
 import { User } from '/imports/ui/Types/user';
+import ChatPopupContainer from '../chat-popup/component';
+import { defineMessages, useIntl } from "react-intl";
 import { Layout } from '/imports/ui/Types/layout';
 import ChatPopupContainer from '../chat-popup/component';
 import { ChatEvents } from "/imports/ui/core/enums/chat";
@@ -42,9 +44,8 @@ interface ChatListProps {
   totalPages: number;
   chatId: string;
   currentUserId: string;
-  setMessageAsSeenMutation: (variables: any) => void;
-  totalUnread?: number;
-  lastSeenAt: number;
+  setMessageAsSeenMutation: (variables: {chatId: string,
+        lastSeenAt: number}) => void;
 }
 const isElement = (el: any): el is HTMLElement => {
   return el instanceof HTMLElement;
@@ -267,7 +268,7 @@ const ChatMessageList: React.FC<ChatListProps> = ({
                       }
                       setUserLoadedBackUntilPage(userLoadedBackUntilPage - 1);
                     }
-                  }
+                    }
                 >
                   {intl.formatMessage(intlMessages.loadMoreButtonLabel)}
                 </ButtonLoadMore>
@@ -278,7 +279,7 @@ const ChatMessageList: React.FC<ChatListProps> = ({
           <ChatPopupContainer />
           {
             // @ts-ignore
-            Array.from({ length: pagesToLoad }, (_v, k) => k + firstPageToLoad).map((page) => {
+            Array.from({ length: pagesToLoad }, (v, k) => k + firstPageToLoad).map((page) => {
               return (
                 <ChatListPage
                   key={`page-${page}`}
@@ -297,12 +298,11 @@ const ChatMessageList: React.FC<ChatListProps> = ({
         </div>
       </MessageList>
     </MessageListWrapper >
-
   );
 }
 
-const ChatMessageListContainer: React.FC<Layout> = ({ }) => {
-  const idChatOpen = layoutSelect((i: idChatOpen) => i.idChatOpen);
+const ChatMessageListContainer: React.FC = ({ }) => {
+  const idChatOpen = layoutSelect((i: { idChatOpen: any; }) => i.idChatOpen);
   const isPublicChat = idChatOpen === PUBLIC_CHAT_KEY;
   const chatId = !isPublicChat ? idChatOpen : PUBLIC_GROUP_CHAT_KEY;
   const currentChat = useChat((chat) => {
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/componet.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/componet.tsx
index 72eeadc473..6cc3b74892 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/componet.tsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/componet.tsx
@@ -1,26 +1,25 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Message } from '/imports/ui/Types/message';
+import ChatMessageHeader from './message-header/component';
+import ChatMessageTextContent from './message-content/text-content/component';
+import ChatPollContent from './message-content/poll-content/component';
+import ChatMessagePresentationContent from './message-content/presentation-content/component';
+import { defineMessages, useIntl } from 'react-intl';
 import {
   ChatWrapper,
   ChatContent,
   ChatAvatar,
 } from "./styles";
-import ChatMessageHeader from "./message-header/component";
-import ChatMessageTextContent from "./message-content/text-content/component";
-import ChatPollContent from "./message-content/poll-content/component";
-import ChatMessagePresentationContent from "./message-content/presentation-content/component";
-import { defineMessages, useIntl } from "react-intl";
 import { ChatMessageType } from '/imports/ui/core/enums/chat';
 
 interface ChatMessageProps {
   message: Message;
-  previousMessage?: Message;
-  lastSenderPreviousPage?: string | null;
+  previousMessage: Message;
+  lastSenderPreviousPage: string | null;
   scrollRef: React.RefObject<HTMLDivElement>;
-  markMessageAsSeen: Function;
+  markMessageAsSeen: (message: Message) => void;
 }
 
-
 const intlMessages = defineMessages({
   pollResult: {
     id: 'app.chat.pollResult',
@@ -44,31 +43,32 @@ function isInViewport(el: HTMLDivElement) {
   const rect = el.getBoundingClientRect();
 
   return (
-    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.bottom >= 0
+    rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.bottom >= 0
   );
 }
 
+const messageRef = React.createRef<HTMLDivElement | null>();
+
 const ChatMesssage: React.FC<ChatMessageProps> = ({
-  message,
   previousMessage,
   lastSenderPreviousPage,
   scrollRef,
+  message,
   markMessageAsSeen,
 }) => {
   const intl = useIntl();
-  const messageRef = useRef<HTMLDivElement>(null);
-  const markMessageAsSeenOnScrollEnd = useCallback((message, messageRef) => {
+  const markMessageAsSeenOnScrollEnd = useCallback(() => {
     if (messageRef.current && isInViewport(messageRef.current)) {
       markMessageAsSeen(message);
     }
-  }, []);
+  }, [message, messageRef]);
 
   useEffect(() => {
-    // I use a function here to remove the event listener using the same reference 
     const callbackFunction = () => {
-      markMessageAsSeenOnScrollEnd(message, messageRef);
-    }
+      if (messageRef.current && isInViewport(messageRef.current)) {
+        markMessageAsSeen(message); // Pass the 'message' argument here
+      }
+    };
     if (message && scrollRef.current && messageRef.current) {
       if (isInViewport(messageRef.current)) {
         markMessageAsSeen(message);
@@ -77,14 +77,14 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
       }
     }
     return () => {
-      scrollRef?.current
-        ?.removeEventListener('scrollend', callbackFunction);
-    }
-  }, [message, messageRef]);
+      scrollRef?.current?.removeEventListener('scrollend', callbackFunction);
+    };
+  }, [message, messageRef, markMessageAsSeenOnScrollEnd]);
 
   if (!message) return null;
 
-  const sameSender = (previousMessage?.user?.userId || lastSenderPreviousPage) === message?.user?.userId;
+  const sameSender = (previousMessage?.user?.userId
+    || lastSenderPreviousPage) === message?.user?.userId;
   const dateTime = new Date(message?.createdTime);
   const messageContent: {
     name: string,
@@ -118,7 +118,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
           isModerator: true,
           component: (
             <ChatMessageTextContent
-              emphasizedMessage={true}
+              emphasizedMessage
               text={intl.formatMessage(intlMessages.chatClear)}
             />
           ),
@@ -135,35 +135,28 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
               text={message.message}
             />
           ),
-        }
+        };
     }
   }, []);
   return (
-    <ChatWrapper
-      sameSender={sameSender}
-      ref={messageRef}
-    >
-      {(!message?.user || !sameSender)
-        && (
-          <ChatAvatar
-            avatar={message.user?.avatar}
-            color={messageContent.color}
-            moderator={messageContent.isModerator}
-          >
-            {messageContent.name.toLowerCase().slice(0, 2) || "  "}
-          </ChatAvatar>
-        )
-      }
+    <ChatWrapper sameSender={sameSender} ref={messageRef}>
+      {(!message?.user || !sameSender) && (
+        <ChatAvatar
+          avatar={message.user?.avatar}
+          color={messageContent.color}
+          moderator={messageContent.isModerator}
+        >
+          {messageContent.name.toLowerCase().slice(0, 2) || ' '}
+        </ChatAvatar>
+      )}
       <ChatContent sameSender={message?.user ? sameSender : false}>
-      <ChatMessageHeader
-        sameSender={message?.user ? sameSender : false}
-        name={messageContent.name}
-        isOnline={message.user?.isOnline ?? true}
-        dateTime={dateTime}
-      />
-        {
-          messageContent.component
-        }
+        <ChatMessageHeader
+          sameSender={message?.user ? sameSender : false}
+          name={messageContent.name}
+          isOnline={message.user?.isOnline ?? true}
+          dateTime={dateTime}
+        />
+        {messageContent.component}
       </ChatContent>
     </ChatWrapper>
   );
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/component.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/component.tsx
index bfa6dc4c1f..0063ff8cd0 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/component.tsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/component.tsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import Styled from './styles';
+
 interface ChatMessageTextContentProps {
   text: string;
   emphasizedMessage: boolean;
@@ -9,7 +10,13 @@ interface ChatMessageTextContentProps {
 const ChatMessageTextContent: React.FC<ChatMessageTextContentProps> = ({
   text,
   emphasizedMessage,
-}) => {
+}) => (
+  <Styled.ChatMessage
+    emphasizedMessage={emphasizedMessage}
+    dangerouslySetInnerHTML={{ __html: text }}
+  />
+);
+() => {
   // @ts-ignore - temporary, while meteor exists in the project
   const { allowedElements } = Meteor.settings.public.chat;
 
@@ -18,12 +25,12 @@ const ChatMessageTextContent: React.FC<ChatMessageTextContentProps> = ({
       <ReactMarkdown
         linkTarget="_blank"
         allowedElements={allowedElements}
-        unwrapDisallowed={true}
+        unwrapDisallowed
       >
-        {text}
+        {Text}
       </ReactMarkdown>
     </Styled.ChatMessage>
   );
 };
 
-export default ChatMessageTextContent;
\ No newline at end of file
+export default ChatMessageTextContent;
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/styles.ts b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/styles.ts
index 7972d3e923..f91493fea3 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/styles.ts
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/styles.ts
@@ -1,16 +1,18 @@
 import styled from 'styled-components';
 import { colorText } from '/imports/ui/stylesheets/styled-components/palette';
 
-export const ChatMessage = styled.div`
+interface ChatMessageProps {
+  emphasizedMessage: boolean;
+}
+
+export const ChatMessage = styled.div<ChatMessageProps>`
   flex: 1;
   display: flex;
   flex-flow: row;
   flex-direction: column;
   color: ${colorText};
   word-break: break-word;
-  ${({ emphasizedMessage }) =>
-    emphasizedMessage &&
-    `
+  ${({ emphasizedMessage }) => emphasizedMessage && `
     font-weight: bold;
   `}
 
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts
index 1218cc07b1..b09d5381c1 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts
@@ -15,7 +15,6 @@ import {
   colorSuccess,
 } from '/imports/ui/stylesheets/styled-components/palette';
 
-
 interface ChatWrapperProps {
   sameSender: boolean;
 }
@@ -24,6 +23,13 @@ interface ChatContentProps {
   sameSender: boolean;
 }
 
+interface ChatAvatarProps {
+  avatar: string;
+  color: string;
+  moderator: boolean;
+  emoji?: string;
+}
+
 export const ChatWrapper = styled.div<ChatWrapperProps>`
   pointer-events: auto;
   [dir='rtl'] & {
@@ -32,9 +38,7 @@ export const ChatWrapper = styled.div<ChatWrapperProps>`
   display: flex;
   flex-flow: row;
   position: relative;
-  ${({ sameSender }) =>
-    sameSender &&
-    `
+  ${({ sameSender }) => sameSender && `
     flex: 1;
     margin: ${borderSize} 0 0 ${borderSize};
     margin-top: calc(${lineHeightComputed} / 3);
@@ -55,15 +59,13 @@ export const ChatContent = styled.div<ChatContentProps>`
   flex-flow: column;
   width: 100%;
 
-  ${({ sameSender }) =>
-  sameSender &&
-  `
+  ${({ sameSender }) => sameSender && `
     margin-left: 2.6rem;
   `}
 `;
 
 
-export const ChatAvatar = styled.div`
+export const ChatAvatar = styled.div<ChatAvatarProps>`
   flex: 0 0 2.25rem;
   margin: 0px calc(0.5rem) 0px 0px;
   box-flex: 0;
@@ -116,17 +118,12 @@ export const ChatAvatar = styled.div`
     }
   }
 
-  ${({ moderator }) =>
-    moderator &&
-    `
+  ${({ moderator }) => moderator && `
     border-radius: 5px;
   `}
 
   // ================ image ================
-  ${({ avatar, emoji }) =>
-    avatar?.length !== 0 &&
-    !emoji &&
-    css`
+  ${({ avatar, emoji }) => avatar?.length !== 0 && !emoji && css`
       background-image: url(${avatar});
       background-repeat: no-repeat;
       background-size: contain;
@@ -146,4 +143,4 @@ export const ChatAvatar = styled.div`
     height: 2.25rem;
     width: 2.25rem;
   }
-`;
\ No newline at end of file
+`;
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/component.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/component.tsx
index 679b7e1eef..eb22f3026c 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/component.tsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/component.tsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { useSubscription } from "@apollo/client";
+import React from 'react';
+import { useSubscription } from '@apollo/client';
 import {
   CHAT_MESSAGE_PUBLIC_SUBSCRIPTION,
   CHAT_MESSAGE_PRIVATE_SUBSCRIPTION,
   ChatMessagePrivateSubscriptionResponse,
   ChatMessagePublicSubscriptionResponse,
-} from "./queries";
+} from './queries';
 import { Message } from '/imports/ui/Types/message';
 import ChatMessage from './chat-message/componet';
 
@@ -16,11 +16,12 @@ const PUBLIC_GROUP_CHAT_KEY = CHAT_CONFIG.public_group_id;
 interface ChatListPageContainerProps {
   page: number;
   pageSize: number;
-  setLastSender: Function;
+  setLastSender: (page: number, message: string) => void;
   lastSenderPreviousPage: string | undefined;
+  // eslint-disable-next-line react/no-unused-prop-types
   lastSeenAt: number,
   chatId: string;
-  markMessageAsSeen: Function;
+  markMessageAsSeen: () => void;
   scrollRef: React.RefObject<HTMLDivElement>;
 }
 
@@ -28,17 +29,16 @@ interface ChatListPageProps {
   messages: Array<Message>;
   lastSenderPreviousPage: string | undefined;
   page: number;
-  markMessageAsSeen: Function;
+  markMessageAsSeen: ()=> void;
   scrollRef: React.RefObject<HTMLDivElement>;
 }
 
-const verifyIfIsPublicChat = (message: unknown): message is ChatMessagePublicSubscriptionResponse => {
-  return (message as ChatMessagePublicSubscriptionResponse).chat_message_public !== undefined;
-}
+const verifyIfIsPublicChat = (message: unknown):
+// eslint-disable-next-line max-len
+message is ChatMessagePublicSubscriptionResponse => (message as ChatMessagePublicSubscriptionResponse).chat_message_public !== undefined;
 
-const verifyIfIsPrivateChat = (message: unknown): message is ChatMessagePrivateSubscriptionResponse => {
-  return (message as ChatMessagePrivateSubscriptionResponse).chat_message_private !== undefined;
-}
+// eslint-disable-next-line max-len
+const verifyIfIsPrivateChat = (message: unknown): message is ChatMessagePrivateSubscriptionResponse => (message as ChatMessagePrivateSubscriptionResponse).chat_message_private !== undefined
 
 const ChatListPage: React.FC<ChatListPageProps> = ({
   messages,
@@ -46,28 +46,26 @@ const ChatListPage: React.FC<ChatListPageProps> = ({
   page,
   markMessageAsSeen,
   scrollRef,
-
-}) => {
-  return (
-    <div key={`messagePage-${page}`} id={`${page}`} >
-      {
-        messages.map((message, index, Array) => {
-          const previousMessage = Array[index - 1];
-          return (
-            <ChatMessage
-              key={message.createdTime}
-              message={message}
-              previousMessage={previousMessage}
-              lastSenderPreviousPage={!previousMessage ? lastSenderPreviousPage : null}
-              scrollRef={scrollRef}
-              markMessageAsSeen={markMessageAsSeen}
-            />
-          )
-        })
-      }
-    </div>
-  );
-}
+}) => (
+  // eslint-disable-next-line react/jsx-filename-extension
+  <div key={`messagePage-${page}`} id={`${page}`}>
+    {messages.map((message, index, Array) => {
+      const previousMessage = Array[index - 1];
+      return (
+        <ChatMessage
+          key={message.createdTime}
+          message={message}
+          previousMessage={previousMessage}
+          lastSenderPreviousPage={
+            !previousMessage ? lastSenderPreviousPage : null
+          }
+          scrollRef={scrollRef}
+          markMessageAsSeen={markMessageAsSeen}
+        />
+      );
+    })}
+  </div>
+);
 
 const ChatListPageContainer: React.FC<ChatListPageContainerProps> = ({
   page,
@@ -83,17 +81,25 @@ const ChatListPageContainer: React.FC<ChatListPageContainerProps> = ({
     ? CHAT_MESSAGE_PUBLIC_SUBSCRIPTION
     : CHAT_MESSAGE_PRIVATE_SUBSCRIPTION;
   const defaultVariables = { offset: (page) * pageSize, limit: pageSize };
-  const variables = isPublicChat ? defaultVariables : { ...defaultVariables, requestedChatId: chatId };
+  const variables = isPublicChat
+    ? defaultVariables : { ...defaultVariables, requestedChatId: chatId };
   const {
     data: chatMessageData,
     loading: chatMessageLoading,
     error: chatMessageError,
-  } = useSubscription<ChatMessagePublicSubscriptionResponse | ChatMessagePrivateSubscriptionResponse>(
+  } = useSubscription<ChatMessagePublicSubscriptionResponse|ChatMessagePrivateSubscriptionResponse>(
     chatQuery,
-    { variables }
+    { variables },
   );
 
-  if (chatMessageError) return (<p>chatMessageError: {JSON.stringify(chatMessageError)}</p>);
+  if (chatMessageError) {
+    return (
+      <p>
+        chatMessageError:
+        {JSON.stringify(chatMessageError)}
+      </p>
+    );
+  }
   if (chatMessageLoading) return null;
   let messages: Array<Message> = [];
   if (verifyIfIsPublicChat(chatMessageData)) {
@@ -104,7 +110,6 @@ const ChatListPageContainer: React.FC<ChatListPageContainerProps> = ({
 
   if (messages.length > 0) {
     setLastSender(page, messages[messages.length - 1].user?.userId);
-
   }
 
   return (
@@ -116,6 +121,6 @@ const ChatListPageContainer: React.FC<ChatListPageContainerProps> = ({
       scrollRef={scrollRef}
     />
   );
-}
+};
 
 export default ChatListPageContainer;
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/styles.ts b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/styles.ts
index 7b820dcbfb..5332c10864 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/styles.ts
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/styles.ts
@@ -3,7 +3,11 @@ import { colorWhite, colorPrimary } from '/imports/ui/stylesheets/styled-compone
 import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
 import { mdPaddingX } from '/imports/ui/stylesheets/styled-components/general';
 
-export const Chat = styled.div`
+interface ChatProps {
+  isChrome: boolean;
+}
+
+export const Chat = styled.div<ChatProps>`
   background-color: ${colorWhite};
   padding: ${mdPaddingX};
   padding-bottom: 0;
@@ -43,9 +47,7 @@ export const Chat = styled.div`
     text-decoration-line: none;
   }
 
-  ${({ isChrome }) =>
-    isChrome &&
-    `
+  ${({ isChrome }) => isChrome && `
     transform: translateZ(0);
   `}