index.tsx raw

   1  import {
   2    AlertDialog,
   3    AlertDialogContent,
   4    AlertDialogDescription,
   5    AlertDialogFooter,
   6    AlertDialogHeader,
   7    AlertDialogTitle
   8  } from '@/components/ui/alert-dialog'
   9  import { Button } from '@/components/ui/button'
  10  import {
  11    Drawer,
  12    DrawerContent,
  13    DrawerDescription,
  14    DrawerFooter,
  15    DrawerHeader,
  16    DrawerTitle
  17  } from '@/components/ui/drawer'
  18  import { toRelaySettings } from '@/lib/link'
  19  import { useSecondaryPage } from '@/PageManager'
  20  import { useNostr } from '@/providers/NostrProvider'
  21  import { useScreenSize } from '@/providers/ScreenSizeProvider'
  22  import storage from '@/services/local-storage.service'
  23  import { useEffect, useState } from 'react'
  24  import { useTranslation } from 'react-i18next'
  25  
  26  export default function TooManyRelaysAlertDialog() {
  27    const { t } = useTranslation()
  28    const { isSmallScreen } = useScreenSize()
  29    const { push } = useSecondaryPage()
  30    const { relayList } = useNostr()
  31    const [open, setOpen] = useState(false)
  32  
  33    useEffect(() => {
  34      const dismissed = storage.getDismissedTooManyRelaysAlert()
  35      if (dismissed) return
  36  
  37      if (relayList && (relayList.read.length > 5 || relayList.write.length > 5)) {
  38        setOpen(true)
  39      } else {
  40        setOpen(false)
  41      }
  42    }, [relayList])
  43  
  44    if (!relayList) return null
  45  
  46    const handleFixNow = () => {
  47      setOpen(false)
  48      push(toRelaySettings('mailbox'))
  49    }
  50  
  51    const handleDismiss = () => {
  52      storage.setDismissedTooManyRelaysAlert(true)
  53      setOpen(false)
  54    }
  55  
  56    const handleMaybeLater = () => {
  57      setOpen(false)
  58    }
  59  
  60    const title = t('Optimize Relay Settings')
  61    const description = t(
  62      'Your current relay configuration may not be optimal. This could make it difficult for others to find your posts and may result in incomplete notifications.'
  63    )
  64  
  65    if (isSmallScreen) {
  66      return (
  67        <Drawer open={open} onOpenChange={setOpen}>
  68          <DrawerContent>
  69            <DrawerHeader>
  70              <DrawerTitle>{title}</DrawerTitle>
  71              <DrawerDescription>{description}</DrawerDescription>
  72            </DrawerHeader>
  73            <DrawerFooter>
  74              <Button onClick={handleFixNow}>{t('Optimize Now')}</Button>
  75              <Button variant="outline" onClick={handleMaybeLater}>
  76                {t('Maybe Later')}
  77              </Button>
  78              <Button
  79                onClick={handleDismiss}
  80                variant="link"
  81                className="text-muted-foreground text-xs"
  82              >
  83                {t("Don't remind me again")}
  84              </Button>
  85            </DrawerFooter>
  86          </DrawerContent>
  87        </Drawer>
  88      )
  89    }
  90  
  91    return (
  92      <AlertDialog open={open} onOpenChange={setOpen}>
  93        <AlertDialogContent>
  94          <AlertDialogHeader>
  95            <AlertDialogTitle>{title}</AlertDialogTitle>
  96            <AlertDialogDescription>{description}</AlertDialogDescription>
  97          </AlertDialogHeader>
  98          <AlertDialogFooter>
  99            <Button onClick={handleDismiss} variant="link" className="text-muted-foreground text-xs">
 100              {t("Don't remind me again")}
 101            </Button>
 102            <Button variant="outline" onClick={handleMaybeLater}>
 103              {t('Maybe Later')}
 104            </Button>
 105            <Button onClick={handleFixNow}>{t('Optimize Now')}</Button>
 106          </AlertDialogFooter>
 107        </AlertDialogContent>
 108      </AlertDialog>
 109    )
 110  }
 111