mirror of
https://github.com/c9s/bbgo.git
synced 2024-11-10 09:11:55 +00:00
frontend: show syncing status
This commit is contained in:
parent
93f7616f14
commit
52ae59eb99
43
frontend/components/SyncButton.tsx
Normal file
43
frontend/components/SyncButton.tsx
Normal file
|
@ -0,0 +1,43 @@
|
|||
import {styled} from "@mui/styles";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {querySyncStatus, SyncStatus, triggerSync} from "../api/bbgo";
|
||||
import useInterval from "../hooks/useInterval";
|
||||
|
||||
const ToolbarButton = styled('button')(({ theme }) => ({
|
||||
padding: theme.spacing(1),
|
||||
}));
|
||||
|
||||
export default function SyncButton() {
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
|
||||
const sync = async () => {
|
||||
try {
|
||||
setSyncing(true);
|
||||
await triggerSync();
|
||||
} catch {
|
||||
setSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
sync();
|
||||
}, [])
|
||||
|
||||
useInterval(() => {
|
||||
querySyncStatus().then(s => {
|
||||
if (s !== SyncStatus.Syncing) {
|
||||
setSyncing(false);
|
||||
}
|
||||
})
|
||||
}, 2000)
|
||||
|
||||
return (
|
||||
<ToolbarButton
|
||||
disabled={syncing}
|
||||
onClick={sync}
|
||||
>
|
||||
{syncing ? 'Syncing...' : 'Sync'}
|
||||
</ToolbarButton>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +1,16 @@
|
|||
import React from 'react';
|
||||
|
||||
import { makeStyles, styled } from '@mui/styles';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
|
||||
import SideBar from '../components/SideBar';
|
||||
import SyncButton from '../components/SyncButton';
|
||||
|
||||
import ConnectWallet from '../components/ConnectWallet';
|
||||
import { Box } from '@mui/material';
|
||||
import { throttle } from '../src/utils';
|
||||
import { triggerSync } from '../api/bbgo';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
|
@ -33,18 +32,6 @@ const useStyles = makeStyles((theme) => ({
|
|||
},
|
||||
}));
|
||||
|
||||
const ToolbarButton = styled('button')(({ theme }) => ({
|
||||
padding: theme.spacing(1),
|
||||
}));
|
||||
|
||||
function SyncButton() {
|
||||
const handleClick = throttle(async () => {
|
||||
await triggerSync();
|
||||
}, 2000);
|
||||
|
||||
return <ToolbarButton onClick={handleClick}>Sync</ToolbarButton>;
|
||||
}
|
||||
|
||||
export default function DashboardLayout({ children }) {
|
||||
const classes = useStyles();
|
||||
|
||||
|
|
|
@ -7,7 +7,6 @@ import { ThemeProvider } from '@mui/material/styles';
|
|||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import theme from '../src/theme';
|
||||
import '../styles/globals.css';
|
||||
import { triggerSync } from '../api/bbgo';
|
||||
|
||||
export default function MyApp(props) {
|
||||
const { Component, pageProps } = props;
|
||||
|
@ -20,10 +19,6 @@ export default function MyApp(props) {
|
|||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
triggerSync();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Head>
|
||||
|
|
Loading…
Reference in New Issue
Block a user