114 lines
4.2 KiB
TypeScript
114 lines
4.2 KiB
TypeScript
import { FC, useEffect, useState } from 'react';
|
||
|
||
import { useAppSelector, useAppDispatch } from '../../../../redux/hooks';
|
||
import { fetchGroupPosts } from '../../../../redux/slices/groupfeed';
|
||
import { setMenuActiveGroupPage } from '../../../../redux/slices/store';
|
||
import { fetchGroupById } from '../../../../redux/slices/groups';
|
||
import { SecondaryButton } from '../../../../components/button/SecondaryButton';
|
||
import ModalCreate from './ModalCreate';
|
||
import { PostItem } from './PostItem';
|
||
import ModalUpdate from './ModalUpdate';
|
||
|
||
interface PostsProps {
|
||
groupId: number;
|
||
}
|
||
|
||
export const Posts: FC<PostsProps> = ({ groupId }) => {
|
||
const dispatch = useAppDispatch();
|
||
|
||
const [modalCreateActive, setModalCreateActive] = useState<boolean>(false);
|
||
const [modalUpdateActive, setModalUpdateActive] = useState<boolean>(false);
|
||
const [updatePostId, setUpdatePostId] = useState<number>(0);
|
||
const [isAdmin, setIsAdmin] = useState<boolean>(false);
|
||
const { pages, status } = useAppSelector(
|
||
(state) => state.groupfeed.fetchPosts,
|
||
);
|
||
const { id: userId } = useAppSelector((state) => state.auth);
|
||
|
||
const { group } = useAppSelector((state) => state.groups.fetchGroupById);
|
||
|
||
// Загружаем только первую страницу
|
||
useEffect(() => {
|
||
dispatch(fetchGroupPosts({ groupId, page: 0, pageSize: 20 }));
|
||
dispatch(fetchGroupById(groupId));
|
||
}, [groupId]);
|
||
|
||
useEffect(() => {
|
||
dispatch(setMenuActiveGroupPage('home'));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!group) return;
|
||
|
||
const isUserAdmin =
|
||
group.members?.some(
|
||
(m) =>
|
||
Number(m.userId) === Number(userId) &&
|
||
m.role.includes('Administrator'),
|
||
) || false;
|
||
|
||
setIsAdmin(isUserAdmin);
|
||
}, [group, userId]);
|
||
|
||
const page0 = pages[0];
|
||
|
||
return (
|
||
<div className="h-full relative">
|
||
<div className="grid grid-rows-[40px,1fr,40px] h-full relative min-h-0 gap-[20px]">
|
||
<div className="h-[40px] mb-[20px] relative">
|
||
{isAdmin && (
|
||
<div className=" h-[40px] w-[180px] absolute top-0 right-0 flex items-center">
|
||
<SecondaryButton
|
||
onClick={() => {
|
||
setModalCreateActive(true);
|
||
}}
|
||
text="Создать пост"
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<>
|
||
{status === 'loading' && <div>Загрузка...</div>}
|
||
{status === 'failed' && <div>Ошибка загрузки постов</div>}
|
||
|
||
{status == 'successful' &&
|
||
page0?.items &&
|
||
page0.items.length > 0 ? (
|
||
<div className="min-h-0 overflow-y-scroll thin-dark-scrollbar">
|
||
<div className="flex flex-col gap-[20px] min-h-0 h-0 px-[16px]">
|
||
{page0.items.map((post, i) => (
|
||
<PostItem
|
||
{...post}
|
||
key={i}
|
||
isAdmin={isAdmin}
|
||
setModalUpdateActive={
|
||
setModalUpdateActive
|
||
}
|
||
setUpdatePostId={setUpdatePostId}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : status === 'successful' ? (
|
||
<div>Постов пока нет</div>
|
||
) : null}
|
||
</>
|
||
</div>
|
||
|
||
<ModalCreate
|
||
active={modalCreateActive}
|
||
setActive={setModalCreateActive}
|
||
groupId={groupId}
|
||
/>
|
||
|
||
<ModalUpdate
|
||
active={modalUpdateActive}
|
||
setActive={setModalUpdateActive}
|
||
groupId={groupId}
|
||
postId={updatePostId}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|