Merge pull request #715 from c9s/yc/on-demand-sync-button

feature: on demand sync button

frontend/api/bbgo.ts

@@ -10,15 +10,23 @@ export function ping(cb) {
 }
 
 export function queryOutboundIP(cb) {
-  return axios.get(baseURL + '/api/outbound-ip').then((response) => {
+  return axios.get<any>(baseURL + '/api/outbound-ip').then((response) => {
     cb(response.data.outboundIP);
   });
 }
 
+const triggerSync = async () => {
+  return axios.post<any>(baseURL + '/api/environment/sync');
+};
+
+export { triggerSync };
+
 export function querySyncStatus(cb) {
-  return axios.get(baseURL + '/api/environment/syncing').then((response) => {
-    cb(response.data.syncing);
-  });
+  return axios
+    .get<any>(baseURL + '/api/environment/syncing')
+    .then((response) => {
+      cb(response.data.syncing);
+    });
 }
 
 export function testDatabaseConnection(params, cb) {
@@ -73,48 +81,50 @@ export function testSessionConnection(session, cb) {
 }
 
 export function queryStrategies(cb) {
-  return axios.get(baseURL + '/api/strategies/single').then((response) => {
+  return axios.get<any>(baseURL + '/api/strategies/single').then((response) => {
     cb(response.data.strategies || []);
   });
 }
 
 export function querySessions(cb) {
-  return axios.get(baseURL + '/api/sessions', {}).then((response) => {
+  return axios.get<any>(baseURL + '/api/sessions', {}).then((response) => {
     cb(response.data.sessions || []);
   });
 }
 
 export function querySessionSymbols(sessionName, cb) {
   return axios
-    .get(baseURL + `/api/sessions/${sessionName}/symbols`, {})
+    .get<any>(baseURL + `/api/sessions/${sessionName}/symbols`, {})
     .then((response) => {
-      cb(response.data.symbols || []);
+      cb(response.data?.symbols || []);
     });
 }
 
 export function queryTrades(params, cb) {
-  axios.get(baseURL + '/api/trades', { params: params }).then((response) => {
-    cb(response.data.trades || []);
-  });
+  axios
+    .get<any>(baseURL + '/api/trades', { params: params })
+    .then((response) => {
+      cb(response.data.trades || []);
+    });
 }
 
 export function queryClosedOrders(params, cb) {
   axios
-    .get(baseURL + '/api/orders/closed', { params: params })
+    .get<any>(baseURL + '/api/orders/closed', { params: params })
     .then((response) => {
       cb(response.data.orders || []);
     });
 }
 
 export function queryAssets(cb) {
-  axios.get(baseURL + '/api/assets', {}).then((response) => {
+  axios.get<any>(baseURL + '/api/assets', {}).then((response) => {
     cb(response.data.assets || []);
   });
 }
 
 export function queryTradingVolume(params, cb) {
   axios
-    .get(baseURL + '/api/trading-volume', { params: params })
+    .get<any>(baseURL + '/api/trading-volume', { params: params })
     .then((response) => {
       cb(response.data.tradingVolumes || []);
     });

frontend/layouts/DashboardLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { makeStyles } from '@mui/styles';
+import { makeStyles, styled } from '@mui/styles';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
@@ -9,6 +9,9 @@ import Container from '@mui/material/Container';
 import SideBar from '../components/SideBar';
 
 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: {
@@ -30,6 +33,18 @@ 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();
 
@@ -40,7 +55,8 @@ export default function DashboardLayout({ children }) {
           <Typography variant="h6" className={classes.title}>
             BBGO
           </Typography>
-          {/* <Button color="inherit">Login</Button> */}
+          <Box sx={{ flexGrow: 1 }} />
+          <SyncButton />
           <ConnectWallet />
         </Toolbar>
       </AppBar>

frontend/src/utils.js

@@ -24,3 +24,14 @@ export function currencyColor(currency) {
       return '#4A7DED';
   }
 }
+
+export function throttle(fn, delayMillis) {
+  let permitted = true;
+  return () => {
+    if (permitted) {
+      fn.apply(this, arguments);
+      permitted = false;
+      setTimeout(() => (permitted = true), delayMillis);
+    }
+  };
+}