group posts

src/views/home/group/posts/Posts.tsx

@@ -1,9 +1,11 @@
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 import { useAppSelector, useAppDispatch } from '../../../../redux/hooks';
 import { fetchGroupPosts } from '../../../../redux/slices/groupfeed';
 import { SearchInput } from '../../../../components/input/SearchInput';
 import { setMenuActiveGroupPage } from '../../../../redux/slices/store';
+import { fetchGroupById } from '../../../../redux/slices/groups';
+import { SecondaryButton } from '../../../../components/button/SecondaryButton';
 
 interface PostsProps {
     groupId: number;
@@ -12,28 +14,59 @@ interface PostsProps {
 export const Posts: FC<PostsProps> = ({ groupId }) => {
     const dispatch = useAppDispatch();
 
+    const [isAdmin, setIsAdmin] = useState<boolean>(false);
     const { pages, status } = useAppSelector(
         (state) => state.groupfeed.fetchPosts,
     );
+    const { id: userId } = useAppSelector((state) => state.auth);
+
+    const { group, status: statusGroup } = 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 overflow-y-scroll thin-dark-scrollbar">
-            <div className="h-[40px] mb-[20px]">
+            <div className="h-[40px] mb-[20px] relative">
                 <SearchInput
+                    className="w-[216px]"
                     onChange={(v) => {}}
                     placeholder="Поиск сообщений"
                 />
+                {isAdmin && (
+                    <div className=" h-[40px] w-[200px] absolute top-0 right-0 flex items-center">
+                        <SecondaryButton
+                            onClick={() => {
+                                // setModalActive(true);
+                            }}
+                            text="Добавить задачу"
+                        />
+                    </div>
+                )}
             </div>
 
             {status === 'loading' && <div>Загрузка...</div>}