50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { FC, useEffect } from 'react';
|
|
import { cn } from '../../../lib/cn';
|
|
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 { Chat } from './chat/Chat';
|
|
import { Contests } from './contests/Contests';
|
|
|
|
interface GroupsBlockProps {}
|
|
|
|
const Group: FC<GroupsBlockProps> = () => {
|
|
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]);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
' h-screen w-full text-liquid-white p-[20px] flex gap-[20px] flex-col',
|
|
)}
|
|
>
|
|
<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 groupId={groupId} />} />
|
|
<Route path="contests" element={<Contests />} />
|
|
<Route
|
|
path="*"
|
|
element={<Navigate to={`/group/${groupId}/home`} />}
|
|
/>
|
|
</Routes>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Group;
|