Merge pull request #14755 from Tainan404/remove-innerhtmls

refactor: Remove unnecessary dangerouslySetInnerHTML of the client

bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx

@@ -68,8 +68,6 @@ const ChatAlert = (props) => {
     unreadMessagesByChat,
     intl,
     layoutContextDispatch,
-    chatsTracker,
-    notify,
   } = props;
 
   const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
@@ -105,35 +103,6 @@ const ChatAlert = (props) => {
     }
   }, [pushAlertEnabled]);
 
-  useEffect(() => {
-    const keys = Object.keys(chatsTracker);
-    keys.forEach((key) => {
-      if (chatsTracker[key]?.shouldNotify) {
-        if (audioAlertEnabled) {
-          AudioService.playAlertSound(`${Meteor.settings.public.app.cdn
-            + Meteor.settings.public.app.basename
-            + Meteor.settings.public.app.instanceId}`
-            + '/resources/sounds/notify.mp3');
-        }
-        if (pushAlertEnabled) {
-          notify(
-            key === 'MAIN-PUBLIC-GROUP-CHAT'
-              ? intl.formatMessage(intlMessages.publicChatMsg)
-              : intl.formatMessage(intlMessages.privateChatMsg),
-            'info',
-            'chat',
-            { autoClose: 3000 },
-            <div>
-              <div style={{ fontWeight: 700 }}>{chatsTracker[key].lastSender}</div>
-              <div dangerouslySetInnerHTML={{ __html: chatsTracker[key].content }} />
-            </div>,
-            true,
-          );
-        }
-      }
-    });
-  }, [chatsTracker]);
-
   useEffect(() => {
     if (pushAlertEnabled) {
       const alertsObject = unreadMessagesByChat;

bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx

@@ -1,7 +1,5 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import logger from '/imports/startup/client/logger';
-import Auth from '/imports/ui/services/auth';
 import ChatAlert from './component';
 import { layoutSelect, layoutSelectInput, layoutDispatch } from '../../layout/context';
 import { PANELS } from '../../layout/enums';
@@ -18,15 +16,6 @@ const propTypes = {
   pushAlertEnabled: PropTypes.bool.isRequired,
 };
 
-// custom hook for getting previous value
-function usePrevious(value) {
-  const ref = React.useRef();
-  React.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
 const ChatAlertContainer = (props) => {
   const idChatOpen = layoutSelect((i) => i.idChatOpen);
   const sidebarContent = layoutSelectInput((i) => i.sidebarContent);
@@ -65,47 +54,9 @@ const ChatAlertContainer = (props) => {
     })
     : null;
 
-  const chatsTracker = {};
-
-  if (usingChatContext.chats) {
-    const chatsActive = Object.entries(usingChatContext.chats);
-    chatsActive.forEach((c) => {
-      try {
-        if (c[0] === idChat || (c[0] === 'MAIN-PUBLIC-GROUP-CHAT' && idChat === 'public')) {
-          chatsTracker[c[0]] = {};
-          if (c[1]?.posJoinMessages || c[1]?.messageGroups) {
-            const m = Object.entries(c[1]?.posJoinMessages || c[1]?.messageGroups);
-            const sameUserCount = m.filter((message) => message[1]?.sender === Auth.userID).length;
-            if (m[m.length - 1] && m[m.length - 1][1]?.sender !== Auth.userID) {
-              chatsTracker[c[0]].lastSender = users[Auth.meetingID][c[1]?.lastSender]?.name;
-              chatsTracker[c[0]].content = m[m.length - 1][1]?.message;
-              chatsTracker[c[0]].count = m?.length - sameUserCount;
-            }
-          }
-        }
-      } catch (e) {
-        logger.error({
-          logCode: 'chat_alert_component_error',
-        }, 'Error : ', e.error);
-      }
-    });
-
-    const prevTracker = usePrevious(chatsTracker);
-
-    if (prevTracker) {
-      const keys = Object.keys(prevTracker);
-      keys.forEach((key) => {
-        if (chatsTracker[key]?.count > (prevTracker[key]?.count || 0)) {
-          chatsTracker[key].shouldNotify = true;
-        }
-      });
-    }
-  }
-
   return (
     <ChatAlert
       {...props}
-      chatsTracker={chatsTracker}
       layoutContextDispatch={layoutContextDispatch}
       unreadMessagesCountByChat={unreadMessagesCountByChat}
       unreadMessagesByChat={unreadMessagesByChat}

bigbluebutton-html5/imports/ui/components/common/modal/confirmation/component.jsx

@@ -71,7 +71,9 @@ class ConfirmationModal extends Component {
             </Styled.Title>
           </Styled.Header>
           <Styled.Description>
-            <span dangerouslySetInnerHTML={{ __html: description }} />
+            <Styled.DescriptionText>
+              {description}
+            </Styled.DescriptionText>
             { hasCheckbox ? (
               <label htmlFor="confirmationCheckbox" key="confirmation-checkbox">
                 <Styled.Checkbox

bigbluebutton-html5/imports/ui/components/common/modal/confirmation/styles.js

@@ -55,6 +55,10 @@ const Description = styled.div`
   margin-bottom: ${jumboPaddingY};
 `;
 
+const DescriptionText = styled.span`
+  white-space: pre-line;
+`;
+
 const Checkbox = styled.input`
   position: relative;
   top: 0.134rem;
@@ -85,6 +89,7 @@ export default {
   Header,
   Title,
   Description,
+  DescriptionText,
   Checkbox,
   Footer,
   ConfirmationButton,

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/component.jsx

@@ -46,7 +46,8 @@ class EndMeetingComponent extends PureComponent {
       : intl.formatMessage(intlMessages.endMeetingNoUserDescription);
 
     if (warnAboutUnsavedContentOnMeetingEnd) {
-      description += `<p>${intl.formatMessage(intlMessages.contentWarning)}</p>`;
+      // the double breakline it to put one empty line between the descriptions
+      description += `\n\n${intl.formatMessage(intlMessages.contentWarning)}`;
     }
 
     return (