From 3b0e740ea2dd5e58fb6abae72d564cb967a9136d Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Thu, 29 Sep 2022 15:14:54 -0700 Subject: [PATCH] Improve book refresh behavior other minor fixes --- frontend/src/components/BookPage.js | 22 ++++++------ frontend/src/components/BookTable.tsx | 34 ++++++++++++++----- .../components/Charts/DepthChart/index.tsx | 4 +-- frontend/src/components/HomePage.js | 1 + frontend/src/services/Native/index.d.ts | 2 +- frontend/src/services/Native/index.ts | 8 ++--- .../src/services/api/ApiNativeClient/index.ts | 8 ++--- frontend/src/services/api/index.ts | 5 ++- 8 files changed, 50 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js index dc90ee18..4c2c6983 100644 --- a/frontend/src/components/BookPage.js +++ b/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() { - this.props.setAppState({ bookLoading: true }); + getOrderDetails(loading, refreshing) { + 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 { 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 ( 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 ( <> - this.setState({ loading: true }) & this.getOrderDetails()} - > - - - diff --git a/frontend/src/components/BookTable.tsx b/frontend/src/components/BookTable.tsx index 60cd90e7..0fedb01a 100644 --- a/frontend/src/components/BookTable.tsx +++ b/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 FullscreenExitIcon from '@mui/icons-material/FullscreenExit'; +import { Fullscreen, FullscreenExit, Refresh } from '@mui/icons-material'; 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 (
- {`${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`}
); }, @@ -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: () => ( {t('Filter has no results')} @@ -590,10 +596,20 @@ const BookTable = ({ Footer: () => ( - setFullscreen(!fullscreen)}> - {fullscreen ? : } - + + + setFullscreen(!fullscreen)}> + {fullscreen ? : } + + + + + + + + + @@ -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} diff --git a/frontend/src/components/Charts/DepthChart/index.tsx b/frontend/src/components/Charts/DepthChart/index.tsx index 8f4051f0..e8ab70ef 100644 --- a/frontend/src/components/Charts/DepthChart/index.tsx +++ b/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 = ({ - bookLoading, orders, lastDayPremium, currency, @@ -291,7 +289,7 @@ const DepthChart: React.FC = ({ return ( - {bookLoading || center == undefined || enrichedOrders.length < 1 ? ( + {center == undefined || enrichedOrders.length < 1 ? (
void; } export interface NativeWebViewMessageHttp { diff --git a/frontend/src/services/Native/index.ts b/frontend/src/services/Native/index.ts index cbdabc42..8c94de9b 100644 --- a/frontend/src/services/Native/index.ts +++ b/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(async (resolve, reject) => { + return await new Promise(async (resolve, reject) => { if (message.id) { this.pendingMessages[message.id] = { - resolve: resolve, - reject: reject, + resolve, + reject, }; } }); diff --git a/frontend/src/services/api/ApiNativeClient/index.ts b/frontend/src/services/api/ApiNativeClient/index.ts index 5e128db1..d9219ae2 100644 --- a/frontend/src/services/api/ApiNativeClient/index.ts +++ b/frontend/src/services/api/ApiNativeClient/index.ts @@ -14,11 +14,11 @@ class ApiNativeClient implements ApiClient { }; public put: (path: string, body: object) => Promise = async (path, body) => { - return new Promise((res, _rej) => res({})); + return await new Promise((res, _rej) => res({})); }; public delete: (path: string) => Promise = 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 = 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 = async (path) => { - return window.NativeRobosats?.postMessage({ + return await window.NativeRobosats?.postMessage({ category: 'http', type: 'get', path, diff --git a/frontend/src/services/api/index.ts b/frontend/src/services/api/index.ts index 367dcf8b..03e7cc21 100644 --- a/frontend/src/services/api/index.ts +++ b/frontend/src/services/api/index.ts @@ -9,6 +9,5 @@ export interface ApiClient { fileImageUrl: (path: string) => Promise; } -export const apiClient: ApiClient = window.ReactNativeWebView - ? new ApiNativeClient() - : new ApiWebClient(); +export const apiClient: ApiClient = + window.ReactNativeWebView != null ? new ApiNativeClient() : new ApiWebClient();