From 844daabd2ffea47c078b89bd1b8c8e1d722dd5d0 Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Wed, 7 Aug 2024 17:43:06 +0200 Subject: [PATCH] Client: CreateGroupDialog: Fix create dialog after rewriting edit dialog --- .../CreateGroupDialog.tsx | 72 ++++++++++++++---- .../CreateEditGroupDialog/EditGroupDialog.tsx | 1 - .../sub-components/CreateGroupDialogBody.tsx | 74 ------------------- .../sub-components/MembersParam/index.tsx | 2 - .../create-components/SelectMembersPanel.tsx | 2 +- .../CreateEditGroupDialog/types/index.tsx | 4 +- packages/shared/api/groups/index.ts | 4 +- 7 files changed, 63 insertions(+), 96 deletions(-) delete mode 100644 packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/CreateGroupDialogBody.tsx diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateGroupDialog.tsx b/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateGroupDialog.tsx index 3c0d2bfdaf..7697abde48 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateGroupDialog.tsx +++ b/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) => 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 = ({ /> @@ -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)); diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/EditGroupDialog.tsx b/packages/client/src/components/dialogs/CreateEditGroupDialog/EditGroupDialog.tsx index 8e63a233ce..a79cb2d6d5 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/EditGroupDialog.tsx +++ b/packages/client/src/components/dialogs/CreateEditGroupDialog/EditGroupDialog.tsx @@ -167,7 +167,6 @@ const EditGroupDialog = ({ >; - onClose: () => void; -} - -const CreateGroupDialogBody = ({ - groupParams, - setGroupParams, - onClose, -}: CreateGroupDialogBodyProps) => { - const onChangeGroupName = (e: ChangeEvent) => - setGroupParams({ ...groupParams, groupName: e.target.value }); - - const setGroupManager = (groupManager: object) => - setGroupParams({ ...groupParams, groupManager }); - - const setGroupMembers = (groupMembers: object[]) => - setGroupParams({ ...groupParams, groupMembers }); - - return ( - <> - - - - - ); -}; - -export default CreateGroupDialogBody; diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.tsx b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.tsx index b376ec4e95..18d38fab69 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/MembersParam/index.tsx +++ b/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; diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/create-components/SelectMembersPanel.tsx b/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/create-components/SelectMembersPanel.tsx index 982cfda2e0..7c73410bcd 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/create-components/SelectMembersPanel.tsx +++ b/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; }; diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/types/index.tsx b/packages/client/src/components/dialogs/CreateEditGroupDialog/types/index.tsx index 8199e95b6c..942de2a09f 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/types/index.tsx +++ b/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; diff --git a/packages/shared/api/groups/index.ts b/packages/shared/api/groups/index.ts index 6d6d25e810..3b54cba3b1 100644 --- a/packages/shared/api/groups/index.ts +++ b/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; }; // * Read