feat: add conversation top bar ui

tohiidd · Jul 24, 2023 · 76a68b7 · 76a68b7
1 parent 9a1fc2b
commit 76a68b7
Show file tree

Hide file tree

Showing 8 changed files with 261 additions and 126 deletions.
diff --git 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 (
     <section>
-    <Box sx={{ display: "flex", flexDirection: { xs: "column-reverse", md: "row" } }}>
-      <AsideMenu>
-        {isMd && (
-          <Box className="app-bar-logo">
-            <Chat sx={{ color: "success.main", verticalAlign: "middle" }} />
+      <Box sx={{display: "flex", flexDirection: {xs: "column-reverse", md: "row"}}}>
+        <AsideMenu sx={{overflow: "hidden"}}>
+          {isMd && (
+            <Box className="app-bar-logo">
+              <Chat sx={{color: "success.main", verticalAlign: "middle"}} />
+            </Box>
+          )}
+          <AsideTabs
+            orientation={isMd ? "vertical" : "horizontal"}
+            value={selectedTab}
+            onChange={handleChange}
+            aria-label="AsideMenu tabs "
+          >
+            {menuTabs.map(({id, title, icon}) => (
+              <AsideTab
+                key={id}
+                icon={<DarkTooltip title={title}>{icon}</DarkTooltip>}
+                sx={{display: !isMd && id === 0 ? "none" : "inline-flex"}}
+              />
+            ))}
+          </AsideTabs>
+          <Box
+            sx={{flexGrow: {xs: "1", md: "unset"}, textAlign: "center", marginTop: {xs: "unset", md: "auto"}}}
+            onClick={toggleColorMode}
+          >
+            <DarkTooltip title="Dark Mode">
+              {theme.palette.mode === "light" ? (
+                <DarkModeOutlined sx={{fontSize: {xs: "1.5rem", md: "1.8rem"}}} />
+              ) : (
+                <LightMode sx={{fontSize: {xs: "1.5rem", md: "1.8rem"}}} />
+              )}
+            </DarkTooltip>
           </Box>
-        )}
-        <AsideTabs
-          orientation={isMd ? "vertical" : "horizontal"}
-          value={selectedTab}
-          onChange={handleChange}
-          aria-label="AsideMenu tabs "
-        >
-          {menuTabs.map(({ id, title, icon }) => (
-            <AsideTab
-              key={id}
-              icon={<DarkTooltip title={title}>{icon}</DarkTooltip>}
-              sx={{ display: !isMd && id === 0 ? "none" : "inline-flex" }}
-            />
+          <Avatar setSelectedTab={setSelectedTab} />
+        </AsideMenu>
+        <section>
+          {menuTabs.map(({id, panel}) => (
+            <TabPanel key={id} value={selectedTab} index={id}>
+              {panel}
+            </TabPanel>
           ))}
-        </AsideTabs>
-        <Box
-          sx={{ flexGrow: { xs: "1", md: "unset" }, textAlign: "center", marginTop: { xs: "unset", md: "auto" } }}
-          onClick={toggleColorMode}
-        >
-          <DarkTooltip title="Dark Mode">
-            {theme.palette.mode === "light" ? (
-              <DarkModeOutlined sx={{ fontSize: { xs: "1.5rem", md: "1.8rem" } }} />
-            ) : (
-              <LightMode sx={{ fontSize: { xs: "1.5rem", md: "1.8rem" } }} />
-            )}
-          </DarkTooltip>
-        </Box>
-        <Avatar setSelectedTab={setSelectedTab} />
-      </AsideMenu>
-      <section>
-        {menuTabs.map(({ id, panel }) => (
-          <TabPanel key={id} value={selectedTab} index={id}>
-            {panel}
-          </TabPanel>
-        ))}
-      </section>
-      <Box
-        component="section"
-        sx={{
-          display: { xs: "none", md: "block" },
-          width: "100%",
-          backgroundImage:
-            "url(https://res.cloudinary.com/dmgb7kvmn/image/upload/v1667645283/jusTalk/eoojdubgmbo3jcnmssqc.png)",
-          backgroundColor: "common.grey",
-        }}
-      >
-       {children}
+        </section>
+        {children}
       </Box>
-    </Box>
-  </section>)
+    </section>
+  );
 }
diff --git 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 (
-      <>
-            <GetStartedConversation />
-            {/* <Conversation /> */}
-      </>
-
-    );
-}
+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 (
+    <Box
+      component="section"
+      sx={{
+        display: "block",
+        width: "100%",
+        position: {xs: "absolute", md: "static"},
+        top: "0",
+        right: id ? "0" : "-1000px",
+        backgroundImage:
+          "url(https://res.cloudinary.com/dmgb7kvmn/image/upload/v1667645283/jusTalk/eoojdubgmbo3jcnmssqc.png)",
+        backgroundColor: "common.grey",
+        transition: "all 200ms ease-in-out",
+      }}
+    >
+      {!id && isMd ? <GetStartedConversation /> : <Conversation />}
+    </Box>
+  );
+}
diff --git 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
@@ -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 (
-    <Box sx={chatMessageStyles}>
+    <Box sx={chatMessageStyles} onClick={handleClick}>
       {image && (
-        <Box sx={{ display: "flex", alignItems: "center", img: { borderRadius: "50%" } }}>
+        <Box sx={{display: "flex", alignItems: "center", img: {borderRadius: "50%"}}}>
           <Image src={image} alt="user pic" width={40} height={40} />
         </Box>
       )}
-      {!image && <FriendAvatar sx={{ bgcolor: avatarColor }}>{avatarText}</FriendAvatar>}
+      {!image && <FriendAvatar sx={{bgcolor: avatarColor}}>{avatarText}</FriendAvatar>}
       <Box>
         <FriendName className="friend-name">{name || username}</FriendName>
         <Typography
@@ -38,8 +47,8 @@ function Chat({ chat }: ChatProps) {
           {lastMessage}
         </Typography>
       </Box>
-      <Box sx={{ display: "flex", flexDirection: "column", alignItems: "end", marginLeft: "auto" }}>
-        <Typography variant="subtitle1" component="span" color="secondary" sx={{ fontSize: ".7rem" }} className="text">
+      <Box sx={{display: "flex", flexDirection: "column", alignItems: "end", marginLeft: "auto"}}>
+        <Typography variant="subtitle1" component="span" color="secondary" sx={{fontSize: ".7rem"}} className="text">
           {lastMessageDate}
         </Typography>
         <Typography

diff --git a/src/components/Chats/types.ts b/src/components/Chats/types.ts
@@ -1,4 +1,5 @@
 export interface IChat {
+  id: string;
   name: string;
   username: string;
   image: string;

diff --git a/src/components/Conversation/Conversation.tsx b/src/components/Conversation/Conversation.tsx
@@ -1,11 +1,11 @@
-import { Box } from "@mui/material";
+import {Box} from "@mui/material";
 import ConversationContent from "./ConversationContent";
 import ConversationInputs from "./ConversationInputs";
 import ConversationTopBar from "./ConversationTopBar";
 
 function Conversation() {
   return (
-    <Box sx={{}}>
+    <Box sx={{position: "relative ", width: "100%", height: "100%"}}>
       <ConversationTopBar />
       <ConversationContent />
       <ConversationInputs />