Skip to content

Commit

Permalink
fixing chat window
Browse files Browse the repository at this point in the history
  • Loading branch information
@Emmyn5600
Emmyn5600 committed Mar 7, 2024
1 parent ed616b5 commit b492638
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 112 deletions.
110 changes: 57 additions & 53 deletions packages/app/src/pages/app/Room/Room.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,71 @@
import { useSupabaseClient } from "@supabase/auth-helpers-react"
import React, { useEffect, useState } from "react"
import { type Database } from "../../../../types/database.types"
import useGetRoomMessages from "../../../Hooks/rooms/useGetRoomMessages"
import useListenToMessagesChanges from "../../../Hooks/rooms/useListenToMessagesChanges"
import useLoadUnreadMessages from "../../../Hooks/rooms/useLoadUnreadMessages"
import useTypingStatus from "../../../Hooks/rooms/useTypingStatus"
import useGlobalStore, { type IDatabaseMessage } from "../../../store/useGlobalStore"
import Messages from "./Messages/Messages"
import MessagesTextInput from "./MessagesTextInput/MessagesTextInput"
import RoomHeader from "./RoomHeader/RoomHeader"
import useRoomStyles from "./useRoomStyles"
import { useSupabaseClient } from "@supabase/auth-helpers-react";
import React, { useEffect, useState } from "react";
import { type Database } from "../../../../types/database.types";
import useGetRoomMessages from "../../../Hooks/rooms/useGetRoomMessages";
import useListenToMessagesChanges from "../../../Hooks/rooms/useListenToMessagesChanges";
import useLoadUnreadMessages from "../../../Hooks/rooms/useLoadUnreadMessages";
import useTypingStatus from "../../../Hooks/rooms/useTypingStatus";
import useGlobalStore, {
type IDatabaseMessage,
} from "../../../store/useGlobalStore";
import Messages from "./Messages/Messages";
import MessagesTextInput from "./MessagesTextInput/MessagesTextInput";
import RoomHeader from "./RoomHeader/RoomHeader";
import useRoomStyles from "./useRoomStyles";

interface Props {
getRoomData: () => Promise<void>
roomId: string
getRoomData: () => Promise<void>;
roomId: string;
}

const Room = ({ roomId, getRoomData }: Props): JSX.Element => {
const supabase = useSupabaseClient<Database>()
const { classes } = useRoomStyles()
const {
currentRoom: { roomData, isRoomMember }
} = useGlobalStore()
const supabase = useSupabaseClient<Database>();
const { classes } = useRoomStyles();
const {
currentRoom: { roomData, isRoomMember },
} = useGlobalStore();

const { getRoomMessages } = useGetRoomMessages()
const { getUnreadMessages } = useLoadUnreadMessages()
const { getRoomMessages } = useGetRoomMessages();
const { getUnreadMessages } = useLoadUnreadMessages();

const roomChannel = supabase.channel(roomId)
const roomChannel = supabase.channel(roomId);

useListenToMessagesChanges({ getRoomData })
useTypingStatus({ roomChannel })
useListenToMessagesChanges({ getRoomData });
useTypingStatus({ roomChannel });

useEffect(() => {
if (!roomData?.id) return
useEffect(() => {
if (!roomData?.id) return;

const fetchData = async () => {
getRoomMessages({ roomId: roomData.id })
await getUnreadMessages()
}
const fetchData = async () => {
getRoomMessages({ roomId: roomData.id });
await getUnreadMessages();
};

fetchData()
}, [roomData])
fetchData();
}, [roomData]);

const [userMessage, setUserMessage] = useState("" as unknown)
const [userMessage, setUserMessage] = useState("" as unknown);

return (
<div>
<div className={classes.headerContainer}>
<RoomHeader />
</div>
<div className={classes.messagesContainer}>
<Messages userMessage={userMessage as IDatabaseMessage} />
</div>
{isRoomMember && (
<div className={classes.textInputContainer}>
<MessagesTextInput
roomChannel={roomChannel}
onMessageSent={(message) => { setUserMessage(message) }}
/>
</div>
)}
</div>
)
}
return (
<div className={classes.chatContainer}>
<div className={classes.headerContainer}>
<RoomHeader />
</div>
<div className={classes.messagesContainer}>
<Messages userMessage={userMessage as IDatabaseMessage} />
</div>
{isRoomMember && (
<div className={classes.textInputContainer}>
<MessagesTextInput
roomChannel={roomChannel}
onMessageSent={(message) => {
setUserMessage(message);
}}
/>
</div>
)}
</div>
);
};

export default Room
export default Room;
118 changes: 64 additions & 54 deletions packages/app/src/pages/app/Room/useRoomStyles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,68 @@
import { createStyles } from "@mantine/core"
import { isSmartphone } from "../../../helpers/functions"
import { createStyles } from "@mantine/core";
import { isSmartphone } from "../../../helpers/functions";

const useRoomStyles = createStyles((theme) => ({
headerContainer: {
position: "relative",
borderBottom: "0.0625rem solid #2A2A2A"
},
messagesContainer: {
padding: "1rem",
paddingTop: 20,
position: "relative",
width: "100%",
headerContainer: {
position: "relative",
borderBottom: "0.0625rem solid #2A2A2A",
},
messagesContainer: {
padding: "1rem",
paddingTop: 20,
position: "relative",
width: "100%",
flex: "1",
height: "calc(100% - 50px)",

"@media (min-width: 901px)": {
minHeight: "calc(100vh - 120px)",
position: "relative",
height: "calc(100vh - 200px)"
},
"@media (max-width: 900px)": {
height: isSmartphone ? "" : "calc(100vh - 160px)",
position: "relative"
}
},
textInputContainer: {
padding: "1rem",
position: "absolute",
bottom: "0",
width: "-webkit-fill-available"
},
desktopSideMenu: {
position: "fixed",
right: 0,
top: 0,
width: 400,
borderLeft: `1px solid ${
theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
}`,
backgroundColor:
theme.colorScheme === "dark"
? theme.colors.dark[8]
: theme.colors.gray[0],
height: "100%",
padding: 20,
"@media (max-width: 1200px)": {
display: "none"
}
},
join_room_container: {
position: "absolute",
zIndex: 100,
width: "100%",
left: 0,
top: 0
}
}))
"@media (min-width: 901px)": {
minHeight: "calc(100vh - 120px)",
position: "relative",
height: "calc(100vh - 200px)",
},
"@media (max-width: 900px)": {
height: isSmartphone ? "" : "calc(100vh - 160px)",
position: "relative",
},
},
textInputContainer: {
padding: "1rem",
position: "absolute",
bottom: "0",
width: "fill-available",
},
desktopSideMenu: {
position: "fixed",
right: 0,
top: 0,
width: 400,
borderLeft: `1px solid ${
theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
}`,
backgroundColor:
theme.colorScheme === "dark"
? theme.colors.dark[8]
: theme.colors.gray[0],
height: "100%",
padding: 20,
"@media (max-width: 1200px)": {
display: "none",
},
},
join_room_container: {
position: "absolute",
zIndex: 100,
width: "100%",
left: 0,
top: 0,
},
chatContainer: {
display: "flex",
// flexDirection: "row",
flexFlow: "column wrap",
justifyContent: "space-between",
width: "100%",
height: "100%",
},
}));

export default useRoomStyles
export default useRoomStyles;
11 changes: 6 additions & 5 deletions packages/app/src/pages/app/useRootStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,29 @@ import { isSmartphone } from "../../helpers/functions";
const useRootStyles = createStyles((theme) => ({
container: {
marginLeft: 400,
height: "100vh",
"@media (max-width: 900px)": {
marginLeft: 0,
},
},
content: {
height: "100vh",
height: "100%",
backgroundSize: "cover",
backgroundPosition: "center",
maxWidth: "calc(100%)",
paddingTop: 0,
"@media (max-width: 900px)": {
marginTop: 60,
// marginTop: 60,
height: isSmartphone ? "calc(100vh - 130px)" : "calc(100vh - 60px)",
},
"@media (max-width: 1200px)": {
maxWidth: "calc(100%)",
},
},
header: {
position: "fixed",
top: 0,
left: 0,
// position: "fixed",
// top: 0,
// left: 0,
width: "100vw",
padding: 15,
display: "flex",
Expand Down

0 comments on commit b492638

Please sign in to comment.