Fix: TypeScript and Lint Errors in Chat List/Page, Message, and Cont…

…ent Modules (bigbluebutton#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
antonbsa · Sep 6, 2023 · cd922c2 · cd922c2
1 parent 75dd624
commit cd922c2
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 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
@@ -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/.../imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/componet.tsx b/.../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/...at-graphql/chat-message-list/page/chat-message/message-content/text-content/component.tsx b/...at-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;
+export default ChatMessageTextContent;
diff --git a/...t/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/styles.ts b/...t/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/...ml5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/styles.ts b/...ml5/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;
   }
-`;
+`;