Simplify routing (#458)

* Fix payment methods as icons memo

* Simplify pages / router

* Load current order on robotfetch

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 {
+  const { robot, fetchBook, windowSize, book, setDelay, setOrder } =
-    robot,
+    useContext<UseAppStoreType>(AppContext);
-    fetchBook,
-    clearOrder,
-    windowSize,
-    setPage,
-    setCurrentOrder,
-    baseUrl,
-    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);
               }}

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' ? (

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}
       />
     </>

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 {
+  const { robot, book, fav, maker, windowSize, navbarHeight, setOrder, setDelay } =
-    robot,
+    useContext<UseAppStoreType>(AppContext);
-    book,
-    fav,
-    maker,
-    clearOrder,
-    windowSize,
-    setCurrentOrder,
-    navbarHeight,
-    setPage,
-    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}

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];

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 () {
+  const startAgain = () => navigate('/robot');
-    navigate('/robot');
+
-    setPage('robot');
-  };
   return (
     <Box>
       {order == undefined && badOrder == undefined ? <CircularProgress /> : null}

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>

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);
+                navigate(`/order/${robot.activeOrderId}`);
-                setPage('order');
                 setCurrentOrder(robot.activeOrderId);
               }}
             >
@@ -172,8 +169,7 @@ const RobotProfile = ({
             <Grid item>
               <Button
                 onClick={() => {
-                  navigate('/order/' + robot.lastOrderId);
+                  navigate(`/order/${robot.lastOrderId}`);
-                  setPage('order');
                   setCurrentOrder(robot.lastOrderId);
                 }}
               >

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}

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');
   };
 

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 = ({
+const ProfileDialog = ({ open = false, baseUrl, onClose, robot, setRobot }: Props): JSX.Element => {
-  open = false,
-  baseUrl,
-  onClose,
-  robot,
-  setRobot,
-  setPage,
-  setCurrentOrder,
-}: 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);
+                navigate(`/order/${robot.activeOrderId}`);
-                setPage('order');
-                setCurrentOrder(robot.activeOrderId);
                 onClose();
               }}
             >
@@ -200,9 +188,7 @@ const ProfileDialog = ({
           ) : robot.lastOrderId ? (
             <ListItemButton
               onClick={() => {
-                navigate('/order/' + robot.lastOrderId);
+                navigate(`/order/${robot.lastOrderId}`);
-                setPage('order');
-                setCurrentOrder(robot.lastOrderId);
                 onClose();
               }}
             >

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}
       />

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);
   };

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(
+      if (currentOrder === undefined) {
-        data.active_order_id
+        setCurrentOrder(
-          ? data.active_order_id
+          data.active_order_id
-          : data.last_order_id
+            ? data.active_order_id
-          ? data.last_order_id
+            : data.last_order_id
-          : null,
+            ? data.last_order_id
-      );
+            : null,
+        );
+      }
       if (data.bad_request) {
         setBadRequest(data.bad_request);
         newRobot = {

frontend/src/pro/Main.tsx

@@ -62,8 +62,6 @@ const Main = (): JSX.Element => {
     setFav,
     baseUrl,
     order,
-    page,
-    setPage,
     currentOrder,
     setCurrentOrder,
     open,