Web: Files: versionHistory: applied new actions, removed unnecessary api requests

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

@@ -52,8 +52,8 @@ import {
   setTreeFolders,
   getFileInfo,
   addFileToRecentlyViewed,
-  setIsVersionHistoryPanel,
+  setIsVerHistoryPanel,
-  setVersionHistoryFileId,
+  setVerHistoryFileId,
   setSharingPanelVisible,
 } from "../../../../../store/files/actions";
 import { TIMEOUT } from "../../../../../helpers/constants";
@@ -95,7 +95,7 @@ import {
   getPrivacyInstructionsLink,
   getIconOfDraggedFile,
   getSharePanelVisible,
-  getIsVersionHistoryPanel,
+  getIsVerHistoryPanel,
 } from "../../../../../store/files/selectors";
 import { OperationsPanel, VersionHistoryPanel } from "../../../../panels";
 const {
@@ -556,8 +556,8 @@ class SectionBodyContent extends React.Component {
       settings,
       history,
       setIsLoading,
-      setIsVersionHistoryPanel,
+      setIsVerHistoryPanel,
-      setVersionHistoryFileId,
+      setVerHistoryFileId,
       isTabletView,
     } = this.props;
 
@@ -565,17 +565,17 @@ class SectionBodyContent extends React.Component {
 
     if (!isTabletView) {
       setIsLoading(true);
-      setVersionHistoryFileId(fileId);
+      setVerHistoryFileId(fileId);
-      setIsVersionHistoryPanel(true);
+      setIsVerHistoryPanel(true);
     } else {
       history.push(`${settings.homepage}/${fileId}/history`);
     }
   };
 
   onHistoryAction = () => {
-    const { isVersionHistoryPanel, setIsVersionHistoryPanel } = this.props;
+    const { isVersionHistoryPanel, setIsVerHistoryPanel } = this.props;
 
-    setIsVersionHistoryPanel(!isVersionHistoryPanel);
+    setIsVerHistoryPanel(!isVersionHistoryPanel);
   };
 
   lockFile = (e) => {
@@ -1956,7 +1956,7 @@ const mapStateToProps = (state) => {
     tooltipValue: getTooltipLabel(state),
     iconOfDraggedFile: getIconOfDraggedFile(state)(state),
     sharingPanelVisible: getSharePanelVisible(state),
-    isVersionHistoryPanel: getIsVersionHistoryPanel(state),
+    isVersionHistoryPanel: getIsVerHistoryPanel(state),
     isTabletView: getIsTabletView(state),
   };
 };
@@ -1984,6 +1984,6 @@ export default connect(mapStateToProps, {
   addFileToRecentlyViewed,
   loopFilesOperations,
   setSharingPanelVisible,
-  setIsVersionHistoryPanel,
+  setIsVerHistoryPanel,
-  setVersionHistoryFileId,
+  setVerHistoryFileId,
 })(withRouter(withTranslation()(SectionBodyContent)));

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

@@ -11,8 +11,12 @@ import {
 import { withTranslation } from "react-i18next";
 import { withRouter } from "react-router";
 import { connect } from "react-redux";
-import { api, toastr, store } from "asc-web-common";
+import { toastr, store } from "asc-web-common";
-import { setIsLoading } from "../../../../../store/files/actions";
+import {
+  markAsVersion,
+  restoreVersion,
+  updateCommentVersion,
+} from "../../../../../store/files/actions";
 import VersionBadge from "./VersionBadge";
 import StyledVersionRow from "./StyledVersionRow";
 
@@ -23,14 +27,14 @@ const VersionRow = (props) => {
     info,
     index,
     culture,
-    setIsLoading,
     isVersion,
     t,
-    getFileVersions,
+    markAsVersion,
+    restoreVersion,
+    updateCommentVersion,
   } = props;
   const [showEditPanel, setShowEditPanel] = useState(false);
   const [commentValue, setCommentValue] = useState(info.comment);
-  const [displayComment, setDisplayComment] = useState(info.comment);
 
   const title = `${new Date(info.created).toLocaleString(culture)} ${
     info.createdBy.displayName
@@ -44,12 +48,13 @@ const VersionRow = (props) => {
 
   const onChange = (e) => setCommentValue(e.target.value);
 
-  const onSaveClick = () =>
+  const onSaveClick = () => {
-    api.files
+    updateCommentVersion(info.id, commentValue, info.version)
-      .versionEditComment(info.id, commentValue, info.version)
-      .then(() => setDisplayComment(commentValue))
       .catch((err) => toastr.error(err))
-      .finally(() => onEditComment());
+      .finally(() => {
+        onEditComment();
+      });
+  };
 
   const onCancelClick = () => {
     setCommentValue(info.comment);
@@ -58,21 +63,13 @@ const VersionRow = (props) => {
   const onOpenFile = () => window.open(info.webUrl);
 
   const onRestoreClick = () => {
-    setIsLoading(true);
+    restoreVersion(info.id, info.version).catch((err) => toastr.error(err));
-    api.files
-      .versionRestore(info.id, info.version)
-      .then(() => getFileVersions(info.id))
-      .catch((err) => toastr.error(err))
-      .finally(() => setIsLoading(false));
   };
 
   const onVersionClick = () => {
-    setIsLoading(true);
+    markAsVersion(info.id, isVersion, info.version).catch((err) =>
-    api.files
+      toastr.error(err)
-      .markAsVersion(info.id, isVersion, info.version)
+    );
-      .then(() => getFileVersions(info.id))
-      .catch((err) => toastr.error(err))
-      .finally(() => setIsLoading(false));
   };
 
   const contextOptions = [
@@ -168,9 +165,9 @@ const VersionRow = (props) => {
               </>
             )}
             <Link onClick={onEditComment} className="version_link">
-              {displayComment}
+              {info.comment}
             </Link>
-            <Text className="version_text">{displayComment}</Text>
+            <Text className="version_text">{info.comment}</Text>
           </>
 
           <Link
@@ -226,6 +223,17 @@ const mapStateToProps = (state) => {
   };
 };
 
-export default connect(mapStateToProps, {
+const mapDispatchToProps = (dispatch) => {
-  setIsLoading,
+  return {
-})(withRouter(withTranslation()(VersionRow)));
+    markAsVersion: (id, isVersion, version) =>
+      dispatch(markAsVersion(id, isVersion, version)),
+    restoreVersion: (id, version) => dispatch(restoreVersion(id, version)),
+    updateCommentVersion: (id, comment, version) =>
+      dispatch(updateCommentVersion(id, comment, version)),
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withRouter(withTranslation()(VersionRow)));

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

@@ -1,38 +1,87 @@
 import React from "react";
+import { connect } from "react-redux";
 import { withRouter } from "react-router";
-import { withTranslation } from "react-i18next";
+
 import { RowContainer } from "asc-web-components";
+import { Loaders } from "asc-web-common";
 import VersionRow from "./VersionRow";
 
-const SectionBodyContent = (props) => {
+import {
-  const { versions, culture, getFileVersions } = props;
+  fetchFileVersions,
-  console.log("VersionHistory SectionBodyContent render()", versions);
+  setIsLoading,
+  setFirstLoad,
+} from "../../../../../store/files/actions";
+import {
+  getFileVersions,
+  getIsLoading,
+} from "../../../../../store/files/selectors";
 
-  let itemVersion = null;
+class SectionBodyContent extends React.Component {
+  componentDidMount() {
+    const { match, setFirstLoad } = this.props;
+    const { fileId } = match.params;
 
-  return (
+    if (fileId) {
-    <RowContainer useReactWindow={false}>
+      this.getFileVersions(fileId);
-      {versions.map((info, index) => {
+      setFirstLoad(false);
-        let isVersion = true;
+    }
-        if (itemVersion === info.versionGroup) {
+  }
-          isVersion = false;
-        } else {
-          itemVersion = info.versionGroup;
-        }
 
-        return (
+  getFileVersions = (fileId) => {
-          <VersionRow
+    const { fetchFileVersions, setIsLoading } = this.props;
-            getFileVersions={getFileVersions}
+    setIsLoading(true);
-            isVersion={isVersion}
+    fetchFileVersions(fileId).then(() => setIsLoading(false));
-            key={info.id}
+  };
-            info={info}
+  render() {
-            index={index}
+    const { versions, culture, isLoading } = this.props;
-            culture={culture}
+    console.log("VersionHistory SectionBodyContent render()", versions);
-          />
+
-        );
+    let itemVersion = null;
-      })}
+
-    </RowContainer>
+    return versions && !isLoading ? (
-  );
+      <RowContainer useReactWindow={false}>
+        {versions.map((info, index) => {
+          let isVersion = true;
+          if (itemVersion === info.versionGroup) {
+            isVersion = false;
+          } else {
+            itemVersion = info.versionGroup;
+          }
+
+          return (
+            <VersionRow
+              getFileVersions={this.getFileVersions}
+              isVersion={isVersion}
+              key={info.id}
+              info={info}
+              index={index}
+              culture={culture}
+            />
+          );
+        })}
+      </RowContainer>
+    ) : (
+      <Loaders.HistoryRows title="version-history-body-loader" />
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    versions: getFileVersions(state),
+    isLoading: getIsLoading(state),
+  };
 };
 
-export default withRouter(withTranslation()(SectionBodyContent));
+const mapDispatchToProps = (dispatch) => {
+  return {
+    fetchFileVersions: (fileId) => dispatch(fetchFileVersions(fileId)),
+    setIsLoading: (isLoading) => dispatch(setIsLoading(isLoading)),
+    setFirstLoad: (isFirstLoad) => dispatch(setFirstLoad(isFirstLoad)),
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withRouter(SectionBodyContent));

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

@@ -1,13 +1,7 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
-import { withRouter } from "react-router";
 import { Headline } from "asc-web-common";
 import { IconButton, utils } from "asc-web-components";
-import { connect } from "react-redux";
-import { withTranslation } from "react-i18next";
-
-import { setFilesFilter } from "../../../../../store/files/actions";
-import { getFilter } from "../../../../../store/files/selectors";
 
 const { tablet, desktop } = utils.device;
 
@@ -72,12 +66,7 @@ const StyledContainer = styled.div`
 `;
 
 const SectionHeaderContent = (props) => {
-  const { title } = props;
+  const { title, onClickBack } = props;
-
-  const onClickBack = () => {
-    const { filter, setFilesFilter } = props;
-    setFilesFilter(filter);
-  };
 
   return (
     <StyledContainer>
@@ -98,19 +87,4 @@ const SectionHeaderContent = (props) => {
   );
 };
 
-const mapStateToProps = (state) => {
+export default SectionHeaderContent;
-  return {
-    filter: getFilter(state),
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    setFilesFilter: (filter) => dispatch(setFilesFilter(filter)),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withTranslation()(withRouter(SectionHeaderContent)));

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

@@ -13,12 +13,14 @@ import { SectionHeaderContent, SectionBodyContent } from "./Section";
 import { createI18N } from "../../../helpers/i18n";
 //import { setDocumentTitle } from "../../../helpers/utils";
 import {
-  setFirstLoad,
+  setIsVerHistoryPanel,
-  setIsVersionHistoryPanel,
-  setVersionHistoryFileId,
   setFilesFilter,
 } from "../../../store/files/actions";
-import { getFilter, getIsLoading } from "../../../store/files/selectors";
+import {
+  getFilter,
+  getIsLoading,
+  getFileVersions,
+} from "../../../store/files/selectors";
 
 const i18n = createI18N({
   page: "VersionHistory",
@@ -26,32 +28,18 @@ const i18n = createI18N({
 });
 
 const { changeLanguage } = utils;
-const { getSettingsHomepage, getIsTabletView } = store.auth.selectors;
+const { getIsTabletView } = store.auth.selectors;
 
 class PureVersionHistory extends React.Component {
   constructor(props) {
     super(props);
-
-    const { match } = props;
-    const { fileId } = match.params;
-
-    this.state = {
-      fileId,
-      versions: null,
-    };
   }
 
   componentDidMount() {
-    const { match, isTabletView } = this.props;
+    const { isTabletView } = this.props;
-    const { fileId } = match.params;
 
-    //setDocumentTitle(t("GroupAction"));
+    if (!isTabletView) {
-    if (fileId) {
+      this.redirectToPanelView();
-      if (!isTabletView) {
-        this.redirectToPanelView();
-      } else {
-        this.getFileVersions(fileId);
-      }
     }
   }
 
@@ -63,16 +51,8 @@ class PureVersionHistory extends React.Component {
   }
 
   redirectToPanelView = () => {
-    const {
+    const { setIsVerHistoryPanel } = this.props;
-      setIsVersionHistoryPanel,
+    setIsVerHistoryPanel(true);
-      setVersionHistoryFileId,
-      match,
-    } = this.props;
-
-    const { fileId } = match.params;
-
-    setIsVersionHistoryPanel(true);
-    setVersionHistoryFileId(fileId);
     this.redirectToHomepage();
   };
 
@@ -81,19 +61,10 @@ class PureVersionHistory extends React.Component {
     setFilesFilter(filter);
   };
 
-  getFileVersions = (fileId) => {
-    const { setFirstLoad } = this.props;
-    api.files.getFileVersionInfo(fileId).then((versions) => {
-      setFirstLoad(false);
-      this.setState({ versions });
-    });
-  };
-
   render() {
-    const { versions } = this.state;
+    const { isLoading, versions } = this.props;
-    const { isLoading } = this.props;
 
-    return !isLoading && versions ? (
+    return (
       <PageLayout
         withBodyScroll={true}
         withBodyAutoFocus={true}
@@ -112,36 +83,18 @@ class PureVersionHistory extends React.Component {
         </PageLayout.ArticleBody>
 
         <PageLayout.SectionHeader>
-          <SectionHeaderContent title={versions[0].title} />
+          {versions && !isLoading ? (
+            <SectionHeaderContent
+              title={versions[0].title}
+              onClickBack={this.redirectToHomepage}
+            />
+          ) : (
+            <Loaders.SectionHeader title="version-history-title-loader" />
+          )}
         </PageLayout.SectionHeader>
 
         <PageLayout.SectionBody>
-          <SectionBodyContent
+          <SectionBodyContent />
-            getFileVersions={this.getFileVersions}
-            versions={versions}
-          />
-        </PageLayout.SectionBody>
-      </PageLayout>
-    ) : (
-      <PageLayout>
-        <PageLayout.ArticleHeader>
-          <ArticleHeaderContent />
-        </PageLayout.ArticleHeader>
-
-        <PageLayout.ArticleMainButton>
-          <ArticleMainButtonContent />
-        </PageLayout.ArticleMainButton>
-
-        <PageLayout.ArticleBody>
-          <ArticleBodyContent />
-        </PageLayout.ArticleBody>
-
-        <PageLayout.SectionHeader borderBottom={true}>
-          <Loaders.SectionHeader title="version-history-title-loader" />
-        </PageLayout.SectionHeader>
-
-        <PageLayout.SectionBody>
-          <Loaders.HistoryRows title="version-history-body-loader" />
         </PageLayout.SectionBody>
       </PageLayout>
     );
@@ -168,19 +121,16 @@ VersionHistory.propTypes = {
 function mapStateToProps(state) {
   return {
     isLoading: getIsLoading(state),
-    homepage: getSettingsHomepage(state),
     isTabletView: getIsTabletView(state),
     filter: getFilter(state),
+    versions: getFileVersions(state),
   };
 }
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    setFirstLoad: (firstLoad) => dispatch(setFirstLoad(firstLoad)),
+    setIsVerHistoryPanel: (isVisible) =>
-    setIsVersionHistoryPanel: (isVisible) =>
+      dispatch(setIsVerHistoryPanel(isVisible)),
-      dispatch(setIsVersionHistoryPanel(isVisible)),
-    setVersionHistoryFileId: (fileId) =>
-      dispatch(setVersionHistoryFileId(fileId)),
     setFilesFilter: (filter) => dispatch(setFilesFilter(filter)),
   };
 };

products/ASC.Files/Client/src/components/panels/StyledPanels.js

@@ -87,7 +87,8 @@ const StyledVersionHistoryPanel = styled.div`
     }
   }
   .version-history-panel-body {
-    margin: ${(props) => (props.isLoading ? "16px 16px" : "0 16px")};
+    padding: ${(props) => (props.isLoading ? "16px 0" : null)};
+    margin: 0 16px;
     border-top: 1px solid #eceef1;
 
     .version-comment-wrapper {

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

@@ -3,18 +3,16 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
 import { Backdrop, Heading, Aside } from "asc-web-components";
-import { api, utils, Loaders, store } from "asc-web-common";
+import { utils, Loaders, store } from "asc-web-common";
 
 import { withTranslation, I18nextProvider } from "react-i18next";
 import { createI18N } from "../../../helpers/i18n";
 
+import { setIsVerHistoryPanel } from "../../../store/files/actions";
 import {
-  setIsLoading,
+  getVerHistoryFileId,
-  setIsVersionHistoryPanel,
-} from "../../../store/files/actions";
-import {
-  getVersionHistoryFileId,
   getIsLoading,
+  getFileVersions,
 } from "../../../store/files/selectors";
 
 import {
@@ -36,18 +34,6 @@ const { changeLanguage } = utils;
 const { getIsTabletView, getSettingsHomepage } = store.auth.selectors;
 
 class PureVersionHistoryPanel extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { versions: {} };
-  }
-
-  componentDidMount() {
-    const { fileId } = this.props;
-    if (fileId) {
-      this.getFileVersions(fileId);
-    }
-  }
-
   componentDidUpdate(preProps) {
     const { isTabletView, fileId } = this.props;
     if (isTabletView !== preProps.isTabletView && isTabletView) {
@@ -56,20 +42,12 @@ class PureVersionHistoryPanel extends React.Component {
   }
 
   redirectToPage = (fileId) => {
-    const { history, homepage, setIsVersionHistoryPanel } = this.props;
+    const { history, homepage, setIsVerHistoryPanel } = this.props;
-    setIsVersionHistoryPanel(false);
+    setIsVerHistoryPanel(false);
 
     history.replace(`${homepage}/${fileId}/history`);
   };
 
-  getFileVersions = (fileId) => {
-    const { setIsLoading } = this.props;
-
-    api.files.getFileVersionInfo(fileId).then((versions) => {
-      this.setState({ versions: versions }, () => setIsLoading(false));
-    });
-  };
-
   onClosePanelHandler = () => {
     this.props.onClose();
   };
@@ -77,15 +55,14 @@ class PureVersionHistoryPanel extends React.Component {
   render() {
     //console.log("render versionHistoryPanel");
 
-    const { versions } = this.state;
+    const { visible, isLoading, versions } = this.props;
-    const { visible, isLoading } = this.props;
     const zIndex = 310;
-
+    console.log(isLoading);
     return (
       <StyledVersionHistoryPanel
         className="version-history-modal-dialog"
         visible={visible}
-        isLoading={isLoading}
+        isLoading={true}
       >
         <Backdrop
           onClick={this.onClosePanelHandler}
@@ -94,9 +71,9 @@ class PureVersionHistoryPanel extends React.Component {
           isAside={true}
         />
         <Aside className="version-history-aside-panel">
-          {Object.keys(versions).length > 0 && !isLoading ? (
+          <StyledContent>
-            <StyledContent>
+            <StyledHeaderContent className="version-history-panel-header">
-              <StyledHeaderContent className="version-history-panel-header">
+              {versions && !isLoading ? (
                 <Heading
                   className="version-history-panel-heading"
                   size="medium"
@@ -104,30 +81,20 @@ class PureVersionHistoryPanel extends React.Component {
                 >
                   {versions[0].title}
                 </Heading>
-              </StyledHeaderContent>
+              ) : (
-
-              <StyledBody className="version-history-panel-body">
-                <SectionBodyContent
-                  getFileVersions={this.getFileVersions}
-                  versions={versions}
-                />
-              </StyledBody>
-            </StyledContent>
-          ) : (
-            <StyledContent>
-              <StyledHeaderContent className="version-history-panel-header">
                 <Loaders.ArticleHeader
                   className="loader-version-history"
                   height="28"
                   width="688"
                   title="version-history-header-loader"
                 />
-              </StyledHeaderContent>
+              )}
-              <StyledBody className="version-history-panel-body">
+            </StyledHeaderContent>
-                <Loaders.HistoryRows title="version-history-body-loader" />
+
-              </StyledBody>
+            <StyledBody className="version-history-panel-body">
-            </StyledContent>
+              <SectionBodyContent />
-          )}
+            </StyledBody>
+          </StyledContent>
         </Aside>
       </StyledVersionHistoryPanel>
     );
@@ -156,18 +123,18 @@ VersionHistoryPanelContainer.propTypes = {
 
 function mapStateToProps(state) {
   return {
-    fileId: getVersionHistoryFileId(state),
+    fileId: getVerHistoryFileId(state),
     isTabletView: getIsTabletView(state),
     homepage: getSettingsHomepage(state),
     isLoading: getIsLoading(state),
+    versions: getFileVersions(state),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    setIsLoading: (isLoading) => dispatch(setIsLoading(isLoading)),
+    setIsVerHistoryPanel: (isVisible) =>
-    setIsVersionHistoryPanel: (isVisible) =>
+      dispatch(setIsVerHistoryPanel(isVisible)),
-      dispatch(setIsVersionHistoryPanel(isVisible)),
   };
 }