Изменения фронта

front/src/chat/App.jsx

@@ -3,15 +3,20 @@ import AppHeader from "./components/layout/AppHeader.jsx";
 import AppFooter from "./components/layout/AppFooter.jsx";
 import AppContent from "./components/layout/AppContent.jsx";
 import AppZalupa from "./components/layout/AppZalupa.jsx";
+import ChatPage from "./components/layout/AppChat.jsx";
 
 
 export default function App() {
-  return   <Layout>
+  return <ChatPage />
-      <AppHeader />
+
-     {/*<AppZalupa />*/}
+
-      <Layout>
+
-        <AppContent />
+    // <Layout>
-      </Layout>
+    //   <AppHeader />
-      <AppFooter />
+    //  {/*<AppZalupa />*/}
-    </Layout>
+    //   <Layout>
+    //     <AppContent />
+    //   </Layout>
+    //   <AppFooter />
+    // </Layout>
 }

front/src/chat/api.js

@@ -26,7 +26,7 @@ export function fetchAssets() {
     })
 }
 
-export async function fetchUsers() {
+export function fetchUsers() {
     return (fetch('http://localhost:8000/api/users', {
         method: "GET"
 })
@@ -43,3 +43,23 @@ export async function fetchUsers() {
     )
 }
 
+export function fetchLastMessage() {
+    return (fetch('http://localhost:8000/api/chat/get_last_message/2', {
+        method: "GET",
+        credentials: "include"
+})
+    .then(function (res) {
+            return res.json();
+    })
+    .then(function (data) {
+        console.log(data);
+        return data;
+    })
+    .catch(function (err) {
+        console.log('Ошибка:', err);
+    })
+    )
+}
+
+let chat_id = 2
+export let ws = new WebSocket(`ws://localhost:8000/chat/ws/${chat_id}?user_id=1`);

front/src/chat/components/AppFooter.jsx

@@ -1,11 +0,0 @@
-import {Layout} from "antd";
-
-const footerStyle = {
-  textAlign: 'center',
-  color: '#fff',
-  backgroundColor: '#4096ff',
-};
-
-export default function () {
-    return (<Layout.Footer style={footerStyle}>Footer</Layout.Footer>)
-}

front/src/chat/components/AppHeader.jsx

@@ -1,13 +0,0 @@
-import {Layout} from "antd";
-
-const headerStyle = {
-  textAlign: 'center',
-  color: '#fff',
-  paddingInline: 48,
-  lineHeight: '64px',
-  backgroundColor: '#4096ff',
-};
-
-export default function () {
-    return (<Layout.Header style={headerStyle}>Header</Layout.Header>)
-}

front/src/chat/components/AppZalupa.jsx

@@ -1,85 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Avatar, Button, Skeleton, List} from 'antd';
-
-
-const count = 3;
-const fakeDataUrl = `http://localhost:8000/api/users`;
-
-export default function () {
-  const [initLoading, setInitLoading] = useState(true);
-  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState([]);
-  const [list, setList] = useState([]);
-  useEffect(() => {
-    fetch(fakeDataUrl)
-      .then((res) => res.json())
-      .then((res) => {
-        setInitLoading(false);
-        setData(res.results);
-        setList(res.results);
-      });
-  }, []);
-  const onLoadMore = () => {
-    setLoading(true);
-    setList(
-      data.concat(
-        [...new Array(count)].map(() => ({
-          loading: true,
-          name: {},
-          picture: {},
-        })),
-      ),
-    );
-    fetch(fakeDataUrl)
-      .then((res) => res.json())
-      .then((res) => {
-        const newData = data.concat(res.results);
-        setData(newData);
-        setList(newData);
-        setLoading(false);
-        // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
-        // In real scene, you can using public method of react-virtualized:
-        // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
-        window.dispatchEvent(new Event('resize'));
-      });
-  };
-  const loadMore =
-    !initLoading && !loading ? (
-      <div
-        style={{
-          textAlign: 'center',
-          marginTop: 12,
-          height: 32,
-          lineHeight: '32px',
-        }}
-      >
-        <Button onClick={onLoadMore}>loading more</Button>
-      </div>
-    ) : null;
-  return (
-    <List
-      className="demo-loadmore-list"
-      loading={initLoading}
-      itemLayout="horizontal"
-      loadMore={loadMore}
-      dataSource={list}
-      renderItem={(item) => (
-        <List.Item
-          actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
-        >
-          <Skeleton avatar title={false} loading={item.loading} active>
-            <List.Item.Meta
-              avatar={<Avatar src={item.picture.large} />}
-              title={<a href="https://ant.design">{item.name?.last}</a>}
-              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
-            />
-            <div>content</div>
-          </Skeleton>
-        </List.Item>
-      )}
-    />
-  );
-};
-
-
-

front/src/chat/components/layout/AppChat.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import ChatMessage from './ChatMessage'; // Предполагается, что у вас есть компонент для отображения сообщений чата
+import { getChatMessages, getUserData } from './api'; // Функции для получения данных из API
+
+function ChatPage() {
+  const [userData, setUserData] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Получение данных пользователя из API
+    getUserData()
+      .then(data => {
+        setUserData(data);
+      })
+      .catch(error => {
+        console.error('Error fetching user data:', error);
+      });
+  }, []);
+
+  useEffect(() => {
+    // Получение последних сообщений чата из API
+    getChatMessages()
+      .then(data => {
+        setMessages(data);
+        setLoading(false);
+      })
+      .catch(error => {
+        console.error('Error fetching chat messages:', error);
+        setLoading(false);
+      });
+  }, []);
+
+  const loadMoreMessages = () => {
+    // Загрузка дополнительных сообщений из API
+    // Реализация этой функции зависит от вашего API и его пагинации
+    // Может потребоваться отслеживать текущую страницу сообщений и передавать ее в API запрос
+  };
+
+  return (
+    <div className="chat-container">
+      {/* Хедер с логотипом и данными пользователя */}
+      <header className="header">
+        <div className="logo">Your Logo</div>
+        {userData && (
+          <div className="user-info">
+            <img src={userData.avatar_image} alt="User Avatar" />
+            <span>{userData.username}</span>
+          </div>
+        )}
+      </header>
+
+      {/* Отображение сообщений чата */}
+      <div className="chat-messages">
+        {loading ? (
+          <p>Loading messages...</p>
+        ) : (
+          <>
+            {messages.map(message => (
+              <ChatMessage key={message.id} message={message} />
+            ))}
+            <button onClick={loadMoreMessages}>Load More</button>
+          </>
+        )}
+      </div>
+
+      {/* Дополнительный код и стили */}
+    </div>
+  );
+}
+
+export default ChatPage;

front/src/chat/components/layout/AppContent.jsx

@@ -1,5 +1,5 @@
 import {Layout, Spin} from "antd";
-import {fakeFetchCrypto, fetchAssets, fetchUsers} from "../../api.js";
+import {fakeFetchCrypto, fetchAssets, fetchUsers, fetchLastMessage, ws} from "../../api.js";
 import {useEffect, useState} from "react";
 
 
@@ -19,20 +19,30 @@ export default function AppContent() {
   const [loading, setLoading] = useState(true)
   const [users, setUsers] = useState([])
   const [assets, setAssets] = useState([])
+  const [lastMessage, setMessage] = useState([])
+  const [messages, setMessages] = useState([])
 
 
   useEffect(() => {
     async function preload() {
       const result = await fetchUsers()
+      const message = await fetchLastMessage()
 
+      setMessage(message[0].message)
       setUsers(result)
       setLoading(false)
     }
     preload()
   }, []);
 
+  ws.onmessage = function (event) {
+        const data = JSON.parse(event.data)
+        setMessages(data.message);
+    };
   if (loading) {
     return <Spin fullscreen/>
   }
-  return (<Layout.Content style={contentStyle}>{users[0].email}</Layout.Content>)
+  return (<Layout.Content style={contentStyle}>
+    {messages}
+  </Layout.Content>)
 }

front/src/chat/components/layout/ChatMessage.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function ChatMessage({ message }) {
+  return (
+    <div className="message">
+      <div className="message-sender">
+        <img src={message.avatar_image} alt="Sender Avatar" />
+        <span>{message.id}</span>
+      </div>
+      <div className="message-content">
+        <p>{message.message}</p>
+        <span className="message-time">{message.created_at}</span>
+      </div>
+    </div>
+  );
+}
+
+export default ChatMessage;

front/src/chat/components/layout/api.js

@@ -0,0 +1,34 @@
+export async function getChatMessages() {
+  try {
+    const response = await fetch('http://localhost:8000/api/chat/get_some_messages/2?messages_count=0&messages_to_get=20', {
+        method: "GET",
+        credentials: "include"
+    });
+    if (!response.ok) {
+      throw new Error('Failed to fetch chat messages');
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching chat messages:', error);
+    throw error;
+  }
+}
+
+// Функция для получения данных пользователя из API
+export async function getUserData() {
+  try {
+    const response = await fetch('http://localhost:8000/api/users/me', {
+      method: "GET",
+      credentials: "include"
+    });
+    if (!response.ok) {
+      throw new Error('Failed to fetch user data');
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching user data:', error);
+    throw error;
+  }
+}