update

frontend/src/components/common/notice-item.js

@@ -4,6 +4,7 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import { processor } from '@seafile/seafile-editor';
 
 const propTypes = {
   noticeItem: PropTypes.object.isRequired,
@@ -35,7 +36,7 @@ class NoticeItem extends React.Component {
     let noticeItem = this.props.noticeItem;
     let noticeType = noticeItem.type;
     let detail = noticeItem.detail;
-    console.log(detail, noticeItem, noticeType)
+
     if (noticeType === MSG_TYPE_ADD_USER_TO_GROUP) {
 
       let avatar_url = detail.group_staff_avatar_url;
@@ -378,19 +379,23 @@ class NoticeItem extends React.Component {
     }
 
     if (noticeType === MSG_TYPE_SEADOC_COMMENT) {
-      let avatar_url = detail.share_from_user_avatar_url;
-      let notice = '';
-      console.log(111)
-      notice = Utils.HTMLescape(notice);
-      return { avatar_url, notice };
+      let avatar_url = detail.avatar_url;
+      let notice = detail.comment;
+      let username = detail.user_name;
+      processor.process(notice, (error, vfile) => {
+        notice = String(vfile);
+      });
+      return { avatar_url, username, notice };
     }
 
     if (noticeType === MSG_TYPE_SEADOC_REPLY) {
-      let avatar_url = detail.share_from_user_avatar_url;
+      let avatar_url = detail.avatar_url;
       let notice = detail.reply;
-      notice = Utils.HTMLescape(notice);
-      console.log(notice)
-      return { avatar_url, notice };
+      let username = detail.user_name;
+      processor.process(notice, (error, vfile) => {
+        notice = String(vfile);
+      });
+      return { avatar_url, username, notice };
     }
 
     // if (noticeType === MSG_TYPE_GUEST_INVITATION_ACCEPTED) {
@@ -410,8 +415,7 @@ class NoticeItem extends React.Component {
 
   render() {
     let noticeItem = this.props.noticeItem;
-    let { avatar_url, notice } = this.generatorNoticeInfo();
-
+    let { avatar_url, username, notice } = this.generatorNoticeInfo();
     if (!avatar_url && !notice) {
       return '';
     }
@@ -432,8 +436,13 @@ class NoticeItem extends React.Component {
       <li onClick={this.onNoticeItemClick} className={noticeItem.seen ? 'read' : 'unread'}>
         <div className="notice-item">
           <div className="main-info">
-            <img src={avatar_url} width="32" height="32" className="avatar" alt=""/>
-            <p className="brief" dangerouslySetInnerHTML={{ __html: notice }}></p>
+            <div className="auther-info">
+              <img src={avatar_url} width="32" height="32" className="avatar" alt=""/>
+              <p>{username}</p>
+            </div>
+            <div>
+              <p className="brief" dangerouslySetInnerHTML={{ __html: notice }}></p>
+            </div>
           </div>
           <p className="time">{dayjs(noticeItem.time).fromNow()}</p>
         </div>

frontend/src/components/common/notification-popover/index.js

@@ -72,39 +72,38 @@ export default class NotificationPopover extends React.Component {
             <span className="sf3-font sf3-font-x-01 notification-close-icon" onClick={this.props.onNotificationListToggle}></span>
           </div>
           <div className="notification-body">
-          <div className="mark-notifications">
-            <ul className="nav">
-              <li className="nav-item" onClick={() => this.tabItemClick('general')}>
-                <span className={`nav-link ${currentTab === 'general' ? 'active' : ''}`}>
-                  {gettext('General')}
-                </span>
-              </li>
-              <li className="nav-item" onClick={() => this.tabItemClick('discussion')}>
-                <span className={`nav-link ${currentTab === 'discussion' ? 'active' : ''}`}>
-                  {gettext('Discussion')}
-                  
-                </span>
-              </li>
-            </ul>
-            <span className="mark-all-read" onClick={this.onMarkAllNotifications}>
-              {gettext('Mark all as read')}
-            </span>
-          </div>
-          {currentTab === 'general' &&
+            <div className="mark-notifications">
+              <ul className="nav">
+                <li className="nav-item" onClick={() => this.tabItemClick('general')}>
+                  <span className={`nav-link ${currentTab === 'general' ? 'active' : ''}`}>
+                    {gettext('General')}
+                  </span>
+                </li>
+                <li className="nav-item" onClick={() => this.tabItemClick('discussion')}>
+                  <span className={`nav-link ${currentTab === 'discussion' ? 'active' : ''}`}>
+                    {gettext('Discussion')}
+                  </span>
+                </li>
+              </ul>
+              <span className="mark-all-read" onClick={this.props.onMarkAllNotifications}>
+                {bodyText}
+              </span>
+            </div>
+            {currentTab === 'general' &&
             <div className="notification-list-container" onScroll={this.onHandleScroll} ref={ref => this.notificationListRef = ref}>
               <div ref={ref => this.notificationsWrapperRef = ref}>
                 {this.props.children}
               </div>
             </div>
-          }
-          {currentTab === 'discussion' &&
+            }
+            {currentTab === 'discussion' &&
             <div className="notification-list-container" onScroll={this.onHandleScroll} ref={ref => this.notificationListRef = ref}>
               <div ref={ref => this.notificationsWrapperRef = ref}>
                 {this.props.children}
               </div>
             </div>
-          }
-         
+            }
+
             {/* <div className="mark-notifications" onClick={this.props.onMarkAllNotifications}>
               <ul className="nav dtable-external-links-tab">
                 <li className="nav-item">

frontend/src/components/common/notification.js

@@ -38,16 +38,16 @@ class Notification extends React.Component {
       this.setState({ showNotice: true });
     }
   };
-  
+
   tabItemClick = (tab) => {
     const { currentTab } = this.state;
     if (currentTab === tab) return;
-    this.setState({ 
+    this.setState({
       showNotice: true,
       currentTab: tab
-     }, () => {
+    }, () => {
       this.loadNotices();
-     });
+    });
   };
 
   loadNotices = () => {
@@ -62,7 +62,6 @@ class Notification extends React.Component {
     if (this.state.currentTab === 'discussion') {
       seafileAPI.listSdocNotifications(page, perPage).then(res => {
         let noticeList = res.data.notification_list;
-        console.log(noticeList)
         this.setState({ noticeList: noticeList });
       });
     }
@@ -76,7 +75,14 @@ class Notification extends React.Component {
       }
       return item;
     });
-    seafileAPI.markNoticeAsRead(noticeItem.id);
+
+    if (this.state.currentTab === 'general') {
+      seafileAPI.markNoticeAsRead(noticeItem.id);
+    }
+    if (this.state.currentTab === 'discussion') {
+      seafileAPI.markSdocNoticeAsRead(noticeItem.id);
+    }
+
     let unseenCount = this.state.unseenCount === 0 ? 0 : this.state.unseenCount - 1;
     this.setState({
       noticeList: noticeList,