added date format

components/Footer.tsx

@@ -7,7 +7,7 @@ import { BsMic } from "react-icons/bs";
 function Footer() {
 
   return (
-      <footer className='w-full h-14 float-left border-x  items-center justify-between overflow-hidden'>
+      <footer className='w-full h-14 float-left border-x  items-center justify-between overflow-hidden z-10'>
 
 
        <div className= 'flex items-center justify-between bg-[#f0eeee] h-14 p-2 ' > 

components/Sidebar.tsx

@@ -17,7 +17,7 @@ const blurTxf =() =>{
 
   return (
     <Fragment>
-      <section className='w-1/3  float-left mt-10 overflow-y-scroll'>
+      <section className='w-1/3 max-h-screen float-left mt-10 overflow-hidden'>
 
        <div  className='fixed z-10 w-1/3  '>
         {/* profile section */}

components/utils/chartCard.tsx

@@ -11,6 +11,7 @@ interface details{
   name: string,
   dateAndTime: string,
   message: string,
+  clicked:()=>void
 }
  function ChartCard(props: details) {
   const [hoverOver, setHover] = useState<boolean>(false)
@@ -20,7 +21,7 @@ interface details{
   const hoverLeave =()=>{setHover(false)}
 
   return (
-    <div className='relative flex items-center h-20  m-0 border-y hover:bg-[#f0eeee]' onMouseEnter={hoverEnter} onMouseLeave={hoverLeave}>
+    <div className='relative flex items-center h-20  m-0 border-y hover:bg-[#f0eeee]'  onMouseEnter={hoverEnter} onMouseLeave={hoverLeave} onClick={props.clicked}>
       <div className ='flex-none w-16 h-20 ml-1 py-4'>
         <div className='items-center w-full justify-center '>
         <Image src={props.img} alt='profile pic' height={49} width={49} className='rounded-full'/>
@@ -34,12 +35,12 @@ interface details{
               <div className=' w-1/5 text-lg text-center'>{props.dateAndTime}</div>
             </div>
 
-            <div className='flex justify-between h-10  w-full'>
+            <div className='flex justify-between h-10  w-full cursor-pointer'>
               <div className=' w-4/5'>{props.message}</div>
               <div className='text-end w-1/5 text-lg'></div>
               { hoverOver && <VscChevronDown className='text-2xl'/>}
 
-        </div>
+           </div>
 
           </div>
       </div>

components/utils/chatWrapper.tsx

@@ -7,13 +7,13 @@ import ChartCard from './chartCard'
 const ChatWrapper:FC<PropsWithChildren> =()=> {
     const chatCtx = useContext(ChatContext);
 
-    const activeChat = chatCtx.chats.map((chat)=>(
-       <ChartCard key={chat.id} name={chat.name} message={chat.message} img={chat.img} dateAndTime ={chat.timeAndDate} id={chat.id} />
+    const CurrentChat = chatCtx.chats.map((chat)=>(
+       <ChartCard key={chat.id} name={chat.name} message={chat.message} img={chat.img} dateAndTime ={chat.timeAndDate} id={chat.id} clicked={chatCtx.addChat.bind(null, chat.id)}/>
 
     ))
   return (
-    <section className='relative top-28 w-full border-x overflow-y-auto  scroll-smooth '>
-      {activeChat}
+    <section className='relative top-40 w-full h-screen border-x overflow-y-auto  scroll-smooth '>
+      {CurrentChat}
     </section>
   )
 }

components/utils/chats.tsx

@@ -1,12 +1,38 @@
+import { FC, PropsWithChildren, useContext } from "react"
+import { ChatContext } from "../../store/chat-context"
 
-function Chats() {
+// type activeChat = {
+//   id: number,
+//   name: string,
+//   img: string,
+//   message: string,
+//   timeAndDate: string,
+// }
+
+//  const  Chats:FC<PropsWithChildren> = (props: activeChat)=>{
+ const  Chats:FC<PropsWithChildren> = (props)=>{
+  const ctx = useContext(ChatContext)
+  const activeChat = ctx.activeChat
 
   return (
-      <section className='w-full h-[85%] float-left border-x  items-center justify-between  overflow-y-auto'>
+      <section className=' bg-[#e1d6c7] h-[100%] float-left border-x  items-center   overflow-y-auto'>
+        <>
+        <div className="fixed w-32 h-10 text-center
+        rounded-md p-2 bg-[#eaeaea] text-lg left-[50%]  mt-3 mx-[10%] text-black">{activeChat.timeAndDate}</div>
 
-      <h1 className='text-center text-black text-xl mt-2'>Chats Body To be Displayed here</h1>
+        <div id="messageIn" className=" w-[95%] min-h-fit h-28 mx-5 mt-14 p-2 bg-red-500">
+          <div className="w-[60%] h-24  bg-white rounded-md p-1">
+            {/* <span id="tain-in" className="w-10 h-10 bg-stone-900 rounded-r-xl">Hello</span> */}
+            <span>{activeChat.message}</span>
+          </div>
+        </div>
+        <div id="messageIn" className=" w-[95%] min-h-fit h-28 m-5 p-2 bg-red-500">
+          <div className="w-[60%] h-24 float-right bg-white">
+          <span></span>
+          </div>
 
-
+        </div>
+        </>
       </section>
   )
 }

components/utils/mainChatWrapper.tsx

@@ -1,10 +1,13 @@
-import React, { FC, PropsWithChildren } from 'react'
+import React, { FC, PropsWithChildren,useContext } from 'react'
+import { ChatContext } from '../../store/chat-context';
 import ChartCard from './chartCard'
 
 const MainChatWrapper:FC<PropsWithChildren> =(props)=> {
+  const ctx = useContext(ChatContext)
+  const activeChat = ctx.activeChat
   return (
       <div className='flex flex-col w-2/3 h-screen justify-between  float-right'>
-         {props.children}
+         { activeChat.id && props.children}
       </div>
 
   )

package.json

@@ -6,6 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "date-fns": "^2.29.3",
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pages/index.tsx

@@ -6,7 +6,7 @@ import App from './App'
 
 const Home: NextPage = () => {
   return (
-    <div className="min-w-full max-h-screen">
+    <div className="min-w-full max-h-screen ">
       <Head>
         <title>whatsUp</title>
         <link rel="icon" href="/favicon.ico" />

store/chat-context.tsx

@@ -1,117 +1,147 @@
-import { TimeLike } from 'fs'
+import { format, compareAsc } from 'date-fns'
 import {createContext, FC, PropsWithChildren, useState} from 'react'
+import { VscVmActive } from 'react-icons/vsc'
 
 
+
+
+const timeFormat = format(new Date(), 'MM/dd/yyyy')
+
 const chats = [
   {
   id:1,
-  message: 'hello dad ⚽',
+  message: 'hello  ⚽',
   img: '/img2.jpg',
   name: 'Josiah🤍',
-  timeAndDate:  new Date().getUTCFullYear().toLocaleString()
+  timeAndDate: timeFormat.toString()
       },
   {
   id:2,
   message: 'I de owe Bill gate',
   img: '/img3.png',
   name: 'Elon Musk',
-  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+  timeAndDate:timeFormat.toString()
       },
   {
   id:3,
-  message: 'not so true ooo hhahahah',
+  message: 'My introduction is next week',
   img: '/img4.png',
-  name: 'Junior',
-  timeAndDate:  new Date().getUTCFullYear().toLocaleString()
+  name: 'Pelumi',
+  timeAndDate: timeFormat.toString()
       },
   {
   id:4,
-  message: 'I de Kuje Prison, na camera lense land me here...',
+  message: 'Abeg send me 2k😭😭...',
   img: '/img4.png',
-  name: 'Mathew',
-  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+  name: 'Cross',
+  timeAndDate:timeFormat.toString()
       },
   {
   id:5,
   message: 'wahala no too much ',
   img: '/img2.jpg',
   name: 'Miles',
-  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+  timeAndDate:timeFormat.toString()
       },
   {
   id:6,
   message: 'wahala be like church projects ',
   img: '/img3.png',
   name: 'omotunde',
-  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+  timeAndDate:timeFormat.toString()
       },
   {
   id:7,
   message: 'Heard you getting married ',
   img: '/img2.jpg',
   name: 'Helen',
-  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+  timeAndDate:timeFormat.toString()
       },
   {
   id:8,
   message: 'wahala no too much ',
   img: '/img4.png',
   name: 'Mathew',
-  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+  timeAndDate:timeFormat.toString()
       },
   {
   id:9,
   message: 'wahala no too much ',
   img: '/img3.png',
   name: 'John',
-  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+  timeAndDate: timeFormat.toString()
       },
   {
   id:10,
   message: 'wahala no too much ',
   img: '/img2.jpg',
-  name: 'John',
-  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+  name: 'durela',
+  timeAndDate: timeFormat.toString()
+      },
+  {
+  id:11,
+  message: 'wahala no too much ',
+  img: '/img2.jpg',
+  name: 'Joha',
+  timeAndDate: timeFormat.toString()
+      },
+  {
+  id:12,
+  message: 'wahala no too much ',
+  img: '/img2.jpg',
+  name: 'ken',
+  timeAndDate: timeFormat.toString()
       }
     ]
-    // {
-    //   id:1,
-    //   message: 'hello dad ⚽',
-    //   img: '/img2.jpg',
-    //   name: 'Josiah🤍',
-    //   timeAndDate:  new Date().getUTCFullYear().toLocaleString()
-    //       }
+
 type Chat = {
   id: number,
   name: string,
   img: string,
   message: string,
   timeAndDate: string,
 }[]
+type activeChat = {
+  id: number,
+  name: string,
+  img: string,
+  message: string,
+  timeAndDate: string,
+}
 
  interface chatContextType {
   chats:Chat,
-  addChat: (id:number)=>any,
-  delChat: (id:number)=>any
+  activeChat:activeChat,
+  addChat: (id:number)=>void,
+  delChat: (id:number)=>void
 
 }
 
 
  export const ChatContext = createContext<chatContextType>({
   chats:[],
+  activeChat: {} as activeChat,
   addChat: ()=>{},
   delChat: ()=>{}
  })
 
  const ChatContextProvider: FC<PropsWithChildren> = (props) =>{
-  const [chat, setChats] =  useState<Chat>([]);
-  chats.map(ch=>chat.push(ch))
+  const [chat, setChats] =  useState<Chat>(chats);
+  const [activeChat, setActiveChat] =  useState<activeChat>({} as activeChat);
+
+  const addChat = (id:number): void =>{
+    // find the specified chat
+    const activeChat = chat.find((chat)=>chat.id === id)
+    if(activeChat)setActiveChat(activeChat)
+
+    // console.log(id,  activeChat);
 
-  const addChat = (id:number)=>{}
+  }
   const delChat = (id:number)=>{}
 
   const value ={
     chats: chat,
+    activeChat,
     addChat,
     delChat
   };