Web: Client: GlobalEvents: Change user type inside event

packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js

@@ -1,27 +1,100 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
 import { ChangeUserTypeDialog } from "../dialogs";
+import toastr from "@docspace/components/toast/toastr";
 
-const ChangeUserTypeEvent = ({}) => {
+const ChangeUserTypeEvent = ({
-  const { t } = useTranslation(["Files"]);
+  setVisible,
+  visible,
+  peopleDialogData,
+  peopleFilter,
+  updateUserType,
+  getUsersList,
+}) => {
+  const { t } = useTranslation(["ChangeUserTypeDialog", "Common"]);
+
+  const [isRequestRunning, setIsRequestRunning] = useState(false);
 
   useEffect(() => {
     setVisible(true);
-  }, []);
 
-  return <ChangeUserTypeDialog t={t} />;
+    return () => {
+      setVisible(false);
+    };
+  }, [peopleDialogData]);
+
+  const onChangeUserType = async () => {
+    setIsRequestRunning(true);
+    updateUserType(toType, userIDs, peopleFilter, fromType)
+      .then(() => toastr.success(t("SuccessChangeUserType")))
+      .catch((err) => toastr.error(err))
+      .finally(() => {
+        setIsRequestRunning(false);
+        onClose();
+      });
+  };
+
+  const onClose = () => {
+    setVisible(false);
+  };
+
+  const onCloseAction = async () => {
+    if (!isRequestRunning) {
+      await getUsersList(peopleFilter);
+      onClose();
+    }
+  };
+
+  const getType = (type) => {
+    switch (type) {
+      case "admin":
+        return t("Common:DocSpaceAdmin");
+      case "manager":
+        return t("Common:RoomAdmin");
+      case "user":
+      default:
+        return t("Common:User");
+    }
+  };
+
+  const { toType, fromType, userIDs } = peopleDialogData;
+
+  const firstType =
+    fromType.length === 1 && fromType[0] ? getType(fromType[0]) : null;
+  const secondType = getType(toType);
+
+  return (
+    <ChangeUserTypeDialog
+      visible={visible}
+      firstType={firstType}
+      secondType={secondType}
+      onCloseAction={onCloseAction}
+      onChangeUserType={onChangeUserType}
+      isRequestRunning={isRequestRunning}
+    />
+  );
 };
 
-export default inject(({ dialogsStore }) => {
+export default inject(({ dialogsStore, peopleStore }) => {
   const {
     changeUserTypeDialogVisible: visible,
     setChangeUserTypeDialogVisible: setVisible,
   } = dialogsStore;
 
+  const { dialogStore, filterStore, usersStore } = peopleStore;
+
+  const { data: peopleDialogData } = dialogStore;
+  const { filter: peopleFilter } = filterStore;
+  const { updateUserType, getUsersList } = usersStore;
+
   return {
     visible,
     setVisible,
+    peopleDialogData,
+    peopleFilter,
+    updateUserType,
+    getUsersList,
   };
 })(observer(ChangeUserTypeEvent));

packages/client/src/components/dialogs/ChangeUserTypeDialog/index.js

@@ -1,67 +1,18 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
-import styled from "styled-components";
-import { withRouter } from "react-router";
 import Text from "@docspace/components/text";
 import Button from "@docspace/components/button";
 import ModalDialog from "@docspace/components/modal-dialog";
 import { withTranslation, Trans } from "react-i18next";
-import { inject, observer } from "mobx-react";
-import toastr from "@docspace/components/toast/toastr";
 
 const ChangeUserTypeDialog = ({
   t,
   visible,
-  setVisible,
+  firstType,
-  peopleDialogData,
+  secondType,
-  peopleFilter,
+  onCloseAction,
-  updateUserType,
+  onChangeUserType,
-  getUsersList,
+  isRequestRunning,
 }) => {
-  const [isRequestRunning, setIsRequestRunning] = useState(false);
-
-  console.log(peopleDialogData);
-  console.log(peopleFilter);
-
-  const onChangeUserType = async () => {
-    setIsRequestRunning(true);
-    updateUserType(toType, userIDs, peopleFilter, fromType)
-      .then(() => toastr.success(t("SuccessChangeUserType")))
-      .catch((err) => toastr.error(err))
-      .finally(() => {
-        setIsRequestRunning(false);
-        onClose();
-      });
-  };
-
-  const onClose = () => {
-    setVisible(false);
-  };
-
-  const onCloseAction = async () => {
-    if (!isRequestRunning) {
-      await getUsersList(peopleFilter);
-      onClose();
-    }
-  };
-
-  const getType = (type) => {
-    switch (type) {
-      case "admin":
-        return t("Common:DocSpaceAdmin");
-      case "manager":
-        return t("Common:RoomAdmin");
-      case "user":
-      default:
-        return t("Common:User");
-    }
-  };
-
-  const { toType, fromType, userIDs } = peopleDialogData;
-
-  const firstType =
-    fromType.length === 1 && fromType[0] ? getType(fromType[0]) : null;
-  const secondType = getType(toType);
-
   return (
     <ModalDialog
       visible={visible}
@@ -103,7 +54,7 @@ const ChangeUserTypeDialog = ({
           primary
           onClick={onChangeUserType}
           isLoading={isRequestRunning}
-          isDisabled={!userIDs.length}
+          //isDisabled={!userIDs.length}
         />
         <Button
           id="change-user-type-modal_cancel"
@@ -118,26 +69,6 @@ const ChangeUserTypeDialog = ({
   );
 };
 
-export default inject(({ dialogsStore, peopleStore }) => {
+export default withTranslation(["ChangeUserTypeDialog", "People", "Common"])(
-  const {
+  ChangeUserTypeDialog
-    changeUserTypeDialogVisible: visible,
-    setChangeUserTypeDialogVisible: setVisible,
-  } = dialogsStore;
-
-  const { data: peopleDialogData } = peopleStore.dialogStore;
-  const { filter: peopleFilter } = peopleStore.filterStore;
-  const { updateUserType, getUsersList } = peopleStore.usersStore;
-
-  return {
-    visible,
-    setVisible,
-    peopleDialogData,
-    peopleFilter,
-    updateUserType,
-    getUsersList,
-  };
-})(
-  withTranslation(["ChangeUserTypeDialog", "People", "Common"])(
-    withRouter(observer(ChangeUserTypeDialog))
-  )
 );

packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js

@@ -43,7 +43,7 @@ const User = ({
 
     changeUserType(userType, [user]);
 
-    /*
+    //TODO: add loader
 
     updateRoomMemberRole(selectionParentRoom.id, {
       invitations: [{ id: user.id, access: option.access }],
@@ -74,7 +74,7 @@ const User = ({
           ),
         },
       });
-    } */
+    }
   };
 
   return (