feat: Only show more numbers link if multiple numbers are available (#8702)

* Only show more numbers link if multiple numbers are available

* Fixed some linter errors

* Try to make flow happy

* Fixed another linter error

* Another try to make eslint happy

* Silence eslint

react/features/invite/components/add-people-dialog/web/DialInSection.js

@@ -4,22 +4,28 @@ import React from 'react';
 
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
-import { getDialInfoPageURL } from '../../../functions';
+import { getDialInfoPageURL, hasMultipleNumbers } from '../../../functions';
 
 import DialInNumber from './DialInNumber';
 
 type Props = {
 
     /**
-     * The object representing the dialIn feature.
+     * The numberic identifier for the current conference, used after dialing a
+     * the number to join the conference.
      */
-    _dialIn: Object,
+    _conferenceID: number,
 
     /**
      * The url of the page containing the dial-in numbers list.
      */
     _dialInfoPageUrl: string,
 
+    /**
+     * If multiple dial-in numbers are available
+     */
+    _hasMultipleNumbers: boolean;
+
     /**
      * The phone number to dial to begin the process of dialing into a
      * conference.
@@ -41,23 +47,24 @@ type Props = {
  * @returns {null|ReactElement}
  */
 function DialInSection({
-    _dialIn,
+    _conferenceID,
     _dialInfoPageUrl,
+    _hasMultipleNumbers,
     phoneNumber,
     t
 }: Props) {
     return (
         <div className = 'invite-more-dialog dial-in-display'>
             <DialInNumber
-                conferenceID = { _dialIn.conferenceID }
+                conferenceID = { _conferenceID }
                 phoneNumber = { phoneNumber } />
-            <a
+            {_hasMultipleNumbers ? <a
                 className = 'more-numbers'
                 href = { _dialInfoPageUrl }
                 rel = 'noopener noreferrer'
                 target = '_blank'>
                 { t('info.moreNumbers') }
-            </a>
+            </a> : null}
         </div>
     );
 }
@@ -72,9 +79,12 @@ function DialInSection({
  * @returns {Props}
  */
 function _mapStateToProps(state) {
+    const dialIn = state['features/invite'];
+
     return {
-        _dialIn: state['features/invite'],
-        _dialInfoPageUrl: getDialInfoPageURL(state)
+        _conferenceID: dialIn.conferenceID,
+        _dialInfoPageUrl: getDialInfoPageURL(state),
+        _hasMultipleNumbers: hasMultipleNumbers(dialIn.numbers)
     };
 }
 

react/features/invite/functions.js

@@ -588,6 +588,31 @@ export function shouldDisplayDialIn(dialIn: Object) {
             && phoneNumber);
 }
 
+/**
+ * Returns if multiple dial-in numbers are available.
+ *
+ * @param {Array<string>|Object} dialInNumbers - The array or object of
+ * numbers to check.
+ * @private
+ * @returns {boolean}
+ */
+export function hasMultipleNumbers(dialInNumbers: ?Object) {
+    if (!dialInNumbers) {
+        return false;
+    }
+
+    if (Array.isArray(dialInNumbers)) {
+        return dialInNumbers.length > 1;
+    }
+
+    // deprecated and will be removed
+    const { numbers } = dialInNumbers;
+
+    // eslint-disable-next-line no-confusing-arrow
+    return Boolean(numbers && Object.values(numbers).map(a => Array.isArray(a) ? a.length : 0)
+        .reduce((a, b) => a + b) > 1);
+}
+
 /**
  * Sets the internal state of which dial-in number to display.
  *