Web: Management: connected dialogs, corrected the functionality

packages/management/src/categories/spaces/index.tsx

@@ -5,13 +5,21 @@ import { SpaceContainer } from "./StyledSpaces";
 import ConfigurationSection from "./sub-components/ConfigurationSection";
 import { observer } from "mobx-react";
 import { useStore } from "SRC_DIR/store";
+import ChangeDomainDialog from "./sub-components/dialogs/ChangeDomainDialog";
+import CreatePortalDialog from "./sub-components/dialogs/CreatePortalDialog";
 
 const Spaces = () => {
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
 
   const { spacesStore, authStore } = useStore();
 
-  const { initStore, isConnected, portals } = spacesStore;
+  const {
+    initStore,
+    isConnected,
+    portals,
+    domainDialogVisible,
+    createPortalDialogVisible,
+  } = spacesStore;
 
   React.useEffect(() => {
     const fetchData = async () => {
@@ -26,6 +34,10 @@ const Spaces = () => {
 
   return (
     <SpaceContainer>
+      {domainDialogVisible && <ChangeDomainDialog key="change-domain-dialog" />}
+      {createPortalDialogVisible && (
+        <CreatePortalDialog key="create-portal-dialog" />
+      )}
       <div className="spaces-header">
         <Text>
           Use this section to create several spaces and make them accessible for

packages/management/src/categories/spaces/sub-components/MultipleSpaces.tsx

@@ -8,17 +8,15 @@ import { StyledMultipleSpaces } from "../StyledSpaces";
 import { useStore } from "SRC_DIR/store";
 
 const MultipleSpaces = () => {
-  // const {
-  //   setCreateDocspaceDialogVisible,
-  //   setChangeDomainDialogVisible,
-  //   deletePortal,
-  //   portals,
-  //   domain,
-  // } = props;
-
   const { spacesStore } = useStore();
 
-  const { portals, deletePortal, domain } = spacesStore;
+  const {
+    portals,
+    deletePortal,
+    domain,
+    setChangeDomainDialogVisible,
+    setCreatePortalDialogVisible,
+  } = spacesStore;
 
   return (
     <StyledMultipleSpaces>
@@ -28,7 +26,7 @@ const MultipleSpaces = () => {
           label="New space"
           className="spaces-button"
           primary={true}
-          //   onClick={() => setCreateDocspaceDialogVisible(true)}
+          onClick={() => setCreatePortalDialogVisible(true)}
         />
         <SpacesRowContainer deletePortal={deletePortal} portals={portals} />
         <div className="domain-settings-wrapper">
@@ -57,7 +55,7 @@ const MultipleSpaces = () => {
             size="normal"
             label="Edit"
             primary={true}
-            //    onClick={() => setChangeDomainDialogVisible(true)}
+            onClick={() => setChangeDomainDialogVisible(true)}
           />
         </div>
       </div>
@@ -65,27 +63,4 @@ const MultipleSpaces = () => {
   );
 };
 
-// export default inject(({ dialogsStore, auth }) => {
-//   const {
-//     setCreateDocspaceDialogVisible,
-//     setChangeDomainDialogVisible,
-//   } = dialogsStore;
-
-//   const {
-//     getSpaces,
-//     portals,
-//     domain,
-//     deletePortal,
-//   } = auth.spaceManagementStore;
-
-//   return {
-//     setChangeDomainDialogVisible,
-//     setCreateDocspaceDialogVisible,
-//     deletePortal,
-//     getSpaces,
-//     portals,
-//     domain,
-//   };
-// })(observer(MultipleSpaces));
-
 export default observer(MultipleSpaces);

packages/management/src/store/SpacesStore.ts

@@ -8,12 +8,22 @@ import {
   getAllPortals,
 } from "@docspace/common/api/management";
 
+type NewPortalData = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  portalName: string;
+};
+
 class SpacesStore {
   isInit = false;
 
-  portals = [];
+  portals = []; // need interface
   domain: string | null = null;
 
+  createPortalDialogVisible = false;
+  domainDialogVisible = false;
+
   constructor() {
     makeAutoObservable(this);
   }
@@ -59,12 +69,8 @@ class SpacesStore {
     //   console.log(name);
   };
 
-  createNewPortal = async (portalName: string) => {
-    //  const { firstName, lastName, email } = authStore.userStore.user;
-    //   console.log(firstName, lastName, email);
-    //    const data = { firstName, lastName, email, portalName };
-    //  const register = await createNewPortal(data);
-    // console.log(register);
+  createNewPortal = async (data: NewPortalData) => {
+    const register = await createNewPortal(data);
   };
 
   getAllPortals = async () => {
@@ -72,6 +78,14 @@ class SpacesStore {
     this.portals = res.tenants;
     return res;
   };
+
+  setCreatePortalDialogVisible = (createPortalDialogVisible: boolean) => {
+    this.createPortalDialogVisible = createPortalDialogVisible;
+  };
+
+  setChangeDomainDialogVisible = (domainDialogVisible: boolean) => {
+    this.domainDialogVisible = domainDialogVisible;
+  };
 }
 
 export default SpacesStore;