diff --git a/frontend/src/app.js b/frontend/src/app.js
index ac29f8871d..22e2f5aa93 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -35,11 +35,19 @@ class App extends Component {
       draftCounts: 0,
       draftList:[],
       isLoadingDraft: true,
+      currentTab: 'dashboard',
     };
   }
 
   componentDidMount() {
+    // e.g.  from http://127.0.0.1:8000/drafts/reviews/
+    // get reviews  
+    // TODO: need refactor later
+    let href = window.location.href.split('/');
     this.getDrafts();
+    this.setState({
+      currentTab: href[href.length - 2]
+    });
   }
 
   getDrafts = () => {
@@ -71,19 +79,23 @@ class App extends Component {
     });
   }
 
-  render() {
+  tabItemClick = (param) => {
+    this.setState({
+      currentTab: param
+    });
+  } 
 
-    let href = window.location.href.split('/');
-    let currentTab = href[href.length - 2];
+  render() {
+    let { currentTab } = this.state;
 
     return (
       <div id="main">
-        <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} draftCounts={this.state.draftCounts} />
+        <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} draftCounts={this.state.draftCounts} />
 
         <MainPanel onShowSidePanel={this.onShowSidePanel}>
           <Router>
             <FilesActivities path={siteRoot + 'dashboard'} />
-            <DraftsView path={siteRoot + 'drafts'}  currentTab={currentTab}>
+            <DraftsView path={siteRoot + 'drafts'}  tabItemClick={this.tabItemClick} currentTab={currentTab}>
               <DraftContent path='/' getDrafts={this.getDrafts} 
                 isLoadingDraft={this.state.isLoadingDraft}
                 draftList={this.state.draftList}
diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
index 7aacd6d1f4..88dbf657be 100644
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -9,18 +9,18 @@ import { canViewOrg } from '../utils/constants';
 
 const propTypes = {
   currentTab: PropTypes.string.isRequired,
+  tabItemClick: PropTypes.func.isRequired,
+  draftCounts: PropTypes.number,
 };
 
 class MainSideNav extends React.Component {
   constructor(props) {
     super(props);
-    let currentTab = this.props.currentTab || '';
     this.state = {
       groupsExtended: false,
       sharedExtended: false,
       closeSideBar:false,
       groupItems: [],
-      currentTab: currentTab,
     };
 
     this.listHeight = 24; //for caculate tabheight
@@ -53,9 +53,7 @@ class MainSideNav extends React.Component {
   }
 
   tabItemClick = (param) => {
-    this.setState({
-      currentTab: param
-    });
+    this.props.tabItemClick(param);
   }
 
   renderSharedGroups() {
@@ -65,7 +63,7 @@ class MainSideNav extends React.Component {
     }
     return (
       <ul className={`grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
-        <li className={this.state.currentTab === 'groups' ? 'tab-cur' : ''}> 
+        <li className={this.props.currentTab === 'groups' ? 'tab-cur' : ''}> 
           <a href={siteRoot + '#groups/'} onClick={() => this.tabItemClick('groups')}>
             <span className="sharp" aria-hidden="true">#</span>
             {gettext('All Groups')}
@@ -73,7 +71,7 @@ class MainSideNav extends React.Component {
         </li>
         {this.state.groupItems.map(item => {
           return (
-            <li key={item.id} className={this.state.currentTab === item.id ? 'tab-cur' : ''}> 
+            <li key={item.id} className={this.props.currentTab === item.id ? 'tab-cur' : ''}> 
               <a href={siteRoot + '#group/' + item.id + '/'} className="ellipsis" onClick={() => this.tabItemClick(item.id)}>
                 <span className="sharp" aria-hidden="true">#</span>
                 {item.name}
@@ -96,19 +94,19 @@ class MainSideNav extends React.Component {
     let style = {height: height};
     return (
       <ul className={`${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
-        <li className={this.state.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
+        <li className={this.props.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
           <Link to={siteRoot + 'share-admin-libs/'} className="ellipsis" title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
             <span aria-hidden="true" className="sharp">#</span>
             {gettext('Libraries')}
           </Link>
         </li>
-        <li className={this.state.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
+        <li className={this.props.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
           <Link to={siteRoot + 'share-admin-folders/'} className="ellipsis" title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
             <span aria-hidden="true" className="sharp">#</span>
             {gettext('Folders')}
           </Link>
         </li>
-        <li className={this.state.currentTab === 'share-admin-share-links' ? 'tab-cur' : ''}>
+        <li className={this.props.currentTab === 'share-admin-share-links' || this.props.currentTab == 'share-admin-upload-links' ? 'tab-cur' : ''}>
           <Link to={siteRoot + 'share-admin-share-links/'} className="ellipsis" title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}>
             <span aria-hidden="true" className="sharp">#</span>
             {gettext('Links')}
@@ -124,20 +122,20 @@ class MainSideNav extends React.Component {
         <div className="side-nav-con">
           <h3 className="sf-heading">Files</h3>
           <ul className="side-tabnav-tabs">
-            <li className={`tab ${this.state.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
+            <li className={`tab ${this.props.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
               <a href={ siteRoot + '#my-libs' } className="ellipsis" title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
                 <span className="sf2-icon-user" aria-hidden="true"></span>
                 {gettext('My Libraries')}
               </a>
             </li>
-            <li className={`tab ${this.state.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
+            <li className={`tab ${this.props.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
               <Link to={siteRoot + 'shared-libs/'} className="ellipsis" title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
                 <span className="sf2-icon-share" aria-hidden="true"></span>
                 {gettext('Shared with me')}
               </Link>
             </li>
             { canViewOrg &&
-              <li className={`tab ${this.state.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>
+              <li className={`tab ${this.props.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>
                 <a href={ siteRoot + '#org/' } className="ellipsis" title={gettext('Shared with all')}>
                   <span className="sf2-icon-organization" aria-hidden="true"></span>
                   {gettext('Shared with all')}
@@ -156,25 +154,25 @@ class MainSideNav extends React.Component {
 
           <h3 className="sf-heading">Tools</h3>
           <ul className="side-tabnav-tabs">
-            <li className={`tab ${this.state.currentTab === 'starred' ? 'tab-cur' : ''}`}>
+            <li className={`tab ${this.props.currentTab === 'starred' ? 'tab-cur' : ''}`}>
               <Link to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('starred')}>
                 <span className="sf2-icon-star" aria-hidden="true"></span>
                 {gettext('Favorites')}
               </Link>
             </li>
-            <li className={`tab ${this.state.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
+            <li className={`tab ${this.props.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
               <Link to={siteRoot + 'dashboard/'} title={gettext('Acitivities')} onClick={() => this.tabItemClick('dashboard')}>
                 <span className="sf2-icon-clock" aria-hidden="true"></span>
                 {gettext('Acitivities')}
               </Link>
             </li>
-            <li className={`tab ${this.state.currentTab === 'linked-devices' ? 'tab-cur' : ''}`}>
+            <li className={`tab ${this.props.currentTab === 'linked-devices' ? 'tab-cur' : ''}`}>
               <Link to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}>
                 <span className="sf2-icon-monitor" aria-hidden="true"></span>
                 {gettext('Linked Devices')}
               </Link>
             </li>
-            <li className={`tab ${this.state.currentTab === 'drafts' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
+            <li className={`tab ${this.props.currentTab === 'drafts' || this.props.currentTab === 'reviews' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
               <Link to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
                 <span className="sf2-icon-edit" aria-hidden="true"></span>
                 {gettext('Drafts')}  {this.props.draftCounts === 0 ? '' : <Badge color="info" pill>{this.props.draftCounts}</Badge>}
diff --git a/frontend/src/components/review-list-view/review-list-item.js b/frontend/src/components/review-list-view/review-list-item.js
index 0579f780f6..a2c99f4fa8 100644
--- a/frontend/src/components/review-list-view/review-list-item.js
+++ b/frontend/src/components/review-list-view/review-list-item.js
@@ -31,7 +31,7 @@ class Reviewers extends React.Component {
     let reviewers = '';
 
     this.props.item.reviewers.map(item => {
-      reviewers = reviewers + ' and ' + item.user_name
+      reviewers = reviewers + ' and ' + item.user_name;
     });
 
     this.setState({
@@ -45,9 +45,9 @@ class Reviewers extends React.Component {
     return (
       <div className='position-relative reviewer-list'>
         <span id={'reviewers' + items.id}>
-        {items.reviewers.map((item, index) => (
-          <img key={index} id={'reviewer-tip' + '-' + items.id + '-' + index}  className="avatar avatar-sm reviewer-avatar" src={item.avatar_url} />
-        ))}
+          {items.reviewers.map((item, index) => (
+            <img key={index} id={'reviewer-tip' + '-' + items.id + '-' + index}  className="avatar avatar-sm reviewer-avatar" src={item.avatar_url} alt={item.user_name} />
+          ))}
         </span>
         <Tooltip placement="bottom-end" isOpen={this.state.reviewerTipOpen} target={'reviewers' + items.id} toggle={this.toggle}>
           {reviewerList}
@@ -112,7 +112,7 @@ class ReviewListItem extends React.Component {
         <td className="name a-simulate" style={{width: '26%'}} onClick={this.onReviewsClick}>{fileName}</td>
         <td className='library' style={{width: '25%'}}>{item.draft_origin_repo_name}</td>
         <td className="update" style={{width: '20%'}}>{localTime}</td>
-        <td className="author" style={{width: '10%'}}><img className="avatar avatar-sm avatar-with-tooltip" id={'tip-' + item.id} src={item.author.avatar_url} /></td>
+        <td className="author" style={{width: '10%'}}><img className="avatar avatar-sm avatar-with-tooltip" id={'tip-' + item.id} src={item.author.avatar_url} alt={item.user_name} /></td>
         <td className="reviewer" style={{width: '15%'}}><Reviewers item={item}/></td>
         <Tooltip placement="bottom-end" isOpen={this.state.authorTipOpen} target={'tip-' + item.id} toggle={this.toggle}>
           {item.author.user_name}
@@ -124,4 +124,8 @@ class ReviewListItem extends React.Component {
 
 ReviewListItem.propTypes = propTypes;
 
+Reviewers.propTypes = {
+  item: PropTypes.object.isRequired,
+};
+
 export default ReviewListItem;
diff --git a/frontend/src/components/review-list-view/review-list-view.js b/frontend/src/components/review-list-view/review-list-view.js
index c0a0ddd35c..a6385418bd 100644
--- a/frontend/src/components/review-list-view/review-list-view.js
+++ b/frontend/src/components/review-list-view/review-list-view.js
@@ -8,18 +8,20 @@ import ReviewListItem from './review-list-item';
 const propTypes = {
   isItemFreezed: PropTypes.bool.isRequired,
   itemsList: PropTypes.array.isRequired,
+  getReviewList: PropTypes.func.isRequired,
+  activeTab: PropTypes.string.isRequired,
 };
 
 class ReviewListView extends React.Component {
 
-    constructor(props) {
-      super(props);
-      this.toggle = this.toggle.bind(this);
-    }
+  constructor(props) {
+    super(props);
+    this.toggle = this.toggle.bind(this);
+  }
 
   toggle(tab) {
     if (this.props.activeTab !== tab) {
-      this.props.getReviewList(tab)
+      this.props.getReviewList(tab);
     }
   }
 
@@ -32,7 +34,7 @@ class ReviewListView extends React.Component {
             <NavLink
               className={classnames({ active: this.props.activeTab === 'open' })}
               onClick={() => { this.toggle('open');}}
-              >
+            >
               {gettext('Open')}
             </NavLink>
           </NavItem>
@@ -40,7 +42,7 @@ class ReviewListView extends React.Component {
             <NavLink
               className={classnames({ active: this.props.activeTab === 'finished' })}
               onClick={() => { this.toggle('finished');}}
-              >
+            >
               {gettext('Published')}
             </NavLink>
           </NavItem>
@@ -48,7 +50,7 @@ class ReviewListView extends React.Component {
             <NavLink
               className={classnames({ active: this.props.activeTab === 'closed' })}
               onClick={() => { this.toggle('closed');}}
-              >
+            >
               {gettext('Closed')}
             </NavLink>
           </NavItem>
@@ -67,11 +69,11 @@ class ReviewListView extends React.Component {
           <tbody>
             { items && items.map((item) => {
               return (
-                  <ReviewListItem 
-                    key={item.id} 
-                    item={item} 
-                    isItemFreezed={this.props.isItemFreezed}
-                  />
+                <ReviewListItem 
+                  key={item.id} 
+                  item={item} 
+                  isItemFreezed={this.props.isItemFreezed}
+                />
               );
             })}
           </tbody>
diff --git a/frontend/src/components/side-panel.js b/frontend/src/components/side-panel.js
index 1c93a6c446..f02ac7e3ea 100644
--- a/frontend/src/components/side-panel.js
+++ b/frontend/src/components/side-panel.js
@@ -8,6 +8,8 @@ const propTypes = {
   isSidePanelClosed: PropTypes.bool.isRequired,
   currentTab: PropTypes.string.isRequired,
   onCloseSidePanel: PropTypes.func.isRequired,
+  tabItemClick: PropTypes.func.isRequired,
+  draftCounts: PropTypes.number,
 };
 
 class SidePanel extends React.Component {
@@ -19,7 +21,7 @@ class SidePanel extends React.Component {
           <Logo onCloseSidePanel={this.props.onCloseSidePanel}/>
         </div>
         <div className="side-panel-center">
-          <MainSideNav currentTab={this.props.currentTab} draftCounts={this.props.draftCounts}/>
+          <MainSideNav tabItemClick={this.props.tabItemClick} currentTab={this.props.currentTab} draftCounts={this.props.draftCounts}/>
         </div>
         <div className="side-panel-footer">
           <SideNavFooter />
diff --git a/frontend/src/markdown-editor.js b/frontend/src/markdown-editor.js
index 50d9a34462..97c5a052c7 100644
--- a/frontend/src/markdown-editor.js
+++ b/frontend/src/markdown-editor.js
@@ -202,7 +202,7 @@ class EditorUtilities {
   }
 
   goReviewPage() {
-    window.location.href = serviceUrl + '/drafts/review/' + reviewID
+    window.location.href = serviceUrl + '/drafts/review/' + reviewID;
   }
 
   getCommentsNumber() {
@@ -230,19 +230,19 @@ class EditorUtilities {
   }
 
   goDraftPage() {
-    window.location.href = serviceUrl + '/lib/' + repoID + '/file' + draftFilePath + '?mode=edit'
+    window.location.href = serviceUrl + '/lib/' + repoID + '/file' + draftFilePath + '?mode=edit';
   }
 
   createDraftFile() {
     return seafileAPI.createDraft(repoID, filePath).then(res => {
-      window.location.href = serviceUrl + '/lib/' + res.data.origin_repo_id + '/file' + res.data.draft_file_path + '?mode=edit'
-    })
+      window.location.href = serviceUrl + '/lib/' + res.data.origin_repo_id + '/file' + res.data.draft_file_path + '?mode=edit';
+    });
   }
 
   createFileReview() {
     return seafileAPI.createFileReview(repoID, filePath).then(res => {
       window.location.href = serviceUrl + '/drafts/review/' + res.data.id;
-    })
+    });
   }
 }
 
diff --git a/frontend/src/pages/drafts/draft-content.js b/frontend/src/pages/drafts/draft-content.js
index 46013adb68..fcd451436e 100644
--- a/frontend/src/pages/drafts/draft-content.js
+++ b/frontend/src/pages/drafts/draft-content.js
@@ -2,11 +2,17 @@ import React from 'react';
 import { siteRoot, gettext } from '../../utils/constants';
 import editUtilties from '../../utils/editor-utilties';
 import { Utils } from '../../utils/utils';
+import PropTypes from 'prop-types';
 import Toast from '../../components/toast';
 import Loading from '../../components/loading';
 import DraftListView from '../../components/draft-list-view/draft-list-view';
 import DraftListMenu from '../../components/draft-list-view/draft-list-menu';
 
+const propTypes = {
+  updateDraftsList: PropTypes.func.isRequired,
+  isLoadingDraft: PropTypes.bool.isRequired,
+  draftList: PropTypes.arrayOf(PropTypes.object),
+};
 
 class DraftContent extends React.Component {
   
@@ -131,4 +137,6 @@ class DraftContent extends React.Component {
   }
 }
 
+DraftContent.propTypes = propTypes;
+
 export default DraftContent;
diff --git a/frontend/src/pages/drafts/drafts-view.js b/frontend/src/pages/drafts/drafts-view.js
index 0a5123f499..41297ab210 100644
--- a/frontend/src/pages/drafts/drafts-view.js
+++ b/frontend/src/pages/drafts/drafts-view.js
@@ -9,21 +9,13 @@ const propTypes = {
     PropTypes.array,
     PropTypes.object
   ]).isRequired,
+  tabItemClick: PropTypes.func.isRequired,
 };
 
 class DraftsView extends React.Component {
-  
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentTab: this.props.currentTab
-    };
-  }
 
   tabItemClick = (param) => {
-    this.setState({
-      currentTab: param  
-    });
+    this.props.tabItemClick(param);
   }
   
   render() {
@@ -31,13 +23,13 @@ class DraftsView extends React.Component {
       <div className="cur-view-container">
         <div className="cur-view-path">
           <ul className="tab-tabs-nav">
-            <li className={`tab ${this.state.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
-              <Link  className='a' to={siteRoot + 'drafts'} title={gettext('Drafts')}>
+            <li className={`tab ${this.props.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
+              <Link  className='a' to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
                 {gettext('Drafts')}
               </Link>
             </li>
-            <li className={`tab ${this.state.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
-              <Link  className='a' to={siteRoot + 'drafts/reviews'} title={gettext('reviews')}>
+            <li className={`tab ${this.props.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
+              <Link  className='a' to={siteRoot + 'drafts/reviews/'} title={gettext('reviews')}>
                 {gettext('Reviews')}
               </Link>
             </li>
diff --git a/frontend/src/pages/drafts/review-content.js b/frontend/src/pages/drafts/review-content.js
index 06594fd9b2..040b535e5b 100644
--- a/frontend/src/pages/drafts/review-content.js
+++ b/frontend/src/pages/drafts/review-content.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import Loading from '../../components/loading';
 import ReviewListView from '../../components/review-list-view/review-list-view';
@@ -22,7 +21,7 @@ class ReviewContent extends React.Component {
   }
 
   getReviewList = (reviewStatus) => {
-    this.setState({isLoadingReviews: true})
+    this.setState({isLoadingReviews: true});
     seafileAPI.listReviews(reviewStatus).then(res => {
       this.setState({
         reviewsList: res.data.data,