From 610f70022818124d45d09d90d6563622c263018e Mon Sep 17 00:00:00 2001
From: p9001 <david.omokafe@fidelitybank.ng>
Date: Thu, 16 Feb 2023 15:22:19 +0100
Subject: [PATCH] added date format

---
 components/Footer.tsx                |  2 +-
 components/Sidebar.tsx               |  2 +-
 components/utils/chartCard.tsx       |  7 ++-
 components/utils/chatWrapper.tsx     |  8 +--
 components/utils/chats.tsx           | 34 +++++++++--
 components/utils/mainChatWrapper.tsx |  7 ++-
 package-lock.json                    | 20 ++++++-
 package.json                         |  1 +
 pages/index.tsx                      |  2 +-
 store/chat-context.tsx               | 88 +++++++++++++++++++---------
 10 files changed, 125 insertions(+), 46 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 8865d05..9d62919 100644
--- a/components/Footer.tsx
+++ b/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 ' > 
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 441d167..ae15a06 100644
--- a/components/Sidebar.tsx
+++ b/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 */}
diff --git a/components/utils/chartCard.tsx b/components/utils/chartCard.tsx
index c4bb8f4..7635b11 100644
--- a/components/utils/chartCard.tsx
+++ b/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>
diff --git a/components/utils/chatWrapper.tsx b/components/utils/chatWrapper.tsx
index 4ddf723..0021d65 100644
--- a/components/utils/chatWrapper.tsx
+++ b/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>
   )
 }
diff --git a/components/utils/chats.tsx b/components/utils/chats.tsx
index af1ccfe..a45f325 100644
--- a/components/utils/chats.tsx
+++ b/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>
   )
 }
diff --git a/components/utils/mainChatWrapper.tsx b/components/utils/mainChatWrapper.tsx
index 497b0cf..a9dab5b 100644
--- a/components/utils/mainChatWrapper.tsx
+++ b/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>
 
   )
diff --git a/package-lock.json b/package-lock.json
index 0b29d59..829ccae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,10 +1,11 @@
 {
-  "name": "cloned-app",
+  "name": "whatsApp-cloned",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "dependencies": {
+        "date-fns": "^2.29.3",
         "next": "latest",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -528,6 +529,18 @@
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/defined": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
@@ -1762,6 +1775,11 @@
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
       "dev": true
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "defined": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
diff --git a/package.json b/package.json
index cba4788..423cac4 100644
--- a/package.json
+++ b/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",
diff --git a/pages/index.tsx b/pages/index.tsx
index 4091755..f7a3707 100644
--- a/pages/index.tsx
+++ b/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" />
diff --git a/store/chat-context.tsx b/store/chat-context.tsx
index 698796b..08b8467 100644
--- a/store/chat-context.tsx
+++ b/store/chat-context.tsx
@@ -1,86 +1,99 @@
-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,
@@ -88,30 +101,47 @@ type Chat = {
   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
   };