Merge pull request #19643 from JoVictorNunes/fix-warnings-0216

fix(warnings): prop types, invalid hook calls, etc.

bigbluebutton-html5/client/main.jsx

@@ -93,7 +93,7 @@ Meteor.startup(() => {
           </AuthenticatedHandler>
         </JoinHandler>
         <UsersAdapter />
-        <ChatAdapter />
+        {/* <ChatAdapter /> */}
       </>
     </ContextProviders>,
     document.getElementById('app'),

bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx

@@ -17,11 +17,11 @@ import { screenshareHasEnded } from '/imports/ui/components/screenshare/service'
 import Settings from '/imports/ui/services/settings';
 
 const propTypes = {
-  amIPresenter: PropTypes.bool.isRequired,
+  amIPresenter: PropTypes.bool,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,
-  amIModerator: PropTypes.bool.isRequired,
+  amIModerator: PropTypes.bool,
   shortcuts: PropTypes.string,
   handleTakePresenter: PropTypes.func.isRequired,
   isTimerActive: PropTypes.bool.isRequired,
@@ -45,6 +45,8 @@ const propTypes = {
 const defaultProps = {
   shortcuts: '',
   settingsLayout: LAYOUT_TYPE.SMART_LAYOUT,
+  amIPresenter: false,
+  amIModerator: false,
 };
 
 const intlMessages = defineMessages({

bigbluebutton-html5/imports/ui/components/actions-bar/reactions-button/component.jsx

@@ -179,11 +179,16 @@ const propTypes = {
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,
   userId: PropTypes.string.isRequired,
-  emoji: PropTypes.string.isRequired,
+  emoji: PropTypes.string,
   sidebarContentPanel: PropTypes.string.isRequired,
   layoutContextDispatch: PropTypes.func.isRequired,
 };
 
+const defaultProps = {
+  emoji: '',
+};
+
 ReactionsButton.propTypes = propTypes;
+ReactionsButton.defaultProps = defaultProps;
 
 export default withShortcutHelper(ReactionsButton, ['raiseHand']);

bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/component.jsx

@@ -23,12 +23,16 @@ const { isSafari, isTabletApp } = browserInfo;
 const propTypes = {
   intl: PropTypes.objectOf(Object).isRequired,
   enabled: PropTypes.bool.isRequired,
-  amIPresenter: PropTypes.bool.isRequired,
+  amIPresenter: PropTypes.bool,
   isScreenBroadcasting: PropTypes.bool.isRequired,
   isMeteorConnected: PropTypes.bool.isRequired,
   screenshareDataSavingSetting: PropTypes.bool.isRequired,
 };
 
+const defaultProps = {
+  amIPresenter: false,
+};
+
 const intlMessages = defineMessages({
   desktopShareLabel: {
     id: 'app.actionsBar.actionsDropdown.desktopShareLabel',
@@ -214,4 +218,5 @@ const ScreenshareButton = ({
 };
 
 ScreenshareButton.propTypes = propTypes;
+ScreenshareButton.defaultProps = defaultProps;
 export default injectIntl(memo(ScreenshareButton));

bigbluebutton-html5/imports/ui/components/audio/container.jsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Session } from 'meteor/session';
@@ -23,6 +23,7 @@ import Service from './service';
 import AudioModalContainer from './audio-modal/container';
 import Settings from '/imports/ui/services/settings';
 import useToggleVoice from './audio-graphql/hooks/useToggleVoice';
+import { usePreviousValue } from '/imports/ui/components/utils/hooks';
 
 const APP_CONFIG = Meteor.settings.public.app;
 const KURENTO_CONFIG = Meteor.settings.public.kurento;
@@ -74,88 +75,87 @@ const intlMessages = defineMessages({
   },
 });
 
-class AudioContainer extends PureComponent {
-  constructor(props) {
-    super(props);
+const AudioContainer = (props) => {
+  const {
+    isAudioModalOpen,
+    setAudioModalIsOpen,
+    setVideoPreviewModalIsOpen,
+    isVideoPreviewModalOpen,
+    hasBreakoutRooms,
+    userSelectedMicrophone,
+    userSelectedListenOnly,
+    meetingIsBreakout,
+    init,
+    intl,
+    userLocks,
+    microphoneConstraints,
+  } = props;
 
-    this.init = props.init.bind(this);
-  }
+  const prevProps = usePreviousValue(props);
+  const toggleVoice = useToggleVoice();
+  const { hasBreakoutRooms: hadBreakoutRooms } = prevProps || {};
+  const userIsReturningFromBreakoutRoom = hadBreakoutRooms && !hasBreakoutRooms;
+
+  const joinAudio = () => {
+    if (Service.isConnected()) return;
+
+    if (userSelectedMicrophone) {
+      joinMicrophone(true);
+      return;
+    }
 
-  componentDidMount() {
-    const { meetingIsBreakout } = this.props;
+    if (userSelectedListenOnly) joinListenOnly();
+  };
 
-    this.init().then(() => {
+  useEffect(() => {
+    init(toggleVoice).then(() => {
       if (meetingIsBreakout && !Service.isUsingAudio()) {
-        this.joinAudio();
+        joinAudio();
       }
     });
-  }
+  }, []);
 
-  componentDidUpdate(prevProps) {
-    if (this.userIsReturningFromBreakoutRoom(prevProps)) {
-      this.joinAudio();
+  useEffect(() => {
+    if (userIsReturningFromBreakoutRoom) {
+      joinAudio();
     }
-  }
+  }, [userIsReturningFromBreakoutRoom]);
 
-  /**
-   * Helper function to determine wheter user is returning from breakout room
-   * to main room.
-   * @param  {Object} prevProps prevProps param from componentDidUpdate
-   * @return {boolean}           True if user is returning from breakout room
-   *                             to main room. False, otherwise.
-   */
-  userIsReturningFromBreakoutRoom(prevProps) {
-    const { hasBreakoutRooms } = this.props;
-    const { hasBreakoutRooms: hadBreakoutRooms } = prevProps;
-    return hadBreakoutRooms && !hasBreakoutRooms;
-  }
-
-  /**
-   * Helper function that join (or not) user in audio. If user previously
-   * selected microphone, it will automatically join mic (without audio modal).
-   * If user previously selected listen only option in audio modal, then it will
-   * automatically join listen only.
-   */
-  joinAudio() {
-    if (Service.isConnected()) return;
-
-    const {
-      userSelectedMicrophone,
-      userSelectedListenOnly,
-    } = this.props;
+  if (Service.isConnected() && !Service.isListenOnly()) {
+    Service.updateAudioConstraints(microphoneConstraints);
 
-    if (userSelectedMicrophone) {
-      joinMicrophone(true);
-      return;
+    if (userLocks.userMic && !Service.isMuted()) {
+      Service.toggleMuteMicrophone(toggleVoice);
+      notify(intl.formatMessage(intlMessages.reconectingAsListener), 'info', 'volume_level_2');
     }
-
-    if (userSelectedListenOnly) joinListenOnly();
   }
 
-  render() {
-    const { isAudioModalOpen, setAudioModalIsOpen,
-            setVideoPreviewModalIsOpen, isVideoPreviewModalOpen } = this.props;
-    return <>
-      {isAudioModalOpen ? <AudioModalContainer 
-        {...{
-          priority: "low",
-          setIsOpen: setAudioModalIsOpen,
-          isOpen: isAudioModalOpen
-        }}
-      /> : null}
-      {isVideoPreviewModalOpen ? <VideoPreviewContainer 
-        {...{
-          callbackToClose: () => {
-            setVideoPreviewModalIsOpen(false);
-          },
-          priority: "low",
-          setIsOpen: setVideoPreviewModalIsOpen,
-          isOpen: isVideoPreviewModalOpen
-        }}
-      /> : null}
-    </>;
-  }
-}
+  return (
+    <>
+      {isAudioModalOpen ? (
+        <AudioModalContainer
+          {...{
+            priority: 'low',
+            setIsOpen: setAudioModalIsOpen,
+            isOpen: isAudioModalOpen,
+          }}
+        />
+      ) : null}
+      {isVideoPreviewModalOpen ? (
+        <VideoPreviewContainer
+          {...{
+            callbackToClose: () => {
+              setVideoPreviewModalIsOpen(false);
+            },
+            priority: 'low',
+            setIsOpen: setVideoPreviewModalIsOpen,
+            isOpen: isVideoPreviewModalOpen,
+          }}
+        />
+      ) : null}
+    </>
+  );
+};
 
 let didMountAutoJoin = false;
 
@@ -183,13 +183,14 @@ const messages = {
   },
 };
 
-export default lockContextContainer(injectIntl(withTracker(({ intl, userLocks, isAudioModalOpen, setAudioModalIsOpen,
-                          setVideoPreviewModalIsOpen, isVideoPreviewModalOpen }) => {
+export default lockContextContainer(injectIntl(withTracker(({
+  intl, userLocks, isAudioModalOpen, setAudioModalIsOpen, setVideoPreviewModalIsOpen,
+}) => {
   const { microphoneConstraints } = Settings.application;
   const autoJoin = getFromUserSettings('bbb_auto_join_audio', APP_CONFIG.autoJoin);
   const enableVideo = getFromUserSettings('bbb_enable_video', KURENTO_CONFIG.enableVideo);
   const autoShareWebcam = getFromUserSettings('bbb_auto_share_webcam', KURENTO_CONFIG.autoShareWebcam);
-  const { userWebcam, userMic } = userLocks;
+  const { userWebcam } = userLocks;
 
   const userSelectedMicrophone = didUserSelectedMicrophone();
   const userSelectedListenOnly = didUserSelectedListenOnly();
@@ -202,19 +203,9 @@ export default lockContextContainer(injectIntl(withTracker(({ intl, userLocks, i
     setVideoPreviewModalIsOpen(true);
   };
 
-  const toggleVoice = useToggleVoice();
-
-  if (Service.isConnected() && !Service.isListenOnly()) {
-    Service.updateAudioConstraints(microphoneConstraints);
-
-    if (userMic && !Service.isMuted()) {
-      Service.toggleMuteMicrophone(toggleVoice);
-      notify(intl.formatMessage(intlMessages.reconectingAsListener), 'info', 'volume_level_2');
-    }
-  }
   const breakoutUserIsIn = BreakoutsService.getBreakoutUserIsIn(Auth.userID);
-  if(!!breakoutUserIsIn && !meetingIsBreakout) {
-    const userBreakout = Breakouts.find({id: breakoutUserIsIn.id})
+  if (!!breakoutUserIsIn && !meetingIsBreakout) {
+    const userBreakout = Breakouts.find({ id: breakoutUserIsIn.id });
     userBreakout.observeChanges({
       removed() {
         // if the user joined a breakout room, the main room's audio was
@@ -227,14 +218,14 @@ export default lockContextContainer(injectIntl(withTracker(({ intl, userLocks, i
             openVideoPreviewModal();
           }
 
-          return; 
+          return;
         }
         setTimeout(() => {
-            openAudioModal();
-            if (enableVideo && autoShareWebcam) {
-              openVideoPreviewModal();
-            }
-          }, 0);
+          openAudioModal();
+          if (enableVideo && autoShareWebcam) {
+            openVideoPreviewModal();
+          }
+        }, 0);
       },
     });
   }
@@ -244,12 +235,11 @@ export default lockContextContainer(injectIntl(withTracker(({ intl, userLocks, i
     meetingIsBreakout,
     userSelectedMicrophone,
     userSelectedListenOnly,
-    isAudioModalOpen, 
+    isAudioModalOpen,
     setAudioModalIsOpen,
-    init: async () => {
+    microphoneConstraints,
+    init: async (toggleVoice) => {
       await Service.init(messages, intl, toggleVoice);
-      const enableVideo = getFromUserSettings('bbb_enable_video', KURENTO_CONFIG.enableVideo);
-      const autoShareWebcam = getFromUserSettings('bbb_auto_share_webcam', KURENTO_CONFIG.autoShareWebcam);
       if ((!autoJoin || didMountAutoJoin)) {
         if (enableVideo && autoShareWebcam) {
           openVideoPreviewModal();
@@ -258,8 +248,8 @@ export default lockContextContainer(injectIntl(withTracker(({ intl, userLocks, i
       }
       Session.set('audioModalIsOpen', true);
       if (enableVideo && autoShareWebcam) {
-        openAudioModal()
-        openVideoPreviewModal(); 
+        openAudioModal();
+        openVideoPreviewModal();
         didMountAutoJoin = true;
       } else if (!(
         userSelectedMicrophone
@@ -273,9 +263,25 @@ export default lockContextContainer(injectIntl(withTracker(({ intl, userLocks, i
   };
 })(AudioContainer)));
 
+AudioContainer.defaultProps = {
+  microphoneConstraints: undefined,
+};
+
 AudioContainer.propTypes = {
   hasBreakoutRooms: PropTypes.bool.isRequired,
   meetingIsBreakout: PropTypes.bool.isRequired,
   userSelectedListenOnly: PropTypes.bool.isRequired,
   userSelectedMicrophone: PropTypes.bool.isRequired,
+  isAudioModalOpen: PropTypes.bool.isRequired,
+  setAudioModalIsOpen: PropTypes.func.isRequired,
+  setVideoPreviewModalIsOpen: PropTypes.func.isRequired,
+  init: PropTypes.func.isRequired,
+  isVideoPreviewModalOpen: PropTypes.bool.isRequired,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  userLocks: PropTypes.shape({
+    userMic: PropTypes.bool.isRequired,
+  }).isRequired,
+  microphoneConstraints: PropTypes.shape({}),
 };

bigbluebutton-html5/imports/ui/components/breakout-room/breakout-room-graphql/create-breakout-room/manage-room-label/component.tsx

@@ -56,7 +56,7 @@ const ManageRoomLabel: React.FC<ManageRoomLabelProps> = ({
         />
       ) : (
         <Styled.AssignBtns
-          random
+          $random
           data-test="randomlyAssign"
           label={intl.formatMessage(intlMessages.randomlyAssign)}
           aria-describedby="randomlyAssignDesc"

bigbluebutton-html5/imports/ui/components/breakout-room/breakout-room-graphql/create-breakout-room/styles.ts

@@ -246,7 +246,7 @@ const AssignBtns = styled(Button)`
   white-space: nowrap;
   margin-bottom: 0.5rem;
 
-  ${({ random }) => random && `
+  ${({ $random }) => $random && `
   color: ${colorPrimary};
   `}
 `;