diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx index 3e74fb41..e09b0bfa 100644 --- a/frontend/src/basic/BookPage/index.tsx +++ b/frontend/src/basic/BookPage/index.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Button, Typography, Grid, ButtonGroup, Dialog, Box } from '@mui/material'; import { useHistory } from 'react-router-dom'; -import currencyDict from '../../../static/assets/currencies.json'; import DepthChart from '../../components/Charts/DepthChart'; import { Book, Favorites, LimitList, Maker } from '../../models'; @@ -47,25 +46,6 @@ const BookPage = ({ const maxBookTableWidth = 85; const chartWidthEm = width - maxBookTableWidth; - const defaultMaker: Maker = { - isExplicit: false, - amount: '', - paymentMethods: [], - paymentMethodsText: 'not specified', - badPaymentMethod: false, - premium: '', - satoshis: '', - publicExpiryTime: new Date(0, 0, 0, 23, 59), - publicDuration: 86340, - escrowExpiryTime: new Date(0, 0, 0, 3, 0), - escrowDuration: 10800, - bondSize: 3, - minAmount: '', - maxAmount: '', - badPremiumText: '', - badSatoshisText: '', - }; - useEffect(() => { if (book.orders.length < 1) { fetchBook(true, false); @@ -87,7 +67,7 @@ const BookPage = ({ return ( {doubleView ? ( <> @@ -108,9 +88,6 @@ const BookPage = ({ )} )} - ); }; diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx index 87a90c1e..9c6ec456 100644 --- a/frontend/src/basic/Main.tsx +++ b/frontend/src/basic/Main.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { HashRouter, BrowserRouter, Switch, Route, useHistory } from 'react-router-dom'; -import { useTheme, IconButton } from '@mui/material'; +import { useTheme, IconButton, Box, Slide } from '@mui/material'; import UserGenPage from './UserGenPage'; import MakerPage from './MakerPage'; @@ -39,18 +39,18 @@ const getWindowSize = function (fontSize: number) { }; }; +type Page = 'robot' | 'order' | 'create' | 'offers' | 'settings' | 'none'; +interface SlideDirection { + in: 'left' | 'right' | undefined; + out: 'left' | 'right' | undefined; +} + interface MainProps { settings: Settings; setSettings: (state: Settings) => void; } 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 [openLearn, setOpenLearn] = useState(false); - // All app data structured const [book, setBook] = useState({ orders: [], loading: true }); const [limits, setLimits] = useState<{ list: LimitList; loading: boolean }>({ @@ -62,6 +62,19 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => { const [info, setInfo] = useState(defaultInfo); const [fav, setFav] = useState({ type: null, currency: 0 }); + 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(window.location.pathname.split('/')[1]); + const [slideDirection, setSlideDirection] = useState({ + in: undefined, + out: undefined, + }); + + const navbarHeight = 2.5; + const [openLearn, setOpenLearn] = useState(false); + const [windowSize, setWindowSize] = useState<{ width: number; height: number }>( getWindowSize(theme.typography.fontSize), ); @@ -130,6 +143,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => { }); }; + console.log(page, slideDirection); return (
@@ -141,17 +155,15 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => { > - - setSettings({ ...settings, mode: settings.mode === 'dark' ? 'light' : 'dark' }) - } - > - {theme.palette.mode === 'dark' ? : } -
-
+ { )} /> ( )} /> - ( - - )} - /> - ( - - )} - /> + + + +
+ +
+ + + + + +
+ +
+ + + } /> - } - /> + + + +
+ +
+ + -
-
- -
+ + ); }; diff --git a/frontend/src/basic/MakerPage/index.tsx b/frontend/src/basic/MakerPage/index.tsx index faecff2a..193f0880 100644 --- a/frontend/src/basic/MakerPage/index.tsx +++ b/frontend/src/basic/MakerPage/index.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useHistory } from 'react-router-dom'; import { Button, Grid, Paper, Collapse, Typography } from '@mui/material'; import { LimitList, Maker, Book, Favorites } from '../../models'; @@ -32,9 +31,8 @@ const MakerPage = ({ windowSize, }: MakerPageProps): JSX.Element => { const { t } = useTranslation(); - const history = useHistory(); - const maxHeight = windowSize.height * 0.85 - 7; + const maxHeight = windowSize.height * 0.85 - 3; const [showMatches, setShowMatches] = useState(false); const matches = filterOrders({ @@ -96,11 +94,6 @@ const MakerPage = ({ /> - - - ); }; diff --git a/frontend/src/basic/NavBar/index.tsx b/frontend/src/basic/NavBar/index.tsx index 7c05bde7..bebf3841 100644 --- a/frontend/src/basic/NavBar/index.tsx +++ b/frontend/src/basic/NavBar/index.tsx @@ -1,52 +1,137 @@ import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; -import { - Badge, - Tooltip, - ListItemAvatar, - Paper, - Button, - Grid, - IconButton, - Select, - MenuItem, - ListItemText, - ListItem, - ListItemIcon, - ListItemButton, - useTheme, -} from '@mui/material'; -import { Link as LinkRouter } from 'react-router-dom'; -import { apiClient } from '../../services/api'; -import { systemClient } from '../../services/System'; +import { Tabs, Tab, Paper, Button, useTheme } from '@mui/material'; import RobotAvatar from '../../components/RobotAvatar'; +import { + SettingsApplications, + SmartToy, + Storefront, + AddBox, + Assignment, + MoreHoriz, +} from '@mui/icons-material'; + +type Page = 'robot' | 'offers' | 'create' | 'order' | 'settings' | 'none'; +type Direction = 'left' | 'right' | 'none'; + interface NavBarProps { + page: Page; + setPage: (state: Page) => void; + slideDirection: { in: Direction; out: Direction }; + setSlideDirection: (state: { in: Direction; out: Direction }) => void; width: number; + height: number; } -type Page = 'robot' | 'order' | 'make' | 'book' | 'settings'; -const NavBar = ({ width }: NavBarProps): JSX.Element => { +const NavBar = ({ + page, + setPage, + slideDirection, + setSlideDirection, + width, + height, +}: NavBarProps): JSX.Element => { const theme = useTheme(); + const { t } = useTranslation(); const history = useHistory(); - const { pathname } = history.location; + const smallBar = width < 50; + const tabWidth = smallBar ? 1 : 1; - const [page, setPage] = useState(history.location.pathname.split('/')); + const [showMore, setShowMore] = useState(false); + const [newPage, setNewPage] = useState(history.location.pathname.split('/')[1]); - const changePage = function (newPage: Page) { - setPage(newPage); - history.push(`/${newPage}`); + const pagesPosition = { + robot: 1, + offers: 2, + create: 3, + order: 4, + settings: 5, + }; + const handleSlideDirection = function (oldPage: Page, newPage: Page) { + const oldPos: number = pagesPosition[oldPage]; + const newPos: number = pagesPosition[newPage]; + setSlideDirection( + newPos > oldPos ? { in: 'left', out: 'right' } : { in: 'right', out: 'left' }, + ); }; + const changePage = function (mouseEvent: any, newPage: Page) { + if (newPage === 'none') { + return null; + } else { + handleSlideDirection(page, newPage); + setNewPage(newPage); + setTimeout(() => history.push(`/${newPage}`), theme.transitions.duration.leavingScreen * 3); + } + }; + + useEffect(() => { + setPage(newPage); + }, [slideDirection, newPage]); + return ( - - {page} - - - - - + + + } + iconPosition='start' + /> + } + iconPosition='start' + /> + } + iconPosition='start' + /> + } + iconPosition='start' + /> + } + iconPosition='start' + /> + { + setShowMore(!showMore); + }} + icon={} + iconPosition='start' + /> + ); }; diff --git a/frontend/src/basic/SettingsPage/index.tsx b/frontend/src/basic/SettingsPage/index.tsx index 89eddc44..f6039abb 100644 --- a/frontend/src/basic/SettingsPage/index.tsx +++ b/frontend/src/basic/SettingsPage/index.tsx @@ -1,21 +1,30 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Paper, useTheme } from '@mui/material'; +import { Grid, Paper, useTheme } from '@mui/material'; import SettingsForm from '../../components/SettingsForm'; import { Settings } from '../../models'; interface SettingsPageProps { settings: Settings; setSettings: (state: Settings) => void; + windowSize: { width: number; height: number }; } -const SettingsPage = ({ settings, setSettings }: SettingsPageProps): JSX.Element => { +const SettingsPage = ({ settings, setSettings, windowSize }: SettingsPageProps): JSX.Element => { const theme = useTheme(); const { t } = useTranslation(); + const maxHeight = windowSize.height * 0.85 - 3; return ( - - + + + + + + ); }; diff --git a/frontend/src/components/SettingsForm/SelectLanguage.tsx b/frontend/src/components/SettingsForm/SelectLanguage.tsx index 72b1a41a..042dcfc0 100644 --- a/frontend/src/components/SettingsForm/SelectLanguage.tsx +++ b/frontend/src/components/SettingsForm/SelectLanguage.tsx @@ -28,6 +28,7 @@ interface SelectLanguageProps { language: Language; setLanguage: (lang: Language) => void; } + const SelectLanguage = ({ language, setLanguage }: SelectLanguageProps): JSX.Element => { const theme = useTheme(); const { t, i18n } = useTranslation(); @@ -42,10 +43,9 @@ const SelectLanguage = ({ language, setLanguage }: SelectLanguageProps): JSX.Ele i18n.changeLanguage(e.target.value); }; - console.log(language); return (