merging works Et branch2

connect-chat-app/src/App.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import {useEffect} from 'react';
 import Header from './Components/Header';
 import HomePage from './Pages/HomePage';
 
 
+
 function App() {
   return (
     <div className="App">
@@ -20,3 +21,4 @@ function App() {
 }
 
 export default App;
+

connect-chat-app/src/Components/Chat.tsx

@@ -1,9 +1,11 @@
 import { Avatar } from '@mui/material'
-import React from 'react'
+import {useEffect, useState, useRef} from 'react'
 import { useFormik } from 'formik'
 import SendIcon from '@mui/icons-material/Send';
 import ChatHeader from './ChatHeader';
 function Chat() {
+  //the input field will change message content through the submit handler
+  //the chat window will be updated upon li click , to post the user.name, user.conversation, if user id === authedUser id ? className sent, : className recieved
 
   const initialValues = {reply:''}
   const formik = useFormik({
@@ -23,7 +25,13 @@ function Chat() {
         </div>
         <div className='chat-box'>
           <ul className='box-conversation'>
-            <li >
+            <li className='sent'>
+              hello there , how are you hope all is well , bla bla bla
+            </li>
+            <li className='sent'>
+              hello there , how are you hope all is well , bla bla bla
+            </li>
+            <li className='recieved' >
               hello there , how are you hope all is well , bla bla bla
             </li>
           </ul>

connect-chat-app/src/Components/Contacts.tsx

@@ -5,6 +5,8 @@ function Contacts() {
 
   //assign contact to chat with + set chatMode true
   //recieve users via useSelector
+  //state of the message content is to be passed to the cards to recieve the content that will change through the input field submit handler
+
   return (
     <div className='contacts-container'>
         <ContactsHeader/>

connect-chat-app/src/Pages/HomePage.tsx

@@ -1,40 +1,62 @@
-import React, {useState} from 'react'
+import React, { useState, useEffect } from 'react'
 import Contacts from '../Components/Contacts'
 import Chat from '../Components/Chat'
 import { boolean } from 'yup/lib/locale'
-import {Toggler} from '../types/functions'
-function HomePage() {
+import { Toggler } from '../types/functions'
+import {getConversation} from '../api'
+import { useDispatch, useSelector } from 'react-redux'
+import {setConversations} from '../reducer/app'
+import {RootState} from '../reducer/store'
 
-    //mobile view - chat/contacts toggle
-    const [chatMode, setChatMode] = useState(true)
-    const viewChat = () =>{
+function HomePage () {
+
+    const [chatMode, setChatMode] = useState(false)
+    const dispatch = useDispatch()
+    const viewChat = () => {
         setChatMode(true)
     }
     const back = () => {
         setChatMode(false)
     }
-  return (
-    <div className='homePage-wrapper'>
-        <div className='homePage-mobile'>
-            <div className={chatMode? 'hide' : 'mobile-contacts'}>
-                <Contacts
-                //   viewChat={viewChat}
-                />
-            </div>
-            <div className={chatMode? 'mobile-chat' : 'hide'}>
-                <Chat/>
-            </div>
-        </div>
-        <div className='homePage-pc'>
-            <div className='pc-contacts'>
-                <Contacts/>
+
+    const listConversations = async (userId:string) => {
+        const res = await getConversation(userId)
+        return res
+
+    }
+
+    useEffect(() => {
+        const response = listConversations(userId) //authedUuser
+        dispatch(setConversations(response))
+    }, [])
+
+    const conversations = useSelector((state:RootState)=>state)
+
+
+    return (
+        <div className='homePage-wrapper'>
+            <div className='homePage-mobile'>
+                <div className={chatMode ? 'hide' : 'mobile-contacts'}>
+                    <Contacts
+
+                    />
+                </div>
+                <div className={chatMode ? 'mobile-chat' : 'hide'}>
+                    <Chat
+                    // back={back}
+                    />
+                </div>
             </div>
-            <div className='pc-chatBox'>
-                <Chat/>
+            <div className='homePage-pc'>
+                <div className='pc-contacts'>
+                    <Contacts />
+                </div>
+                <div className='pc-chatBox'>
+                    <Chat />
+                </div>
             </div>
         </div>
-    </div>
-  )
+    )
 }
 
 export default HomePage

connect-chat-app/src/api/api.ts → connect-chat-app/src/api/index.ts

@@ -1,7 +1,8 @@
 import axios from "axios";
 import { User } from "../types/User"
 
-const URL = "http://localhost:7000/"
+
+const URL = "http://localhost:/"
 
 const api = axios.create({baseURL: URL}); 
 
@@ -25,4 +26,6 @@ export const meAPI = async (token: string): Promise<User> => {
         },
     });
     return response.data.user;
-}
+}
+
+export const getConversation = (userId:string) => api.post('/conversations/', (userId))

connect-chat-app/src/assets/index.css

@@ -221,15 +221,16 @@ main {
   /* height: 100%; */
   width: 100%;
   height: 46rem;
-  padding: 0.2rem;
+  padding: 0;
 }
 
 .contacts-list {
   list-style: none;
-  scrollbar-color: var(--backGround) var(--ltBlue);
+  /* scrollbar-color: var(--blue); */
   text-align: left;
   padding-left: 0.2rem;
-  padding-right: 1rem;
+  padding-right: 0rem;
+  width: 100%;
 }
 
 .contacts-header {
@@ -249,6 +250,10 @@ main {
   top: 0px;
 }
 
+.contacts-header h1 {
+  margin-left: 2rem;
+}
+
 .contacts-list li {
   flex-direction: row-reverse;
   display: flex;
@@ -258,7 +263,12 @@ main {
   flex-direction: row-reverse;
   border-bottom: 2px solid var(--backGround);
   padding-bottom: 0.5rem;
+  margin-left: 4.5rem;
+  transition: all 0.5s linear;
+}
 
+.contacts-list li:hover, .contacts-list li:active{
+  background-image: var(--grey);
 }
 
 @media (min-width: 900px){
@@ -282,6 +292,17 @@ main {
   }
 }
 
+@media (min-height: 700px){
+  .contacts-container{
+    max-height: 53rem;
+  }
+}
+
+@media (max-height: 600px){
+  .contacts-container{
+    max-height: 45rem;
+  }
+}
 /* --------------------------- */
 /* ------ContactCard styling------- */
 
@@ -351,20 +372,44 @@ main {
 }
 
 .chat-box {
-    display: flex;
-    flex-direction: column;
-    height: 35rem;
-    overflow: hidden;
-    overflow-y: scroll;
-    padding: 0 1rem;
-    /* min-width: 30rem; */
+  display: flex;
+  flex-direction: column;
+  height: 35rem;
+  overflow: hidden;
+  overflow-y: scroll;
+  padding: 0 1rem;
+  /* min-width: 30rem; */
 }
-.box-conversations{
+.box-conversation {
   list-style: none;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0;
+}
+
+.sent, .recieved {
+  display: flex;
+  list-style: none;
+  margin: 1rem;
+  justify-content: center;
+  overflow-wrap: anywhere;
+  border-radius: 0.5rem;
+  color: white;
+  padding: 1rem;
+  width: fit-content;
 }
 
-.box-conversations li{
 
+.sent {
+  background-color: var(--ltBlue);
+  margin-right: 7rem;
+}
+
+.recieved {
+  background-color: var(--turquoise);
+  margin-left: 7rem;
 }
 
 .chat-input{
@@ -447,4 +492,5 @@ main {
   .chat-box{
     height: 34.5rem;
   }
+
 }

connect-chat-app/src/index.tsx

@@ -4,12 +4,16 @@ import './assets/index.css';
 import App from './App';
 import {BrowserRouter} from 'react-router-dom'
 import reportWebVitals from './reportWebVitals';
+import { Provider } from 'react-redux';
+import { store } from './reducer/store'
 
   ReactDOM.render(
     <React.StrictMode>
-      <BrowserRouter>
-          <App />
-      </BrowserRouter>
+      <Provider store={store}>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+      </Provider>
     </React.StrictMode>,
     document.getElementById('root')
   );

connect-chat-app/src/reducer/app.ts

@@ -4,7 +4,7 @@ import {AppStateType} from "../types/User";
 const initialState: AppStateType = {
     user: null,
     token: "",
-    conversation:[],
+    conversations:[],
 }
 
 export const appSlice = createSlice({
@@ -17,12 +17,14 @@ export const appSlice = createSlice({
         setToken: (state, { payload }) => {
             state.token = payload;
         },
-        getConversations: (state, { payload }) => {
-            state.conversation = [...state.conversation,payload]
-        }  
+        setConversations: (state, { payload }) => {
+            state.conversations = payload;
+        },
+
+
     },
 });
 
 
 export default appSlice.reducer;
-export const { setUser , setToken, getConversations } = appSlice.actions;
+export const { setUser , setToken, setConversations } = appSlice.actions;

connect-chat-app/src/types/User.ts

@@ -15,8 +15,14 @@ export type LoginRespone = {
     token: string;
 }
 
+// export type Conversation = {
+//     id: string,
+//     userI
+// }
+
  export type AppStateType = {
     user: User | null;
     token: string;
-    conversation:string[]
+    conversations:string[]
+
 }