Merge pull request #681 from ONLYOFFICE/feature/info-panel-store-relocation

InfoPanelStore relocation

packages/asc-web-common/components/Section/index.js

@@ -559,22 +559,19 @@ Section.SectionFilter = SectionFilter;
 Section.SectionBody = SectionBody;
 Section.SectionPaging = SectionPaging;
 
-export default inject(({ auth, infoPanelStore }) => {
-  const { isLoaded, settingsStore } = auth;
+export default inject(({ auth }) => {
+  const { infoPanelStore, isLoaded, settingsStore } = auth;
   const {
     isHeaderVisible,
     isTabletView,
-
     isDesktopClient,
     maintenanceExist,
     snackbarExist,
     setMaintenanceExist,
-
     showText,
   } = settingsStore;
 
-  let infoPanelIsVisible = false;
-  if (infoPanelStore) infoPanelIsVisible = infoPanelStore.isVisible;
+  const { isVisible: infoPanelIsVisible } = infoPanelStore;
 
   return {
     isLoaded,
@@ -588,6 +585,6 @@ export default inject(({ auth, infoPanelStore }) => {
 
     showText,
 
-    infoPanelIsVisible: infoPanelIsVisible,
+    infoPanelIsVisible,
   };
 })(observer(Section));

packages/asc-web-common/components/Section/sub-components/info-panel-header.js

@@ -51,9 +51,11 @@ const StyledInfoPanelToggleWrapper = styled.div`
 `;
 StyledInfoPanelToggleWrapper.defaultProps = { theme: Base };
 
-const SubInfoPanelHeader = ({ children, closeInfoPanel }) => {
+const SubInfoPanelHeader = ({ children, setIsVisible }) => {
   const content = children?.props?.children;
 
+  const closeInfoPanel = () => setIsVisible(false);
+
   return (
     <StyledInfoPanelHeader>
       <Text className="header-text" fontSize="21px" fontWeight="700">
@@ -91,10 +93,7 @@ SubInfoPanelHeader.defaultProps = { theme: Base };
 
 SubInfoPanelHeader.displayName = "SubInfoPanelHeader";
 
-export default inject(({ infoPanelStore }) => {
-  let closeInfoPanel = () => {};
-  if (infoPanelStore) {
-    closeInfoPanel = () => infoPanelStore.setIsVisible(false);
-  }
-  return { closeInfoPanel };
+export default inject(({ auth }) => {
+  const { setIsVisible } = auth.infoPanelStore;
+  return { setIsVisible };
 })(observer(SubInfoPanelHeader));

packages/asc-web-common/components/Section/sub-components/info-panel.js

@@ -182,15 +182,8 @@ StyledInfoPanelWrapper.defaultProps = { theme: Base };
 StyledInfoPanel.defaultProps = { theme: Base };
 InfoPanel.defaultProps = { theme: Base };
 
-export default inject(({ infoPanelStore }) => {
-  let isVisible = false;
-  let setIsVisible = () => {};
-
-  if (infoPanelStore) {
-    isVisible = infoPanelStore.isVisible;
-    setIsVisible = infoPanelStore.setIsVisible;
-  }
-
+export default inject(({ auth }) => {
+  const { isVisible, setIsVisible } = auth.infoPanelStore;
   return {
     isVisible,
     setIsVisible,

packages/asc-web-common/store/AuthStore.js

@@ -6,6 +6,7 @@ import ModuleStore from "./ModuleStore";
 import SettingsStore from "./SettingsStore";
 import UserStore from "./UserStore";
 import TfaStore from "./TfaStore";
+import InfoPanelStore from "./InfoPanelStore";
 import { logout as logoutDesktop, desktopConstants } from "../desktop";
 import { combineUrl, isAdmin } from "../utils";
 import isEmpty from "lodash/isEmpty";
@@ -17,6 +18,7 @@ class AuthStore {
   moduleStore = null;
   settingsStore = null;
   tfaStore = null;
+  infoPanelStore = null;
 
   isLoading = false;
   version = null;
@@ -29,6 +31,7 @@ class AuthStore {
     this.moduleStore = new ModuleStore();
     this.settingsStore = new SettingsStore();
     this.tfaStore = new TfaStore();
+    this.infoPanelStore = new InfoPanelStore();
 
     makeAutoObservable(this);
   }

products/ASC.Files/Client/src/pages/FormGallery/Header.js

@@ -58,9 +58,8 @@ const SectionHeaderContent = (props) => {
   );
 };
 
-export default inject(({ infoPanelStore }) => {
-  const { toggleIsVisible, isVisible } = infoPanelStore;
-
+export default inject(({ auth }) => {
+  const { toggleIsVisible, isVisible } = auth.infoPanelStore;
   return {
     toggleInfoPanel: toggleIsVisible,
     isInfoPanelVisible: isVisible,

products/ASC.Files/Client/src/pages/FormGallery/StyledGallery.js

@@ -56,6 +56,10 @@ const StyledContainer = styled.div`
 const StyledInfoPanelToggleWrapper = styled.div`
   margin-left: auto;
 
+  @media ${tablet} {
+    display: none;
+  }
+
   .info-panel-toggle-bg {
     height: 32px;
     width: 32px;

products/ASC.Files/Client/src/pages/FormGallery/TilesView/sub-components/Tile.js

@@ -208,20 +208,18 @@ Tile.defaultProps = {
   item: {},
 };
 
-export default inject(
-  ({ filesStore, settingsStore, infoPanelStore }, { item }) => {
-    const { gallerySelected, setGallerySelected } = filesStore;
-    const { getIcon } = settingsStore;
-    const { isVisible, setIsVisible } = infoPanelStore;
+export default inject(({ filesStore, settingsStore, auth }, { item }) => {
+  const { gallerySelected, setGallerySelected } = filesStore;
+  const { getIcon } = settingsStore;
+  const { isVisible, setIsVisible } = auth.infoPanelStore;
 
-    const isSelected = item.id === gallerySelected?.id;
+  const isSelected = item.id === gallerySelected?.id;
 
-    return {
-      isSelected,
-      setGallerySelected,
-      getIcon,
-      setIsInfoPanelVisible: setIsVisible,
-      isInfoPanelVisible: isVisible,
-    };
-  }
-)(withTranslation(["FormGallery", "Common"])(withRouter(observer(Tile))));
+  return {
+    isSelected,
+    setGallerySelected,
+    getIcon,
+    setIsInfoPanelVisible: setIsVisible,
+    isInfoPanelVisible: isVisible,
+  };
+})(withTranslation(["FormGallery", "Common"])(withRouter(observer(Tile))));

products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js

@@ -97,10 +97,9 @@ const FilesRowContainer = ({
   );
 };
 
-export default inject(({ filesStore, infoPanelStore }) => {
+export default inject(({ filesStore, auth }) => {
   const { filesList, viewAs, setViewAs } = filesStore;
-
-  const { isVisible: infoPanelVisible } = infoPanelStore;
+  const { isVisible: infoPanelVisible } = auth.infoPanelStore;
   return {
     filesList,
     viewAs,

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js

@@ -163,8 +163,8 @@ const Table = ({
   );
 };
 
-export default inject(({ filesStore, infoPanelStore, auth }) => {
-  const { isVisible: infoPanelVisible } = infoPanelStore;
+export default inject(({ filesStore, auth }) => {
+  const { isVisible: infoPanelVisible } = auth.infoPanelStore;
 
   const {
     filesList,

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js

@@ -228,14 +228,8 @@ class FilesTableHeader extends React.Component {
 }
 
 export default inject(
-  ({
-    auth,
-    filesStore,
-    selectedFolderStore,
-    treeFoldersStore,
-    infoPanelStore,
-  }) => {
-    const { isVisible: infoPanelVisible } = infoPanelStore;
+  ({ auth, filesStore, selectedFolderStore, treeFoldersStore }) => {
+    const { isVisible: infoPanelVisible } = auth.infoPanelStore;
 
     const {
       isHeaderChecked,

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

@@ -351,13 +351,7 @@ const SectionFilterContent = ({
 };
 
 export default inject(
-  ({
-    auth,
-    filesStore,
-    treeFoldersStore,
-    selectedFolderStore,
-    infoPanelStore,
-  }) => {
+  ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
     const {
       fetchFiles,
       filter,
@@ -382,7 +376,7 @@ export default inject(
         authorType) &&
       !(treeFoldersStore.isPrivacyFolder && isMobile);
 
-    const { isVisible: infoPanelVisible } = infoPanelStore;
+    const { isVisible: infoPanelVisible } = auth.infoPanelStore;
 
     return {
       customNames,

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

@@ -442,7 +442,6 @@ export default inject(
     treeFoldersStore,
     filesActionsStore,
     settingsStore,
-    infoPanelStore,
   }) => {
     const {
       setSelected,
@@ -483,7 +482,7 @@ export default inject(
       backToParentFolder,
     } = filesActionsStore;
 
-    const { toggleIsVisible, isVisible } = infoPanelStore;
+    const { toggleIsVisible, isVisible } = auth.infoPanelStore;
 
     return {
       showText: auth.settingsStore.showText,

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

@@ -21,7 +21,6 @@ class ContextOptionsStore {
   uploadDataStore;
   versionHistoryStore;
   settingsStore;
-  infoPanelStore;
   filesSettingsStore;
 
   constructor(
@@ -33,8 +32,7 @@ class ContextOptionsStore {
     treeFoldersStore,
     uploadDataStore,
     versionHistoryStore,
-    settingsStore,
-    infoPanelStore
+    settingsStore
   ) {
     makeAutoObservable(this);
     this.authStore = authStore;
@@ -46,7 +44,6 @@ class ContextOptionsStore {
     this.uploadDataStore = uploadDataStore;
     this.versionHistoryStore = versionHistoryStore;
     this.settingsStore = settingsStore;
-    this.infoPanelStore = infoPanelStore;
   }
 
   onOpenFolder = (item) => {
@@ -338,7 +335,7 @@ class ContextOptionsStore {
   };
 
   onShowInfoPanel = () => {
-    const { setIsVisible } = this.infoPanelStore;
+    const { setIsVisible } = this.authStore.infoPanelStore;
     setIsVisible(true);
   };
 

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

@@ -35,7 +35,6 @@ class FilesActionStore {
   settingsStore;
   dialogsStore;
   mediaViewerDataStore;
-  infoPanelStore;
 
   constructor(
     authStore,
@@ -45,8 +44,7 @@ class FilesActionStore {
     selectedFolderStore,
     settingsStore,
     dialogsStore,
-    mediaViewerDataStore,
-    infoPanelStore
+    mediaViewerDataStore
   ) {
     makeAutoObservable(this);
     this.authStore = authStore;
@@ -56,7 +54,6 @@ class FilesActionStore {
     this.selectedFolderStore = selectedFolderStore;
     this.settingsStore = settingsStore;
     this.dialogsStore = dialogsStore;
-    this.infoPanelStore = infoPanelStore;
     this.mediaViewerDataStore = mediaViewerDataStore;
   }
 
@@ -925,8 +922,6 @@ class FilesActionStore {
       setDeleteDialogVisible,
     } = this.dialogsStore;
 
-    const { toggleIsVisible } = this.infoPanelStore;
-
     switch (option) {
       case "share":
         if (!this.isAvailableOption("share")) return null;

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

@@ -16,7 +16,6 @@ import selectFolderDialogStore from "./SelectFolderDialogStore";
 import ContextOptionsStore from "./ContextOptionsStore";
 import HotkeyStore from "./HotkeyStore";
 import store from "studio/store";
-import InfoPanelStore from "./InfoPanelStore";
 import selectFileDialogStore from "./SelectFileDialogStore";
 
 const selectedFolderStore = new SelectedFolderStore(store.auth.settingsStore);
@@ -56,8 +55,6 @@ const uploadDataStore = new UploadDataStore(
   settingsStore
 );
 
-const infoPanelStore = new InfoPanelStore();
-
 const filesActionsStore = new FilesActionsStore(
   store.auth,
   uploadDataStore,
@@ -66,8 +63,7 @@ const filesActionsStore = new FilesActionsStore(
   selectedFolderStore,
   settingsStore,
   dialogsStore,
-  mediaViewerDataStore,
-  infoPanelStore
+  mediaViewerDataStore
 );
 
 const versionHistoryStore = new VersionHistoryStore(filesStore);
@@ -80,8 +76,7 @@ const contextOptionsStore = new ContextOptionsStore(
   treeFoldersStore,
   uploadDataStore,
   versionHistoryStore,
-  settingsStore,
-  infoPanelStore
+  settingsStore
 );
 
 const hotkeyStore = new HotkeyStore(
@@ -106,7 +101,6 @@ const stores = {
   selectFolderDialogStore,
   contextOptionsStore,
   hotkeyStore,
-  infoPanelStore,
   selectFileDialogStore,
 };