Web: Files: added Router to files, fixed VersionHistoryPanel

products/ASC.Files/Client/src/Files.jsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { Provider as FilesProvider } from "mobx-react";
 import { inject, observer } from "mobx-react";
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, Router } from "react-router-dom";
 import Home from "./components/pages/Home";
 import DocEditor from "./components/pages/DocEditor";
 import Settings from "./components/pages/Settings";
 import VersionHistory from "./components/pages/VersionHistory";
 import config from "../package.json";
 import PrivateRoute from "@appserver/common/components/PrivateRoute";
+import history from "@appserver/common/history";
 import toastr from "studio/toastr";
 import { updateTempContent } from "@appserver/common/utils";
 import initFilesStore from "./store/InitFilesStore";
@@ -79,26 +80,28 @@ class FilesContent extends React.Component {
     const { homepage /*, isDesktop*/ } = this.props;
 
     return (
-      <Switch>
-        <PrivateRoute
-          exact
-          path={`${homepage}/settings/:setting`}
-          component={Settings}
-        />
-        <Route
-          exact
-          path={[`${homepage}/doceditor`, `/Products/Files/DocEditor.aspx`]}
-          component={DocEditor}
-        />
-        <PrivateRoute
-          exact
-          path={`${homepage}/:fileId/history`}
-          component={VersionHistory}
-        />
-        <PrivateRoute exact path={homepage} component={Home} />
-        <PrivateRoute path={`${homepage}/filter`} component={Home} />
-        <PrivateRoute component={Error404} />
-      </Switch>
+      <Router history={history}>
+        <Switch>
+          <PrivateRoute
+            exact
+            path={`${homepage}/settings/:setting`}
+            component={Settings}
+          />
+          <Route
+            exact
+            path={[`${homepage}/doceditor`, `/Products/Files/DocEditor.aspx`]}
+            component={DocEditor}
+          />
+          <PrivateRoute
+            exact
+            path={[`${homepage}/:fileId/history`]}
+            component={VersionHistory}
+          />
+          <PrivateRoute exact path={homepage} component={Home} />
+          <PrivateRoute path={`${homepage}/filter`} component={Home} />
+          <PrivateRoute component={Error404} />
+        </Switch>
+      </Router>
     );
   }
 }

products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/FilesRowContent.js

@@ -372,11 +372,21 @@ class FilesRowContent extends React.PureComponent {
     }
   };
 
-  onShowVersionHistory = (e) => {
-    const { homepage } = this.props;
-    const fileId = e.currentTarget.dataset.id;
+  onShowVersionHistory = () => {
+    const {
+      homepage,
+      isTabletView,
+      item,
+      setVerHistoryFileId,
+      setIsVerHistoryPanel,
+    } = this.props;
 
-    history.push(`${homepage}/${fileId}/history`);
+    if (!isTabletView) {
+      setVerHistoryFileId(item.id + "");
+      setIsVerHistoryPanel(true);
+    } else {
+      history.push(`${homepage}/${item.id}/history`);
+    }
   };
 
   onBadgeClick = () => {
@@ -771,13 +781,20 @@ export default inject(
       selectedFolderStore,
       filesActionsStore,
       mediaViewerDataStore,
+      versionHistoryStore,
     },
     { item }
   ) => {
     const { replaceFileStream, setEncryptionAccess } = auth;
-    const { homepage, culture, isDesktopClient } = auth.settingsStore;
+    const {
+      homepage,
+      culture,
+      isDesktopClient,
+      isTabletView,
+    } = auth.settingsStore;
     const { setIsLoading, isLoading } = initFilesStore;
     const { secondaryProgressDataStore } = uploadDataStore;
+    const { setIsVerHistoryPanel, setVerHistoryFileId } = versionHistoryStore;
     const {
       iconFormatsStore,
       mediaViewersFormatsStore,
@@ -826,6 +843,7 @@ export default inject(
 
     return {
       isDesktop: isDesktopClient,
+      isTabletView,
       homepage,
       viewer: auth.userStore.user,
       culture,
@@ -867,6 +885,8 @@ export default inject(
       lockFileAction: filesActionsStore.lockFileAction,
       setFavoriteAction: filesActionsStore.setFavoriteAction,
       setMediaViewerData,
+      setIsVerHistoryPanel,
+      setVerHistoryFileId,
     };
   }
 )(withRouter(withTranslation("Home")(observer(FilesRowContent))));

products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/SimpleFilesRow.js

@@ -90,7 +90,6 @@ const SimpleFilesRow = (props) => {
     setMoveToPanelVisible,
     setCopyPanelVisible,
     openDocEditor,
-    setIsLoading,
     setIsVerHistoryPanel,
     setVerHistoryFileId,
     setAction,
@@ -189,8 +188,7 @@ const SimpleFilesRow = (props) => {
 
   const showVersionHistory = () => {
     if (!isTabletView) {
-      setIsLoading(true);
-      setVerHistoryFileId(id);
+      setVerHistoryFileId(id + "");
       setIsVerHistoryPanel(true);
     } else {
       history.push(`${homepage}/${id}/history`);
@@ -548,7 +546,7 @@ export default inject(
     { item }
   ) => {
     const { homepage, isTabletView } = auth.settingsStore;
-    const { dragging, setDragging, setIsLoading } = initFilesStore;
+    const { dragging, setDragging } = initFilesStore;
     const { type, extension, id } = filesStore.fileActionStore;
     const { isRecycleBinFolder, isPrivacyFolder } = treeFoldersStore;
 
@@ -625,7 +623,6 @@ export default inject(
       setMoveToPanelVisible,
       setCopyPanelVisible,
       openDocEditor,
-      setIsLoading,
       setIsVerHistoryPanel,
       setVerHistoryFileId,
       setAction,

products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Body/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { withRouter } from "react-router";
-
 import RowContainer from "@appserver/components/row-container";
 import Loaders from "@appserver/common/components/Loaders";
 import VersionRow from "./VersionRow";
@@ -9,7 +8,7 @@ import { inject, observer } from "mobx-react";
 class SectionBodyContent extends React.Component {
   componentDidMount() {
     const { match, setFirstLoad } = this.props;
-    const { fileId } = match.params;
+    const fileId = match.params.fileId || this.props.fileId;
 
     if (fileId) {
       this.getFileVersions(fileId);
@@ -60,12 +59,13 @@ export default inject(
   ({ auth, initFilesStore, filesStore, versionHistoryStore }) => {
     const { setIsLoading, isLoading } = initFilesStore;
     const { setFirstLoad } = filesStore;
-    const { versions, fetchFileVersions } = versionHistoryStore;
+    const { versions, fetchFileVersions, fileId } = versionHistoryStore;
 
     return {
       culture: auth.settingsStore.culture,
       isLoading,
       versions,
+      fileId,
 
       setFirstLoad,
       setIsLoading,

products/ASC.Files/Client/src/components/pages/VersionHistory/index.js

@@ -90,12 +90,7 @@ export default inject(
   ({ auth, initFilesStore, filesStore, versionHistoryStore }) => {
     const { isLoading } = initFilesStore;
     const { filter, setFilesFilter } = filesStore;
-
-    const {
-      setIsVerHistoryPanel,
-      setVerHistoryFileId,
-      versions,
-    } = versionHistoryStore;
+    const { setIsVerHistoryPanel, versions } = versionHistoryStore;
 
     return {
       isTabletView: auth.settingsStore.isTabletView,
@@ -105,7 +100,6 @@ export default inject(
 
       setFilesFilter,
       setIsVerHistoryPanel,
-      setVerHistoryFileId,
     };
   }
 )(withRouter(observer(VersionHistory)));

products/ASC.Files/Client/src/components/panels/VersionHistoryPanel/index.js

@@ -95,7 +95,6 @@ export default inject(({ auth, initFilesStore, versionHistoryStore }) => {
     fileId,
     versions,
     setIsVerHistoryPanel,
-    setVerHistoryFileId,
     isVisible: visible,
   } = versionHistoryStore;
 
@@ -108,6 +107,5 @@ export default inject(({ auth, initFilesStore, versionHistoryStore }) => {
     visible,
 
     setIsVerHistoryPanel,
-    setVerHistoryFileId,
   };
 })(observer(VersionHistoryPanel));

products/ASC.Files/Client/src/store/VersionHistoryStore.js

@@ -23,6 +23,7 @@ class VersionHistoryStore {
 
   setIsVerHistoryPanel = (isVisible) => {
     this.isVisible = isVisible;
+    !isVisible && this.setVerHistoryFileId(null);
   };
 
   setVerHistoryFileId = (fileId) => {
@@ -35,7 +36,7 @@ class VersionHistoryStore {
   };
 
   fetchFileVersions = (fileId) => {
-    if (this.fileId !== fileId) {
+    if (this.fileId !== fileId || !this.versions) {
       this.setVerHistoryFileId(fileId);
       return api.files
         .getFileVersionInfo(fileId)