socket

frontend/new_front/package.json

@@ -11,6 +11,7 @@
     "react-icons": "^4.8.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
+    "socket.io-client": "^4.6.1",
     "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4"
   },

frontend/new_front/src/components/Messages/Conversation.jsx

@@ -1,8 +1,15 @@
 import MessageYou from "./MessageYou"
 import MessageMe from "./MessageMe"
+// import { useRef } from "react";
+// import { useEffect } from "react";
 import '../../Style/Messages.css'
 
 function Conversation(){
+// 	const scrollRef = useRef();
+
+// 	useEffect(() => {
+// 	scrollRef.current?.scrollIntoView({ behavior: "smooth"})
+// }, [])
 	return (
 	 	<div className="messages">
 			<MessageYou/>

frontend/new_front/src/components/Messages/MessageMe.jsx

@@ -1,6 +1,8 @@
 import React from "react"
 import styled from "styled-components"
 import DefaultPic from '../../assets/profile.jpg'
+import { useRef } from "react";
+import { useEffect } from "react";
 import '../../Style/Messages.css'
 
 const MeStyleP = styled.p`
@@ -12,8 +14,13 @@ const MeStyleP = styled.p`
 `
 
 function MessageMe(){
+	const scrollRef = useRef();
+
+	useEffect(() => {
+	scrollRef.current?.scrollIntoView({ behavior: "smooth"})
+}, [])
 	return (
-		<div className="meMessage">
+		<div className="meMessage" ref={scrollRef}>
 			<div>
 				<img className="messageInfo" src={DefaultPic} alt="profile" />
 			</div>

frontend/new_front/src/components/Messages/MessageYou.jsx

@@ -1,6 +1,8 @@
 import React from "react"
 import styled from "styled-components"
 import DefaultPic from '../../assets/profile.jpg'
+import { useRef } from "react"
+import { useEffect } from "react"
 import '../../Style/Messages.css'
 
 const StyleP = styled.p`
@@ -12,8 +14,13 @@ const StyleP = styled.p`
 `
 
 function MessageYou(){
+	const scrollRef = useRef();
+
+	useEffect(() => {
+	scrollRef.current?.scrollIntoView({ behavior: "smooth"})
+}, [])
 	return (
-		<div className="youMessage">
+		<div className="youMessage" ref={scrollRef}>
 			<div>
 				<img className="messageInfo" src={DefaultPic} alt="profile" />
 			</div>

frontend/new_front/src/pages/Messages.jsx

@@ -1,9 +1,24 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Sidebar from '../components/Messages/Sidebar'
-import Chat from "../components/Messages/Chat";
+import Chat from "../components/Messages/Chat"
 import '../Style/Messages.css'
+import {io} from 'socket.io-client'
 
 function Messages(params) {
+	const socket = useRef(io("ws://localhost:8900"))
+
+	// useEffect(() => {
+	// 	setSocket(io("ws://localhost:8900"))
+	// }, [])
+
+	console.log(socket)
+	// useEffect(() => {
+	// 	socket.current.emit("addUser", user._id);
+		// socket.current.on("getUsers", users=>{
+		// 	console.log(users)
+		// })
+	// }, [user])
+
 	return (
 		<>
 		{/* <div>