Copy ID support in popups

[prof-miles0]

No description provided.

[prof-miles0]

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...

[TurtIeSocks]

Suggested change

	const { perms } = useMemory((s) => s.auth)
	const admin = useMemory((s) => s.auth.perms.admin)

I know the way you have it is how it was done in the Nest Popup component, but that isn't the "correct" way and should be fixed there too. For new components though, I would prefer if you could use the way I suggested on Discord. That goes for the rest of the popups too. Thanks!

[prof-miles0]

Changes included. I still have to do it for spawnpoints and routes. This ones are going to be more difficult for me since I have to add the menu...

[TurtIeSocks]

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!