Merge pull request #52 from dancheskus/donation-dialog-fix

Donation fix
This commit is contained in:
YouROK
2021-05-25 09:00:59 +03:00
committed by GitHub
7 changed files with 119 additions and 104 deletions

File diff suppressed because one or more lines are too long

View File

@@ -14,6 +14,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight'
import ListItem from '@material-ui/core/ListItem' import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon' import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText' import ListItemText from '@material-ui/core/ListItemText'
import CreditCardIcon from '@material-ui/icons/CreditCard'
import ListIcon from '@material-ui/icons/List' import ListIcon from '@material-ui/icons/List'
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew' import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'
@@ -25,22 +26,24 @@ import RemoveAll from '../RemoveAll'
import SettingsDialog from '../Settings' import SettingsDialog from '../Settings'
import AboutDialog from '../About' import AboutDialog from '../About'
import { playlistAllHost, shutdownHost, torrserverHost } from '../../utils/Hosts' import { playlistAllHost, shutdownHost, torrserverHost } from '../../utils/Hosts'
import DonateDialog from '../Donate' import DonateSnackbar from '../Donate'
import DonateDialog from '../Donate/DonateDialog'
import UploadDialog from '../Upload' import UploadDialog from '../Upload'
import useStyles from './useStyles' import useStyles from './useStyles'
export default function MiniDrawer() { export default function MiniDrawer() {
const classes = useStyles() const classes = useStyles()
const theme = useTheme() const theme = useTheme()
const [open, setOpen] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
const [tsVersion, setTSVersion] = useState('') const [tsVersion, setTSVersion] = useState('')
const handleDrawerOpen = () => { const handleDrawerOpen = () => {
setOpen(true) setIsDrawerOpen(true)
} }
const handleDrawerClose = () => { const handleDrawerClose = () => {
setOpen(false) setIsDrawerOpen(false)
} }
useEffect(() => { useEffect(() => {
@@ -49,14 +52,14 @@ export default function MiniDrawer() {
.then((txt) => { .then((txt) => {
if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt) if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt)
}) })
}, [open]) }, [isDrawerOpen])
return ( return (
<div className={classes.root}> <div className={classes.root}>
<AppBar <AppBar
position="fixed" position="fixed"
className={clsx(classes.appBar, { className={clsx(classes.appBar, {
[classes.appBarShift]: open, [classes.appBarShift]: isDrawerOpen,
})} })}
> >
<Toolbar> <Toolbar>
@@ -66,7 +69,7 @@ export default function MiniDrawer() {
onClick={handleDrawerOpen} onClick={handleDrawerOpen}
edge="start" edge="start"
className={clsx(classes.menuButton, { className={clsx(classes.menuButton, {
[classes.hide]: open, [classes.hide]: isDrawerOpen,
})} })}
> >
<MenuIcon /> <MenuIcon />
@@ -80,13 +83,13 @@ export default function MiniDrawer() {
<Drawer <Drawer
variant="permanent" variant="permanent"
className={clsx(classes.drawer, { className={clsx(classes.drawer, {
[classes.drawerOpen]: open, [classes.drawerOpen]: isDrawerOpen,
[classes.drawerClose]: !open, [classes.drawerClose]: !isDrawerOpen,
})} })}
classes={{ classes={{
paper: clsx({ paper: clsx({
[classes.drawerOpen]: open, [classes.drawerOpen]: isDrawerOpen,
[classes.drawerClose]: !open, [classes.drawerClose]: !isDrawerOpen,
}), }),
}} }}
> >
@@ -95,7 +98,7 @@ export default function MiniDrawer() {
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />} {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton> </IconButton>
</div> </div>
<Divider /> <Divider />
<List> <List>
@@ -114,7 +117,6 @@ export default function MiniDrawer() {
<List> <List>
<SettingsDialog /> <SettingsDialog />
<DonateDialog />
<AboutDialog /> <AboutDialog />
<ListItem button key="Close server" onClick={() => fetch(shutdownHost())}> <ListItem button key="Close server" onClick={() => fetch(shutdownHost())}>
<ListItemIcon> <ListItemIcon>
@@ -123,15 +125,27 @@ export default function MiniDrawer() {
<ListItemText primary="Close server" /> <ListItemText primary="Close server" />
</ListItem> </ListItem>
</List> </List>
<Divider />
<List>
<ListItem button key="Donation" onClick={() => setIsDonationDialogOpen(true)}>
<ListItemIcon>
<CreditCardIcon />
</ListItemIcon>
<ListItemText primary="Donate" />
</ListItem>
</List>
</Drawer> </Drawer>
<main className={classes.content}> <main className={classes.content}>
<div className={classes.toolbar} /> <div className={classes.toolbar} />
<TorrentList /> <TorrentList />
</main> </main>
<DonateDialog /> {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
</div> </div>
) )
} }

View File

@@ -29,7 +29,7 @@ export default makeStyles((theme) => ({
}, },
drawer: { drawer: {
width: drawerWidth, width: drawerWidth,
flexShrink: 0, flexShrink: 1,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
}, },
drawerOpen: { drawerOpen: {

View File

@@ -1,86 +0,0 @@
import React from 'react'
import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
import Dialog from '@material-ui/core/Dialog'
import DialogTitle from '@material-ui/core/DialogTitle'
import DialogContent from '@material-ui/core/DialogContent'
import DialogActions from '@material-ui/core/DialogActions'
import Button from '@material-ui/core/Button'
import Snackbar from '@material-ui/core/Snackbar'
import IconButton from '@material-ui/core/IconButton'
import CreditCardIcon from '@material-ui/icons/CreditCard'
import List from '@material-ui/core/List'
import ButtonGroup from '@material-ui/core/ButtonGroup'
const donateFrame =
'<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="100%" height="302" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
export default function DonateDialog() {
const [open, setOpen] = React.useState(false)
const [snakeOpen, setSnakeOpen] = React.useState(true)
// NOT USED FOR NOW
const handleClickOpen = () => {
setOpen(true)
}
const handleClose = () => {
setOpen(false)
}
return (
<div>
{/* !!!!!!!!!!! Should be removed or moved to sidebar because it is not visible. It is hiddent behind header */}
<ListItem button key="Donate" onClick={handleClickOpen}>
<ListItemIcon>
<CreditCardIcon />
</ListItemIcon>
<ListItemText primary="Donate" />
</ListItem>
{/* !!!!!!!!!!!!!!!!!!!! */}
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title" fullWidth>
<DialogTitle id="form-dialog-title">Donate</DialogTitle>
<DialogContent>
<List>
<ListItem>
<ButtonGroup variant="outlined" color="primary" aria-label="contained primary button group">
<Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
<Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>Yandex.Money</Button>
</ButtonGroup>
</ListItem>
<ListItem>
<div dangerouslySetInnerHTML={{ __html: donateFrame }} />
</ListItem>
</List>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary" variant="outlined">
Ok
</Button>
</DialogActions>
</Dialog>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
open={snakeOpen}
onClose={() => { setSnakeOpen(false) }}
autoHideDuration={6000}
message="Donate?"
action={
<React.Fragment>
<IconButton size="small" aria-label="close" color="inherit" onClick={() => {
setSnakeOpen(false)
setOpen(true)
}}>
<CreditCardIcon fontSize="small" />
</IconButton>
</React.Fragment>
}
/>
</div>
)
}

View File

@@ -0,0 +1,38 @@
import ListItem from '@material-ui/core/ListItem'
import Dialog from '@material-ui/core/Dialog'
import DialogTitle from '@material-ui/core/DialogTitle'
import DialogContent from '@material-ui/core/DialogContent'
import DialogActions from '@material-ui/core/DialogActions'
import List from '@material-ui/core/List'
import ButtonGroup from '@material-ui/core/ButtonGroup'
import Button from '@material-ui/core/Button'
const donateFrame =
'<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="100%" height="302" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
export default function DonateDialog ({ onClose }) {
return (
<Dialog open onClose={onClose} aria-labelledby="form-dialog-title" fullWidth>
<DialogTitle id="form-dialog-title">Donate</DialogTitle>
<DialogContent>
<List>
<ListItem>
<ButtonGroup variant="outlined" color="primary" aria-label="contained primary button group">
<Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
<Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>Yandex.Money</Button>
</ButtonGroup>
</ListItem>
<ListItem>
<div dangerouslySetInnerHTML={{ __html: donateFrame }} />
</ListItem>
</List>
</DialogContent>
<DialogActions>
<Button onClick={onClose} color="primary" variant="outlined">
Ok
</Button>
</DialogActions>
</Dialog>
)
}

View File

@@ -0,0 +1,48 @@
import { useState } from 'react'
import Button from '@material-ui/core/Button'
import Snackbar from '@material-ui/core/Snackbar'
import IconButton from '@material-ui/core/IconButton'
import CreditCardIcon from '@material-ui/icons/CreditCard'
import CloseIcon from '@material-ui/icons/Close'
import DonateDialog from './DonateDialog'
export default function DonateSnackbar() {
const [open, setOpen] = useState(false)
const [snackbarOpen, setSnackbarOpen] = useState(true)
const disableSnackbar = () => {
setSnackbarOpen(false)
localStorage.setItem('snackbarIsClosed', true)
}
return (
<>
{open && <DonateDialog onClose={() => setOpen(false)} />}
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
open={snackbarOpen}
onClose={disableSnackbar}
message="Donate?"
action={
<>
<Button style={{ marginRight: '10px' }} color="secondary" size="small" onClick={() => {
setOpen(true)
disableSnackbar()
}}>
<CreditCardIcon style={{ marginRight: '10px' }} fontSize="small" />
Support
</Button>
<IconButton size="small" aria-label="close" color="inherit" onClick={disableSnackbar}>
<CloseIcon fontSize="small" />
</IconButton>
</>
}
/>
</>
)
}

View File

@@ -50,6 +50,7 @@ export const TorrentCardDescription = styled.div`
background: #74c39c; background: #74c39c;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
word-break: break-word;
` `
export const TorrentCardDescriptionLabel = styled.div` export const TorrentCardDescriptionLabel = styled.div`