127 lines
4.3 KiB
TypeScript
127 lines
4.3 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
||
import { SecondaryButton } from '../../../components/button/SecondaryButton';
|
||
import { cn } from '../../../lib/cn';
|
||
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
||
import GroupsBlock from './GroupsBlock';
|
||
import { setMenuActivePage } from '../../../redux/slices/store';
|
||
import { fetchMyGroups } from '../../../redux/slices/groups';
|
||
import ModalCreate from './ModalCreate';
|
||
import ModalUpdate from './ModalUpdate';
|
||
|
||
export interface GroupUpdate {
|
||
id: number;
|
||
name: string;
|
||
description: string;
|
||
}
|
||
|
||
const Groups = () => {
|
||
const [modalActive, setModalActive] = useState<boolean>(false);
|
||
const [modelUpdateActive, setModalUpdateActive] = useState<boolean>(false);
|
||
const [updateGroup, setUpdateGroup] = useState<GroupUpdate>({
|
||
id: 0,
|
||
name: '',
|
||
description: '',
|
||
});
|
||
|
||
const dispatch = useAppDispatch();
|
||
|
||
// Берём группы из стора
|
||
const groups = useAppSelector((store) => store.groups.groups);
|
||
|
||
// Берём текущего пользователя
|
||
const currentUserName = useAppSelector((store) => store.auth.username);
|
||
|
||
useEffect(() => {
|
||
dispatch(setMenuActivePage('groups'));
|
||
dispatch(fetchMyGroups());
|
||
}, [dispatch]);
|
||
|
||
// Разделяем группы
|
||
const { managedGroups, currentGroups, hiddenGroups } = useMemo(() => {
|
||
if (!groups || !currentUserName) {
|
||
return { managedGroups: [], currentGroups: [], hiddenGroups: [] };
|
||
}
|
||
|
||
const managed: typeof groups = [];
|
||
const current: typeof groups = [];
|
||
const hidden: typeof groups = []; // пока пустые, без логики
|
||
|
||
groups.forEach((group) => {
|
||
const me = group.members.find(
|
||
(m) => m.username === currentUserName,
|
||
);
|
||
if (!me) return;
|
||
|
||
if (me.role === 'Administrator') {
|
||
managed.push(group);
|
||
} else {
|
||
current.push(group);
|
||
}
|
||
});
|
||
|
||
return {
|
||
managedGroups: managed,
|
||
currentGroups: current,
|
||
hiddenGroups: hidden,
|
||
};
|
||
}, [groups, currentUserName]);
|
||
|
||
return (
|
||
<div className="h-full w-[calc(100%+250px)] box-border p-[20px] pt-[20p]">
|
||
<div className="h-full box-border">
|
||
<div className="relative flex items-center mb-[20px]">
|
||
<div
|
||
className={cn(
|
||
'h-[50px] text-[40px] font-bold text-liquid-white flex items-center',
|
||
)}
|
||
>
|
||
Группы
|
||
</div>
|
||
<SecondaryButton
|
||
onClick={() => {
|
||
setModalActive(true);
|
||
}}
|
||
text="Создать группу"
|
||
className="absolute right-0"
|
||
/>
|
||
</div>
|
||
|
||
<div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
|
||
|
||
<GroupsBlock
|
||
className="mb-[20px]"
|
||
title="Управляемые"
|
||
groups={managedGroups}
|
||
setUpdateActive={setModalUpdateActive}
|
||
setUpdateGroup={setUpdateGroup}
|
||
/>
|
||
<GroupsBlock
|
||
className="mb-[20px]"
|
||
title="Текущие"
|
||
groups={currentGroups}
|
||
setUpdateActive={setModalUpdateActive}
|
||
setUpdateGroup={setUpdateGroup}
|
||
/>
|
||
<GroupsBlock
|
||
className="mb-[20px]"
|
||
title="Скрытые"
|
||
groups={hiddenGroups} // пока пусто
|
||
setUpdateActive={setModalUpdateActive}
|
||
setUpdateGroup={setUpdateGroup}
|
||
/>
|
||
</div>
|
||
|
||
<ModalCreate setActive={setModalActive} active={modalActive} />
|
||
<ModalUpdate
|
||
setActive={setModalUpdateActive}
|
||
active={modelUpdateActive}
|
||
groupId={updateGroup.id}
|
||
groupName={updateGroup.name}
|
||
groupDescription={updateGroup.description}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Groups;
|