Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-14 03:16:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor confirmation Dialogs

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-10-30 04:05:33 -07:00
parent c660a5b0d1
commit ca35d6b3d2
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
13 changed files with 161 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/basic/BookPage/index.tsx
View File

@ -1,15 +1,17 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Typography, Grid, ButtonGroup, Dialog, Box } from '@mui/material';
import { Button, Grid, ButtonGroup, Dialog, Box } from '@mui/material';
import { useHistory } from 'react-router-dom';
import DepthChart from '../../components/Charts/DepthChart';
import { NoRobotDialog } from '../../components/Dialogs';
import MakerForm from '../../components/MakerForm';
import BookTable from '../../components/BookTable';
import { Page } from '../NavBar';
import { Book, Favorites, LimitList, Maker } from '../../models';
// Icons
import { BarChart, FormatListBulleted } from '@mui/icons-material';
import MakerForm from '../../components/MakerForm';
import BookTable from '../../components/BookTable';
interface BookPageProps {
book: Book;
@ -22,6 +24,9 @@ interface BookPageProps {
lastDayPremium: number;
maker: Maker;
setMaker: (state: Maker) => void;
hasRobot: boolean;
setPage: (state: Page) => void;
setOrder: (state: number) => void;
}
const BookPage = ({
@ -35,11 +40,15 @@ const BookPage = ({
maker,
setMaker,
windowSize,
hasRobot = false,
setPage = () => null,
setOrder = () => null,
}: BookPageProps): JSX.Element => {
const { t } = useTranslation();
const history = useHistory();
const [view, setView] = useState<'list' | 'depth'>('list');
const [openMaker, setOpenMaker] = useState<boolean>(false);
const [openNoRobot, setOpenNoRobot] = useState<boolean>(false);
const doubleView = windowSize.width > 115;
const width = windowSize.width * 0.9;
@ -63,6 +72,16 @@ const BookPage = ({
setFav({ ...fav, type: val });
};
const onOrderClicked = function (id: number) {
if (hasRobot) {
history.push('/order/' + id);
setPage('order');
setOrder(id);
} else {
setOpenNoRobot(true);
}
};
const NavButtons = function () {
return (
<ButtonGroup variant='contained' color='inherit'>
@ -93,6 +112,7 @@ const BookPage = ({
};
return (
<Grid container direction='column' alignItems='center' spacing={1} sx={{ minWidth: 400 }}>
<NoRobotDialog open={openNoRobot} onClose={() => setOpenNoRobot(false)} setPage={setPage} />
{openMaker ? (
<Dialog open={openMaker} onClose={() => setOpenMaker(false)}>
<Box sx={{ maxWidth: '18em', padding: '0.5em' }}>
@ -103,6 +123,8 @@ const BookPage = ({
setMaker={setMaker}
fav={fav}
setFav={setFav}
setPage={setPage}
hasRobot={hasRobot}
/>
</Box>
</Dialog>
@ -130,6 +152,7 @@ const BookPage = ({
defaultFullscreen={false}
onCurrencyChange={handleCurrencyChange}
onTypeChange={handleTypeChange}
onOrderClicked={onOrderClicked}
/>
</Grid>
<Grid item>
@ -164,6 +187,7 @@ const BookPage = ({
defaultFullscreen={false}
onCurrencyChange={handleCurrencyChange}
onTypeChange={handleTypeChange}
onOrderClicked={onOrderClicked}
/>
)}
</Grid>

53
frontend/src/basic/Main.tsx
View File

@ -60,9 +60,14 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
const theme = useTheme();
const history = useHistory();
const Router = window.NativeRobosats != null ? HashRouter : BrowserRouter;
const basename = window.NativeRobosats != null ? window.location.pathname : '';
const [page, setPage] = useState<Page>(window.location.pathname.split('/')[1]);
const [page, setPage] = useState<Page>(
window.location.pathname.split('/')[1] == ''
? 'offers'
: window.location.pathname.split('/')[1],
);
const [slideDirection, setSlideDirection] = useState<SlideDirection>({
in: undefined,
out: undefined,
@ -145,7 +150,6 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
};
apiClient.post('/api/user/', requestBody).then((data: any) => {
console.log(data);
setOrder(
data.active_order_id
? data.active_order_id
@ -182,12 +186,14 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
}
}, []);
console.log(page);
return (
<Router basename={basename}>
{/* load robot avatar image, set avatarLoaded: true */}
<RobotAvatar
style={{ display: 'none' }}
nickname={robot.avatarLoaded ? robot.nickname : null}
nickname={robot.nickname}
onLoad={() => setRobot({ ...robot, avatarLoaded: true })}
/>
<Box
@ -199,33 +205,30 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
}}
>
<Switch>
<Route
exact
path='/'
render={(props: any) => (
<UserGenPage
setPage={setPage}
match={props.match}
theme={theme}
robot={robot}
setRobot={setRobot}
/>
)}
/>
<Route
path='/robot/:refCode?'
render={(props: any) => (
<Slide
direction={page === 'robot' ? slideDirection.in : slideDirection.out}
in={page === 'robot'}
appear={slideDirection.in != undefined}
>
<div>
<UserGenPage
setPage={setPage}
order={order}
setOrder={setOrder}
match={props.match}
theme={theme}
robot={robot}
setRobot={setRobot}
/>
</div>
</Slide>
)}
/>
<Route path='/offers'>
<Route exact path={['/offers', '/']}>
<Slide
direction={page === 'offers' ? slideDirection.in : slideDirection.out}
in={page === 'offers'}
@ -244,6 +247,8 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
lastDayPremium={info.last_day_nonkyc_btc_premium}
windowSize={windowSize}
hasRobot={robot.avatarLoaded}
setPage={setPage}
setOrder={setOrder}
/>
</div>
</Slide>
@ -275,7 +280,17 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
<Route
path='/order/:orderId'
render={(props: any) => <OrderPage theme={theme} history={history} {...props} />}
render={(props: any) => (
<Slide
direction={page === 'order' ? slideDirection.in : slideDirection.out}
in={page === 'order'}
appear={slideDirection.in != undefined}
>
<div>
<OrderPage theme={theme} history={history} {...props} />
</div>
</Slide>
)}
/>
<Route path='/settings'>
@ -296,7 +311,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
</Switch>
</Box>
<NavBar
nickname={robot.nickname}
nickname={robot.avatarLoaded ? robot.nickname : null}
width={windowSize.width}
height={navbarHeight}
page={page}

5
frontend/src/basic/MakerPage/index.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Grid, Paper, Collapse, Typography } from '@mui/material';
import { Grid, Paper, Collapse, Typography } from '@mui/material';
import { LimitList, Maker, Book, Favorites } from '../../models';
@ -8,6 +8,7 @@ import { filterOrders } from '../../utils';
import MakerForm from '../../components/MakerForm';
import BookTable from '../../components/BookTable';
import { Page } from '../NavBar';
interface MakerPageProps {
@ -97,11 +98,13 @@ const MakerPage = ({
setOrder(id);
setPage('order');
}}
hasRobot={hasRobot}
disableRequest={matches.length > 0 && !showMatches}
collapseAll={showMatches}
onSubmit={() => setShowMatches(matches.length > 0)}
onReset={() => setShowMatches(false)}
submitButtonLabel={matches.length > 0 && !showMatches ? 'Submit' : 'Create order'}
setPage={setPage}
/>
</Paper>
</Grid>

15
frontend/src/basic/NavBar/NavBar.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { Tabs, Tab, Paper, useTheme } from '@mui/material';
import { Tabs, Tab, Paper, useTheme, Tooltip } from '@mui/material';
import MoreTooltip from './MoreTooltip';
import { OpenDialogs } from '../MainDialogs';
@ -24,7 +24,6 @@ interface NavBarProps {
page: Page;
nickname?: string | null;
setPage: (state: Page) => void;
slideDirection: { in: Direction; out: Direction };
setSlideDirection: (state: { in: Direction; out: Direction }) => void;
width: number;
height: number;
@ -38,7 +37,6 @@ interface NavBarProps {
const NavBar = ({
page,
setPage,
slideDirection,
setSlideDirection,
open,
nickname = null,
@ -54,8 +52,6 @@ const NavBar = ({
const history = useHistory();
const smallBar = width < 50;
const [newPage, setNewPage] = useState<Page>(history.location.pathname.split('/')[1]);
const tabSx = smallBar
? { position: 'relative', bottom: nickname ? '0.8em' : '0em', minWidth: '1em' }
: { position: 'relative', bottom: '1em', minWidth: '2em' };
@ -80,7 +76,7 @@ const NavBar = ({
return null;
} else {
handleSlideDirection(page, newPage);
setNewPage(newPage);
setPage(newPage);
const param = newPage === 'order' ? order ?? '' : '';
setTimeout(
() => history.push(`/${newPage}/${param}`),
@ -89,10 +85,6 @@ const NavBar = ({
}
};
useEffect(() => {
setPage(newPage);
}, [slideDirection, newPage]);
useEffect(() => {
setOpen(closeAll);
}, [page]);
@ -151,7 +143,7 @@ const NavBar = ({
sx={tabSx}
label={smallBar ? undefined : t('Order')}
value='order'
disabled={!hasRobot}
disabled={!hasRobot || order == null}
icon={<Assignment />}
iconPosition='start'
/>
@ -168,6 +160,7 @@ const NavBar = ({
label={smallBar ? undefined : t('More')}
value='none'
onClick={(e) => {
console.log(e);
open.more ? null : setOpen({ ...open, more: true });
}}
icon={

1
frontend/src/basic/NavBar/index.tsx
View File

@ -1,5 +1,4 @@
import NavBar from './NavBar';
export type Page = 'robot' | 'order' | 'create' | 'offers' | 'settings' | 'none';
export type { OpenDialogs } from './MoreTooltip';
export default NavBar;

8
frontend/src/basic/UserGenPage.js
View File

@ -70,10 +70,16 @@ class UserGenPage extends Component {
ref_code: refCode,
};
});
requestBody.then((body) => console.log(body));
requestBody.then((body) =>
apiClient.post('/api/user/', body).then((data) => {
this.setState({ found: data.found, bad_request: data.bad_request });
this.props.setOrder(
data.active_order_id
? data.active_order_id
: data.last_order_id
? data.last_order_id
: this.props.order,
);
// Add nick and token to App state (token only if not a bad request)
data.bad_request
? this.props.setRobot({

18
frontend/src/components/BookTable/index.tsx
View File

@ -29,7 +29,7 @@ import RobotAvatar from '../RobotAvatar';
// Icons
import { Fullscreen, FullscreenExit, Refresh } from '@mui/icons-material';
interface Props {
interface BookTableProps {
clickRefresh?: () => void;
book: Book;
fav?: Favorites;
@ -45,16 +45,17 @@ interface Props {
showNoResults?: boolean;
onCurrencyChange?: (e: any) => void;
onTypeChange?: (mouseEvent: any, val: number) => void;
onOrderClicked?: (id: number) => void;
}
const BookTable = ({
clickRefresh,
book,
fav,
maxWidth,
maxHeight,
fullWidth,
fullHeight,
fav = { currency: 1, type: 0 },
maxWidth = 100,
maxHeight = 70,
fullWidth = 100,
fullHeight = 70,
defaultFullscreen = false,
elevation = 6,
fillContainer = false,
@ -63,7 +64,8 @@ const BookTable = ({
showNoResults = true,
onCurrencyChange,
onTypeChange,
}: Props): JSX.Element => {
onOrderClicked = () => null,
}: BookTableProps): JSX.Element => {
const { t } = useTranslation();
const theme = useTheme();
const history = useHistory();
@ -753,7 +755,7 @@ const BookTable = ({
setPageSize(newPageSize);
setUseDefaultPageSize(false);
}}
onRowClick={(params: any) => history.push('/order/' + params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
onRowClick={(params: any) => onOrderClicked(params.row.id)}
/>
</Paper>
);

2
frontend/src/components/Charts/DepthChart/index.tsx
View File

@ -36,7 +36,7 @@ interface DepthChartProps {
maxWidth: number;
maxHeight: number;
fillContainer?: boolean;
elevation: number;
elevation?: number;
}
const DepthChart: React.FC<DepthChartProps> = ({

32
frontend/src/components/Dialogs/Confirmation.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import { NoRobotDialog, StoreTokenDialog } from '.';
import { Page } from '../../basic/NavBar';
interface ConfirmationDialogProps {
open: boolean;
onClose: () => void;
setPage: (state: Page) => void;
onClickDone: () => void;
hasRobot: boolean;
}
const ConfirmationDialog = ({
open,
onClose,
hasRobot,
setPage,
onClickDone,
}: ConfirmationDialogProps): JSX.Element => {
return hasRobot ? (
<StoreTokenDialog
open={open}
onClose={onClose}
onClickBack={onClose}
onClickDone={onClickDone}
/>
) : (
<NoRobotDialog open={open} onClose={onClose} setPage={setPage} />
);
};
export default ConfirmationDialog;

22
frontend/src/components/Dialogs/NoRobot.tsx
View File

@ -8,15 +8,24 @@ import {
DialogContentText,
Button,
} from '@mui/material';
import { Link } from 'react-router-dom';
import { useHistory } from 'react-router-dom';
import { Page } from '../../basic/NavBar';
interface Props {
open: boolean;
onClose: () => void;
setPage: (state: Page) => void;
}
const NoRobotDialog = ({ open, onClose }: Props): JSX.Element => {
const NoRobotDialog = ({ open, onClose, setPage }: Props): JSX.Element => {
const { t } = useTranslation();
const history = useHistory();
const handleClickGenerate = function () {
onClose();
setPage('robot');
history.push('/robot');
};
return (
<Dialog open={open} onClose={onClose}>
@ -24,17 +33,12 @@ const NoRobotDialog = ({ open, onClose }: Props): JSX.Element => {
<DialogContent>
<DialogContentText>
{t('You need to generate a robot avatar in order to become an order maker')}
{t('Generate a robot avatar first. Then create your own order.')}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onClose} autoFocus>
{t('Go back')}
</Button>
<Button onClick={onClose} to='/' component={Link}>
{t('Generate Robot')}
</Button>
<Button onClick={handleClickGenerate}>{t('Generate Robot')}</Button>
</DialogActions>
</Dialog>
);

21
frontend/src/components/Dialogs/StoreToken.tsx
View File

@ -18,20 +18,11 @@ import ContentCopy from '@mui/icons-material/ContentCopy';
interface Props {
open: boolean;
onClose: () => void;
copyIconColor: string;
onClickCopy: () => void;
onClickBack: () => void;
onClickDone: () => void;
}
const StoreTokenDialog = ({
open,
onClose,
copyIconColor,
onClickCopy,
onClickBack,
onClickDone,
}: Props): JSX.Element => {
const StoreTokenDialog = ({ open, onClose, onClickBack, onClickDone }: Props): JSX.Element => {
const { t } = useTranslation();
return (
@ -45,7 +36,7 @@ const StoreTokenDialog = ({
)}
</DialogContentText>
<br />
<Grid align='center'>
<Grid container>
<TextField
sx={{ width: '100%', maxWidth: '550px' }}
disabled
@ -56,8 +47,12 @@ const StoreTokenDialog = ({
InputProps={{
endAdornment: (
<Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
<IconButton onClick={onClickCopy}>
<ContentCopy color={copyIconColor} />
<IconButton
onClick={() =>
systemClient.copyToClipboard(systemClient.getCookie('robot_token'))
}
>
<ContentCopy color='primary' />
</IconButton>
</Tooltip>
),

1
frontend/src/components/Dialogs/index.ts
View File

@ -4,6 +4,7 @@ export { default as InfoDialog } from './Info';
export { default as LearnDialog } from './Learn';
export { default as NoRobotDialog } from './NoRobot';
export { default as StoreTokenDialog } from './StoreToken';
export { default as ConfirmationDialog } from './Confirmation';
export { default as CoordinatorSummaryDialog } from './CoordinatorSummary';
export { default as ProfileDialog } from './Profile';
export { default as StatsDialog } from './Stats';

29
frontend/src/components/MakerForm/MakerForm.tsx
View File

@ -29,7 +29,7 @@ import { LimitList, Maker, Favorites, defaultMaker } from '../../models';
import { LocalizationProvider, TimePicker } from '@mui/x-date-pickers';
import DateFnsUtils from '@date-io/date-fns';
import { useHistory } from 'react-router-dom';
import { StoreTokenDialog, NoRobotDialog } from '../Dialogs';
import { StoreTokenDialog, NoRobotDialog, ConfirmationDialog } from '../Dialogs';
import { apiClient } from '../../services/api';
import { systemClient } from '../../services/System';
@ -41,6 +41,7 @@ import { pn } from '../../utils';
import { SelfImprovement, Lock, HourglassTop, DeleteSweep, Edit } from '@mui/icons-material';
import { LoadingButton } from '@mui/lab';
import { Page } from '../../basic/NavBar';
interface MakerFormProps {
limits: { list: LimitList; loading: boolean };
@ -56,6 +57,8 @@ interface MakerFormProps {
onReset?: () => void;
submitButtonLabel?: string;
onOrderCreated?: (id: number) => void;
hasRobot?: boolean;
setPage?: (state: Page) => void;
}
const MakerForm = ({
@ -72,6 +75,8 @@ const MakerForm = ({
onReset = () => {},
submitButtonLabel = 'Create Order',
onOrderCreated = () => null,
hasRobot = true,
setPage = () => null,
}: MakerFormProps): JSX.Element => {
const { t } = useTranslation();
const theme = useTheme();
@ -423,23 +428,15 @@ const MakerForm = ({
);
};
const ConfirmationDialogs = function () {
return systemClient.getCookie('robot_token') ? (
<StoreTokenDialog
open={openDialogs}
onClose={() => setOpenDialogs(false)}
onClickCopy={() => systemClient.copyToClipboard(systemClient.getCookie('robot_token'))}
copyIconColor={'primary'}
onClickBack={() => setOpenDialogs(false)}
onClickDone={handleCreateOrder}
/>
) : (
<NoRobotDialog open={openDialogs} onClose={() => setOpenDialogs(false)} />
);
};
return (
<Box>
<ConfirmationDialogs />
<ConfirmationDialog
open={openDialogs}
onClose={() => setOpenDialogs(false)}
setPage={setPage}
onClickDone={handleCreateOrder}
hasRobot={hasRobot}
/>
<Collapse in={limits.list.length == 0}>
<div style={{ display: limits.list.length == 0 ? '' : 'none' }}>
<LinearProgress />