diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx index 206692c..d088e66 100644 --- a/src/app/(home)/layout.tsx +++ b/src/app/(home)/layout.tsx @@ -1,85 +1,74 @@ -'use client'; +"use client"; -import { useState, SyntheticEvent, useContext,ReactNode } from "react"; -import { useMediaQuery, Box } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; -import { Chat, DarkModeOutlined, LightMode } from "@mui/icons-material"; +import {useState, SyntheticEvent, useContext, ReactNode} from "react"; +import {useMediaQuery, Box} from "@mui/material"; +import {useTheme} from "@mui/material/styles"; +import {Chat, DarkModeOutlined, LightMode} from "@mui/icons-material"; import TabPanel from "components/Ui/TabPanel"; -import { AsideMenu, AsideTab, AsideTabs, DarkTooltip } from "components/Ui/AsideMenu"; -import { menuTabs } from "data"; +import {AsideMenu, AsideTab, AsideTabs, DarkTooltip} from "components/Ui/AsideMenu"; +import {menuTabs} from "data"; import ColorModeContext from "context/ColorModeContext"; import Avatar from "components/Avatar/Avatar"; - interface Props { children: ReactNode; } export default function HomeLayout({children}: Props) { - const [selectedTab, setSelectedTab] = useState(1); + const [selectedTab, setSelectedTab] = useState(1); + + const theme = useTheme(); + const isMd = useMediaQuery(theme.breakpoints.up("md"), {defaultMatches: true}); + const {toggleColorMode} = useContext(ColorModeContext); - const theme = useTheme(); - const isMd = useMediaQuery(theme.breakpoints.up("md"), {noSsr: true,defaultMatches:true}); - const { toggleColorMode } = useContext(ColorModeContext); - - const handleChange = (event: SyntheticEvent, newTab: number) => { - setSelectedTab(newTab); - }; - return ( + const handleChange = (event: SyntheticEvent, newTab: number) => { + setSelectedTab(newTab); + }; + return (
- - - {isMd && ( - - + + + {isMd && ( + + + + )} + + {menuTabs.map(({id, title, icon}) => ( + {icon}} + sx={{display: !isMd && id === 0 ? "none" : "inline-flex"}} + /> + ))} + + + + {theme.palette.mode === "light" ? ( + + ) : ( + + )} + - )} - - {menuTabs.map(({ id, title, icon }) => ( - {icon}} - sx={{ display: !isMd && id === 0 ? "none" : "inline-flex" }} - /> + + +
+ {menuTabs.map(({id, panel}) => ( + + {panel} + ))} - - - - {theme.palette.mode === "light" ? ( - - ) : ( - - )} - - - - -
- {menuTabs.map(({ id, panel }) => ( - - {panel} - - ))} -
- - {children} +
+ {children} - -
) + + ); } diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 666439b..3b985d3 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,17 +1,34 @@ -'use client'; +"use client"; import GetStartedConversation from "components/Conversation/GetStartedConversation"; import Conversation from "components/Conversation/Conversation"; +import {Box, useMediaQuery, useTheme} from "@mui/material"; +import {useSearchParams} from "next/navigation"; -export default function HomePage(){ - - - return ( - <> - - {/* */} - - - ); -} +export default function HomePage() { + const searchParams = useSearchParams(); + const id = searchParams.get("id"); + + const theme = useTheme(); + const isMd = useMediaQuery(theme.breakpoints.up("md"), {defaultMatches: true}); + console.log(!id && isMd); + return ( + + {!id && isMd ? : } + + ); +} diff --git a/src/app/styles.css b/src/app/styles.css index 108eac5..b9e0f54 100644 --- a/src/app/styles.css +++ b/src/app/styles.css @@ -2,8 +2,19 @@ html, body { padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, - Helvetica Neue, sans-serif; + font-family: + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Oxygen, + Ubuntu, + Cantarell, + Fira Sans, + Droid Sans, + Helvetica Neue, + sans-serif; + overflow: hidden; } a { diff --git a/src/components/Chats/Chat.tsx b/src/components/Chats/Chat.tsx index 75db2b2..d84a2e4 100644 --- a/src/components/Chats/Chat.tsx +++ b/src/components/Chats/Chat.tsx @@ -1,29 +1,38 @@ import Image from "next/image"; -import { Box, Typography } from "@mui/material"; -import { chatMessageStyles, lineClamp1Styles } from "./styles"; -import { FriendAvatar, FriendName } from "components/Ui/Friend"; -import { getUserAvatarText } from "utils/getUserAvatar"; -import { IChat } from "./types"; +import {Box, Typography} from "@mui/material"; +import {chatMessageStyles, lineClamp1Styles} from "./styles"; +import {FriendAvatar, FriendName} from "components/Ui/Friend"; +import {getUserAvatarText} from "utils/getUserAvatar"; +import {IChat} from "./types"; +import {useRouter, usePathname} from "next/navigation"; interface ChatProps { chat: IChat; } -function Chat({ chat }: ChatProps) { - const { name, image, username, newMessages, lastMessage, lastMessageDate, avatarColor } = chat; +function Chat({chat}: ChatProps) { + const {id, name, image, username, newMessages, lastMessage, lastMessageDate, avatarColor} = chat; + + const {push} = useRouter(); + const pathname = usePathname(); let avatarText: string | undefined; if (!image) { avatarText = getUserAvatarText(name || username); } + + function handleClick() { + let url = `${pathname}?id=${id}`; + push(url); + } return ( - + {image && ( - + user pic )} - {!image && {avatarText}} + {!image && {avatarText}} {name || username} - - + + {lastMessageDate} + diff --git a/src/components/Conversation/ConversationTopBar.tsx b/src/components/Conversation/ConversationTopBar.tsx index 858e2a6..4011b43 100644 --- a/src/components/Conversation/ConversationTopBar.tsx +++ b/src/components/Conversation/ConversationTopBar.tsx @@ -1,32 +1,140 @@ -import { Box, Typography } from "@mui/material"; import Image from "next/image"; +import {useState} from "react"; +import {useTheme} from "@mui/material/styles"; +import { + ArrowBackIos, + Call, + DeleteOutline, + Info, + MicOff, + MoreVert, + PersonOutline, + Search, + VideocamOutlined, +} from "@mui/icons-material"; +import {Box, IconButton, ListItemIcon, ListItemText, MenuItem, Typography} from "@mui/material"; +import VoiceCallModal from "components/Modals/VoiceCallModal"; +import VideoCallModal from "components/Modals/VideoCallModal"; +import Dropdown from "components/Ui/Dropdown"; +import useDisplayMenu from "hooks/useDisplayMenu"; +import {useRouter} from "next/navigation"; function ConversationTopBar() { + const [openVoiceCall, setOpenVoiceCall] = useState(false); + const [openVideoCall, setOpenVideoCall] = useState(false); + + const {openMenu, anchorRef, handleToggle, handleClose} = useDisplayMenu(); + + const {push} = useRouter(); + + const theme = useTheme(); + + const handleToggleModal = (type: string) => () => { + if (type === "voice") { + setOpenVoiceCall((prev) => !prev); + } else { + setOpenVideoCall((prev) => !prev); + } + }; + function handleBackClick() { + push("/"); + } return ( - - - - - - user pic - - - - Marguerite Campbell - - active + <> + + + + + + + + + user pic + + + + Marguerite Campbell + + + active + + + {/* {!image && {avatarText}} */} + + + + + + + + + + + + + + + + + - {/* {!image && {avatarText}} */} - - + {openVoiceCall && ( + + )} + {openVideoCall && ( + + )} + + + View Profile + + + + + + Voice Call + + + + + + Video Call + + + + + + Muted + + + + + + Delete + + + + + + ); } diff --git a/src/components/Conversation/GetStartedConversation.tsx b/src/components/Conversation/GetStartedConversation.tsx index 74de9a0..1de6e09 100644 --- a/src/components/Conversation/GetStartedConversation.tsx +++ b/src/components/Conversation/GetStartedConversation.tsx @@ -1,6 +1,6 @@ -import { Chat } from "@mui/icons-material"; -import { Box, Typography } from "@mui/material"; -import { SuccessButton } from "components/Ui/Buttons"; +import {Chat} from "@mui/icons-material"; +import {Box, Typography} from "@mui/material"; +import {SuccessButton} from "components/Ui/Buttons"; function GetStartedConversation() { return ( @@ -27,21 +27,21 @@ function GetStartedConversation() { mb: "16px", }} > - + - + Welcome to JusTalk Messenger (theme.palette.mode === "light" ? "#797c8c" : "#8f9198"), fontSize: ".9rem" }} + sx={{color: (theme) => (theme.palette.mode === "light" ? "#797c8c" : "#8f9198"), fontSize: ".9rem"}} > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. cum sociis natoque penatibus et - + Get Started