Simplify routing (#458)

* Fix payment methods as icons memo

* Simplify pages / router

* Load current order on robotfetch
This commit is contained in:
Reckless_Satoshi 2023-04-26 12:10:21 +00:00 committed by GitHub
parent db5548ecca
commit 4f2ef09c6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 36 additions and 101 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 = {

View File

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