Fix cancel button, add debug console log fetchOrder

frontend/src/basic/NavBar/NavBar.tsx

@@ -25,6 +25,8 @@ const NavBar = (): JSX.Element => {
     useContext<UseAppStoreType>(AppContext);
   const { garage, orderUpdatedAt, robotUpdatedAt } = useContext<UseGarageStoreType>(GarageContext);
 
+  console.log('On NavBar "page" is:', page);
+
   const navigate = useNavigate();
   const location = useLocation();
   const smallBar = windowSize?.width < 50;
@@ -56,7 +58,7 @@ const NavBar = (): JSX.Element => {
     if (isPage(pathPage) && pathPage.includes('order')) {
       setPage(pathPage);
     }
-  }, [location, navigate, setPage, orderUpdatedAt, robotUpdatedAt]);
+  }, [location, navigate, orderUpdatedAt, robotUpdatedAt]);
 
   const handleSlideDirection = function (oldPage: Page, newPage: Page): void {
     const oldPos: number = pagesPosition[oldPage];

frontend/src/components/MakerForm/MakerForm.tsx

@@ -339,6 +339,7 @@ const MakerForm = ({
         })
         .catch(() => {
           setBadRequest('Request error');
+          setSubmittingRequest(false);
         });
     }
     setOpenDialogs(false);

frontend/src/components/TradeBox/CancelButton.tsx

@@ -22,13 +22,12 @@ const CancelButton = ({
   const { t } = useTranslation();
 
   const showCancelButton =
-    (order?.is_maker === true && [0, 1, 2].includes(order?.status)) ??
-    [3, 6, 7].includes(order?.status ?? -1);
-  const showCollabCancelButton =
-    [8, 9].includes(order?.status ?? -1) && !(order?.asked_for_cancel === true);
+    Boolean(order?.is_maker && [0, 1, 2].includes(order?.status)) ||
+    Boolean([3, 7].includes(order?.status ?? -1));
+  const showCollabCancelButton = order?.status === 9 && !order?.asked_for_cancel;
   const noConfirmation =
-    (order?.is_maker === true && [0, 1, 2].includes(order?.status ?? -1)) ??
-    (order?.is_taker === true && order?.status === 3);
+    Boolean(order?.is_maker && [0, 1, 2].includes(order?.status)) ||
+    Boolean(order?.is_taker && order?.status === 3);
 
   return (
     <Box>

frontend/src/contexts/AppContext.ts

@@ -175,6 +175,8 @@ export const useAppStore = (): UseAppStoreType => {
     initialAppContext.acknowledgedWarning,
   );
 
+  console.log('On AppContext "page" is:', page);
+
   useEffect(() => {
     setTheme(makeTheme(settings));
   }, [settings.fontSize, settings.mode, settings.lightQRs]);

frontend/src/contexts/FederationContext.ts

@@ -16,6 +16,7 @@ import { AppContext, type UseAppStoreType } from './AppContext';
 import { GarageContext, type UseGarageStoreType } from './GarageContext';
 
 // Refresh delays (ms) according to Order status
+const defaultDelay = 5000;
 const statusToDelay = [
   3000, // 'Waiting for maker bond'
   35000, // 'Public'
@@ -82,7 +83,7 @@ export const useFederationStore = (): UseFederationStoreType => {
   );
   const [federationUpdatedAt, setFederationUpdatedAt] = useState<string>(new Date().toISOString());
 
-  const [delay, setDelay] = useState<number>(5000);
+  const [delay, setDelay] = useState<number>(defaultDelay);
   const [timer, setTimer] = useState<NodeJS.Timer | undefined>(() =>
     setInterval(() => null, delay),
   );
@@ -100,54 +101,54 @@ export const useFederationStore = (): UseFederationStoreType => {
     setFederation(newFed);
   }, [settings.network, torStatus]);
 
+  console.log('On FederationContext "page" is:', page);
   const onOrderReceived = (order: Order): void => {
+    let newDelay = defaultDelay;
     if (order?.bad_request) {
+      newDelay = 99999999;
+      console.log('bad request on order, new delay', newDelay);
       setBadOrder(order.bad_request);
-      setDelay(99999999);
       garage.updateOrder(null);
     }
     if (order?.id) {
-      setDelay(
+      newDelay =
         order.status >= 0 && order.status <= 18
           ? page === 'order'
             ? statusToDelay[order.status]
             : statusToDelay[order.status] * 5 // If user is not looking at "order" tab, refresh less often.
-          : 99999999,
-      );
+          : 99999999;
+      console.log('has order id, new delay is', newDelay);
       garage.updateOrder(order);
       setBadOrder(undefined);
     }
+    console.log('page:', page, 'Why remains as initial page?');
+    console.log('setting delay!', newDelay);
+    setDelay(newDelay);
+    setTimer(setTimeout(fetchCurrentOrder, newDelay));
   };
 
   const fetchCurrentOrder: () => void = () => {
     const slot = garage?.getSlot();
     const robot = slot?.getRobot();
-    console.log('slot?.token', slot?.token);
-    console.log('slot?.activeShortAlias', slot?.activeShortAlias);
-    console.log('robot?.activeOrderId', robot?.activeOrderId);
     if (slot?.token && slot?.activeShortAlias && robot?.activeOrderId) {
       const coordinator = federation.getCoordinator(slot.activeShortAlias);
-      coordinator
-        ?.fetchOrder(robot.activeOrderId, robot, slot.token)
-        .then((order) => {
-          console.log('order', order);
-          onOrderReceived(order as Order);
-        })
-        .finally(() => {
-          setTimer(setTimeout(fetchCurrentOrder, delay));
-        });
+      void coordinator?.fetchOrder(robot.activeOrderId, robot, slot.token).then((order) => {
+        onOrderReceived(order as Order);
+      });
     } else {
-      setTimer(setTimeout(fetchCurrentOrder, delay));
+      console.log('Hit no order, delay', defaultDelay);
+      setTimer(setTimeout(fetchCurrentOrder, defaultDelay));
     }
   };
 
   useEffect(() => {
     clearInterval(timer);
     fetchCurrentOrder();
+    setDelay(defaultDelay);
     return () => {
       clearInterval(timer);
     };
-  }, []);
+  }, [coordinatorUpdatedAt, federationUpdatedAt]);
 
   useEffect(() => {
     if (page === 'offers') void federation.updateBook();