From b4926383850662edfc19d7a487a7d358dd5f7e84 Mon Sep 17 00:00:00 2001 From: Emmyn5600 Date: Fri, 8 Mar 2024 00:30:19 +0200 Subject: [PATCH] fixing chat window --- packages/app/src/pages/app/Room/Room.tsx | 110 ++++++++-------- .../app/src/pages/app/Room/useRoomStyles.ts | 118 ++++++++++-------- packages/app/src/pages/app/useRootStyles.ts | 11 +- 3 files changed, 127 insertions(+), 112 deletions(-) diff --git a/packages/app/src/pages/app/Room/Room.tsx b/packages/app/src/pages/app/Room/Room.tsx index 78298a9..07c3e30 100644 --- a/packages/app/src/pages/app/Room/Room.tsx +++ b/packages/app/src/pages/app/Room/Room.tsx @@ -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 - roomId: string + getRoomData: () => Promise; + roomId: string; } const Room = ({ roomId, getRoomData }: Props): JSX.Element => { - const supabase = useSupabaseClient() - const { classes } = useRoomStyles() - const { - currentRoom: { roomData, isRoomMember } - } = useGlobalStore() + const supabase = useSupabaseClient(); + 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 ( -
-
- -
-
- -
- {isRoomMember && ( -
- { setUserMessage(message) }} - /> -
- )} -
- ) -} + return ( +
+
+ +
+
+ +
+ {isRoomMember && ( +
+ { + setUserMessage(message); + }} + /> +
+ )} +
+ ); +}; -export default Room +export default Room; diff --git a/packages/app/src/pages/app/Room/useRoomStyles.ts b/packages/app/src/pages/app/Room/useRoomStyles.ts index 83a91e1..a019d42 100644 --- a/packages/app/src/pages/app/Room/useRoomStyles.ts +++ b/packages/app/src/pages/app/Room/useRoomStyles.ts @@ -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; diff --git a/packages/app/src/pages/app/useRootStyles.ts b/packages/app/src/pages/app/useRootStyles.ts index e375129..cb3efab 100644 --- a/packages/app/src/pages/app/useRootStyles.ts +++ b/packages/app/src/pages/app/useRootStyles.ts @@ -4,18 +4,19 @@ 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)": { @@ -23,9 +24,9 @@ const useRootStyles = createStyles((theme) => ({ }, }, header: { - position: "fixed", - top: 0, - left: 0, + // position: "fixed", + // top: 0, + // left: 0, width: "100vw", padding: 15, display: "flex",