add-history-URL (#2843)

frontend/src/draft-review.js

@@ -31,6 +31,7 @@ import './css/initial-style.css';
 import './css/toolbar.css';
 import './css/draft-review.css';
 
+const URL = require('url-parse');
 require('@seafile/seafile-editor/dist/editor/code-hight-package');
 
 class DraftReview extends React.Component {
@@ -53,6 +54,7 @@ class DraftReview extends React.Component {
       totalReversionCount: 0,
       changedNodes: [],
       isShowCommentDialog: false,
+      activeItem: null,
     };
     this.quote = '';
     this.newIndex = null;
@@ -99,25 +101,59 @@ class DraftReview extends React.Component {
           return;
         }
 
-        axios.all([
+        const hash = window.location.hash;
-          seafileAPI.getFileDownloadLink(draftOriginRepoID, draftFilePath),
+        if (hash.indexOf('#history-') === 0) {
-          seafileAPI.getFileDownloadLink(draftOriginRepoID, draftOriginFilePath)
+          const currentCommitID = hash.slice(9, 49);
-        ]).then(axios.spread((res1, res2) => {
+          const preCommitID = hash.slice(50, 90);
-          axios.all([
+          this.setState({
-            seafileAPI.getFileContent(res1.data),
+            isLoading: false,
-            seafileAPI.getFileContent(res2.data)
+            activeTab: 'history',
-          ]).then(axios.spread((draftContent, draftOriginContent) => {
+          });
+          seafileAPI.listFileHistoryRecords(draftOriginRepoID, draftFilePath, 1, 25).then((res) => {
+            const historyList = res.data.data;
             this.setState({
-              draftContent: draftContent.data,
+              historyList: historyList,
-              draftOriginContent: draftOriginContent.data,
+              totalReversionCount: res.data.total_count
-              isLoading: false
+            });
-            }); 
+            for (let i = 0, length = historyList.length; i < length; i++) {
-            let that = this;
+              if (preCommitID === historyList[i].commit_id) {
-            setTimeout(() => {
+                this.setState({
-              that.getChangedNodes();
+                  activeItem: i
-            }, 100);
+                });
+                break;
+              }
+            }
+          });
+          axios.all([
+            seafileAPI.getFileRevision(draftOriginRepoID, currentCommitID, draftFilePath),
+            seafileAPI.getFileRevision(draftOriginRepoID, preCommitID, draftFilePath)
+          ]).then(axios.spread((res1, res2) => {
+            axios.all([seafileAPI.getFileContent(res1.data), seafileAPI.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
+              this.setDiffViewerContent(content2.data, content1.data);
+            }));
           }));
-        }));
+          return;
+        } else {
+          axios.all([
+            seafileAPI.getFileDownloadLink(draftOriginRepoID, draftFilePath),
+            seafileAPI.getFileDownloadLink(draftOriginRepoID, draftOriginFilePath)
+          ]).then(axios.spread((res1, res2) => {
+            axios.all([
+              seafileAPI.getFileContent(res1.data),
+              seafileAPI.getFileContent(res2.data)
+            ]).then(axios.spread((draftContent, draftOriginContent) => {
+              this.setState({
+                draftContent: draftContent.data,
+                draftOriginContent: draftOriginContent.data,
+                isLoading: false
+              }); 
+              let that = this;
+              setTimeout(() => {
+                that.getChangedNodes();
+              }, 100);
+            }));
+          }));
+        }
         break;
       case "finished":  
         if (!originFileExists) {
@@ -148,6 +184,35 @@ class DraftReview extends React.Component {
     document.removeEventListener('selectionchange', this.setBtnPosition);
   }
 
+  onHistoryItemClick = (currentCommitID, preCommitID, activeItem) => {
+    const url = 'history-' + preCommitID + '-' + currentCommitID;
+    this.setURL(url);
+    this.setState({
+      activeItem: activeItem
+    });
+
+    axios.all([
+      seafileAPI.getFileRevision(draftOriginRepoID, currentCommitID, draftFilePath),
+      seafileAPI.getFileRevision(draftOriginRepoID, preCommitID, draftFilePath)
+    ]).then(axios.spread((res1, res2) => {
+      axios.all([seafileAPI.getFileContent(res1.data), seafileAPI.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
+        this.setDiffViewerContent(content1.data, content2.data);
+      }));
+    }));
+  }
+
+  onHistoryListChange = (historyList) => {
+    this.setState({
+      historyList: historyList
+    });
+  }
+
+  setURL = (newurl) => {
+    let url = new URL(window.location.href);
+    url.set('hash', newurl);
+    window.location.href = url.toString();
+  }
+
   onCloseReview = () => {
     seafileAPI.updateReviewStatus(reviewID, 'closed').then(res => {
       this.setState({reviewStatus: 'closed'});
@@ -438,6 +503,9 @@ class DraftReview extends React.Component {
 
   tabItemClick = (tab) => {
     if (this.state.activeTab !== tab) {
+      if (tab !== 'history') {
+        this.setURL('#');
+      }
       if (tab == 'reviewInfo') { 
         this.initialContent();
       }
@@ -815,9 +883,13 @@ class DraftReview extends React.Component {
                   </TabPane>
                   { this.state.reviewStatus == 'finished'? '':
                     <TabPane tabId="history" className="history">
-                      <HistoryList setDiffViewerContent={this.setDiffViewerContent} 
+                      <HistoryList
+                        activeItem={this.state.activeItem}
                         historyList={this.state.historyList}
-                        totalReversionCount={this.state.totalReversionCount}/>
+                        onHistoryItemClick={this.onHistoryItemClick}
+                        onHistoryListChange={this.onHistoryListChange}
+                        totalReversionCount={this.state.totalReversionCount}
+                      />
                     </TabPane>
                   }
                 </TabContent>

frontend/src/pages/review/history-list.js

@@ -16,7 +16,6 @@ class HistoryList extends React.Component {
     super(props);
     this.perPage = 25;
     this.state = {
-      activeItem: 0,
       currentPage: 1,
       loading: false
     };
@@ -24,17 +23,7 @@ class HistoryList extends React.Component {
 
   onClick = (event, key, preCommitID, currentCommitID)=> {
     if (key === this.state.activeItem) return false;
-    this.setState({
+    this.props.onHistoryItemClick(currentCommitID, preCommitID, key);
-      activeItem: key,
-    });
-    axios.all([
-      seafileAPI.getFileRevision(draftOriginRepoID, currentCommitID, draftFilePath),
-      seafileAPI.getFileRevision(draftOriginRepoID, preCommitID, draftFilePath)
-    ]).then(axios.spread((res1, res2) => {
-      axios.all([seafileAPI.getFileContent(res1.data), seafileAPI.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
-        this.props.setDiffViewerContent(content1.data, content2.data);
-      }));
-    }));
   }
 
   onScroll = (event) => {
@@ -51,8 +40,8 @@ class HistoryList extends React.Component {
         });
         seafileAPI.listFileHistoryRecords(draftOriginRepoID, draftFilePath, currentPage, this.perPage).then((res) => {
           let currentHistoryList = Object.assign([], this.props.historyList);
+          this.props.onHistoryListChange([...currentHistoryList, ...res.data.data]);
           this.setState({
-            historyList: [...currentHistoryList, ...res.data.data],
             loading : false
           });
         });
@@ -75,7 +64,7 @@ class HistoryList extends React.Component {
                   <HistoryItem
                   onClick={this.onClick}
                   ctime={item.ctime}
-                  className={this.state.activeItem === index ? 'item-active': ''}
+                  className={this.props.activeItem === index ? 'item-active': ''}
                   currentCommitId={item.commit_id}
                   name={item.creator_name}
                   index={index}