fix some styles and recent container initialization issues (#351)

* fix some styles issues and recent container initialization issues

* reduce unneccessary update

Author: Eric Huang

src/components/BackHeader/index.js

@@ -6,7 +6,7 @@ import Header from '../Header';
 import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
 
 const BackHeader = (props) => {
-  const buttons = props.buttons;
+  const buttons = props.buttons || [];
   const defaultBackButton =
     <i className={classnames(dynamicsFont.arrow, styles.iconRotate)} />;
   buttons.push({
@@ -37,6 +37,6 @@ BackHeader.propTypes = {
 
 BackHeader.defaultProps = {
   className: '',
-  buttons: [],
+  buttons: undefined,
   backButton: undefined,
 };

src/components/CallingSettingsPanel/index.js

@@ -140,17 +140,9 @@ export default class CallingSettingsPanel extends Component {
       className,
       disabled,
     } = this.props;
-    const buttons = [];
     const hasChanges = this.state.callWith !== callWith ||
       this.state.myLocation !== myLocation ||
       this.state.ringoutPrompt !== ringoutPrompt;
-    buttons.push({
-      label: <Revert width="19" className={styles.revertIcon} />,
-      onClick: this.onReset,
-      placement: 'right',
-      hidden: !hasChanges,
-    });
-
     const ringout =
       (
         this.state.callWith !== callingOptions.softphone &&
@@ -200,7 +192,7 @@ export default class CallingSettingsPanel extends Component {
     return (
       <div className={classnames(styles.root, className)}>
         <BackHeader
-          buttons={buttons}
+          buttons={[]}
           onBackClick={onBackButtonClick}
           >
           {i18n.getString('title', currentLocale)}

src/components/DialTextInput/styles.scss

@@ -13,10 +13,10 @@
   left: 42px;
   display: inline-block;
   border: none;
+  width: calc(100% - 70px);
   input {
     font-size: 15px;
     padding: 0;
-    max-width: 72%;
     color: $primary-neutral-color;
   }
 }

src/components/DropdownSelect/styles.scss

@@ -61,6 +61,7 @@
   padding: 5px 10px;
   &:hover {
     color: $primary-color;
+    cursor: pointer;
   }
 }
 .dropdownItem:first-child {
@@ -143,9 +144,6 @@
     white-space: nowrap;
     overflow: hidden;
   }
-  li:hover {
-    cursor: pointer;
-  }
 }
 
 

src/components/RecentActivityCalls/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
@@ -56,35 +56,44 @@ CallItem.propTypes = {
   currentLocale: PropTypes.string.isRequired
 };
 
-export default function RecentActivityMessages({
-  currentLocale,
-  calls,
-  isCallsLoaded,
-  dateTimeFormatter
-}) {
-  let callListView = null;
-  if (!isCallsLoaded) {
-    callListView = (<Spinner className={styles.spinner} ringWidth={4} />);
-  } else if (calls.length > 0) {
-    callListView = calls.map(call => (
-      <CallItem
-        key={call.id}
-        call={call}
-        currentLocale={currentLocale}
-        dateTimeFormatter={dateTimeFormatter}
-      />
-    ));
-  } else {
-    callListView = (<p className={styles.noRecords}>{i18n.getString('noRecords', currentLocale)}</p>);
+export default class RecentActivityCalls extends Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.currentLocale !== this.props.currentLocale ||
+      nextProps.calls !== this.props.calls ||
+      nextProps.isCallsLoaded !== this.props.isCallsLoaded;
+  }
+
+  render() {
+    const {
+      currentLocale,
+      calls,
+      isCallsLoaded,
+      dateTimeFormatter
+    } = this.props;
+    let callListView = null;
+    if (!isCallsLoaded) {
+      callListView = (<Spinner className={styles.spinner} ringWidth={4} />);
+    } else if (calls.length > 0) {
+      callListView = calls.map(call => (
+        <CallItem
+          key={call.id}
+          call={call}
+          currentLocale={currentLocale}
+          dateTimeFormatter={dateTimeFormatter}
+        />
+      ));
+    } else {
+      callListView = (<p className={styles.noRecords}>{i18n.getString('noRecords', currentLocale)}</p>);
+    }
+    return (
+      <div className={styles.calls}>
+        {callListView}
+      </div>
+    );
   }
-  return (
-    <div className={styles.calls}>
-      { callListView }
-    </div>
-  );
 }
 
-RecentActivityMessages.propTypes = {
+RecentActivityCalls.propTypes = {
   currentLocale: PropTypes.string.isRequired,
   calls: PropTypes.array.isRequired,
   isCallsLoaded: PropTypes.bool.isRequired,

src/components/RecentActivityMessages/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import Spinner from '../Spinner';
@@ -29,33 +29,42 @@ MessageItem.propTypes = {
   dateTimeFormatter: PropTypes.func.isRequired
 };
 
-export default function RecentActivityMessages({
-  currentLocale,
-  messages,
-  isMessagesLoaded,
-  navigateTo,
-  dateTimeFormatter
-}) {
-  let messageListView = null;
-  if (!isMessagesLoaded) {
-    messageListView = (<Spinner className={styles.spinner} ringWidth={4} />);
-  } else if (messages.length > 0) {
-    messageListView = messages.map(message => (
-      <MessageItem
-        key={message.id}
-        message={message}
-        navigateTo={navigateTo}
-        dateTimeFormatter={dateTimeFormatter}
-      />
-    ));
-  } else {
-    messageListView = (<p className={styles.noRecords}>{i18n.getString('noRecords', currentLocale)}</p>);
+export default class RecentActivityMessages extends Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.currentLocale !== this.props.currentLocale ||
+      nextProps.messages !== this.props.messages ||
+      nextProps.isMessagesLoaded !== this.props.isMessagesLoaded;
+  }
+
+  render() {
+    const {
+      currentLocale,
+      messages,
+      isMessagesLoaded,
+      navigateTo,
+      dateTimeFormatter
+    } = this.props;
+    let messageListView = null;
+    if (!isMessagesLoaded) {
+      messageListView = (<Spinner className={styles.spinner} ringWidth={4} />);
+    } else if (messages.length > 0) {
+      messageListView = messages.map(message => (
+        <MessageItem
+          key={message.id}
+          message={message}
+          navigateTo={navigateTo}
+          dateTimeFormatter={dateTimeFormatter}
+        />
+      ));
+    } else {
+      messageListView = (<p className={styles.noRecords}>{i18n.getString('noRecords', currentLocale)}</p>);
+    }
+    return (
+      <div className={styles.messages}>
+        {messageListView}
+      </div>
+    );
   }
-  return (
-    <div className={styles.messages}>
-      { messageListView }
-    </div>
-  );
 }
 
 RecentActivityMessages.propTypes = {

src/components/RegionSettingsPanel/index.js

@@ -88,17 +88,8 @@ export default class RegionSettings extends Component {
   }
 
   render() {
-    const buttons = [];
     const hasChanges = this.state.areaCodeValue !== this.props.areaCode ||
       this.state.countryCodeValue !== this.props.countryCode;
-    if (this.props.onBackButtonClick) {
-      buttons.push({
-        label: <Revert width="19" className={styles.revertIcon} />,
-        onClick: this.onResetClick,
-        placement: 'right',
-        hidden: !hasChanges,
-      });
-    }
     const hasNA = !!this.props.availableCountries.find(c => c.isoCode === 'US') ||
       !!this.props.availableCountries.find(c => c.isoCode === 'CA');
     let messageId;
@@ -117,7 +108,7 @@ export default class RegionSettings extends Component {
     return (
       <div className={classnames(styles.root, this.props.className)}>
         <BackHeader
-          buttons={buttons}
+          buttons={[]}
           onBackClick={this.onBackClick}
           >
           {i18n.getString('title', this.props.currentLocale)}

src/components/TransferPanel/styles.scss

@@ -29,8 +29,8 @@ $input-height: 30px;
     padding: 0;
     outline: 0;
     height: 100%;
-    width: calc(100% - 55px);
-    margin-left: 5%;
+    width: calc(100% - 75px);
+    margin-left: 15px;
     background-color: transparent;
     border: none;
     font-size:15px;

src/containers/RecentActivityContainer/index.js

@@ -10,24 +10,29 @@ import FaxIcon from '../../assets/images/Fax.svg';
 import i18n from './i18n';
 
 function getTabs({
+  ready,
   currentLocale,
   dateTimeFormatter,
   navigateTo,
   recentMessages,
   recentCalls,
   currentContact,
 }) {
+  if (!ready) return [];
   let messages = [];
   let calls = [];
   let unreadMessageCounts = 0;
   if (currentContact && currentContact.id) {
     const contactId = currentContact.id;
-    if (recentMessages.messages[contactId])
+    if (recentMessages.messages[contactId]) {
       messages = recentMessages.messages[contactId];
-    if (recentCalls.calls[contactId])
+    }
+    if (recentCalls.calls[contactId]) {
       calls = recentCalls.calls[contactId];
-    if (recentMessages.unreadMessageCounts[contactId])
+    }
+    if (recentMessages.unreadMessageCounts[contactId]) {
       unreadMessageCounts = recentMessages.unreadMessageCounts[contactId];
+    }
   }
   return [
     {
@@ -124,6 +129,7 @@ function mapToProps(_, {
     currentContact,
     calls: recentCalls.calls || [],
     tabs: getTabs({
+      ready,
       currentLocale,
       dateTimeFormatter,
       navigateTo,