From db01788f0752ad2577cf1cb678c2115222fc74eb Mon Sep 17 00:00:00 2001
From: Natalia Bandurova <natacsp@mail.ru>
Date: Fri, 4 Oct 2024 23:36:51 +0300
Subject: [PATCH] feat: add messages query to component

---
 frontend/src/components/Messages.jsx | 75 +++++++++++++++-------------
 1 file changed, 40 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/Messages.jsx b/frontend/src/components/Messages.jsx
index 2bc68e9..3ad61c3 100644
--- a/frontend/src/components/Messages.jsx
+++ b/frontend/src/components/Messages.jsx
@@ -1,40 +1,45 @@
 import { Button, Col, Form } from 'react-bootstrap';
 import { ArrowRightSquare } from 'react-bootstrap-icons';
+import { useGetMessagesQuery } from '../api/messagesApi';
 
-const Messages = () => (
-  <Col className="p-0 h-100">
-    <div className="d-flex flex-column h-100">
-      <div className="bg-light mb-4 p-3 shadow-sm small">
-        <p className="m-0">
-          <b>#general</b>
-        </p>
-        <span className="text-muted">0 сообщений</span>
-      </div>
-      <div id="messages-box" className="chat-messages overflow-auto px-5 ">
-        Сообщения
-      </div>
-      <div className="mt-auto px-5 py-3">
-        <Form
-          noValidate
-          className="py-1 border rounded-2"
-        >
-          <Form.Group className="input-group">
-            <Form.Control
-              name="messageBody"
-              autoComplete="off"
-              aria-label="Новое сообщение"
-              placeholder="Введите сообщение..."
-              className="border-0 p-0 ps-2"
-            />
-            <Button type="submit" variant="light" className="border-0">
-              <span className="visually-hidden">Отправить</span>
-              <ArrowRightSquare />
-            </Button>
-          </Form.Group>
-        </Form>
-      </div>
-    </div>
-  </Col>
-);
+const Messages = () => {
+  const { data: messages = [] } = useGetMessagesQuery();
+  console.log(messages);
 
+  return (
+    <Col className="p-0 h-100">
+      <div className="d-flex flex-column h-100">
+        <div className="bg-light mb-4 p-3 shadow-sm small">
+          <p className="m-0">
+            <b>#general</b>
+          </p>
+          <span className="text-muted">0 сообщений</span>
+        </div>
+        <div id="messages-box" className="chat-messages overflow-auto px-5 ">
+          Сообщения
+        </div>
+        <div className="mt-auto px-5 py-3">
+          <Form
+            noValidate
+            className="py-1 border rounded-2"
+          >
+            <Form.Group className="input-group">
+              <Form.Control
+                name="messageBody"
+                autoComplete="off"
+                aria-label="Новое сообщение"
+                placeholder="Введите сообщение..."
+                className="border-0 p-0 ps-2"
+              />
+              <Button type="submit" variant="light" className="border-0">
+                <span className="visually-hidden">Отправить</span>
+                <ArrowRightSquare />
+              </Button>
+            </Form.Group>
+          </Form>
+        </div>
+      </div>
+    </Col>
+  );
+};
 export default Messages;