index.tsx raw

   1  import { useScreenSize } from '@/providers/ScreenSizeProvider'
   2  import { Ellipsis } from 'lucide-react'
   3  import { Event } from 'nostr-tools'
   4  import { useState } from 'react'
   5  import { DesktopMenu } from './DesktopMenu'
   6  import { MobileMenu } from './MobileMenu'
   7  import RawEventDialog from './RawEventDialog'
   8  import ReportDialog from './ReportDialog'
   9  import { SubMenuAction, useMenuActions } from './useMenuActions'
  10  
  11  export default function NoteOptions({ event, className }: { event: Event; className?: string }) {
  12    const { isSmallScreen } = useScreenSize()
  13    const [isRawEventDialogOpen, setIsRawEventDialogOpen] = useState(false)
  14    const [isReportDialogOpen, setIsReportDialogOpen] = useState(false)
  15    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
  16    const [showSubMenu, setShowSubMenu] = useState(false)
  17    const [activeSubMenu, setActiveSubMenu] = useState<SubMenuAction[]>([])
  18    const [subMenuTitle, setSubMenuTitle] = useState('')
  19  
  20    const closeDrawer = () => {
  21      setIsDrawerOpen(false)
  22      setShowSubMenu(false)
  23    }
  24  
  25    const goBackToMainMenu = () => {
  26      setShowSubMenu(false)
  27    }
  28  
  29    const showSubMenuActions = (subMenu: SubMenuAction[], title: string) => {
  30      setActiveSubMenu(subMenu)
  31      setSubMenuTitle(title)
  32      setShowSubMenu(true)
  33    }
  34  
  35    const menuActions = useMenuActions({
  36      event,
  37      closeDrawer,
  38      showSubMenuActions,
  39      setIsRawEventDialogOpen,
  40      setIsReportDialogOpen,
  41      isSmallScreen
  42    })
  43  
  44    const trigger = (
  45      <button
  46        className="flex items-center text-muted-foreground hover:text-foreground pl-2 h-full"
  47        onClick={() => setIsDrawerOpen(true)}
  48      >
  49        <Ellipsis />
  50      </button>
  51    )
  52  
  53    return (
  54      <div className={className} onClick={(e) => e.stopPropagation()}>
  55        {isSmallScreen ? (
  56          <MobileMenu
  57            menuActions={menuActions}
  58            trigger={trigger}
  59            isDrawerOpen={isDrawerOpen}
  60            setIsDrawerOpen={setIsDrawerOpen}
  61            showSubMenu={showSubMenu}
  62            activeSubMenu={activeSubMenu}
  63            subMenuTitle={subMenuTitle}
  64            closeDrawer={closeDrawer}
  65            goBackToMainMenu={goBackToMainMenu}
  66          />
  67        ) : (
  68          <DesktopMenu menuActions={menuActions} trigger={trigger} />
  69        )}
  70  
  71        <RawEventDialog
  72          event={event}
  73          isOpen={isRawEventDialogOpen}
  74          onClose={() => setIsRawEventDialogOpen(false)}
  75        />
  76        <ReportDialog
  77          event={event}
  78          isOpen={isReportDialogOpen}
  79          closeDialog={() => setIsReportDialogOpen(false)}
  80        />
  81      </div>
  82    )
  83  }
  84