adjust ui style on conversation (#128)

* support new contactmatcher

* fix button style

* fix typo

* show 99+ if noticeCounts > 99

* update commons version

* react-scripts force version

Author: embbnux

package.json

@@ -31,7 +31,7 @@
     "react-router": "^3.0.0",
     "ringcentral": "3.0.0",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.4.4",
+    "ringcentral-integration": "^0.5.2",
     "whatwg-fetch": "^2.0.1"
   },
   "devDependencies": {
@@ -73,13 +73,13 @@
     "react-addons-test-utils": "^15.4.2",
     "react-dom": "^15.4.1",
     "react-redux": "^5.0.1",
-    "react-scripts": "^0.9.3",
+    "react-scripts": "0.9.3",
     "redux": "^3.6.0",
     "redux-logger": "^2.7.4",
     "redux-thunk": "^2.1.0",
     "ringcentral": "3.0.0",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.4.4",
+    "ringcentral-integration": "^0.5.2",
     "sass-loader": "^4.1.1",
     "source-map-loader": "^0.1.5",
     "style-loader": "^0.13.1",

src/components/NavigationBar/index.js

@@ -8,7 +8,7 @@ function NavigationButton(props) {
   let notice = null;
   if (props.noticeCounts && props.noticeCounts > 0) {
     if (props.noticeCounts > 99) {
-      notice = <div className={styles.notices}>{props.noticeCounts}</div>;
+      notice = <div className={styles.notices}>99+</div>;
     } else {
       notice = <div className={styles.notice}>{props.noticeCounts}</div>;
     }

src/components/NavigationBar/styles.scss

@@ -95,7 +95,7 @@
   line-height: 1.8em;
   font-family: Lato;
   text-align: center;
-  font-size: 0.7em;
+  font-size: 0.6em;
   background-color: $rc-orange;
   overflow: hidden;
 }

src/components/RecipientsHeader/styles.scss

@@ -20,6 +20,13 @@
 
     &:focus {
       outline: none;
+      text-decoration: none;
+      color: inherit;
+    }
+
+    &:hover {
+      text-decoration: none;
+      color: inherit;
     }
   }
 }

src/components/RemoveButton/styles.scss

@@ -1,9 +1,16 @@
 .containner {
   text-decoration: none;
   color: #666666;
+  &:hover {
+    text-decoration: none;
+    color: #666666;
+  }
 }
 
 .hiddenRemoveButton {
   color: transparent;
   text-decoration: none;
+  &:hover {
+    color: transparent;
+  }
 }

src/containers/ConversationPage/index.js

@@ -106,8 +106,8 @@ function mapDispatchToProps(dispatch, props) {
   if (props.contactMatcher && props.contactMatcher.ready) {
     matcherContactName = (phoneNumber) => {
       const matcherNames = props.contactMatcher.dataMapping[phoneNumber];
-      if (matcherNames && matcherNames[0] && matcherNames[0].name) {
-        return matcherNames[0].name;
+      if (matcherNames && matcherNames.length > 0) {
+        return matcherNames.map(matcher => matcher.name).join('&');
       }
       return null;
     };

src/containers/MessagesPage/i18n/en-US.js

@@ -2,5 +2,5 @@ export default {
   title: 'Messages',
   search: 'Search...',
   noMessages: 'No Messages',
-  noSearchResults: 'No matching record found',
+  noSearchResults: 'No matching records found',
 };

src/containers/MessagesPage/index.js

@@ -40,9 +40,9 @@ class MessagesPage extends Component {
     }
     return recipients.map((recipient) => {
       const phoneNumber = recipient.phoneNumber || recipient.extensionNumber;
-      if (phoneNumber && this.props.matcherContactName) {
-        const matcherName = this.props.matcherContactName(phoneNumber);
-        if (matcherName) {
+      if (recipient.matchedNames) {
+        const matcherName = recipient.matchedNames.map(matcher => matcher.name).join('&');
+        if (matcherName.length > 0) {
           return matcherName;
         }
         return this.props.formatPhone(phoneNumber);
@@ -63,9 +63,9 @@ class MessagesPage extends Component {
         if (searchNumber && searchNumber.length > 0 && phoneNumber.indexOf(searchNumber) >= 0) {
           return true;
         }
-        if (this.props.matcherContactName) {
-          const matcherName = this.props.matcherContactName(phoneNumber);
-          if (matcherName) {
+        if (recipient.matchedNames) {
+          const matcherName = recipient.matchedNames.map(matcher => matcher.name).join('&');
+          if (matcherName.length > 0) {
             recipientName = matcherName;
           } else {
             recipientName = phoneNumber;
@@ -175,17 +175,12 @@ MessagesPage.propTypes = {
   getRecipientsList: PropTypes.func.isRequired,
   searchMessagesText: PropTypes.func.isRequired,
   updateSearchResults: PropTypes.func.isRequired,
-  matcherContactName: PropTypes.func,
-};
-
-MessagesPage.defaultProps = {
-  matcherContactName: null,
 };
 
 function mapStateToProps(state, props) {
   return ({
     currentLocale: props.locale.currentLocale,
-    messages: props.messages.messages,
+    messages: props.messages.normalizedMessages,
     allMessages: props.messageStore.conversations,
     showSpinner: (
       !props.messages.ready ||
@@ -200,16 +195,6 @@ function mapStateToProps(state, props) {
 }
 
 function mapDispatchToProps(dispatch, props) {
-  let matcherContactName = null;
-  if (props.contactMatcher && props.contactMatcher.ready) {
-    matcherContactName = (phoneNumber) => {
-      const matcherNames = props.contactMatcher.dataMapping[phoneNumber];
-      if (matcherNames && matcherNames[0] && matcherNames[0].name) {
-        return matcherNames[0].name;
-      }
-      return null;
-    };
-  }
   return {
     loadNextPageMessages: props.messages.loadNextPageMessages,
     updateSearchingString: props.messages.updateSearchingString,
@@ -228,7 +213,6 @@ function mapDispatchToProps(dispatch, props) {
     }),
     searchMessagesText: searchText =>
       props.messageStore.searchMessagesText(searchText),
-    matcherContactName,
   };
 }