2024-01-02 12:40:05 +00:00

205 lines
6.5 KiB
TypeScript

import React, { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Tab, Tabs, Paper, CircularProgress, Grid, Typography, Box } from '@mui/material';
import { useNavigate, useParams } from 'react-router-dom';
import TradeBox from '../../components/TradeBox';
import OrderDetails from '../../components/OrderDetails';
import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
import { type Order } from '../../models';
import CautionDialog from './CautionDialog';
const OrderPage = (): JSX.Element => {
const { windowSize, setOpen, settings, navbarHeight, hostUrl, origin } =
useContext<UseAppStoreType>(AppContext);
const { federation } = useContext<UseFederationStoreType>(FederationContext);
const { garage, badOrder, setBadOrder } = useContext<UseGarageStoreType>(GarageContext);
const [openCoordinatorWarning, setOpenCoordinatorWarning] = useState<Boolean>(true);
const { t } = useTranslation();
const navigate = useNavigate();
const params = useParams();
const doublePageWidth: number = 50;
const maxHeight: number = (windowSize?.height - navbarHeight) * 0.85 - 3;
const [tab, setTab] = useState<'order' | 'contract'>('contract');
const [baseUrl, setBaseUrl] = useState<string>(hostUrl);
const [currentOrder, setCurrentOrder] = useState<Order | null>(null);
const [currentOrderId, setCurrentOrderId] = useState<number | null>(null);
useEffect(() => {
const coordinator = federation.getCoordinator(params.shortAlias ?? '');
const { url, basePath } = coordinator.getEndpoint(
settings.network,
origin,
settings.selfhostedClient,
hostUrl,
);
setBaseUrl(`${url}${basePath}`);
const orderId = Number(params.orderId);
if (Boolean(orderId) && currentOrderId !== orderId) setCurrentOrderId(orderId);
}, [params]);
useEffect(() => {
setCurrentOrder(null);
if (currentOrderId !== null) {
const coordinator = federation.getCoordinator(params.shortAlias ?? '');
const slot = garage.getSlot();
const robot = slot?.getRobot();
if (robot != null && slot?.token != null) {
void federation.fetchRobot(garage, slot.token);
coordinator
.fetchOrder(currentOrderId, robot)
.then((order) => {
if (order?.bad_request !== undefined) {
setBadOrder(order.bad_request);
} else if (Boolean(order?.id)) {
setCurrentOrder(order);
if (order?.is_participant) {
garage.updateOrder(order);
}
}
})
.catch((e) => {
console.log(e);
});
}
}
}, [currentOrderId]);
const onClickCoordinator = function (): void {
if (currentOrder?.shortAlias != null) {
setOpen((open) => {
return { ...open, coordinator: currentOrder?.shortAlias };
});
}
};
const startAgain = (): void => {
navigate('/robot');
};
const orderDetailsSpace = currentOrder ? (
<OrderDetails
shortAlias={String(currentOrder.shortAlias)}
currentOrder={currentOrder}
onClickCoordinator={onClickCoordinator}
baseUrl={baseUrl}
onClickGenerateRobot={() => {
navigate('/robot');
}}
/>
) : (
<></>
);
const tradeBoxSpace = currentOrder ? (
<TradeBox baseUrl={baseUrl} onStartAgain={startAgain} />
) : (
<></>
);
return (
<Box>
<CautionDialog
open={openCoordinatorWarning}
onClose={() => setOpenCoordinatorWarning(false)}
longAlias={federation.getCoordinator(params.shortAlias ?? '').longAlias}
/>
{currentOrder === null && badOrder === undefined && <CircularProgress />}
{badOrder !== undefined ? (
<Typography align='center' variant='subtitle2' color='secondary'>
{t(badOrder)}
</Typography>
) : null}
{currentOrder !== null && badOrder === undefined ? (
currentOrder.is_participant ? (
windowSize.width > doublePageWidth ? (
// DOUBLE PAPER VIEW
<Grid
container
direction='row'
justifyContent='center'
alignItems='flex-start'
spacing={2}
style={{ width: '43em' }}
>
<Grid item xs={6} style={{ width: '21em' }}>
<Paper
elevation={12}
style={{
width: '21em',
maxHeight: `${maxHeight}em`,
overflow: 'auto',
}}
>
{orderDetailsSpace}
</Paper>
</Grid>
<Grid item xs={6} style={{ width: '21em' }}>
<Paper
elevation={12}
style={{
width: '21em',
maxHeight: `${maxHeight}em`,
overflow: 'auto',
}}
>
{tradeBoxSpace}
</Paper>
</Grid>
</Grid>
) : (
// SINGLE PAPER VIEW
<Box>
<Box sx={{ borderBottom: 1, borderColor: 'divider', width: '21em' }}>
<Tabs
value={tab}
onChange={(_mouseEvent, value) => {
setTab(value);
}}
variant='fullWidth'
>
<Tab label={t('Order')} value='order' />
<Tab label={t('Contract')} value='contract' />
</Tabs>
</Box>
<Paper
elevation={12}
style={{
width: '21em',
maxHeight: `${maxHeight}em`,
overflow: 'auto',
}}
>
<div style={{ display: tab === 'order' ? '' : 'none' }}>{orderDetailsSpace}</div>
<div style={{ display: tab === 'contract' ? '' : 'none' }}>{tradeBoxSpace}</div>
</Paper>
</Box>
)
) : (
<Paper
elevation={12}
style={{
width: '21em',
maxHeight: `${maxHeight}em`,
overflow: 'auto',
}}
>
{orderDetailsSpace}
</Paper>
)
) : (
<></>
)}
</Box>
);
};
export default OrderPage;