Изменения фронта
This commit is contained in:
parent
9c80825226
commit
f34c4f49d6
6 changed files with 62 additions and 20 deletions
|
@ -8,7 +8,7 @@ import AppZalupa from "./components/layout/AppZalupa.jsx";
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return <Layout>
|
return <Layout>
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
<AppZalupa />
|
{/*<AppZalupa />*/}
|
||||||
<Layout>
|
<Layout>
|
||||||
<AppContent />
|
<AppContent />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -1,13 +1,34 @@
|
||||||
export const users= await fetch('http://localhost:8000/api/users', {
|
import {cryptoData, cryptoAssets} from "./data.js";
|
||||||
method: "GET"
|
|
||||||
|
export function fakeFetchCrypto() {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve(cryptoData)
|
||||||
|
}, 2000)
|
||||||
})
|
})
|
||||||
.then(function (response) {
|
}
|
||||||
return response.json();
|
|
||||||
})
|
export function fetchAssets() {
|
||||||
.then(function (data) {
|
return new Promise(resolve => {
|
||||||
console.log(data);
|
setTimeout(() => {
|
||||||
return data;
|
resolve(cryptoAssets)
|
||||||
})
|
}, 2000)
|
||||||
.catch(function (error) {
|
})
|
||||||
console.log('Ошибка:', error);
|
}
|
||||||
});
|
|
||||||
|
export async function fetchUsers() {
|
||||||
|
return (fetch('http://localhost:8000/api/users', {
|
||||||
|
method: "GET"
|
||||||
|
})
|
||||||
|
.then(function (res) {
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(function (data) {
|
||||||
|
console.log(data);
|
||||||
|
return data;
|
||||||
|
})
|
||||||
|
.catch(function (err) {
|
||||||
|
console.log('Ошибка:', err);
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
import {Layout} from "antd";
|
import {Layout, Spin} from "antd";
|
||||||
import {users} from "../../api.js";
|
import {fakeFetchCrypto, fetchAssets, fetchUsers} from "../../api.js";
|
||||||
|
import {useEffect, useState} from "react";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -12,6 +13,26 @@ const contentStyle = {
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function () {
|
|
||||||
return (<Layout.Content style={contentStyle}>users</Layout.Content>)
|
|
||||||
|
export default function AppContent() {
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [users, setUsers] = useState([])
|
||||||
|
const [assets, setAssets] = useState([])
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function preload() {
|
||||||
|
const result = await fetchUsers()
|
||||||
|
|
||||||
|
setUsers(result)
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
preload()
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <Spin fullscreen/>
|
||||||
|
}
|
||||||
|
return (<Layout.Content style={contentStyle}>{users[0].email}</Layout.Content>)
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,6 +6,6 @@ const footerStyle = {
|
||||||
backgroundColor: '#4096ff',
|
backgroundColor: '#4096ff',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function () {
|
export default function AppFooter() {
|
||||||
return (<Layout.Footer style={footerStyle}>Footer</Layout.Footer>)
|
return (<Layout.Footer style={footerStyle}>Footer</Layout.Footer>)
|
||||||
}
|
}
|
|
@ -8,6 +8,6 @@ const headerStyle = {
|
||||||
backgroundColor: '#4096ff',
|
backgroundColor: '#4096ff',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function () {
|
export default function AppHeader() {
|
||||||
return (<Layout.Header style={headerStyle}>Header</Layout.Header>)
|
return (<Layout.Header style={headerStyle}>Header</Layout.Header>)
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { Avatar, Button, Skeleton, List} from 'antd';
|
||||||
const count = 3;
|
const count = 3;
|
||||||
const fakeDataUrl = `http://localhost:8000/api/users`;
|
const fakeDataUrl = `http://localhost:8000/api/users`;
|
||||||
|
|
||||||
export default function () {
|
export default function AppZalupa() {
|
||||||
const [initLoading, setInitLoading] = useState(true);
|
const [initLoading, setInitLoading] = useState(true);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [data, setData] = useState([]);
|
const [data, setData] = useState([]);
|
||||||
|
|
Loading…
Add table
Reference in a new issue