Improve book refresh behavior other minor fixes

frontend/src/components/BookPage.js

@@ -33,15 +33,20 @@ class BookPage extends Component {
   }
 
   componentDidMount = () => {
-    this.getOrderDetails();
+    if (this.props.bookOrders.length < 1) {
+      this.getOrderDetails(true, false);
+    } else {
+      this.getOrderDetails(false, true);
+    }
   };
 
-  getOrderDetails() {
+  getOrderDetails(loading, refreshing) {
-    this.props.setAppState({ bookLoading: true });
+    this.props.setAppState({ bookLoading: loading, bookRefreshing: refreshing });
     apiClient.get('/api/book/').then((data) =>
       this.props.setAppState({
         bookNotFound: data.not_found,
         bookLoading: false,
+        bookRefreshing: false,
         bookOrders: data,
       }),
     );
@@ -131,6 +136,8 @@ class BookPage extends Component {
           <Grid item xs={tableWidthXS} style={{ width: `${bookTableWidth}em` }}>
             <BookTable
               loading={this.props.bookLoading}
+              refreshing={this.props.bookRefreshing}
+              clickRefresh={() => this.getOrderDetails(false, true)}
               orders={this.props.bookOrders}
               type={this.props.type}
               currency={this.props.currency}
@@ -179,6 +186,8 @@ class BookPage extends Component {
         return (
           <BookTable
             loading={this.props.bookLoading}
+            refreshing={this.props.bookRefreshing}
+            clickRefresh={() => this.getOrderDetails(false, true)}
             orders={this.props.bookOrders}
             type={this.props.type}
             currency={this.props.currency}
@@ -217,13 +226,6 @@ class BookPage extends Component {
     const { t } = this.props;
     return (
       <>
-        <IconButton
-          sx={{ position: 'fixed', right: '0px', top: '30px' }}
-          onClick={() => this.setState({ loading: true }) & this.getOrderDetails()}
-        >
-          <Refresh />
-        </IconButton>
-
         <Grid item xs={6} align='right'>
           <FormControl align='center'>
             <FormHelperText align='center' sx={{ textAlign: 'center' }}>

frontend/src/components/BookTable.tsx

@@ -13,6 +13,7 @@ import {
   ListItemAvatar,
   useTheme,
   CircularProgress,
+  LinearProgress,
   IconButton,
 } from '@mui/material';
 import { DataGrid, GridFooterPlaceholder, GridPagination } from '@mui/x-data-grid';
@@ -27,11 +28,11 @@ import hexToRgb from '../utils/hexToRgb';
 import statusBadgeColor from '../utils/statusBadgeColor';
 
 // Icons
-import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import { Fullscreen, FullscreenExit, Refresh } from '@mui/icons-material';
-import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 
 interface Props {
   loading: boolean;
+  clickRefresh: () => void;
   orders: Order[];
   type: number;
   currency: number;
@@ -44,6 +45,8 @@ interface Props {
 
 const BookTable = ({
   loading,
+  refreshing,
+  clickRefresh,
   orders,
   type,
   currency,
@@ -426,7 +429,9 @@ const BookTable = ({
       renderCell: (params) => {
         return (
           <div style={{ cursor: 'pointer' }}>
-            {`${pn(Math.round(params.row.satoshis_now / 1000))}K`}
+            {params.row.satoshis_now > 1000000
+              ? `${pn(Math.round(params.row.satoshis_now / 10000) / 100)} M`
+              : `${pn(Math.round(params.row.satoshis_now / 1000))} K`}
           </div>
         );
       },
@@ -512,7 +517,7 @@ const BookTable = ({
       priority: 7,
       order: 7,
       normal: {
-        width: 5.8,
+        width: 5,
         object: expiryObj,
       },
     },
@@ -582,6 +587,7 @@ const BookTable = ({
   const [columns, width] = filteredColumns(fullscreen ? fullWidth : maxWidth);
 
   const gridComponents = {
+    LoadingOverlay: LinearProgress,
     NoResultsOverlay: () => (
       <Stack height='100%' alignItems='center' justifyContent='center'>
         {t('Filter has no results')}
@@ -590,10 +596,20 @@ const BookTable = ({
     Footer: () => (
       <Grid container alignItems='center' direction='row' justifyContent='space-between'>
         <Grid item>
-          <IconButton onClick={() => setFullscreen(!fullscreen)}>
+          <Grid container alignItems='center' direction='row'>
-            {fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+            <Grid item xs={6}>
-          </IconButton>
+              <IconButton onClick={() => setFullscreen(!fullscreen)}>
+                {fullscreen ? <FullscreenExit /> : <Fullscreen />}
+              </IconButton>
+            </Grid>
+            <Grid item xs={6}>
+              <IconButton onClick={clickRefresh}>
+                <Refresh />
+              </IconButton>
+            </Grid>
+          </Grid>
         </Grid>
+
         <Grid item>
           <GridPagination />
         </Grid>
@@ -610,7 +626,7 @@ const BookTable = ({
             (order) =>
               (order.type == type || type == null) && (order.currency == currency || currency == 0),
           )}
-          loading={loading}
+          loading={loading || refreshing}
           columns={columns}
           components={gridComponents}
           pageSize={loading ? 0 : pageSize}
@@ -634,7 +650,7 @@ const BookTable = ({
                 (order.type == type || type == null) &&
                 (order.currency == currency || currency == 0),
             )}
-            loading={loading}
+            loading={loading || refreshing}
             columns={columns}
             components={gridComponents}
             pageSize={loading ? 0 : pageSize}

frontend/src/components/Charts/DepthChart/index.tsx

@@ -33,7 +33,6 @@ import { apiClient } from '../../../services/api/index';
 import statusBadgeColor from '../../../utils/statusBadgeColor';
 
 interface DepthChartProps {
-  bookLoading: boolean;
   orders: Order[];
   lastDayPremium: number | undefined;
   currency: number;
@@ -44,7 +43,6 @@ interface DepthChartProps {
 }
 
 const DepthChart: React.FC<DepthChartProps> = ({
-  bookLoading,
   orders,
   lastDayPremium,
   currency,
@@ -291,7 +289,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
   return (
     <Paper style={{ width: `${width}em`, maxHeight: `${height}em` }}>
       <Paper variant='outlined'>
-        {bookLoading || center == undefined || enrichedOrders.length < 1 ? (
+        {center == undefined || enrichedOrders.length < 1 ? (
           <div
             style={{
               display: 'flex',

frontend/src/components/HomePage.js

@@ -22,6 +22,7 @@ export default class HomePage extends Component {
       bookCurrencyCode: 'ANY',
       bookOrders: new Array(),
       bookLoading: true,
+      bookRefreshing: false,
       activeOrderId: null,
       lastOrderId: null,
       earnedRewards: 0,

frontend/src/services/Native/index.d.ts

@@ -8,7 +8,7 @@ declare global {
 }
 
 export interface ReactNativeWebView {
-  postMessage(message: string): void;
+  postMessage: (message: string) => void;
 }
 
 export interface NativeWebViewMessageHttp {

frontend/src/services/Native/index.ts

@@ -29,7 +29,7 @@ class NativeRobosats {
     }
   };
 
-  public postMessage: (message: NativeWebViewMessage) => Promise<{ [key: string]: any }> = (
+  public postMessage: (message: NativeWebViewMessage) => Promise<{ [key: string]: any }> = async (
     message,
   ) => {
     this.messageCounter += 1;
@@ -37,11 +37,11 @@ class NativeRobosats {
     const json = JSON.stringify(message);
     window.ReactNativeWebView?.postMessage(json);
 
-    return new Promise<object>(async (resolve, reject) => {
+    return await new Promise<object>(async (resolve, reject) => {
       if (message.id) {
         this.pendingMessages[message.id] = {
-          resolve: resolve,
+          resolve,
-          reject: reject,
+          reject,
         };
       }
     });

frontend/src/services/api/ApiNativeClient/index.ts

@@ -14,11 +14,11 @@ class ApiNativeClient implements ApiClient {
   };
 
   public put: (path: string, body: object) => Promise<object | undefined> = async (path, body) => {
-    return new Promise((res, _rej) => res({}));
+    return await new Promise((res, _rej) => res({}));
   };
 
   public delete: (path: string) => Promise<object | undefined> = async (path) => {
-    return window.NativeRobosats?.postMessage({
+    return await window.NativeRobosats?.postMessage({
       category: 'http',
       type: 'delete',
       path,
@@ -27,7 +27,7 @@ class ApiNativeClient implements ApiClient {
   };
 
   public post: (path: string, body: object) => Promise<object | undefined> = async (path, body) => {
-    return window.NativeRobosats?.postMessage({
+    return await window.NativeRobosats?.postMessage({
       category: 'http',
       type: 'post',
       path,
@@ -37,7 +37,7 @@ class ApiNativeClient implements ApiClient {
   };
 
   public get: (path: string) => Promise<object | undefined> = async (path) => {
-    return window.NativeRobosats?.postMessage({
+    return await window.NativeRobosats?.postMessage({
       category: 'http',
       type: 'get',
       path,

frontend/src/services/api/index.ts

@@ -9,6 +9,5 @@ export interface ApiClient {
   fileImageUrl: (path: string) => Promise<string | undefined>;
 }
 
-export const apiClient: ApiClient = window.ReactNativeWebView
+export const apiClient: ApiClient =
-  ? new ApiNativeClient()
+  window.ReactNativeWebView != null ? new ApiNativeClient() : new ApiWebClient();
-  : new ApiWebClient();