From 4f2ef09c6f8a7d3689785c5709e79ae336720741 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <90936742+Reckless-Satoshi@users.noreply.github.com>
Date: Wed, 26 Apr 2023 12:10:21 +0000
Subject: [PATCH] Simplify routing (#458)

* Fix payment methods as icons memo

* Simplify pages / router

* Load current order on robotfetch
---
 frontend/src/basic/BookPage/index.tsx         | 20 +++--------------
 frontend/src/basic/Main.tsx                   |  2 --
 frontend/src/basic/MainDialogs/index.tsx      |  3 +--
 frontend/src/basic/MakerPage/index.tsx        | 22 +++----------------
 frontend/src/basic/NavBar/NavBar.tsx          |  9 +++++++-
 frontend/src/basic/OrderPage/index.tsx        | 10 +++------
 frontend/src/basic/RobotPage/Onboarding.tsx   | 11 ++--------
 frontend/src/basic/RobotPage/RobotProfile.tsx |  8 ++-----
 frontend/src/basic/RobotPage/index.tsx        |  5 +----
 frontend/src/components/Dialogs/NoRobot.tsx   |  3 ---
 frontend/src/components/Dialogs/Profile.tsx   | 20 +++--------------
 .../src/components/MakerForm/MakerForm.tsx    |  3 +--
 .../src/components/Notifications/index.tsx    |  3 ---
 frontend/src/contexts/AppContext.ts           | 16 ++++++++------
 frontend/src/pro/Main.tsx                     |  2 --
 15 files changed, 36 insertions(+), 101 deletions(-)

diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx
index 463fd4c0..1aa10063 100644
--- a/frontend/src/basic/BookPage/index.tsx
+++ b/frontend/src/basic/BookPage/index.tsx
@@ -13,18 +13,8 @@ import { BarChart, FormatListBulleted } from '@mui/icons-material';
 import { AppContext, UseAppStoreType } from '../../contexts/AppContext';
 
 const BookPage = (): JSX.Element => {
-  const {
-    robot,
-    fetchBook,
-    clearOrder,
-    windowSize,
-    setPage,
-    setCurrentOrder,
-    baseUrl,
-    book,
-    setDelay,
-    setOrder,
-  } = useContext<UseAppStoreType>(AppContext);
+  const { robot, fetchBook, windowSize, book, setDelay, setOrder } =
+    useContext<UseAppStoreType>(AppContext);
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [view, setView] = useState<'list' | 'depth'>('list');
@@ -48,8 +38,6 @@ const BookPage = (): JSX.Element => {
   const onOrderClicked = function (id: number) {
     if (robot.avatarLoaded) {
       navigate('/order/' + id);
-      setPage('order');
-      setCurrentOrder(id);
       onViewOrder();
     } else {
       setOpenNoRobot(true);
@@ -87,15 +75,13 @@ const BookPage = (): JSX.Element => {
 
   return (
     <Grid container direction='column' alignItems='center' spacing={1} sx={{ minWidth: 400 }}>
-      <NoRobotDialog open={openNoRobot} onClose={() => setOpenNoRobot(false)} setPage={setPage} />
+      <NoRobotDialog open={openNoRobot} onClose={() => setOpenNoRobot(false)} />
       {openMaker ? (
         <Dialog open={openMaker} onClose={() => setOpenMaker(false)}>
           <Box sx={{ maxWidth: '18em', padding: '0.5em' }}>
             <MakerForm
               hasRobot={robot.avatarLoaded}
               onOrderCreated={(id) => {
-                clearOrder();
-                setCurrentOrder(id);
                 setPage('order');
                 navigate('/order/' + id);
               }}
diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx
index ba4a9a68..5318bcff 100644
--- a/frontend/src/basic/Main.tsx
+++ b/frontend/src/basic/Main.tsx
@@ -42,7 +42,6 @@ const Main: React.FC = () => {
     baseUrl,
     order,
     page,
-    setPage,
     slideDirection,
     setOpen,
     windowSize,
@@ -66,7 +65,6 @@ const Main: React.FC = () => {
         page={page}
         openProfile={() => setOpen({ ...closeAll, profile: true })}
         rewards={robot.earnedRewards}
-        setPage={setPage}
         windowWidth={windowSize.width}
       />
       {settings.network === 'testnet' ? (
diff --git a/frontend/src/basic/MainDialogs/index.tsx b/frontend/src/basic/MainDialogs/index.tsx
index 148f1441..bef12b68 100644
--- a/frontend/src/basic/MainDialogs/index.tsx
+++ b/frontend/src/basic/MainDialogs/index.tsx
@@ -23,7 +23,7 @@ export interface OpenDialogs {
 }
 
 const MainDialogs = (): JSX.Element => {
-  const { open, setOpen, info, limits, robot, setRobot, setPage, setCurrentOrder, baseUrl } =
+  const { open, setOpen, info, limits, robot, setRobot, setCurrentOrder, baseUrl } =
     useContext<UseAppStoreType>(AppContext);
 
   const [maxAmount, setMaxAmount] = useState<string>('...loading...');
@@ -74,7 +74,6 @@ const MainDialogs = (): JSX.Element => {
         onClose={() => setOpen({ ...open, profile: false })}
         robot={robot}
         setRobot={setRobot}
-        setPage={setPage}
         setCurrentOrder={setCurrentOrder}
       />
     </>
diff --git a/frontend/src/basic/MakerPage/index.tsx b/frontend/src/basic/MakerPage/index.tsx
index 88c0aee7..515c9522 100644
--- a/frontend/src/basic/MakerPage/index.tsx
+++ b/frontend/src/basic/MakerPage/index.tsx
@@ -12,19 +12,8 @@ import { AppContext, UseAppStoreType } from '../../contexts/AppContext';
 import { NoRobotDialog } from '../../components/Dialogs';
 
 const MakerPage = (): JSX.Element => {
-  const {
-    robot,
-    book,
-    fav,
-    maker,
-    clearOrder,
-    windowSize,
-    setCurrentOrder,
-    navbarHeight,
-    setPage,
-    setOrder,
-    setDelay,
-  } = useContext<UseAppStoreType>(AppContext);
+  const { robot, book, fav, maker, windowSize, navbarHeight, setOrder, setDelay } =
+    useContext<UseAppStoreType>(AppContext);
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -58,8 +47,6 @@ const MakerPage = (): JSX.Element => {
   const onOrderClicked = function (id: number) {
     if (robot.avatarLoaded) {
       navigate('/order/' + id);
-      setPage('order');
-      setCurrentOrder(id);
       onViewOrder();
     } else {
       setOpenNoRobot(true);
@@ -68,7 +55,7 @@ const MakerPage = (): JSX.Element => {
 
   return (
     <Grid container direction='column' alignItems='center' spacing={1}>
-      <NoRobotDialog open={openNoRobot} onClose={() => setOpenNoRobot(false)} setPage={setPage} />
+      <NoRobotDialog open={openNoRobot} onClose={() => setOpenNoRobot(false)} />
       <Grid item>
         <Collapse in={matches.length > 0 && showMatches}>
           <Grid container direction='column' alignItems='center' spacing={1}>
@@ -102,9 +89,6 @@ const MakerPage = (): JSX.Element => {
         >
           <MakerForm
             onOrderCreated={(id) => {
-              clearOrder();
-              setCurrentOrder(id);
-              setPage('order');
               navigate('/order/' + id);
             }}
             hasRobot={robot.avatarLoaded}
diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx
index f8da58ea..fbd45e95 100644
--- a/frontend/src/basic/NavBar/NavBar.tsx
+++ b/frontend/src/basic/NavBar/NavBar.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Tabs, Tab, Paper, useTheme } from '@mui/material';
 import MoreTooltip from './MoreTooltip';
 
@@ -38,11 +38,13 @@ const NavBar = ({ width, height }: NavBarProps): JSX.Element => {
   const theme = useTheme();
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const location = useLocation();
   const smallBar = width < 50;
 
   const tabSx = smallBar
     ? { position: 'relative', bottom: robot.avatarLoaded ? '0.9em' : '0.13em', minWidth: '1em' }
     : { position: 'relative', bottom: '1em', minWidth: '2em' };
+
   const pagesPosition = {
     robot: 1,
     offers: 2,
@@ -51,6 +53,11 @@ const NavBar = ({ width, height }: NavBarProps): JSX.Element => {
     settings: 5,
   };
 
+  useEffect(() => {
+    const pathPage = location.pathname.split('/')[1];
+    setPage(pathPage);
+  }, [location]);
+
   const handleSlideDirection = function (oldPage: Page, newPage: Page) {
     const oldPos: number = pagesPosition[oldPage];
     const newPos: number = pagesPosition[newPage];
diff --git a/frontend/src/basic/OrderPage/index.tsx b/frontend/src/basic/OrderPage/index.tsx
index 2817a024..57307246 100644
--- a/frontend/src/basic/OrderPage/index.tsx
+++ b/frontend/src/basic/OrderPage/index.tsx
@@ -20,7 +20,6 @@ const OrderPage = (): JSX.Element => {
     setCurrentOrder,
     badOrder,
     setBadOrder,
-    setPage,
     baseUrl,
     navbarHeight,
   } = useContext<UseAppStoreType>(AppContext);
@@ -33,7 +32,7 @@ const OrderPage = (): JSX.Element => {
 
   const [tab, setTab] = useState<'order' | 'contract'>('contract');
 
-  useEffect(() => setCurrentOrder(Number(params.orderId)), []);
+  useEffect(() => setCurrentOrder(Number(params.orderId)), [params.orderId]);
 
   const renewOrder = function () {
     if (order != undefined) {
@@ -58,16 +57,13 @@ const OrderPage = (): JSX.Element => {
           setBadOrder(data.bad_request);
         } else if (data.id) {
           navigate('/order/' + data.id);
-          setCurrentOrder(data.id);
         }
       });
     }
   };
 
-  const startAgain = function () {
-    navigate('/robot');
-    setPage('robot');
-  };
+  const startAgain = () => navigate('/robot');
+
   return (
     <Box>
       {order == undefined && badOrder == undefined ? <CircularProgress /> : null}
diff --git a/frontend/src/basic/RobotPage/Onboarding.tsx b/frontend/src/basic/RobotPage/Onboarding.tsx
index ad62bd60..055e58ec 100644
--- a/frontend/src/basic/RobotPage/Onboarding.tsx
+++ b/frontend/src/basic/RobotPage/Onboarding.tsx
@@ -32,7 +32,6 @@ interface OnboardingProps {
   setInputToken: (state: string) => void;
   getGenerateRobot: (token: string) => void;
   badRequest: string | undefined;
-  setPage: (state: Page) => void;
   baseUrl: string;
 }
 
@@ -44,7 +43,6 @@ const Onboarding = ({
   setRobot,
   badRequest,
   getGenerateRobot,
-  setPage,
   baseUrl,
 }: OnboardingProps): JSX.Element => {
   const { t } = useTranslation();
@@ -61,11 +59,6 @@ const Onboarding = ({
     setTimeout(() => setLoading(false), 1000);
   };
 
-  const changePage = function (newPage: Page) {
-    setPage(newPage);
-    navigate(`/${newPage}`);
-  };
-
   return (
     <Box>
       <Accordion expanded={step === '1'} disableGutters={true}>
@@ -246,11 +239,11 @@ const Onboarding = ({
 
             <Grid item>
               <ButtonGroup variant='contained'>
-                <Button color='primary' onClick={() => changePage('offers')}>
+                <Button color='primary' onClick={() => navigate('/offers')}>
                   <Storefront /> <div style={{ width: '0.5em' }} />
                   {t('Offers')}
                 </Button>
-                <Button color='secondary' onClick={() => changePage('create')}>
+                <Button color='secondary' onClick={() => navigate('/create')}>
                   <AddBox /> <div style={{ width: '0.5em' }} />
                   {t('Create')}
                 </Button>
diff --git a/frontend/src/basic/RobotPage/RobotProfile.tsx b/frontend/src/basic/RobotPage/RobotProfile.tsx
index a89a507b..e1b0777d 100644
--- a/frontend/src/basic/RobotPage/RobotProfile.tsx
+++ b/frontend/src/basic/RobotPage/RobotProfile.tsx
@@ -32,7 +32,6 @@ interface RobotProfileProps {
   logoutRobot: () => void;
   inputToken: string;
   setInputToken: (state: string) => void;
-  setPage: (state: Page) => void;
   baseUrl: string;
   badRequest: string;
   width: number;
@@ -46,7 +45,6 @@ const RobotProfile = ({
   setInputToken,
   setCurrentOrder,
   logoutRobot,
-  setPage,
   setView,
   badRequest,
   baseUrl,
@@ -157,8 +155,7 @@ const RobotProfile = ({
           <Grid item>
             <Button
               onClick={() => {
-                navigate('/order/' + robot.activeOrderId);
-                setPage('order');
+                navigate(`/order/${robot.activeOrderId}`);
                 setCurrentOrder(robot.activeOrderId);
               }}
             >
@@ -172,8 +169,7 @@ const RobotProfile = ({
             <Grid item>
               <Button
                 onClick={() => {
-                  navigate('/order/' + robot.lastOrderId);
-                  setPage('order');
+                  navigate(`/order/${robot.lastOrderId}`);
                   setCurrentOrder(robot.lastOrderId);
                 }}
               >
diff --git a/frontend/src/basic/RobotPage/index.tsx b/frontend/src/basic/RobotPage/index.tsx
index 28c739f5..3d3bf652 100644
--- a/frontend/src/basic/RobotPage/index.tsx
+++ b/frontend/src/basic/RobotPage/index.tsx
@@ -22,7 +22,7 @@ import { genKey } from '../../pgp';
 import { AppContext, UseAppStoreType } from '../../contexts/AppContext';
 
 const RobotPage = (): JSX.Element => {
-  const { robot, setRobot, setPage, setCurrentOrder, fetchRobot, torStatus, windowSize, baseUrl } =
+  const { robot, setRobot, setCurrentOrder, fetchRobot, torStatus, windowSize, baseUrl } =
     useContext<UseAppStoreType>(AppContext);
   const { t } = useTranslation();
   const params = useParams();
@@ -142,7 +142,6 @@ const RobotPage = (): JSX.Element => {
             inputToken={inputToken}
             setInputToken={setInputToken}
             getGenerateRobot={getGenerateRobot}
-            setPage={setPage}
             baseUrl={baseUrl}
           />
         ) : null}
@@ -160,7 +159,6 @@ const RobotPage = (): JSX.Element => {
             inputToken={inputToken}
             setInputToken={setInputToken}
             getGenerateRobot={getGenerateRobot}
-            setPage={setPage}
             baseUrl={baseUrl}
           />
         ) : null}
@@ -174,7 +172,6 @@ const RobotPage = (): JSX.Element => {
             inputToken={inputToken}
             setInputToken={setInputToken}
             getGenerateRobot={getGenerateRobot}
-            setPage={setPage}
             baseUrl={baseUrl}
           />
         ) : null}
diff --git a/frontend/src/components/Dialogs/NoRobot.tsx b/frontend/src/components/Dialogs/NoRobot.tsx
index 130a18ed..9c39a8a4 100644
--- a/frontend/src/components/Dialogs/NoRobot.tsx
+++ b/frontend/src/components/Dialogs/NoRobot.tsx
@@ -9,7 +9,6 @@ import {
   Button,
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
-import { AppContext, UseAppStoreType } from '../../contexts/AppContext';
 
 interface Props {
   open: boolean;
@@ -17,13 +16,11 @@ interface Props {
 }
 
 const NoRobotDialog = ({ open, onClose }: Props): JSX.Element => {
-  const { setPage } = useContext<UseAppStoreType>(AppContext);
   const { t } = useTranslation();
   const navigate = useNavigate();
 
   const handleClickGenerate = function () {
     onClose();
-    setPage('robot');
     navigate('/robot');
   };
 
diff --git a/frontend/src/components/Dialogs/Profile.tsx b/frontend/src/components/Dialogs/Profile.tsx
index 810cfe2d..6188dee5 100644
--- a/frontend/src/components/Dialogs/Profile.tsx
+++ b/frontend/src/components/Dialogs/Profile.tsx
@@ -47,20 +47,10 @@ interface Props {
   onClose: () => void;
   robot: Robot;
   setRobot: (state: Robot) => void;
-  setPage: (state: Page) => void;
-  setCurrentOrder: (state: number) => void;
   baseUrl: string;
 }
 
-const ProfileDialog = ({
-  open = false,
-  baseUrl,
-  onClose,
-  robot,
-  setRobot,
-  setPage,
-  setCurrentOrder,
-}: Props): JSX.Element => {
+const ProfileDialog = ({ open = false, baseUrl, onClose, robot, setRobot }: Props): JSX.Element => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const theme = useTheme();
@@ -181,9 +171,7 @@ const ProfileDialog = ({
           {robot.activeOrderId ? (
             <ListItemButton
               onClick={() => {
-                navigate('/order/' + robot.activeOrderId);
-                setPage('order');
-                setCurrentOrder(robot.activeOrderId);
+                navigate(`/order/${robot.activeOrderId}`);
                 onClose();
               }}
             >
@@ -200,9 +188,7 @@ const ProfileDialog = ({
           ) : robot.lastOrderId ? (
             <ListItemButton
               onClick={() => {
-                navigate('/order/' + robot.lastOrderId);
-                setPage('order');
-                setCurrentOrder(robot.lastOrderId);
+                navigate(`/order/${robot.lastOrderId}`);
                 onClose();
               }}
             >
diff --git a/frontend/src/components/MakerForm/MakerForm.tsx b/frontend/src/components/MakerForm/MakerForm.tsx
index 553dd2fa..caf2bee2 100644
--- a/frontend/src/components/MakerForm/MakerForm.tsx
+++ b/frontend/src/components/MakerForm/MakerForm.tsx
@@ -63,7 +63,7 @@ const MakerForm = ({
   onOrderCreated = () => null,
   hasRobot = true,
 }: MakerFormProps): JSX.Element => {
-  const { fav, setFav, limits, fetchLimits, info, maker, setMaker, setPage, baseUrl } =
+  const { fav, setFav, limits, fetchLimits, info, maker, setMaker, baseUrl } =
     useContext<UseAppStoreType>(AppContext);
 
   const { t } = useTranslation();
@@ -457,7 +457,6 @@ const MakerForm = ({
       <ConfirmationDialog
         open={openDialogs}
         onClose={() => setOpenDialogs(false)}
-        setPage={setPage}
         onClickDone={handleCreateOrder}
         hasRobot={hasRobot}
       />
diff --git a/frontend/src/components/Notifications/index.tsx b/frontend/src/components/Notifications/index.tsx
index 537cb20d..cec4b11f 100644
--- a/frontend/src/components/Notifications/index.tsx
+++ b/frontend/src/components/Notifications/index.tsx
@@ -18,7 +18,6 @@ interface NotificationsProps {
   order: Order | undefined;
   rewards: number | undefined;
   page: Page;
-  setPage: (state: Page) => void;
   openProfile: () => void;
   windowWidth: number;
 }
@@ -63,7 +62,6 @@ const Notifications = ({
   order,
   rewards,
   page,
-  setPage,
   windowWidth,
   openProfile,
 }: NotificationsProps): JSX.Element => {
@@ -84,7 +82,6 @@ const Notifications = ({
   const basePageTitle = t('RoboSats - Simple and Private Bitcoin Exchange');
 
   const moveToOrderPage = function () {
-    setPage('order');
     navigate(`/order/${order?.id}`);
     setShow(false);
   };
diff --git a/frontend/src/contexts/AppContext.ts b/frontend/src/contexts/AppContext.ts
index 8c061b74..891daf73 100644
--- a/frontend/src/contexts/AppContext.ts
+++ b/frontend/src/contexts/AppContext.ts
@@ -336,13 +336,15 @@ export const useAppStore = () => {
 
     apiClient.post(baseUrl, '/api/user/', requestBody).then((data: any) => {
       let newRobot = robot;
-      setCurrentOrder(
-        data.active_order_id
-          ? data.active_order_id
-          : data.last_order_id
-          ? data.last_order_id
-          : null,
-      );
+      if (currentOrder === undefined) {
+        setCurrentOrder(
+          data.active_order_id
+            ? data.active_order_id
+            : data.last_order_id
+            ? data.last_order_id
+            : null,
+        );
+      }
       if (data.bad_request) {
         setBadRequest(data.bad_request);
         newRobot = {
diff --git a/frontend/src/pro/Main.tsx b/frontend/src/pro/Main.tsx
index 595a91be..738f1220 100644
--- a/frontend/src/pro/Main.tsx
+++ b/frontend/src/pro/Main.tsx
@@ -62,8 +62,6 @@ const Main = (): JSX.Element => {
     setFav,
     baseUrl,
     order,
-    page,
-    setPage,
     currentOrder,
     setCurrentOrder,
     open,