urec/chat_back
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Browse source
This commit is contained in:
urec56 2024-02-06 21:14:14 +03:00
parent 4048619221
commit 48da59ad19
10 changed files with 1093 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
chat_test/app/users/chat/router.py
View file

@ -16,8 +16,9 @@ router = APIRouter(
@router.get("")
async def root():
return [1]
async def root(user: Users = Depends(get_current_user)):
print(user)
return user.id
@router.post("", status_code=status.HTTP_201_CREATED)

2
front/index.html
View file

@ -8,6 +8,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script type="module" src="/src/chat/main.jsx"></script>
</body>
</html>

939
front/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
front/package.json
View file

@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"antd": "^5.14.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},

42
front/src/chat/App.jsx
View file

@ -1,35 +1,17 @@
import { DatePicker } from "antd";
import { Layout, Flex } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
const headerStyle = {
textAlign: 'center',
color: '#fff',
paddingInline: 48,
lineHeight: '64px',
backgroundColor: '#4096ff',
};
const contentStyle = {
textAlign: 'center',
minHeight: 120,
lineHeight: 'calc(100vh - 64px)',
color: '#fff',
backgroundColor: '#001529',
};
const footerStyle = {
textAlign: 'center',
color: '#fff',
backgroundColor: '#4096ff',
};
const layoutStyle = {
borderRadius: 8,
overflow: 'hidden',
};
import { Layout } from 'antd';
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";
export default function App() {
return <Layout style={layoutStyle}>
<Header style={headerStyle}>Header</Header>
return <Layout>
<AppHeader />
<AppZalupa />
<Layout>
<Content style={contentStyle}>Content</Content>
<AppContent />
</Layout>
<Footer style={footerStyle}>Footer</Footer>
<AppFooter />
</Layout>
}

13
front/src/chat/api.js Normal file
View file

@ -0,0 +1,13 @@
export const users= await fetch('http://localhost:8000/api/users', {
method: "GET"
})
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
return data;
})
.catch(function (error) {
console.log('Ошибка:', error);
});

17
front/src/chat/components/AppContent.jsx Normal file
View file

@ -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>)
}

11
front/src/chat/components/AppFooter.jsx Normal file
View file

@ -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>)
}

13
front/src/chat/components/AppHeader.jsx Normal file
View file

@ -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>)
}

85
front/src/chat/components/AppZalupa.jsx Normal file
View file

@ -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>
)}
/>
);
};