From 91bbc4c9f50e9a94bdbf4d1b3b3764ae9930de96 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Thu, 27 Apr 2023 02:57:52 -0700
Subject: [PATCH] Fix blank route and loading spinner on order page change

---
 frontend/src/basic/NavBar/NavBar.tsx   | 7 +++++--
 frontend/src/basic/OrderPage/index.tsx | 9 ++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx
index fbd45e95..74356e3a 100644
--- a/frontend/src/basic/NavBar/NavBar.tsx
+++ b/frontend/src/basic/NavBar/NavBar.tsx
@@ -54,8 +54,11 @@ const NavBar = ({ width, height }: NavBarProps): JSX.Element => {
   };
 
   useEffect(() => {
-    const pathPage = location.pathname.split('/')[1];
-    setPage(pathPage);
+    // change tab (page) into the current route
+    const pathPage: Page = location.pathname.split('/')[1];
+    if (pathPage) {
+      setPage(pathPage);
+    }
   }, [location]);
 
   const handleSlideDirection = function (oldPage: Page, newPage: Page) {
diff --git a/frontend/src/basic/OrderPage/index.tsx b/frontend/src/basic/OrderPage/index.tsx
index 57307246..948be1b8 100644
--- a/frontend/src/basic/OrderPage/index.tsx
+++ b/frontend/src/basic/OrderPage/index.tsx
@@ -17,6 +17,8 @@ const OrderPage = (): JSX.Element => {
     robot,
     settings,
     setOrder,
+    clearOrder,
+    currentOrder,
     setCurrentOrder,
     badOrder,
     setBadOrder,
@@ -32,7 +34,12 @@ const OrderPage = (): JSX.Element => {
 
   const [tab, setTab] = useState<'order' | 'contract'>('contract');
 
-  useEffect(() => setCurrentOrder(Number(params.orderId)), [params.orderId]);
+  useEffect(() => {
+    setCurrentOrder(Number(params.orderId));
+    if (currentOrder != params.orderId) {
+      clearOrder();
+    }
+  }, [params.orderId]);
 
   const renewOrder = function () {
     if (order != undefined) {