group posts

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

@@ -0,0 +1,83 @@
+import { FC, useEffect } 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';
+
+interface PostsProps {
+    groupId: number;
+}
+
+export const Posts: FC<PostsProps> = ({ groupId }) => {
+    const dispatch = useAppDispatch();
+
+    const { pages, status } = useAppSelector(
+        (state) => state.groupfeed.fetchPosts,
+    );
+
+    // Загружаем только первую страницу
+    useEffect(() => {
+        dispatch(fetchGroupPosts({ groupId, page: 0, pageSize: 20 }));
+    }, [groupId]);
+
+    useEffect(() => {
+        dispatch(setMenuActiveGroupPage('home'));
+    }, []);
+
+    const page0 = pages[0];
+
+    return (
+        <div className="h-full overflow-y-scroll thin-dark-scrollbar">
+            <div className="h-[40px] mb-[20px]">
+                <SearchInput
+                    onChange={(v) => {}}
+                    placeholder="Поиск сообщений"
+                />
+            </div>
+
+            {status === 'loading' && <div>Загрузка...</div>}
+            {status === 'failed' && <div>Ошибка загрузки постов</div>}
+
+            {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>
+            ) : status === 'successful' ? (
+                <div>Постов пока нет</div>
+            ) : null}
+        </div>
+    );
+};