Fix book table object updates (#1078)

* Get favorites from context * Rerender objects on favorite mode change * Format sats amount in millionths
RoboSats · Jan 22, 2024 · e94ae01 · e94ae01
1 parent 180f79a
commit e94ae01
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/frontend/src/components/BookTable/BookControl.tsx b/frontend/src/components/BookTable/BookControl.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Typography,
@@ -16,26 +16,24 @@ import { useTheme } from '@mui/system';
 import { AutocompletePayments } from '../MakerForm';
 import { fiatMethods, swapMethods, PaymentIcon } from '../PaymentMethods';
 import { FlagWithProps } from '../Icons';
+import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import { type Favorites } from '../../models';
 import SwapCalls from '@mui/icons-material/SwapCalls';
 
 interface BookControlProps {
   width: number;
-  fav: Favorites;
-  setFav: (state: Favorites) => void;
   paymentMethod: string[];
   setPaymentMethods: () => void;
 }
 
 const BookControl = ({
   width,
-  fav,
-  setFav,
   paymentMethod,
   setPaymentMethods,
 }: BookControlProps): JSX.Element => {
+  const { fav, setFav } = useContext<UseAppStoreType>(AppContext);
+
   const { t, i18n } = useTranslation();
   const theme = useTheme();
 

diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx
@@ -103,7 +103,7 @@ const BookTable = ({
   showNoResults = true,
   onOrderClicked = () => null,
 }: BookTableProps): JSX.Element => {
-  const { book, fetchBook, fav, setFav, baseUrl } = useContext<UseAppStoreType>(AppContext);
+  const { book, fetchBook, fav, baseUrl } = useContext<UseAppStoreType>(AppContext);
 
   const { t } = useTranslation();
   const theme = useTheme();
@@ -255,7 +255,7 @@ const BookTable = ({
           ? t(fav.mode === 'fiat' ? 'Seller' : 'Swapping Out')
           : t(fav.mode === 'fiat' ? 'Buyer' : 'Swapping In'),
     };
-  }, []);
+  }, [fav.mode]);
 
   const amountObj = useCallback((width: number) => {
     return {
@@ -264,20 +264,20 @@ const BookTable = ({
       type: 'number',
       width: width * fontSize,
       renderCell: (params: any) => {
-        const amount = fav.mode === 'swap' ? params.row.amount * 100000 : params.row.amount;
+        const amount = fav.mode === 'swap' ? params.row.amount * 100 : params.row.amount;
         const minAmount =
-          fav.mode === 'swap' ? params.row.min_amount * 100000 : params.row.min_amount;
+          fav.mode === 'swap' ? params.row.min_amount * 100 : params.row.min_amount;
         const maxAmount =
-          fav.mode === 'swap' ? params.row.max_amount * 100000 : params.row.max_amount;
+          fav.mode === 'swap' ? params.row.max_amount * 100 : params.row.max_amount;
         return (
           <div style={{ cursor: 'pointer' }}>
             {amountToString(amount, params.row.has_range, minAmount, maxAmount) +
-              (fav.mode === 'swap' ? 'K Sats' : '')}
+              (fav.mode === 'swap' ? 'M Sats' : '')}
           </div>
         );
       },
     };
-  }, []);
+  }, [fav.mode]);
 
   const currencyObj = useCallback((width: number) => {
     return {
@@ -322,7 +322,7 @@ const BookTable = ({
         );
       },
     };
-  }, []);
+  }, [fav.mode]);
 
   const paymentSmallObj = useCallback((width: number) => {
     return {
@@ -797,8 +797,6 @@ const BookTable = ({
           componentsProps={{
             toolbar: {
               width,
-              fav,
-              setFav,
               paymentMethod: paymentMethods,
               setPaymentMethods,
             },
@@ -834,8 +832,6 @@ const BookTable = ({
             componentsProps={{
               toolbar: {
                 width,
-                fav,
-                setFav,
                 paymentMethod: paymentMethods,
                 setPaymentMethods,
               },