group posts

src/views/home/group/Group.tsx

@@ -1,24 +1,50 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import { cn } from '../../../lib/cn';
-import { useParams, Navigate } from 'react-router-dom';
+import { useParams, Navigate, Routes, Route } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import { fetchGroupById } from '../../../redux/slices/groups';
+import GroupMenu from './GroupMenu';
+import { Posts } from './posts/Posts';
+import { SearchInput } from '../../../components/input/SearchInput';
+import { Chat } from './chat/Chat';
+import { Contests } from './contests/Contests';
 
 interface GroupsBlockProps {}
 
 const Group: FC<GroupsBlockProps> = () => {
-    const { groupId } = useParams<{ groupId: string }>();
-    const groupIdNumber = Number(groupId);
-
-    if (!groupId || isNaN(groupIdNumber) || !groupIdNumber) {
+    const groupId = Number(useParams<{ groupId: string }>().groupId);
+    if (!groupId) {
         return <Navigate to="/home/groups" replace />;
     }
 
+    const dispatch = useAppDispatch();
+    const group = useAppSelector((state) => state.groups.fetchGroupById.group);
+
+    useEffect(() => {
+        dispatch(fetchGroupById(groupId));
+    }, [groupId]);
+
+    console.log(group);
+
     return (
         <div
             className={cn(
-                'border-b-[1px] border-b-liquid-lighter rounded-[10px]',
+                ' h-screen w-full text-liquid-white p-[20px] flex gap-[20px] flex-col',
             )}
         >
-            {groupIdNumber}
+            <div className="font-bold text-[40px]">{group?.name}</div>
+
+            <GroupMenu groupId={groupId} />
+
+            <Routes>
+                <Route path="home" element={<Posts groupId={groupId} />} />
+                <Route path="chat" element={<Chat />} />
+                <Route path="contests" element={<Contests />} />
+                <Route
+                    path="*"
+                    element={<Navigate to={`/group/${groupId}/home`} />}
+                />
+            </Routes>
         </div>
     );
 };