user role controller

2025-11-19 22:28:15 +03:00
parent a5016b23bb
commit e904297bb9
16 changed files with 531 additions and 71 deletions
--- a/src/views/home/rightpanel/group/ModalLeave.tsx
+++ b/src/views/home/rightpanel/group/ModalLeave.tsx
@@ -0,0 +1,107 @@
+import { FC, useEffect, useState } from 'react';
+import { Modal } from '../../../../components/modal/Modal';
+import { PrimaryButton } from '../../../../components/button/PrimaryButton';
+import { SecondaryButton } from '../../../../components/button/SecondaryButton';
+import { Input } from '../../../../components/input/Input';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
+import {
+    deleteGroup,
+    removeGroupMember,
+    setGroupsStatus,
+    updateGroup,
+} from '../../../../redux/slices/groups';
+import ConfirmModal from '../../../../components/modal/ConfirmModal';
+import { useNavigate } from 'react-router-dom';
+
+interface ModalLeaveProps {
+    active: boolean;
+    setActive: (value: boolean) => void;
+    groupId: number;
+    groupName?: string;
+    userId: number;
+}
+
+const ModalLeave: FC<ModalLeaveProps> = ({
+    active,
+    setActive,
+    groupName,
+    groupId,
+    userId,
+}) => {
+    const statusLeave = useAppSelector(
+        (state) => state.groups.removeGroupMember.status,
+    );
+    const dispatch = useAppDispatch();
+    const navigate = useNavigate();
+
+    const [modalConfirmActive, setModalConfirmActive] =
+        useState<boolean>(false);
+
+    useEffect(() => {
+        if (statusLeave == 'successful') {
+            dispatch(
+                setGroupsStatus({ key: 'removeGroupMember', status: 'idle' }),
+            );
+            setActive(false);
+            navigate('/home/groups');
+        }
+    }, [statusLeave]);
+
+    return (
+        <>
+            <Modal
+                className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
+                onOpenChange={setActive}
+                open={active}
+                backdrop="blur"
+            >
+                <div className="w-[500px]">
+                    <div className="font-bold text-[30px]">
+                        Вы действительно хотите покинуть группу:
+                    </div>
+                    <div className="font-bold text-[20px] mt-[20px]">
+                        "{groupName}" #{groupId}?
+                    </div>
+                    <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
+                        <PrimaryButton
+                            onClick={() => {
+                                setModalConfirmActive(true);
+                            }}
+                            text={
+                                statusLeave == 'loading'
+                                    ? 'Покинуть...'
+                                    : 'Покинуть'
+                            }
+                            disabled={statusLeave == 'loading'}
+                            color="error"
+                        />
+                        <SecondaryButton
+                            onClick={() => {
+                                setActive(false);
+                            }}
+                            text="Отмена"
+                        />
+                    </div>
+                </div>
+                <ConfirmModal
+                    active={modalConfirmActive}
+                    setActive={setModalConfirmActive}
+                    title="Подтвердите действия"
+                    message="Вы действительно хотите покинуть группу?"
+                    confirmColor="error"
+                    confirmText="Покинуть"
+                    onConfirmClick={() => {
+                        dispatch(
+                            removeGroupMember({
+                                groupId,
+                                memberId: userId,
+                            }),
+                        );
+                    }}
+                />
+            </Modal>
+        </>
+    );
+};
+
+export default ModalLeave;