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

2020-12-23 19:29:05 +03:00 · 2020-12-23 19:29:05 +03:00 · ae1a0cd8c1
commit ae1a0cd8c1
parent 4576f13c9e
7 changed files with 179 additions and 230 deletions
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js
@ -52,8 +52,8 @@ import {
  setTreeFolders,
  getFileInfo,
  addFileToRecentlyViewed,
-  setIsVersionHistoryPanel,
-  setVersionHistoryFileId,
+  setIsVerHistoryPanel,
+  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,
-      setVersionHistoryFileId,
+      setIsVerHistoryPanel,
+      setVerHistoryFileId,
      isTabletView,
    } = this.props;

@ -565,17 +565,17 @@ class SectionBodyContent extends React.Component {

    if (!isTabletView) {
      setIsLoading(true);
-      setVersionHistoryFileId(fileId);
-      setIsVersionHistoryPanel(true);
+      setVerHistoryFileId(fileId);
+      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,
-  setVersionHistoryFileId,
+  setIsVerHistoryPanel,
+  setVerHistoryFileId,
 })(withRouter(withTranslation()(SectionBodyContent)));
--- a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Body/VersionRow.js
+++ b/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 { setIsLoading } from "../../../../../store/files/actions";
+import { toastr, store } from "asc-web-common";
+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 = () =>
-    api.files
-      .versionEditComment(info.id, commentValue, info.version)
-      .then(() => setDisplayComment(commentValue))
+  const onSaveClick = () => {
+    updateCommentVersion(info.id, commentValue, info.version)
      .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);
-    api.files
-      .versionRestore(info.id, info.version)
-      .then(() => getFileVersions(info.id))
-      .catch((err) => toastr.error(err))
-      .finally(() => setIsLoading(false));
+    restoreVersion(info.id, info.version).catch((err) => toastr.error(err));
  };

  const onVersionClick = () => {
-    setIsLoading(true);
-    api.files
-      .markAsVersion(info.id, isVersion, info.version)
-      .then(() => getFileVersions(info.id))
-      .catch((err) => toastr.error(err))
-      .finally(() => setIsLoading(false));
+    markAsVersion(info.id, isVersion, info.version).catch((err) =>
+      toastr.error(err)
+    );
  };

  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, {
-  setIsLoading,
-})(withRouter(withTranslation()(VersionRow)));
+const mapDispatchToProps = (dispatch) => {
+  return {
+    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)));
--- a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Body/index.js
+++ b/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) => {
-  const { versions, culture, getFileVersions } = props;
-  console.log("VersionHistory SectionBodyContent render()", versions);
+import {
+  fetchFileVersions,
+  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 (
-    <RowContainer useReactWindow={false}>
-      {versions.map((info, index) => {
-        let isVersion = true;
-        if (itemVersion === info.versionGroup) {
-          isVersion = false;
-        } else {
-          itemVersion = info.versionGroup;
-        }
+    if (fileId) {
+      this.getFileVersions(fileId);
+      setFirstLoad(false);
+    }
+  }

-        return (
-          <VersionRow
-            getFileVersions={getFileVersions}
-            isVersion={isVersion}
-            key={info.id}
-            info={info}
-            index={index}
-            culture={culture}
-          />
-        );
-      })}
-    </RowContainer>
-  );
+  getFileVersions = (fileId) => {
+    const { fetchFileVersions, setIsLoading } = this.props;
+    setIsLoading(true);
+    fetchFileVersions(fileId).then(() => setIsLoading(false));
+  };
+  render() {
+    const { versions, culture, isLoading } = this.props;
+    console.log("VersionHistory SectionBodyContent render()", versions);
+
+    let itemVersion = null;
+
+    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));
--- a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js
+++ b/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 { withRouter } from "react-router";
+import styled from "styled-components";
 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 onClickBack = () => {
-    const { filter, setFilesFilter } = props;
-    setFilesFilter(filter);
-  };
+  const { title, onClickBack } = props;

  return (
    <StyledContainer>
@ -98,19 +87,4 @@ const SectionHeaderContent = (props) => {
  );
 };

-const mapStateToProps = (state) => {
-  return {
-    filter: getFilter(state),
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    setFilesFilter: (filter) => dispatch(setFilesFilter(filter)),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withTranslation()(withRouter(SectionHeaderContent)));
+export default SectionHeaderContent;
--- a/products/ASC.Files/Client/src/components/pages/VersionHistory/index.js
+++ b/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,
-  setIsVersionHistoryPanel,
-  setVersionHistoryFileId,
+  setIsVerHistoryPanel,
  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 { fileId } = match.params;
+    const { isTabletView } = this.props;

-    //setDocumentTitle(t("GroupAction"));
-    if (fileId) {
-      if (!isTabletView) {
-        this.redirectToPanelView();
-      } else {
-        this.getFileVersions(fileId);
-      }
+    if (!isTabletView) {
+      this.redirectToPanelView();
    }
  }

@ -63,16 +51,8 @@ class PureVersionHistory extends React.Component {
  }

  redirectToPanelView = () => {
-    const {
-      setIsVersionHistoryPanel,
-      setVersionHistoryFileId,
-      match,
-    } = this.props;
-
-    const { fileId } = match.params;
-
-    setIsVersionHistoryPanel(true);
-    setVersionHistoryFileId(fileId);
+    const { setIsVerHistoryPanel } = this.props;
+    setIsVerHistoryPanel(true);
    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 } = this.props;
+    const { isLoading, versions } = 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
-            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" />
+          <SectionBodyContent />
        </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)),
-    setIsVersionHistoryPanel: (isVisible) =>
-      dispatch(setIsVersionHistoryPanel(isVisible)),
-    setVersionHistoryFileId: (fileId) =>
-      dispatch(setVersionHistoryFileId(fileId)),
+    setIsVerHistoryPanel: (isVisible) =>
+      dispatch(setIsVerHistoryPanel(isVisible)),
    setFilesFilter: (filter) => dispatch(setFilesFilter(filter)),
  };
 };
--- a/products/ASC.Files/Client/src/components/panels/StyledPanels.js
+++ b/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 {
--- a/products/ASC.Files/Client/src/components/panels/VersionHistoryPanel/index.js
+++ b/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,
-  setIsVersionHistoryPanel,
-} from "../../../store/files/actions";
-import {
-  getVersionHistoryFileId,
+  getVerHistoryFileId,
  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;
-    setIsVersionHistoryPanel(false);
+    const { history, homepage, setIsVerHistoryPanel } = this.props;
+    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 } = this.props;
+    const { visible, isLoading, versions } = 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>
-              <StyledHeaderContent className="version-history-panel-header">
+          <StyledContent>
+            <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">
-                <Loaders.HistoryRows title="version-history-body-loader" />
-              </StyledBody>
-            </StyledContent>
-          )}
+              )}
+            </StyledHeaderContent>
+
+            <StyledBody className="version-history-panel-body">
+              <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)),
-    setIsVersionHistoryPanel: (isVisible) =>
-      dispatch(setIsVersionHistoryPanel(isVisible)),
+    setIsVerHistoryPanel: (isVisible) =>
+      dispatch(setIsVerHistoryPanel(isVisible)),
  };
 }