42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
import { ChatHeader } from "@/app/components/ChatHeader/ChatHeader";
|
|
import { DialogInput } from "@/app/components/DialogInput/DialogInput";
|
|
import { Messages } from "@/app/components/Messages/Messages";
|
|
import { DialogProvider } from "@/app/providers/DialogProvider/DialogProvider";
|
|
import { Flex } from "@mantine/core";
|
|
import { useParams } from "react-router-dom";
|
|
import { useRosettaBreakpoints } from "@/app/hooks/useRosettaBreakpoints";
|
|
import { useEffect } from "react";
|
|
import { useViewPanelsState, ViewPanelsState } from "@/app/hooks/useViewPanelsState";
|
|
import { GroupHeader } from "@/app/components/GroupHeader/GroupHeader";
|
|
import { useGroups } from "@/app/providers/DialogProvider/useGroups";
|
|
|
|
export function Chat() {
|
|
const params = useParams();
|
|
const dialog = params.id || "DELETED";
|
|
const {lg} = useRosettaBreakpoints();
|
|
const [__, setViewState] = useViewPanelsState();
|
|
const {hasGroup} = useGroups();
|
|
|
|
useEffect(() => {
|
|
if(!lg){
|
|
setViewState(ViewPanelsState.DIALOGS_PANEL_HIDE);
|
|
return;
|
|
}
|
|
if(lg){
|
|
setViewState(ViewPanelsState.DIALOGS_PANEL_SHOW);
|
|
}
|
|
}, [lg]);
|
|
|
|
return (<>
|
|
<DialogProvider dialog={dialog} key={dialog}>
|
|
<Flex direction={'column'} justify={'space-between'} h={'100%'}>
|
|
{/* Group Header */}
|
|
{hasGroup(dialog) && <GroupHeader></GroupHeader>}
|
|
{/* Dialog peer to peer Header */}
|
|
{!hasGroup(dialog) && <ChatHeader></ChatHeader>}
|
|
<Messages></Messages>
|
|
<DialogInput key={dialog}></DialogInput>
|
|
</Flex>
|
|
</DialogProvider>
|
|
</>);
|
|
} |