frontend: show syncing status

This commit is contained in:
ycdesu 2022-06-15 11:37:05 +08:00
parent 93f7616f14
commit 52ae59eb99
3 changed files with 45 additions and 20 deletions

View 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>
);
}

View File

@ -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();

View File

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