From 26603d0b58816b877a5dc20f002c8caf0c65fbe6 Mon Sep 17 00:00:00 2001 From: omar-etman Date: Thu, 21 Apr 2022 21:22:33 +0200 Subject: [PATCH 1/3] modifying responsiveness --- connect-chat-app/server.js | 0 connect-chat-app/src/Components/Chat.tsx | 12 +++- connect-chat-app/src/Components/Contacts.tsx | 2 + connect-chat-app/src/Pages/HomePage.tsx | 8 ++- connect-chat-app/src/assets/index.css | 67 ++++++++++++++++---- connect-chat-app/src/reducer/app.ts | 5 +- connect-chat-app/src/types/User.ts | 1 + 7 files changed, 76 insertions(+), 19 deletions(-) delete mode 100644 connect-chat-app/server.js diff --git a/connect-chat-app/server.js b/connect-chat-app/server.js deleted file mode 100644 index e69de29..0000000 diff --git a/connect-chat-app/src/Components/Chat.tsx b/connect-chat-app/src/Components/Chat.tsx index 779c7ae..5fb5a8a 100644 --- a/connect-chat-app/src/Components/Chat.tsx +++ b/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() {
diff --git a/connect-chat-app/src/Components/Contacts.tsx b/connect-chat-app/src/Components/Contacts.tsx index 45cef66..2cc3827 100644 --- a/connect-chat-app/src/Components/Contacts.tsx +++ b/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 (
diff --git a/connect-chat-app/src/Pages/HomePage.tsx b/connect-chat-app/src/Pages/HomePage.tsx index 584bd3a..f808912 100644 --- a/connect-chat-app/src/Pages/HomePage.tsx +++ b/connect-chat-app/src/Pages/HomePage.tsx @@ -6,7 +6,7 @@ import {Toggler} from '../types/functions' function HomePage() { //mobile view - chat/contacts toggle - const [chatMode, setChatMode] = useState(true) + const [chatMode, setChatMode] = useState(false) const viewChat = () =>{ setChatMode(true) } @@ -18,11 +18,13 @@ function HomePage() {
- +
diff --git a/connect-chat-app/src/assets/index.css b/connect-chat-app/src/assets/index.css index fafea00..375a4c0 100644 --- a/connect-chat-app/src/assets/index.css +++ b/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,7 @@ main { flex-direction: row-reverse; border-bottom: 2px solid var(--backGround); padding-bottom: 0.5rem; - + margin-left: 4.5rem; } @media (min-width: 900px){ @@ -282,6 +287,17 @@ main { } } +@media (min-height: 700px){ + .contacts-container{ + max-height: 53rem; + } +} + +@media (max-height: 600px){ + .contacts-container{ + max-height: 45rem; + } +} /* --------------------------- */ /* ------ContactCard styling------- */ @@ -351,20 +367,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 +487,5 @@ main { .chat-box{ height: 34.5rem; } + } \ No newline at end of file diff --git a/connect-chat-app/src/reducer/app.ts b/connect-chat-app/src/reducer/app.ts index fef5337..370c747 100644 --- a/connect-chat-app/src/reducer/app.ts +++ b/connect-chat-app/src/reducer/app.ts @@ -19,7 +19,10 @@ export const appSlice = createSlice({ }, getConversations: (state, { payload }) => { state.conversation = [...state.conversation,payload] - } + }, + getUsers: (state, {payload}) => { + + } }, }); diff --git a/connect-chat-app/src/types/User.ts b/connect-chat-app/src/types/User.ts index 731e5d1..2acc080 100644 --- a/connect-chat-app/src/types/User.ts +++ b/connect-chat-app/src/types/User.ts @@ -19,4 +19,5 @@ export type LoginRespone = { user: User | null; token: string; conversation:string[] + } From c7f3b0c83aa58410e7674b4525765eb081332aa2 Mon Sep 17 00:00:00 2001 From: omar-etman Date: Sat, 23 Apr 2022 15:46:13 +0200 Subject: [PATCH 2/3] debugging redux implementation --- connect-chat-app/src/api/api.ts | 7 +++++-- connect-chat-app/src/assets/index.css | 5 +++++ connect-chat-app/src/index.tsx | 10 +++++++--- connect-chat-app/src/reducer/app.ts | 13 ++++++------- connect-chat-app/src/types/User.ts | 7 ++++++- 5 files changed, 29 insertions(+), 13 deletions(-) diff --git a/connect-chat-app/src/api/api.ts b/connect-chat-app/src/api/api.ts index f1ce3ce..7fd5cef 100644 --- a/connect-chat-app/src/api/api.ts +++ b/connect-chat-app/src/api/api.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 => { }, }); return response.data.user; -} \ No newline at end of file +} + +export const getConversation = (userId:string) => api.post('/conversations/', (userId)) diff --git a/connect-chat-app/src/assets/index.css b/connect-chat-app/src/assets/index.css index 375a4c0..004c7ac 100644 --- a/connect-chat-app/src/assets/index.css +++ b/connect-chat-app/src/assets/index.css @@ -264,6 +264,11 @@ main { 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){ diff --git a/connect-chat-app/src/index.tsx b/connect-chat-app/src/index.tsx index a1e6132..5075d89 100644 --- a/connect-chat-app/src/index.tsx +++ b/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( - - - + + + + + , document.getElementById('root') ); diff --git a/connect-chat-app/src/reducer/app.ts b/connect-chat-app/src/reducer/app.ts index 370c747..acbe0ee 100644 --- a/connect-chat-app/src/reducer/app.ts +++ b/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,15 +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; }, - getUsers: (state, {payload}) => { - - } + + }, }); export default appSlice.reducer; -export const { setUser , setToken, getConversations } = appSlice.actions; \ No newline at end of file +export const { setUser , setToken, setConversations } = appSlice.actions; \ No newline at end of file diff --git a/connect-chat-app/src/types/User.ts b/connect-chat-app/src/types/User.ts index 2acc080..0d7b6da 100644 --- a/connect-chat-app/src/types/User.ts +++ b/connect-chat-app/src/types/User.ts @@ -15,9 +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[] } From 49231fca91d3f91ab7579ae4860be0e853871cb5 Mon Sep 17 00:00:00 2001 From: omar-etman Date: Sat, 23 Apr 2022 16:30:01 +0200 Subject: [PATCH 3/3] merging works --- connect-chat-app/src/App.tsx | 4 +- connect-chat-app/src/Pages/HomePage.tsx | 70 ++++++++++++------- connect-chat-app/src/api/{api.ts => index.ts} | 0 3 files changed, 48 insertions(+), 26 deletions(-) rename connect-chat-app/src/api/{api.ts => index.ts} (100%) diff --git a/connect-chat-app/src/App.tsx b/connect-chat-app/src/App.tsx index ccfede5..24dd0ee 100644 --- a/connect-chat-app/src/App.tsx +++ b/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 (
@@ -20,3 +21,4 @@ function App() { } export default App; + diff --git a/connect-chat-app/src/Pages/HomePage.tsx b/connect-chat-app/src/Pages/HomePage.tsx index f808912..ee1b81f 100644 --- a/connect-chat-app/src/Pages/HomePage.tsx +++ b/connect-chat-app/src/Pages/HomePage.tsx @@ -1,42 +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' + +function HomePage () { - //mobile view - chat/contacts toggle const [chatMode, setChatMode] = useState(false) - const viewChat = () =>{ + const dispatch = useDispatch() + const viewChat = () => { setChatMode(true) } const back = () => { setChatMode(false) } - return ( -
-
-
- -
-
- { + const res = await getConversation(userId) + return res + + } + + useEffect(() => { + const response = listConversations(userId) //authedUuser + dispatch(setConversations(response)) + }, []) + + const conversations = useSelector((state:RootState)=>state) + + + return ( +
+
+
+ +
+
+ -
-
-
-
- + /> +
-
- +
+
+ +
+
+ +
-
- ) + ) } export default HomePage \ No newline at end of file diff --git a/connect-chat-app/src/api/api.ts b/connect-chat-app/src/api/index.ts similarity index 100% rename from connect-chat-app/src/api/api.ts rename to connect-chat-app/src/api/index.ts