finished coding interactions of new dialog with other components

products/ASC.Files/Client/src/components/EmptyContainer/index.js

@@ -15,7 +15,12 @@ const linkStyles = {
   display: "flex",
 };
 
-const EmptyContainer = ({ isFiltered, parentId, theme }) => {
+const EmptyContainer = ({
+  isFiltered,
+  parentId,
+  theme,
+  setCreateRoomDialogVisible,
+}) => {
   linkStyles.color = theme.filesEmptyContainer.linkColor;
 
   const onCreate = (e) => {
@@ -33,13 +38,18 @@ const EmptyContainer = ({ isFiltered, parentId, theme }) => {
   };
 
   const onCreateRoom = (e) => {
+    setCreateRoomDialogVisible(true);
     console.log("create room");
   };
 
   return isFiltered ? (
     <EmptyFilterContainer linkStyles={linkStyles} />
   ) : parentId === 0 ? (
-    <RootFolderContainer onCreate={onCreate} linkStyles={linkStyles} />
+    <RootFolderContainer
+      onCreate={onCreate}
+      linkStyles={linkStyles}
+      onCreateRoom={onCreateRoom}
+    />
   ) : (
     <EmptyFolderContainer
       onCreate={onCreate}
@@ -50,7 +60,13 @@ const EmptyContainer = ({ isFiltered, parentId, theme }) => {
 };
 
 export default inject(
-  ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
+  ({
+    auth,
+    filesStore,
+    dialogsStore,
+    treeFoldersStore,
+    selectedFolderStore,
+  }) => {
     const {
       authorType,
       search,
@@ -59,6 +75,8 @@ export default inject(
     } = filesStore.filter;
     const { isPrivacyFolder } = treeFoldersStore;
 
+    const { setCreateRoomDialogVisible } = dialogsStore;
+
     const isFiltered =
       (authorType || search || !withSubfolders || filterType) &&
       !(isPrivacyFolder && isMobile);
@@ -66,6 +84,7 @@ export default inject(
     return {
       theme: auth.settingsStore.theme,
       isFiltered,
+      setCreateRoomDialogVisible,
 
       parentId: selectedFolderStore.parentId,
     };

products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js

@@ -1,12 +1,27 @@
+import React from "react";
+import { inject, observer } from "mobx-react";
 import ModalDialog from "@appserver/components/modal-dialog";
+import { withTranslation, Trans } from "react-i18next";
+
+const CreateRoomDialog = ({ visible, setCreateRoomDialogVisible }) => {
+  const onClose = () => setCreateRoomDialogVisible(false);
 
-const CreateRoomDialog = ({}) => {
   return (
-    <ModalDialog displayType="aside">
+    <ModalDialog displayType="aside" visible={visible} onClose={onClose}>
       <ModalDialog.Header>Create room</ModalDialog.Header>
       <ModalDialog.Body>Create room</ModalDialog.Body>
     </ModalDialog>
   );
 };
 
-export default CreateRoomDialog;
+export default inject(({ dialogsStore }) => {
+  const {
+    createRoomDialogVisible: visible,
+    setCreateRoomDialogVisible,
+  } = dialogsStore;
+
+  return {
+    visible,
+    setCreateRoomDialogVisible,
+  };
+})(withTranslation(["CreateRoomDialog", "Common"])(observer(CreateRoomDialog)));

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

@@ -70,6 +70,8 @@ class SectionHeaderContent extends React.Component {
 
   onCreateRoom = () => {
     console.log("create room");
+    const { setCreateRoomDialogVisible } = this.props;
+    setCreateRoomDialogVisible(true);
   };
 
   createDocument = () => this.onCreate("docx");
@@ -546,6 +548,7 @@ export default inject(
       setEmptyTrashDialogVisible,
       setSelectFileDialogVisible,
       setIsFolderActions,
+      setCreateRoomDialogVisible,
     } = dialogsStore;
 
     const {
@@ -613,6 +616,7 @@ export default inject(
       backToParentFolder,
       getCheckboxItemLabel,
       setSelectFileDialogVisible,
+      setCreateRoomDialogVisible,
 
       isRecycleBinFolder,
       setEmptyTrashDialogVisible,

products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/EmptyContainer.js

@@ -45,11 +45,12 @@ const linkStyles = {
   display: "flex",
 };
 
-const EmptyContainer = ({ theme }) => {
+const EmptyContainer = ({ theme, setCreateRoomDialogVisible }) => {
   linkStyles.color = theme.filesEmptyContainer.linkColor;
 
   const onCreateRoom = () => {
     console.log("Create room");
+    setCreateRoomDialogVisible(true);
   };
 
   const buttons = (
@@ -79,9 +80,11 @@ const EmptyContainer = ({ theme }) => {
   );
 };
 
-export default inject(({ auth }) => {
+export default inject(({ auth, dialogsStore }) => {
   const { theme } = auth.settingsStore;
+  const { setCreateRoomDialogVisible } = dialogsStore;
   return {
     theme,
+    setCreateRoomDialogVisible,
   };
 })(withTranslation(["Home", "Common"])(observer(EmptyContainer)));

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

@@ -197,7 +197,7 @@ class DialogsStore {
     this.convertDialogVisible = visible;
   };
 
-  setConvertDialogVisible = (visible) => {
+  setCreateRoomDialogVisible = (visible) => {
     this.createRoomDialogVisible = visible;
   };