Create recent activities panel and recent messages tab (#297)

* create recent activity panel and recent messages view

* update NavigationBar docs

* update recent activity panel

* create recent activity view

* Update version & added to incoming call page

Author: Eric Huang

dev-server/Phone.js

@@ -53,6 +53,7 @@ import ActivityMatcher from 'ringcentral-integration/modules/ActivityMatcher';
 import CallLogger from 'ringcentral-integration/modules/CallLogger';
 import ConversationMatcher from 'ringcentral-integration/modules/ConversationMatcher';
 import ConversationLogger from 'ringcentral-integration/modules/ConversationLogger';
+import RecentMessages from 'ringcentral-integration/modules/RecentMessages';
 
 import RouterInteraction from '../src/modules/RouterInteraction';
 
@@ -563,6 +564,13 @@ export default class Phone extends RcModule {
       getState: () => this.state.messages,
     }));
     reducers.messages = this.messages.reducer;
+    this.addModule('recentMessages', new RecentMessages({
+      ...options,
+      client: this.client,
+      messageStore: this.messageStore,
+      getState: () => this.state.recentMessages
+    }));
+    reducers.recentMessages = this.recentMessages.reducer;
     this._reducer = combineReducers({
       ...reducers,
       app: (state = {

dev-server/containers/App/index.js

@@ -19,11 +19,10 @@ import CallHistoryPage from '../../../src/containers/CallHistoryPage';
 import IncomingCallPage from '../../../src/containers/IncomingCallPage';
 import CallCtrlPage from '../../../src/containers/CallCtrlPage';
 import CallBadgeContainer from '../../../src/containers/CallBadgeContainer';
-
+import RecentActivityContainer from '../../../src/containers/RecentActivityContainer';
 import MainView from '../MainView';
 import AppView from '../AppView';
 
-
 export default function App({
   phone,
 }) {
@@ -73,6 +72,14 @@ export default function App({
                   callingSettingsUrl="/settings/calling"
                   regionSettingsUrl="/settings/region"
                 />
+                <RecentActivityContainer
+                  locale={phone.locale}
+                  router={phone.router}
+                  dateTimeFormat={phone.dateTimeFormat}
+                  webphone={phone.webphone}
+                  contactMatcher={phone.contactMatcher}
+                  recentMessages={phone.recentMessages}
+                />
               </IncomingCallPage>
             </AppView>
           )} >
@@ -126,7 +133,8 @@ export default function App({
                   regionSettingsUrl="/settings/region"
                   callingSettingsUrl="/settings/calling"
                 />
-              )} />
+              )}
+            />
             <Route
               path="/settings/region"
               component={() => (
@@ -187,7 +195,16 @@ export default function App({
                       return avatarUrl;
                     }
                   }
-                />
+                >
+                  <RecentActivityContainer
+                    locale={phone.locale}
+                    router={phone.router}
+                    dateTimeFormat={phone.dateTimeFormat}
+                    webphone={phone.webphone}
+                    contactMatcher={phone.contactMatcher}
+                    recentMessages={phone.recentMessages}
+                  />
+                </CallCtrlPage>
               )} />
             <Route
               path="/history"

docs/src/app/pages/Components/NavigationBar/Demo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 // eslint-disable-next-line
 import NavigationBar from 'ringcentral-widget/components/NavigationBar';
+import TabNavigationButton from 'ringcentral-widget/components/TabNavigationButton';
 import dynamicsFont from 'ringcentral-widget/assets/DynamicsFont/DynamicsFont.scss';
 
 const props = {};
@@ -60,6 +61,7 @@ props.tabs = [
 props.goTo = (path) => alert(`go to ${path}`)
 const NavigationBarDemo = () => (
   <NavigationBar
+    button={TabNavigationButton}
     {...props}
   />
 );

package.json

@@ -32,7 +32,7 @@
     "react-router-redux": "^4.0.7",
     "ringcentral": "3.1.1",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0-rc8",
+    "ringcentral-integration": "^0.7.0-rc14",
     "whatwg-fetch": "^2.0.1"
   },
   "devDependencies": {
@@ -84,7 +84,7 @@
     "redux-thunk": "^2.1.0",
     "ringcentral": "^3.1.1",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0-rc13",
+    "ringcentral-integration": "^0.7.0-rc14",
     "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",

src/components/NavigationBar/index.js

@@ -3,67 +3,11 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styles from './styles.scss';
 
-
-function NavigationButton({
-  active,
-  activeIcon,
-  icon,
-  label,
-  noticeCounts,
-  onClick,
-  width,
-}) {
-  let notice = null;
-  if (noticeCounts && noticeCounts > 0) {
-    if (noticeCounts > 99) {
-      notice = <div className={styles.notices}>99+</div>;
-    } else {
-      notice = <div className={styles.notice}>{noticeCounts}</div>;
-    }
-  }
-  return (
-    <div
-      onClick={onClick}
-      className={classnames(
-        styles.navigationButton,
-        active && styles.active,
-      )}
-      style={{
-        width,
-      }}
-    >
-      <div className={styles.iconHolder} title={label}>
-        <div className={styles.icon}>
-          {active ? activeIcon : icon }
-        </div>
-        {notice}
-      </div>
-    </div>
-  );
-}
-NavigationButton.propTypes = {
-  icon: PropTypes.node.isRequired,
-  activeIcon: PropTypes.node.isRequired,
-  active: PropTypes.bool,
-  label: PropTypes.string,
-  noticeCounts: PropTypes.number,
-  width: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-  ]).isRequired,
-  onClick: PropTypes.func,
-};
-NavigationButton.defaultProps = {
-  active: false,
-  label: undefined,
-  noticeCounts: undefined,
-  onClick: undefined,
-};
-
 function NavigationBar(props) {
   const tabWidth = props.tabs.length > 0 ?
     `${(1 / props.tabs.length) * 100}%` :
     0;
+  const NavigationButton = props.button;
   return (
     <nav className={classnames(styles.root, props.className)}>
       {
@@ -87,9 +31,13 @@ function NavigationBar(props) {
 }
 NavigationBar.propTypes = {
   className: PropTypes.string,
+  button: PropTypes.oneOfType([
+    PropTypes.func.isRequired,
+    PropTypes.element.isRequired
+  ]).isRequired,
   tabs: PropTypes.arrayOf(PropTypes.shape({
     icon: PropTypes.node.isRequired,
-    activeIcon: PropTypes.node.isRequired,
+    activeIcon: PropTypes.node,
     label: PropTypes.string,
     path: PropTypes.string.isRequired,
     isActive: PropTypes.func,

src/components/NavigationBar/styles.scss

@@ -1,6 +1,4 @@
-@import '../../lib/commonStyles/vertical-align';
 @import '../../lib/commonStyles/full-size';
-@import '../../lib/commonStyles/no-select';
 @import '../../lib/commonStyles/colors';
 @import '../../lib/commonStyles/layout';
 
@@ -10,93 +8,3 @@
   box-sizing: border-box;
   background-color: $primary-color;
 }
-
-.tab {
-  display: inline-block;
-  box-sizing: border-box;
-  height: 100%;
-  border-style: solid;
-  border-color: $border-color;
-  vertical-align: top;
-  z-index: 10;
-}
-
-.navigationButton {
-  @include full-size;
-  @include no-select;
-  outline: 0;
-  display: inline-block;
-  text-align: center;
-  vertical-align: top;
-  height: 100%;
-  text-decoration: none;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: all 0.1s ease;
-  color: #fff !important;
-  font-size: 16px;
-  text-decoration: none !important;
-}
-/*.navigationButton:hover {
-  background-color: $lightergray;
-}*/
-.navigationButton:hover,
-.navigationButton:focus {
-  outline: 0;
-  opacity: 0.9;
-}
-.navigationButton.active {
-  opacity: 1;
-}
-.iconHolder {
-  @include full-size;
-}
-.icon {
-  @include full-size;
- -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 1.3em;
-  line-height: $navigation-bar-height;
-}
-.labelHolder {
-  @include full-size;
-  height: 35%;
-  position: relative;
-}
-
-.label {
-  @include full-size;
-  @include vertical-align(top);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 0.7em;
-}
-
-.notice {
-  position: absolute;
-  bottom: 1.9em;
-  right: calc(50% - 1.6em);
-  width: 1.4em;
-  height: 1.4em;
-  border-radius: 100%;
-  line-height: 1.4em;
-  font-family: Lato;
-  text-align: center;
-  font-size: 0.7em;
-  background-color: #f65d60;
-  overflow: hidden;
-}
-.notices {
-  position: absolute;
-  bottom: 2em;
-  right: calc(50% - 2em);
-  width: 2.1em;
-  height: 1.5em;
-  border-radius: 3em;
-  line-height: 1.5em;
-  font-family: Lato;
-  text-align: center;
-  font-size: 0.6em;
-  background-color: #f65d60;
-  overflow: hidden;
-}

src/components/RecentActivityMessages/i18n/en-US.js

@@ -0,0 +1,3 @@
+export default {
+  noRecords: 'No recent records found.',
+};

src/components/RecentActivityMessages/i18n/index.js

@@ -0,0 +1,4 @@
+import I18n from 'ringcentral-integration/lib/I18n';
+import loadLocale from './loadLocale';
+
+export default new I18n(loadLocale);

src/components/RecentActivityMessages/i18n/loadLocale.js

@@ -0,0 +1 @@
+/* loadLocale */

src/components/RecentActivityMessages/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import Spinner from '../Spinner';
+import styles from './styles.scss';
+import i18n from './i18n';
+
+const cx = classNames.bind(styles);
+function MessageItem({ message, navigateTo, dateTimeFormatter }) {
+  const { subject, lastModifiedTime, readStatus, conversationId } = message;
+  const isUnread = readStatus !== 'Read';
+  const time = dateTimeFormatter({ utcTimestamp: lastModifiedTime });
+  return (
+    <div
+      className={cx('messageItem', { localMessageItem: !message.fromRemote })}
+      onClick={() => !message.fromRemote && navigateTo(`conversations/${conversationId}`)}
+    >
+      <dl className={styles.dl}>
+        <dt className={cx('messageSubject', { unread: isUnread })} title={subject}>{subject}</dt>
+        <dd className={cx('messageTime', { unread: isUnread })} title={time}>{time}</dd>
+      </dl>
+    </div>
+  );
+}
+
+MessageItem.propTypes = {
+  message: PropTypes.object.isRequired,
+  navigateTo: PropTypes.func.isRequired,
+  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>);
+  }
+  return (
+    <div className={styles.messages}>
+      { messageListView }
+    </div>
+  );
+}
+
+RecentActivityMessages.propTypes = {
+  currentLocale: PropTypes.string.isRequired,
+  messages: PropTypes.array.isRequired,
+  isMessagesLoaded: PropTypes.bool.isRequired,
+  navigateTo: PropTypes.func.isRequired,
+  dateTimeFormatter: PropTypes.func.isRequired
+};