group posts

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

@@ -6,6 +6,9 @@ import { SearchInput } from '../../../../components/input/SearchInput';
 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;
@@ -14,15 +17,16 @@ interface PostsProps {
 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, status: statusGroup } = useAppSelector(
-        (state) => state.groups.fetchGroupById,
-    );
+    const { group } = useAppSelector((state) => state.groups.fetchGroupById);
 
     // Загружаем только первую страницу
     useEffect(() => {
@@ -58,12 +62,12 @@ export const Posts: FC<PostsProps> = ({ groupId }) => {
                     placeholder="Поиск сообщений"
                 />
                 {isAdmin && (
-                    <div className=" h-[40px] w-[200px] absolute top-0 right-0 flex items-center">
+                    <div className=" h-[40px] w-[180px] absolute top-0 right-0 flex items-center">
                         <SecondaryButton
                             onClick={() => {
-                                // setModalActive(true);
+                                setModalCreateActive(true);
                             }}
-                            text="Добавить задачу"
+                            text="Создать пост"
                         />
                     </div>
                 )}
@@ -75,42 +79,33 @@ export const Posts: FC<PostsProps> = ({ groupId }) => {
             {status == 'successful' &&
             page0?.items &&
             page0.items.length > 0 ? (
-                <div className="space-y-4">
-                    {page0.items.map((post) => (
-                        <div
-                            key={post.id}
-                            className="border border-gray-700 rounded p-3"
-                        >
-                            <div>
-                                <b>ID:</b> {post.id}
-                            </div>
-                            <div>
-                                <b>Название:</b> {post.name}
-                            </div>
-                            <div>
-                                <b>Содержимое:</b> {post.content}
-                            </div>
-                            <div>
-                                <b>Автор:</b> {post.authorUsername}
-                            </div>
-                            <div>
-                                <b>Автор ID:</b> {post.authorId}
-                            </div>
-                            <div>
-                                <b>Group ID:</b> {post.groupId}
-                            </div>
-                            <div>
-                                <b>Создан:</b> {post.createdAt}
-                            </div>
-                            <div>
-                                <b>Обновлён:</b> {post.updatedAt}
-                            </div>
-                        </div>
+                <div className="flex flex-col gap-[20px]">
+                    {page0.items.map((post, i) => (
+                        <PostItem
+                            {...post}
+                            key={i}
+                            isAdmin={isAdmin}
+                            setModalUpdateActive={setModalUpdateActive}
+                            setUpdatePostId={setUpdatePostId}
+                        />
                     ))}
                 </div>
             ) : status === 'successful' ? (
                 <div>Постов пока нет</div>
             ) : null}
+
+            <ModalCreate
+                active={modalCreateActive}
+                setActive={setModalCreateActive}
+                groupId={groupId}
+            />
+
+            <ModalUpdate
+                active={modalUpdateActive}
+                setActive={setModalUpdateActive}
+                groupId={groupId}
+                postId={updatePostId}
+            />
         </div>
     );
 };