SeenOnButton.tsx raw

   1  import { useSecondaryPage } from '@/PageManager'
   2  import { Button } from '@/components/ui/button'
   3  import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer'
   4  import {
   5    DropdownMenu,
   6    DropdownMenuContent,
   7    DropdownMenuItem,
   8    DropdownMenuLabel,
   9    DropdownMenuSeparator,
  10    DropdownMenuTrigger
  11  } from '@/components/ui/dropdown-menu'
  12  import { useStuff } from '@/hooks/useStuff'
  13  import { toRelay } from '@/lib/link'
  14  import { simplifyUrl } from '@/lib/url'
  15  import { useScreenSize } from '@/providers/ScreenSizeProvider'
  16  import client from '@/services/client.service'
  17  import { Server } from 'lucide-react'
  18  import { Event } from 'nostr-tools'
  19  import { useEffect, useState } from 'react'
  20  import { useTranslation } from 'react-i18next'
  21  import RelayIcon from '../RelayIcon'
  22  
  23  export default function SeenOnButton({ stuff }: { stuff: Event | string }) {
  24    const { t } = useTranslation()
  25    const { isSmallScreen } = useScreenSize()
  26    const { push } = useSecondaryPage()
  27    const { event } = useStuff(stuff)
  28    const [relays, setRelays] = useState<string[]>([])
  29    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
  30  
  31    useEffect(() => {
  32      if (!event) return
  33  
  34      const seenOn = client.getSeenEventRelayUrls(event.id)
  35      setRelays(seenOn)
  36    }, [])
  37  
  38    const trigger = (
  39      <button
  40        className="flex gap-1 items-center text-muted-foreground enabled:hover:text-primary pl-3 h-full disabled:text-muted-foreground/40"
  41        title={t('Seen on')}
  42        disabled={relays.length === 0}
  43        onClick={() => {
  44          if (!event) return
  45  
  46          if (isSmallScreen) {
  47            setIsDrawerOpen(true)
  48          }
  49        }}
  50      >
  51        <Server />
  52        {relays.length > 0 && <div className="text-sm">{relays.length}</div>}
  53      </button>
  54    )
  55  
  56    if (relays.length === 0) {
  57      return trigger
  58    }
  59  
  60    if (isSmallScreen) {
  61      return (
  62        <>
  63          {trigger}
  64          <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
  65            <DrawerOverlay onClick={() => setIsDrawerOpen(false)} />
  66            <DrawerContent hideOverlay>
  67              <div className="py-2">
  68                {relays.map((relay) => (
  69                  <Button
  70                    className="w-full p-6 justify-start text-lg gap-4"
  71                    variant="ghost"
  72                    key={relay}
  73                    onClick={() => {
  74                      setIsDrawerOpen(false)
  75                      setTimeout(() => {
  76                        push(toRelay(relay))
  77                      }, 50) // Timeout to allow the drawer to close before navigating
  78                    }}
  79                  >
  80                    <RelayIcon url={relay} /> {simplifyUrl(relay)}
  81                  </Button>
  82                ))}
  83              </div>
  84            </DrawerContent>
  85          </Drawer>
  86        </>
  87      )
  88    }
  89  
  90    return (
  91      <DropdownMenu>
  92        <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
  93        <DropdownMenuContent>
  94          <DropdownMenuLabel>{t('Seen on')}</DropdownMenuLabel>
  95          <DropdownMenuSeparator />
  96          {relays.map((relay) => (
  97            <DropdownMenuItem key={relay} onClick={() => push(toRelay(relay))} className="min-w-52">
  98              <RelayIcon url={relay} />
  99              {simplifyUrl(relay)}
 100            </DropdownMenuItem>
 101          ))}
 102        </DropdownMenuContent>
 103      </DropdownMenu>
 104    )
 105  }
 106