added two different behaviours for donation button in sidebar and snackbar

2025-12-19 21:46:11 +05:00 · 2021-05-24 21:46:29 +03:00
parent 897d6c0b23
commit 56bb3ac4e1
5 changed files with 117 additions and 103 deletions
--- a/web/src/components/Appbar/index.js
+++ b/web/src/components/Appbar/index.js
@@ -14,6 +14,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
+import CreditCardIcon from '@material-ui/icons/CreditCard'

 import ListIcon from '@material-ui/icons/List'
 import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'
@@ -25,22 +26,24 @@ import RemoveAll from '../RemoveAll'
 import SettingsDialog from '../Settings'
 import AboutDialog from '../About'
 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 useStyles from './useStyles'

 export default function MiniDrawer() {
    const classes = useStyles()
    const theme = useTheme()
-    const [open, setOpen] = useState(false)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
    const [tsVersion, setTSVersion] = useState('')

    const handleDrawerOpen = () => {
-        setOpen(true)
+        setIsDrawerOpen(true)
    }

    const handleDrawerClose = () => {
-        setOpen(false)
+        setIsDrawerOpen(false)
    }

    useEffect(() => {
@@ -49,14 +52,14 @@ export default function MiniDrawer() {
            .then((txt) => {
                if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt)
            })
-    }, [open])
+    }, [isDrawerOpen])

    return (
        <div className={classes.root}>
            <AppBar
                position="fixed"
                className={clsx(classes.appBar, {
-                    [classes.appBarShift]: open,
+                    [classes.appBarShift]: isDrawerOpen,
                })}
            >
                <Toolbar>
@@ -66,7 +69,7 @@ export default function MiniDrawer() {
                        onClick={handleDrawerOpen}
                        edge="start"
                        className={clsx(classes.menuButton, {
-                            [classes.hide]: open,
+                            [classes.hide]: isDrawerOpen,
                        })}
                    >
                        <MenuIcon />
@@ -80,13 +83,13 @@ export default function MiniDrawer() {
            <Drawer
                variant="permanent"
                className={clsx(classes.drawer, {
-                    [classes.drawerOpen]: open,
-                    [classes.drawerClose]: !open,
+                    [classes.drawerOpen]: isDrawerOpen,
+                    [classes.drawerClose]: !isDrawerOpen,
                })}
                classes={{
                    paper: clsx({
-                        [classes.drawerOpen]: open,
-                        [classes.drawerClose]: !open,
+                        [classes.drawerOpen]: isDrawerOpen,
+                        [classes.drawerClose]: !isDrawerOpen,
                    }),
                }}
            >
@@ -95,7 +98,7 @@ export default function MiniDrawer() {
                        {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
                    </IconButton>
                </div>
-                
+
                <Divider />

                <List>
@@ -114,7 +117,6 @@ export default function MiniDrawer() {

                <List>
                    <SettingsDialog />
-                    <DonateDialog />
                    <AboutDialog />
                    <ListItem button key="Close server" onClick={() => fetch(shutdownHost())}>
                        <ListItemIcon>
@@ -123,15 +125,27 @@ export default function MiniDrawer() {
                        <ListItemText primary="Close server" />
                    </ListItem>
                </List>
+
+                <Divider />
+
+                <List>
+                    <ListItem button key="Donation" onClick={() => setIsDonationDialogOpen(true)}>
+                        <ListItemIcon>
+                            <CreditCardIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Donate" />
+                    </ListItem>
+                </List>
            </Drawer>
-            
+
            <main className={classes.content}>
                <div className={classes.toolbar} />
-                
+
                <TorrentList />
            </main>

-            <DonateDialog />
+            {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+            {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
        </div>
    )
 }
--- a/web/src/components/Appbar/useStyles.js
+++ b/web/src/components/Appbar/useStyles.js
@@ -29,7 +29,7 @@ export default makeStyles((theme) => ({
  },
  drawer: {
      width: drawerWidth,
-      flexShrink: 0,
+      flexShrink: 1,
      whiteSpace: 'nowrap',
  },
  drawerOpen: {
--- a/web/src/components/Donate.js
+++ b/web/src/components/Donate.js
@@ -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>
-    )
-}
--- a/web/src/components/Donate/DonateDialog.js
+++ b/web/src/components/Donate/DonateDialog.js
@@ -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>
+  )
+}
--- a/web/src/components/Donate/index.js
+++ b/web/src/components/Donate/index.js
@@ -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>
+                    </>
+                }
+            />
+        </>
+    )
+}