Client: CreateGroupDialog: Fix create dialog after rewriting edit dialog

packages/client/src/components/dialogs/CreateEditGroupDialog/CreateGroupDialog.tsx

@@ -25,17 +25,21 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { useState, ChangeEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { observer, inject } from "mobx-react";
+
 import {
   ModalDialog,
   ModalDialogType,
 } from "@docspace/shared/components/modal-dialog";
 import { Button, ButtonSize } from "@docspace/shared/components/button";
 import { toastr } from "@docspace/shared/components/toast";
-import { observer, inject } from "mobx-react";
-
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 import { createGroup } from "@docspace/shared/api/groups";
+import { TUser } from "@docspace/shared/api/people/types";
+import PeopleStore from "SRC_DIR/store/PeopleStore";
+import GroupsStore from "SRC_DIR/store/GroupsStore";
+
 import { StyledModal } from "./CreateEditGroupDialog.styled";
 import { GroupParams } from "./types";
 import GroupNameParam from "./sub-components/GroupNameParam";
@@ -69,10 +73,10 @@ const CreateGroupDialog = ({
   const onChangeGroupName = (e: ChangeEvent<HTMLInputElement>) =>
     setGroupParams({ ...groupParams, groupName: e.target.value });
 
-  const setGroupManager = (groupManager: object | null) =>
+  const setGroupManager = (groupManager: TUser | null) =>
     setGroupParams({ ...groupParams, groupManager });
 
-  const setGroupMembers = (groupMembers: object[]) =>
+  const setGroupMembers = (groupMembers: TUser[]) =>
     setGroupParams((prevState) => ({ ...prevState, groupMembers }));
 
   const [selectGroupMangerPanelIsVisible, setSelectGroupMangerPanelIsVisible] =
@@ -89,6 +93,44 @@ const CreateGroupDialog = ({
   const onShowSelectMembersPanel = () => setSelectMembersPanelIsVisible(true);
   const onHideSelectMembersPanel = () => setSelectMembersPanelIsVisible(false);
 
+  const removeManager = () => {
+    setGroupManager(null);
+    setGroupMembers(
+      groupParams.groupMembers?.filter(
+        (gm) => gm.id !== groupParams.groupManager!.id,
+      ) || [],
+    );
+  };
+
+  const addMembers = (newGroupMembers: TUser[]) => {
+    const resultGroupMembers: TUser[] = [...groupParams.groupMembers];
+    let showErrorWasSelected = false;
+
+    newGroupMembers.forEach((groupMember) => {
+      if (
+        groupParams.groupMembers.findIndex((gm) => gm.id === groupMember.id) !==
+        -1
+      ) {
+        showErrorWasSelected = true;
+        return;
+      }
+      resultGroupMembers.push(groupMember);
+    });
+
+    if (showErrorWasSelected) {
+      toastr.warning("Some users have already been added");
+    }
+
+    setGroupMembers(resultGroupMembers);
+  };
+
+  const removeMember = (member: TUser) => {
+    const newGroupMembers = groupParams.groupMembers?.filter(
+      (gm) => gm.id !== member.id,
+    );
+    setGroupMembers(newGroupMembers || []);
+  };
+
   const onCreateGroup = async () => {
     setIsLoading(true);
 
@@ -127,15 +169,13 @@ const CreateGroupDialog = ({
           />
           <HeadOfGroup
             groupManager={groupParams.groupManager}
-            setGroupManager={setGroupManager}
-            groupMembers={groupParams.groupMembers}
-            setGroupMembers={setGroupMembers}
+            removeManager={removeManager}
             onShowSelectGroupManagerPanel={onShowSelectGroupManagerPanel}
           />
           <MembersParam
             groupManager={groupParams.groupManager}
             groupMembers={groupParams.groupMembers}
-            setGroupMembers={setGroupMembers}
+            removeMember={removeMember}
             onShowSelectMembersPanel={onShowSelectMembersPanel}
           />
         </ModalDialog.Body>
@@ -183,13 +223,17 @@ const CreateGroupDialog = ({
           onParentPanelClose={onClose}
           groupManager={groupParams.groupManager}
           groupMembers={groupParams.groupMembers}
-          setGroupMembers={setGroupMembers}
+          addMembers={addMembers}
         />
       )}
     </>
   );
 };
 
-export default inject(({ peopleStore }) => ({
-  getGroups: peopleStore.groupsStore.getGroups,
-}))(observer(CreateGroupDialog));
+export default inject<{ peopleStore: PeopleStore }>(({ peopleStore }) => {
+  const { getGroups } = peopleStore.groupsStore! as GroupsStore;
+
+  return {
+    getGroups,
+  };
+})(observer(CreateGroupDialog));

packages/client/src/components/dialogs/CreateEditGroupDialog/EditGroupDialog.tsx

@@ -167,7 +167,6 @@ const EditGroupDialog = ({
               <MembersParam
                 groupManager={manager}
                 groupMembers={members}
-                setGroupMembers={addMembers}
                 removeMember={removeMember}
                 onShowSelectMembersPanel={onShowSelectMembersPanel}
                 withInfiniteLoader

packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/CreateGroupDialogBody.tsx

@@ -1,74 +0,0 @@
-// (c) Copyright Ascensio System SIA 2009-2024
-//
-// This program is a free software product.
-// You can redistribute it and/or modify it under the terms
-// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
-// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
-// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
-// any third-party rights.
-//
-// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
-// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
-// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
-//
-// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
-//
-// The  interactive user interfaces in modified source and object code versions of the Program must
-// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
-//
-// Pursuant to Section 7(b) of the License you must retain the original Product logo when
-// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
-// trademark law for use of our trademarks.
-//
-// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
-// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
-// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-
-import { GroupParams } from "../types";
-import GroupNameParam from "./GroupNameParam";
-import { Dispatch, ChangeEvent } from "react";
-import HeadOfGroup from "./HeadOfGroupParam";
-import MembersParam from "./MembersParam";
-
-interface CreateGroupDialogBodyProps {
-  groupParams: GroupParams;
-  setGroupParams: Dispatch<React.SetStateAction<GroupParams>>;
-  onClose: () => void;
-}
-
-const CreateGroupDialogBody = ({
-  groupParams,
-  setGroupParams,
-  onClose,
-}: CreateGroupDialogBodyProps) => {
-  const onChangeGroupName = (e: ChangeEvent<HTMLInputElement>) =>
-    setGroupParams({ ...groupParams, groupName: e.target.value });
-
-  const setGroupManager = (groupManager: object) =>
-    setGroupParams({ ...groupParams, groupManager });
-
-  const setGroupMembers = (groupMembers: object[]) =>
-    setGroupParams({ ...groupParams, groupMembers });
-
-  return (
-    <>
-      <GroupNameParam
-        groupName={groupParams.groupName}
-        onChangeGroupName={onChangeGroupName}
-      />
-      <HeadOfGroup
-        groupManager={groupParams.groupManager}
-        setGroupManager={setGroupManager}
-        onClose={onClose}
-      />
-      <MembersParam
-        groupManager={groupParams.groupManager}
-        groupMembers={groupParams.groupMembers}
-        setGroupMembers={setGroupMembers}
-        onClose={onClose}
-      />
-    </>
-  );
-};
-
-export default CreateGroupDialogBody;

packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.tsx

@@ -24,7 +24,6 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 import { SelectorAddButton } from "@docspace/shared/components/selector-add-button";
@@ -52,7 +51,6 @@ type InfiniteLoaderProps =
 type MembersParamProps = {
   groupManager: TUser | null;
   groupMembers: TUser[] | null;
-  setGroupMembers: (groupMembers: TUser[]) => void;
   onShowSelectMembersPanel: () => void;
   removeMember: (member: TUser) => void;
 } & InfiniteLoaderProps;

packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/create-components/SelectMembersPanel.tsx

@@ -34,7 +34,7 @@ type SelectMembersPanelProps = {
   isVisible: boolean;
   onClose: () => void;
   onParentPanelClose: () => void;
-  groupManager?: TUser;
+  groupManager: TUser | null;
   groupMembers: TUser[];
   addMembers: (members: TUser[]) => void;
 };

packages/client/src/components/dialogs/CreateEditGroupDialog/types/index.tsx

@@ -28,8 +28,8 @@ import { TUser } from "@docspace/shared/api/people/types";
 
 export type GroupParams = {
   groupName: string;
-  groupManager: object | null;
-  groupMembers: object[];
+  groupManager: TUser | null;
+  groupMembers: TUser[];
 };
 
 export type GroupMembers = TUser[] | null;

packages/shared/api/groups/index.ts

@@ -38,7 +38,7 @@ import {
 
 export const createGroup = (
   groupName: string,
-  groupManager: string,
+  groupManager: string | undefined,
   members: string[],
 ) => {
   return request({
@@ -49,7 +49,7 @@ export const createGroup = (
       groupManager,
       members,
     },
-  });
+  }) as Promise<TGroup>;
 };
 
 // * Read