added chat with another users

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
         "@pbe/react-yandex-maps": "^1.2.5",
+        "@stomp/stompjs": "^7.3.0",
         "@tailwindcss/vite": "^4.2.4",
         "@tanstack/react-query": "^5.100.5",
         "@testing-library/dom": "^10.4.1",
@@ -27,6 +28,7 @@
         "react-hook-form": "^7.74.0",
         "react-router-dom": "^7.14.2",
         "react-scripts": "5.0.1",
+        "sockjs-client": "^1.6.1",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.4",
         "web-vitals": "^2.1.4",
@@ -3475,6 +3477,12 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
+    "node_modules/@stomp/stompjs": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.3.0.tgz",
+      "integrity": "sha512-nKMLoFfJhrQAqkvvKd1vLq/cVBGCMwPRCD0LqW7UT1fecRx9C3GoKEIR2CYwVuErGeZu8w0kFkl2rlhPlqHVgQ==",
+      "license": "Apache-2.0"
+    },
     "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",
@@ -8482,6 +8490,15 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -16099,6 +16116,34 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs-client": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://tidelift.com/funding/github/npm/sockjs-client"
+      }
+    },
+    "node_modules/sockjs-client/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@pbe/react-yandex-maps": "^1.2.5",
+    "@stomp/stompjs": "^7.3.0",
     "@tailwindcss/vite": "^4.2.4",
     "@tanstack/react-query": "^5.100.5",
     "@testing-library/dom": "^10.4.1",
@@ -22,6 +23,7 @@
     "react-hook-form": "^7.74.0",
     "react-router-dom": "^7.14.2",
     "react-scripts": "5.0.1",
+    "sockjs-client": "^1.6.1",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
     "web-vitals": "^2.1.4",

src/App.js

@@ -2,6 +2,9 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import RegisterPage from './components/Authentication';
 import MainFeed from './components/MainFeed';
+import ChatPage from './components/ChatPage';
+import ChatListPage from './components/ChatListPage';
+import './styles/chat.css';
 
 function App() {
   return (
@@ -12,6 +15,8 @@ function App() {
 
             <Route path="/register" element={<RegisterPage />} />
             <Route path="/feed" element={<MainFeed />} />
+            <Route path="/chats" element={<ChatListPage />} />
+            <Route path="/chats/:chatId" element={<ChatPage />} />
           </Routes>
         </BrowserRouter>
       </AuthProvider>

src/components/PostOnFeed.jsx

@@ -3,9 +3,25 @@ import CalendarIcon from "./icons/CalendarIcon";
 import PhoneIcon from "./icons/PhoneIcon";
 import MapIcon from "./icons/MapIcon";
 import HeartIcon from "./icons/HeartIcon";
+import { useNavigate } from "react-router-dom";
+import { useChats } from "../hooks/useChats";
+import { useAuthContext } from "../context/AuthContext";
 import { API_URL } from "../config/authConstants";
 
 export default function PostOnFeed({ ad, liked, onLike, onEdit, isOwner }) {
+  const navigate = useNavigate();
+  const { createOrGetChat } = useChats();
+  const { isAuthenticated } = useAuthContext();
+
+  const handleContact = async (e) => {
+    e.stopPropagation();
+    try {
+      const chat = await createOrGetChat(ad.userId, ad.id);
+      navigate(`/chats/${chat.id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
   const imageUrl = ad.images?.[0] ? `${API_URL}${ad.images[0]}` : null;
 
   // ✅ Формируем строку адреса из city + district
@@ -53,6 +69,11 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, isOwner }) {
                 )}
               </div>
               <div className="f-card-foot-right">
+                {isAuthenticated && !isOwner && (
+                    <button className="f-card-contact" onClick={handleContact}>
+                      Написать
+                    </button>
+                )}
                 {onEdit && isOwner && (
                     <button className="f-like-btn"
                             onClick={e => { e.stopPropagation(); onEdit(ad); }}>

src/components/Sidebar.jsx

@@ -2,6 +2,7 @@ import LogoIcon from "./icons/LogoIcon";
 import {NAV_BOTTOM, NAV_ITEMS} from "../config/feedConstants";
 import {NavIcons} from "./icons/NavIcons";
 import Profile from "./profile/Profile";
+import { useNavigate } from "react-router-dom";
 
 export default function Sidebar({
   open,
@@ -15,6 +16,7 @@ export default function Sidebar({
   onLoginClick,
   onRulesClick,
 }) {
+  const navigate = useNavigate();
   return (
       <>
         <div className={`f-overlay${open ? " show" : ""}`} onClick={onClose} />
@@ -27,9 +29,15 @@ export default function Sidebar({
             {NAV_ITEMS.map(({ icon, label }) => {
               const Ic = NavIcons[icon];
               const handleClick = () => {
-                // «Мои объявления» и «Чат» требуют авторизации
+                // «Мои объявления» требует авторизации
-                if (!isAuthenticated && (label === "Мои объявления" || label === "Чат")) {
+                if (!isAuthenticated && label === "Мои объявления") {
                   onLoginClick();
+                } else if (label === "Чат") {
+                  if (!isAuthenticated) {
+                    onLoginClick();
+                  } else {
+                    navigate("/chats");
+                  }
                 } else {
                   onNavClick(label);
                 }