From 26603d0b58816b877a5dc20f002c8caf0c65fbe6 Mon Sep 17 00:00:00 2001 From: omar-etman Date: Thu, 21 Apr 2022 21:22:33 +0200 Subject: [PATCH 1/5] 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/5] 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/5] 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 From 25018529a60d03b7db7ce0d8f9f7e7b5669c66f3 Mon Sep 17 00:00:00 2001 From: omar-etman Date: Sun, 24 Apr 2022 15:18:31 +0200 Subject: [PATCH 4/5] Trial XIV --- connect-chat-app/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/connect-chat-app/src/App.tsx b/connect-chat-app/src/App.tsx index 24dd0ee..7f1baa9 100644 --- a/connect-chat-app/src/App.tsx +++ b/connect-chat-app/src/App.tsx @@ -14,7 +14,7 @@ function App() {
- footer bla bla bla + footer hey hey hey hye
); From 0b6e21961b34e196ae01c80d7a9caeb641b18937 Mon Sep 17 00:00:00 2001 From: omar-etman Date: Sun, 24 Apr 2022 15:33:00 +0200 Subject: [PATCH 5/5] comeback --- connect-chat-app/package-lock.json | 216 +++++++++++++++ connect-chat-app/package.json | 1 + connect-chat-app/server.js | 0 connect-chat-app/src/App.tsx | 46 ++- connect-chat-app/src/Components/Chat.tsx | 103 ++++--- .../src/Components/ChatHeader.tsx | 8 +- connect-chat-app/src/Components/Contacts.tsx | 42 +-- connect-chat-app/src/Components/Login.tsx | 151 ++++++++++ .../src/Components/PrivareRoute.tsx | 14 + connect-chat-app/src/Components/SignUp.tsx | 151 ++++++++++ connect-chat-app/src/Pages/HomePage.tsx | 48 ++-- connect-chat-app/src/Pages/LoginPage.tsx | 20 ++ connect-chat-app/src/Pages/SignUpPage.tsx | 16 ++ connect-chat-app/src/api/index.ts | 61 ++-- connect-chat-app/src/assets/index.css | 70 +---- connect-chat-app/src/index.tsx | 10 +- connect-chat-app/src/reducer/app.ts | 6 +- connect-chat-app/src/types/User.ts | 8 +- package-lock.json | 261 ++++++++++++++++++ package.json | 5 + 20 files changed, 1032 insertions(+), 205 deletions(-) create mode 100644 connect-chat-app/server.js create mode 100644 connect-chat-app/src/Components/Login.tsx create mode 100644 connect-chat-app/src/Components/PrivareRoute.tsx create mode 100644 connect-chat-app/src/Components/SignUp.tsx create mode 100644 connect-chat-app/src/Pages/LoginPage.tsx create mode 100644 connect-chat-app/src/Pages/SignUpPage.tsx create mode 100644 package-lock.json create mode 100644 package.json diff --git a/connect-chat-app/package-lock.json b/connect-chat-app/package-lock.json index 495de4f..d1a7035 100644 --- a/connect-chat-app/package-lock.json +++ b/connect-chat-app/package-lock.json @@ -26,6 +26,7 @@ "react-scripts": "5.0.0", "redux": "^4.1.2", "redux-thunk": "^2.4.1", + "socket.io-client": "^4.4.1", "typescript": "^4.6.3", "web-vitals": "^2.1.4", "yup": "^0.32.11" @@ -3360,6 +3361,19 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@socket.io/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==", + "engines": { + "node": ">= 0.6.0" + } + }, + "node_modules/@socket.io/component-emitter": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz", + "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q==" + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -4990,6 +5004,11 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, + "node_modules/backo2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -6464,6 +6483,53 @@ "node": ">= 0.8" } }, + "node_modules/engine.io-client": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz", + "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==", + "dependencies": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.0.0", + "has-cors": "1.1.0", + "parseqs": "0.0.6", + "parseuri": "0.0.6", + "ws": "~8.2.3", + "xmlhttprequest-ssl": "~2.0.0", + "yeast": "0.1.2" + } + }, + "node_modules/engine.io-client/node_modules/ws": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz", + "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==", + "dependencies": { + "@socket.io/base64-arraybuffer": "~1.0.2" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/enhanced-resolve": { "version": "5.9.3", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz", @@ -8156,6 +8222,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-cors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" + }, "node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -11729,6 +11800,16 @@ "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==" }, + "node_modules/parseqs": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz", + "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==" + }, + "node_modules/parseuri": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz", + "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==" + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -14333,6 +14414,34 @@ "node": ">=8" } }, + "node_modules/socket.io-client": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz", + "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==", + "dependencies": { + "@socket.io/component-emitter": "~3.0.0", + "backo2": "~1.0.2", + "debug": "~4.3.2", + "engine.io-client": "~6.1.1", + "parseuri": "0.0.6", + "socket.io-parser": "~4.1.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz", + "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==", + "dependencies": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -16231,6 +16340,14 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -16285,6 +16402,11 @@ "node": ">=10" } }, + "node_modules/yeast": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", @@ -18537,6 +18659,16 @@ "@sinonjs/commons": "^1.7.0" } }, + "@socket.io/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==" + }, + "@socket.io/component-emitter": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz", + "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q==" + }, "@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -19773,6 +19905,11 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, + "backo2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -20847,6 +20984,38 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "engine.io-client": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz", + "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==", + "requires": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.0.0", + "has-cors": "1.1.0", + "parseqs": "0.0.6", + "parseuri": "0.0.6", + "ws": "~8.2.3", + "xmlhttprequest-ssl": "~2.0.0", + "yeast": "0.1.2" + }, + "dependencies": { + "ws": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "requires": {} + } + } + }, + "engine.io-parser": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz", + "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==", + "requires": { + "@socket.io/base64-arraybuffer": "~1.0.2" + } + }, "enhanced-resolve": { "version": "5.9.3", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz", @@ -22069,6 +22238,11 @@ "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz", "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==" }, + "has-cors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" + }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -24642,6 +24816,16 @@ "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==" }, + "parseqs": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz", + "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==" + }, + "parseuri": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz", + "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==" + }, "parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -26401,6 +26585,28 @@ "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" }, + "socket.io-client": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz", + "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==", + "requires": { + "@socket.io/component-emitter": "~3.0.0", + "backo2": "~1.0.2", + "debug": "~4.3.2", + "engine.io-client": "~6.1.1", + "parseuri": "0.0.6", + "socket.io-parser": "~4.1.1" + } + }, + "socket.io-parser": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz", + "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==", + "requires": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1" + } + }, "sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -27858,6 +28064,11 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==" + }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -27897,6 +28108,11 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==" }, + "yeast": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" + }, "yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/connect-chat-app/package.json b/connect-chat-app/package.json index 7d0cff5..bcd316f 100644 --- a/connect-chat-app/package.json +++ b/connect-chat-app/package.json @@ -21,6 +21,7 @@ "react-scripts": "5.0.0", "redux": "^4.1.2", "redux-thunk": "^2.4.1", + "socket.io-client": "^4.4.1", "typescript": "^4.6.3", "web-vitals": "^2.1.4", "yup": "^0.32.11" diff --git a/connect-chat-app/server.js b/connect-chat-app/server.js new file mode 100644 index 0000000..e69de29 diff --git a/connect-chat-app/src/App.tsx b/connect-chat-app/src/App.tsx index 7f1baa9..79d2d09 100644 --- a/connect-chat-app/src/App.tsx +++ b/connect-chat-app/src/App.tsx @@ -1,20 +1,54 @@ -import {useEffect} from 'react'; -import Header from './Components/Header'; +import { Route, Routes } from 'react-router-dom'; import HomePage from './Pages/HomePage'; +import LoginPage from './Pages/LoginPage'; +import SignUpPage from './Pages/SignUpPage'; +import { useSelector, useDispatch } from 'react-redux' +import { RootState } from './reducer/store'; +import { meAPI } from './api'; +import { setToken, setUser } from './reducer/app'; +import { useEffect } from 'react'; +import Header from './Components/Header' +import PrivateRoute from './Components/PrivareRoute'; +function App() { + const authedUser = useSelector((state: RootState)=>state.app.user) + const dispatch = useDispatch(); + const token = useSelector((state: RootState) => state.app.token); + async function saveUser(token: string) { + const user = await meAPI(token); + + dispatch(setUser(user)); + console.log({ user }); + } + + useEffect(() => { + const tokenLocalStorage = localStorage.getItem("auth-token"); + console.log({ tokenLocalStorage }); + if (tokenLocalStorage) { + dispatch(setToken(tokenLocalStorage)); + saveUser(tokenLocalStorage); + } + }, []); + + -function App() { return (
-
+
- + + }> + } /> + + } /> + } /> +
- footer hey hey hey hye + footer bla bla bla
); diff --git a/connect-chat-app/src/Components/Chat.tsx b/connect-chat-app/src/Components/Chat.tsx index 5fb5a8a..bbe03f0 100644 --- a/connect-chat-app/src/Components/Chat.tsx +++ b/connect-chat-app/src/Components/Chat.tsx @@ -1,54 +1,83 @@ import { Avatar } from '@mui/material' -import {useEffect, useState, useRef} from 'react' +import React, { useEffect, useRef, useState } 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 +import { io } from "socket.io-client"; +import { send } from 'process'; +import { sendMessage } from '../api'; +interface Provider { + message: string +} +function Chat({ back }: { back: () => void }) { + const [yourID, setYourID] = useState(''); + const [messages, setMessages] = useState([]); + // const [message, setMessage] = useState(""); + const [socket, setSocket] = useState(null) + const goBack = back + + useEffect(() => { + + const socket = io('http://localhost:7070') + socket.on("your id", (id: string) => { + setYourID(id) + }) + socket.on("message", (message: Provider) => { + receivedMessage(message); - const initialValues = {reply:''} + }) + }, []) + function receivedMessage(message: Provider) { + setMessages([...messages, message]); + } + + const initialValues = { + reply: '' + } const formik = useFormik({ - initialValues,onSubmit: values => { + initialValues, + onSubmit: async values => { + await sendMessage(values.reply) + // setMessages() console.log(values) + if(socket) { + socket.emit("send message", values) + } + } }) return (
- -
- -

Contact's Name

-
-
-
    -
  • - hello there , how are you hope all is well , bla bla bla -
    • -
  • - hello there , how are you hope all is well , bla bla bla -
    • -
  • - hello there , how are you hope all is well , bla bla bla -
    • -
-
-
- - -
+ +
+ +

Contact's Name

+
+
+
    +
  • + hello there , how are you hope all is well , bla bla bla +
    • +
+
+
+ + +
) } diff --git a/connect-chat-app/src/Components/ChatHeader.tsx b/connect-chat-app/src/Components/ChatHeader.tsx index 24ddb46..12351b6 100644 --- a/connect-chat-app/src/Components/ChatHeader.tsx +++ b/connect-chat-app/src/Components/ChatHeader.tsx @@ -1,11 +1,15 @@ import React from 'react' import { Avatar } from '@mui/material' import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; -function ChatHeader() { +function ChatHeader({ goBack }: { goBack: () => void }) { return (
- + + +

Contact's Name

diff --git a/connect-chat-app/src/Components/Contacts.tsx b/connect-chat-app/src/Components/Contacts.tsx index 2cc3827..65d54ec 100644 --- a/connect-chat-app/src/Components/Contacts.tsx +++ b/connect-chat-app/src/Components/Contacts.tsx @@ -1,45 +1,23 @@ -import React from 'react' +import React, { useEffect } from 'react' import ContactCard from './ContactCard' import ContactsHeader from './ContactsHeader' -function Contacts() { - +function Contacts({conversations}:{conversations: string[]}) { +// useEffect(()=>{ + +// }) //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 (

Messages

    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • + { +
  • + +
    • + }
diff --git a/connect-chat-app/src/Components/Login.tsx b/connect-chat-app/src/Components/Login.tsx new file mode 100644 index 0000000..7aa35f3 --- /dev/null +++ b/connect-chat-app/src/Components/Login.tsx @@ -0,0 +1,151 @@ +import React from 'react' +import Avatar from '@mui/material/Avatar'; +import Button from '@mui/material/Button'; +import CssBaseline from '@mui/material/CssBaseline'; +import TextField from '@mui/material/TextField'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import Link from '@mui/material/Link'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +// import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; +import Typography from '@mui/material/Typography'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import logo from '../logo.svg' +import { useFormik } from 'formik'; +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; +import * as api from '../api' + +function Copyright(props: any) { + return ( + + {'Copyright © '} + + Team Name + {' '} + {new Date().getFullYear()} + {'.'} + + ); +} + +const theme = createTheme(); +const Login = () => { + + const dispatch = useDispatch() + const navigate = useNavigate() + const formik = useFormik({ + initialValues: { + email: '', + password: '', + }, + onSubmit: async values => { + const {token} = await api.login(values.email,values.password) //get token by login in -- sending request to server with email and password and server response returns the token token + console.log({token}); + localStorage.setItem('token', JSON.parse(token)) // save the token returned from the server into the localStorage + navigate('/') + } + }) + + return ( + + + + + + + + + + + + + + + + + + + + + + {/* } + label="Remember me" + /> */} + + + {/* + + Forgot password? + + */} + + + {"Don't have an account? Sign Up"} + + + + + + + + + + ); + } + +export default Login \ No newline at end of file diff --git a/connect-chat-app/src/Components/PrivareRoute.tsx b/connect-chat-app/src/Components/PrivareRoute.tsx new file mode 100644 index 0000000..39bc673 --- /dev/null +++ b/connect-chat-app/src/Components/PrivareRoute.tsx @@ -0,0 +1,14 @@ +import { Navigate, Outlet } from "react-router"; +import {User} from '../types/User' + +function PrivateRoute({authedUser}:{authedUser:User | null}) { + console.log(authedUser) + // If authorized, return an outlet that will render child elements + // If not, return element that will navigate to login page + if (authedUser) { + return ; + } + return ; +} + +export default PrivateRoute; \ No newline at end of file diff --git a/connect-chat-app/src/Components/SignUp.tsx b/connect-chat-app/src/Components/SignUp.tsx new file mode 100644 index 0000000..75dceb2 --- /dev/null +++ b/connect-chat-app/src/Components/SignUp.tsx @@ -0,0 +1,151 @@ +import React from 'react' +import Avatar from '@mui/material/Avatar'; +import Button from '@mui/material/Button'; +import CssBaseline from '@mui/material/CssBaseline'; +import TextField from '@mui/material/TextField'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import Link from '@mui/material/Link'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +// import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; +import Typography from '@mui/material/Typography'; +import * as api from '../api' + +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { useDispatch } from 'react-redux'; +import { useFormik } from 'formik'; +import { setUser } from '../reducer/app'; + +function Copyright(props: any) { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); + } + + const theme = createTheme(); +const SignUp = () => { + const dispatch = useDispatch() + const formik = useFormik({ + initialValues: { + firstName: '', + lastName: '', + userName: '', + email: '', + password: '', + }, + onSubmit: async values => { + const user = await api.setUser(values) + console.log(user) + dispatch(setUser(values)) + localStorage.setItem("user",JSON.stringify(values)) + } + }) + return ( + + + + + t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900], + backgroundSize: 'cover', + backgroundPosition: 'center', + }} + /> + + + + {/* */} + + + Sign in + + + + + + } + label="Remember me" + /> + + + + + Forgot password? + + + + + {"Don't have an account? Sign Up"} + + + + + + + + + + ) + } + + +export default SignUp \ No newline at end of file diff --git a/connect-chat-app/src/Pages/HomePage.tsx b/connect-chat-app/src/Pages/HomePage.tsx index ee1b81f..7244202 100644 --- a/connect-chat-app/src/Pages/HomePage.tsx +++ b/connect-chat-app/src/Pages/HomePage.tsx @@ -1,58 +1,64 @@ -import React, { useState, useEffect } from 'react' +import React, {useEffect, useState} from 'react' import Contacts from '../Components/Contacts' import Chat from '../Components/Chat' -import { boolean } from 'yup/lib/locale' -import { Toggler } from '../types/functions' -import {getConversation} from '../api' +import { RootState } from '../reducer/store' +import app, { setConversations } from '../reducer/app' +import { getConversation } from '../api' import { useDispatch, useSelector } from 'react-redux' -import {setConversations} from '../reducer/app' -import {RootState} from '../reducer/store' +// import { useAppDispatch, useAppSelector } from '../reducer/hooks' -function HomePage () { - - const [chatMode, setChatMode] = useState(false) +function HomePage():JSX.Element { + const data = useSelector((state: RootState)=>state) + const authUser = data.app.user + const conversations = data.app.conversation + const [chatMode, setChatMode] = useState(true) const dispatch = useDispatch() - const viewChat = () => { + + const viewChat = () =>{ setChatMode(true) } const back = () => { setChatMode(false) } - - const listConversations = async (userId:string) => { + const listConversations = async (userId:string) => { const res = await getConversation(userId) return res } - + useEffect(() => { - const response = listConversations(userId) //authedUuser + if (authUser){ + const response = listConversations(authUser.id) //authedUuser + dispatch(setConversations(response)) + } + }, []) - const conversations = useSelector((state:RootState)=>state) - - return (
- +
- +
diff --git a/connect-chat-app/src/Pages/LoginPage.tsx b/connect-chat-app/src/Pages/LoginPage.tsx new file mode 100644 index 0000000..0e526c1 --- /dev/null +++ b/connect-chat-app/src/Pages/LoginPage.tsx @@ -0,0 +1,20 @@ +import React from 'react' + +import Login from '../Components/Login'; + + + + + +const LoginPage = () :JSX.Element => { + + return ( +
+ +
+ ); + } + +export default LoginPage + + diff --git a/connect-chat-app/src/Pages/SignUpPage.tsx b/connect-chat-app/src/Pages/SignUpPage.tsx new file mode 100644 index 0000000..506a681 --- /dev/null +++ b/connect-chat-app/src/Pages/SignUpPage.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import SignUp from '../Components/SignUp' + + + + +const SignUpPage = () => { + + return ( +
+ +
+ ) +} + +export default SignUpPage \ No newline at end of file diff --git a/connect-chat-app/src/api/index.ts b/connect-chat-app/src/api/index.ts index 7fd5cef..65f955e 100644 --- a/connect-chat-app/src/api/index.ts +++ b/connect-chat-app/src/api/index.ts @@ -1,31 +1,30 @@ -import axios from "axios"; -import { User } from "../types/User" - - -const URL = "http://localhost:/" - -const api = axios.create({baseURL: URL}); - -export const signUpAPI = async (user: User) => { - const response = await api.post("/auth/signup", user); - return response.data; - -} - -export const signInAPI = async (email:string, password:string) => { - const response = await api.post("/auth/login", { email, password }); - - return response.data; - -} - -export const meAPI = async (token: string): Promise => { - const response = await api.get("/auth/me", { - headers: { - Authorization: token - }, - }); - return response.data.user; -} - -export const getConversation = (userId:string) => api.post('/conversations/', (userId)) +import axios from "axios"; +import { User } from "../types/User" + +const URL = "http://localhost:7000/" + +const api = axios.create({baseURL: URL}); + +export const signUpAPI = async (user: User) => { + const response = await api.post("/auth/signup", user); + return response.data; + +} + +export const signInAPI = async (email:string, password:string) => { + const response = await api.post("/auth/login", { email, password }); + + return response.data; + +} + +export const meAPI = async (token: string): Promise => { + const response = await api.get("/auth/me", { + headers: { + Authorization: token + }, + }); + return response.data.user; +} + +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 004c7ac..fafea00 100644 --- a/connect-chat-app/src/assets/index.css +++ b/connect-chat-app/src/assets/index.css @@ -221,16 +221,15 @@ main { /* height: 100%; */ width: 100%; height: 46rem; - padding: 0; + padding: 0.2rem; } .contacts-list { list-style: none; - /* scrollbar-color: var(--blue); */ + scrollbar-color: var(--backGround) var(--ltBlue); text-align: left; padding-left: 0.2rem; - padding-right: 0rem; - width: 100%; + padding-right: 1rem; } .contacts-header { @@ -250,10 +249,6 @@ main { top: 0px; } -.contacts-header h1 { - margin-left: 2rem; -} - .contacts-list li { flex-direction: row-reverse; display: flex; @@ -263,12 +258,7 @@ 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){ @@ -292,17 +282,6 @@ main { } } -@media (min-height: 700px){ - .contacts-container{ - max-height: 53rem; - } -} - -@media (max-height: 600px){ - .contacts-container{ - max-height: 45rem; - } -} /* --------------------------- */ /* ------ContactCard styling------- */ @@ -372,44 +351,20 @@ main { } .chat-box { - display: flex; - flex-direction: column; - height: 35rem; - overflow: hidden; - overflow-y: scroll; - padding: 0 1rem; - /* min-width: 30rem; */ -} -.box-conversation { - list-style: none; - display: flex; - width: 100%; - flex-direction: column; - justify-content: center; - padding: 0; + display: flex; + flex-direction: column; + height: 35rem; + overflow: hidden; + overflow-y: scroll; + padding: 0 1rem; + /* min-width: 30rem; */ } - -.sent, .recieved { - display: flex; +.box-conversations{ 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{ @@ -492,5 +447,4 @@ main { .chat-box{ height: 34.5rem; } - } \ No newline at end of file diff --git a/connect-chat-app/src/index.tsx b/connect-chat-app/src/index.tsx index 5075d89..a1e6132 100644 --- a/connect-chat-app/src/index.tsx +++ b/connect-chat-app/src/index.tsx @@ -4,16 +4,12 @@ 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 acbe0ee..e2664fc 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: "", - conversations:[], + conversation:[], } export const appSlice = createSlice({ @@ -18,10 +18,8 @@ export const appSlice = createSlice({ state.token = payload; }, setConversations: (state, { payload }) => { - state.conversations = payload; + state.conversation = [...state.conversation,payload] }, - - }, }); diff --git a/connect-chat-app/src/types/User.ts b/connect-chat-app/src/types/User.ts index 0d7b6da..731e5d1 100644 --- a/connect-chat-app/src/types/User.ts +++ b/connect-chat-app/src/types/User.ts @@ -15,14 +15,8 @@ export type LoginRespone = { token: string; } -// export type Conversation = { -// id: string, -// userI -// } - export type AppStateType = { user: User | null; token: string; - conversations:string[] - + conversation:string[] } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..8968562 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,261 @@ +{ + "name": "ConnectChatApp", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "socket.io-client": "^4.4.1" + } + }, + "node_modules/@socket.io/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==", + "engines": { + "node": ">= 0.6.0" + } + }, + "node_modules/@socket.io/component-emitter": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz", + "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q==" + }, + "node_modules/backo2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" + }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/engine.io-client": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz", + "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==", + "dependencies": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.0.0", + "has-cors": "1.1.0", + "parseqs": "0.0.6", + "parseuri": "0.0.6", + "ws": "~8.2.3", + "xmlhttprequest-ssl": "~2.0.0", + "yeast": "0.1.2" + } + }, + "node_modules/engine.io-parser": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz", + "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==", + "dependencies": { + "@socket.io/base64-arraybuffer": "~1.0.2" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/has-cors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "node_modules/parseqs": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz", + "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==" + }, + "node_modules/parseuri": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz", + "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==" + }, + "node_modules/socket.io-client": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz", + "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==", + "dependencies": { + "@socket.io/component-emitter": "~3.0.0", + "backo2": "~1.0.2", + "debug": "~4.3.2", + "engine.io-client": "~6.1.1", + "parseuri": "0.0.6", + "socket.io-parser": "~4.1.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz", + "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==", + "dependencies": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/ws": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/yeast": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" + } + }, + "dependencies": { + "@socket.io/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==" + }, + "@socket.io/component-emitter": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz", + "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q==" + }, + "backo2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" + }, + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "requires": { + "ms": "2.1.2" + } + }, + "engine.io-client": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz", + "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==", + "requires": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.0.0", + "has-cors": "1.1.0", + "parseqs": "0.0.6", + "parseuri": "0.0.6", + "ws": "~8.2.3", + "xmlhttprequest-ssl": "~2.0.0", + "yeast": "0.1.2" + } + }, + "engine.io-parser": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz", + "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==", + "requires": { + "@socket.io/base64-arraybuffer": "~1.0.2" + } + }, + "has-cors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "parseqs": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz", + "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==" + }, + "parseuri": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz", + "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==" + }, + "socket.io-client": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz", + "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==", + "requires": { + "@socket.io/component-emitter": "~3.0.0", + "backo2": "~1.0.2", + "debug": "~4.3.2", + "engine.io-client": "~6.1.1", + "parseuri": "0.0.6", + "socket.io-parser": "~4.1.1" + } + }, + "socket.io-parser": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz", + "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==", + "requires": { + "@socket.io/component-emitter": "~3.0.0", + "debug": "~4.3.1" + } + }, + "ws": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "requires": {} + }, + "xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==" + }, + "yeast": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..18bdd95 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "socket.io-client": "^4.4.1" + } +}