diff --git a/frontend/config/webpack.entry.js b/frontend/config/webpack.entry.js
index 2b6617403d..575b9281da 100644
--- a/frontend/config/webpack.entry.js
+++ b/frontend/config/webpack.entry.js
@@ -8,6 +8,7 @@ const entryFiles = {
wiki: "/wiki.js",
fileHistory: "/file-history.js",
fileHistoryOld: "/file-history-old.js",
+ sdocFileHistory: "/pages/sdoc-file-history/index.js",
app: "/app.js",
draft: "/draft.js",
sharedDirView: "/shared-dir-view.js",
diff --git a/frontend/src/pages/sdoc-file-history/index.js b/frontend/src/pages/sdoc-file-history/index.js
new file mode 100644
index 0000000000..1454b25c22
--- /dev/null
+++ b/frontend/src/pages/sdoc-file-history/index.js
@@ -0,0 +1,261 @@
+import React, { Fragment } from 'react';
+import ReactDom from 'react-dom';
+import { Button } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, PER_PAGE, filePath, fileName, historyRepoID, canDownload, canCompare } from '../../utils/constants';
+import editUtilities from '../../utils/editor-utilities';
+import Loading from '../../components/loading';
+import Logo from '../../components/logo';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
+import HistoryItem from '../file-history-old/history-item';
+
+import '../../css/layout.css';
+import '../../css/toolbar.css';
+import '../../css/search.css';
+import '../../css/file-history-old.css';
+
+class SdocFileHistory extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ historyList: [],
+ currentPage: 1,
+ hasMore: false,
+ nextCommit: undefined,
+ filePath: '',
+ oldFilePath: '',
+ isLoading: true,
+ isReloadingData: false,
+ };
+ }
+
+ componentDidMount() {
+ this.listOldHistoryRecords(historyRepoID, filePath);
+ }
+
+ listNewHistoryRecords = (filePath, PER_PAGE) => {
+ editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
+ let historyData = res.data;
+ if (!historyData) {
+ this.setState({isLoading: false});
+ throw Error('There is an error in server.');
+ }
+ this.initNewRecords(res.data);
+ });
+ }
+
+ listOldHistoryRecords = (repoID, filePath) => {
+ seafileAPI.listOldFileHistoryRecords(repoID, filePath).then((res) => {
+ let historyData = res.data;
+ if (!historyData) {
+ this.setState({isLoading: false});
+ throw Error('There is an error in server.');
+ }
+ this.initOldRecords(res.data);
+ });
+ }
+
+ initNewRecords(result) {
+ if (result.total_count < 5) {
+ if (result.data.length) {
+ let commitID = result.data[result.data.length-1].commit_id;
+ let path = result.data[result.data.length-1].path;
+ let oldPath = result.data[result.data.length-1].old_path;
+ path = oldPath ? oldPath : path;
+ seafileAPI.listOldFileHistoryRecords(historyRepoID, path, commitID).then((res) => {
+ if (!res.data) {
+ this.setState({isLoading: false});
+ throw Error('There is an error in server.');
+ }
+ this.setState({
+ historyList: result.data.concat(res.data.data.slice(1, res.data.data.length)),
+ isLoading: false,
+ });
+ });
+ } else {
+ seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath).then((res) => {
+ if (!res.data) {
+ this.setState({isLoading: false});
+ throw Error('There is an error in server.');
+ }
+ this.setState({
+ historyList: res.data.data,
+ isLoading: false,
+ });
+ });
+ }
+ } else {
+ this.setState({
+ historyList: result.data,
+ currentPage: result.page,
+ hasMore: result.total_count > (PER_PAGE * this.state.currentPage),
+ isLoading: false,
+ });
+ }
+ }
+
+ initOldRecords(result) {
+ if (result.data.length) {
+ this.setState({
+ historyList: result.data,
+ nextCommit: result.next_start_commit,
+ filePath: result.data[result.data.length-1].path,
+ oldFilePath: result.data[result.data.length-1].rev_renamed_old_path,
+ isLoading: false,
+ });
+ } else {
+ this.setState({nextCommit: result.next_start_commit,});
+ if (this.state.nextCommit) {
+ seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, this.state.nextCommit).then((res) => {
+ this.initOldRecords(res.data);
+ });
+ } else {
+ this.setState({isLoading: false});
+ }
+ }
+ }
+
+ onScrollHandler = (event) => {
+ const clientHeight = event.target.clientHeight;
+ const scrollHeight = event.target.scrollHeight;
+ const scrollTop = event.target.scrollTop;
+ const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
+ let hasMore = this.state.hasMore;
+ if (isBottom && hasMore) {
+ this.reloadMore();
+ }
+ }
+
+ reloadMore = () => {
+ if (!this.state.isReloadingData) {
+ const commitID = this.state.nextCommit;
+ const filePath = this.state.filePath;
+ const oldFilePath = this.state.oldFilePath;
+ this.setState({ isReloadingData: true });
+ if (oldFilePath) {
+ seafileAPI.listOldFileHistoryRecords(historyRepoID, oldFilePath, commitID).then((res) => {
+ this.updateOldRecords(res.data, oldFilePath);
+ });
+ } else {
+ seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, commitID).then((res) => {
+ this.updateOldRecords(res.data, filePath);
+ });
+ }
+ }
+ }
+
+ updateNewRecords(result) {
+ this.setState({
+ historyList: [...this.state.historyList, ...result.data],
+ currentPage: result.page,
+ hasMore: result.total_count > (PER_PAGE * this.state.currentPage),
+ isReloadingData: false,
+ });
+ }
+
+ updateOldRecords(result, filePath) {
+ if (result.data.length) {
+ this.setState({
+ historyList: [...this.state.historyList, ...result.data],
+ nextCommit: result.next_start_commit,
+ filePath: result.data[result.data.length-1].path,
+ oldFilePath: result.data[result.data.length-1].rev_renamed_old_path,
+ isReloadingData: false,
+ });
+ } else {
+ this.setState({nextCommit: result.next_start_commit,});
+ if (this.state.nextCommit) {
+ seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, this.state.nextCommit).then((res) => {
+ this.updateOldRecords(res.data, filePath);
+ });
+ }
+ }
+ }
+
+ onItemRestore = (item) => {
+ let commitId = item.commit_id;
+ let filePath = item.path;
+ editUtilities.revertFile(filePath, commitId).then(res => {
+ if (res.data.success) {
+ this.setState({ isLoading: true });
+ this.refreshFileList();
+ }
+ });
+ }
+
+ refreshFileList() {
+ seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath).then((res) => {
+ this.initOldRecords(res.data);
+ });
+ }
+
+ onSearchedClick = (searchedItem) => {
+ Utils.handleSearchedItemClick(searchedItem);
+ }
+
+ onBackClick = (event) => {
+ event.preventDefault();
+ window.history.back();
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+ {fileName}{' '}{gettext('History Versions')}
+
+
+
+
+
+ | {gettext('Time')} |
+ {gettext('Modifier')} |
+ {gettext('Size')} |
+ |
+
+
+ {!this.state.isLoading &&
+
+ {this.state.historyList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ }
+
+ {(this.state.isReloadingData || this.state.isLoading) && }
+ {this.state.nextCommit && !this.state.isLoading && !this.state.isReloadingData &&
+
+ }
+
+
+