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

chat_test/requirements.txt

@@ -9,7 +9,6 @@ async-timeout==4.0.3
 asyncpg==0.29.0
 attrs==23.2.0
 autoflake==2.2.1
-bcrypt==4.1.2
 billiard==4.2.0
 black==23.12.1
 celery==5.3.6
@@ -99,3 +98,5 @@ WTForms==3.1.2
 yarl==1.9.4
 zope.event==5.0
 zope.interface==6.1
+pywin32==305; platform_system=="Windows"
+bcrypt==4.1.2; platform_system=="Windows"

front/package-lock.json

@@ -3845,9 +3845,9 @@
       }
     },
     "node_modules/rc-picker": {
-      "version": "4.0.0-alpha.43",
-      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-4.0.0-alpha.43.tgz",
-      "integrity": "sha512-Rw9zYPZ+PsqfwfK0XoN9+l8elZOa63OwILaz+KzXh36itdSOwJNw27Sm4VMUqp2ssmhsWDrPF19Joq4DNszq7g==",
+      "version": "4.0.0-alpha.44",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-4.0.0-alpha.44.tgz",
+      "integrity": "sha512-OvzzTS4UZDT1qRfv4PRK/+LDpXWJ6sD0zv5LPC7fvprihT/YVvjrOQPicWLlw5GqrrqP4hqbQkWB4KXDNlb5ag==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.5.0",

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

@@ -0,0 +1,17 @@
+import {Layout} from "antd";
+import {users} from "../../api.js";
+
+
+
+const contentStyle = {
+  textAlign: 'center',
+  minHeight: 120,
+  lineHeight: 'calc(100vh - 64px)',
+  color: '#fff',
+  backgroundColor: '#001529',
+  padding: '1rem',
+};
+
+export default function () {
+    return (<Layout.Content style={contentStyle}>users</Layout.Content>)
+}

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

@@ -0,0 +1,11 @@
+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/layout/AppHeader.jsx

@@ -0,0 +1,13 @@
+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/layout/AppZalupa.jsx

@@ -0,0 +1,85 @@
+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>
+      )}
+    />
+  );
+};
+
+
+