Copy ID support in popups

I think I need help to include the Menu in spawnpoints popup. Nests pokestops and gyms are working fine since those already had the menu...

Here's a recommend reusable component:

// /src/components/popups/CopyIDMenu.jsx

// @ts-check
import * as React from 'react'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'
import IconButton from '@mui/material/IconButton'
import { useTranslation } from 'react-i18next'
import MoreVert from '@mui/icons-material/MoreVert'
import Grid from '@mui/material/Unstable_Grid2'

import { useMemory } from '@store/useMemory'

const PAPER_PROPS =
  /** @type {import('@mui/material').MenuProps['PaperProps']} */ ({
    style: {
      maxHeight: 216,
      minWidth: '20ch',
    },
  })

/**
 * @param {{ id: string | number, children?: React.ReactNode } & import('@mui/material').Grid2Props} props
 */
export function CopyIDMenu({ id, children, ...props }) {
  const [anchorEl, setAnchorEl] = React.useState(null)

  /** @type {import('@mui/material').IconButtonProps['onClick']} */
  const onClick = (event) => setAnchorEl(event.currentTarget)

  const handleClose = () => setAnchorEl(null)

  return (
    <Grid textAlign="right" {...props}>
      <IconButton onClick={onClick}>
        <MoreVert />
      </IconButton>
      <Menu
        anchorEl={anchorEl}
        keepMounted
        open={!!anchorEl}
        onClose={handleClose}
        PaperProps={PAPER_PROPS}
      >
        {children}
        <CopyIDMenuItem id={id} handleClose={handleClose} />
      </Menu>
    </Grid>
  )
}

/**
 * @param {{ id: string | number, handleClose: () => void }} props
 */
export function CopyIDMenuItem({ id, handleClose }) {
  const { t } = useTranslation()
  const admin = useMemory((s) => s.auth.perms.admin)

  const onClick = React.useCallback(() => {
    navigator.clipboard.writeText(String(id))
    handleClose()
  }, [id, handleClose])

  return admin && <MenuItem onClick={onClick}>{t('copy_id')}</MenuItem>
}

Then in your Spawnpoint popup you can change the top to something like this:

      <Grid container alignItems="center">
        <Grid xs={10}>
          <Typography variant="h5" align="center">
            {t('spawnpoint')}
          </Typography>
        </Grid>
        <CopyIDMenu id={id} xs={2} />
      </Grid>

( Make sure to import the new components needed )

Then in your Route popup, something like this:

        <Grid2 xs={10}>
          <Title>{route.name}</Title>
        </Grid2>
        <Grid2 xs={2}>
          <CopyIDMenu id={route.id} />
        </Grid2>

Let me know if those work for you or if you have any other questions! Thanks for the contribution so far, looking great!

WatWowMap / ReactMap

Copy ID support in popups #989