fix: gym badge menu from popup

WatWowMap · Jan 7, 2024 · 8cea2fb · 8cea2fb
1 parent 7068f6a
commit 8cea2fb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 31 deletions.
diff --git a/src/components/layout/dialogs/UserProfile.jsx b/src/components/layout/dialogs/UserProfile.jsx
@@ -429,10 +429,7 @@ const GymBadges = () => {
 const BadgeTile = ({ badge, ...gym }) => {
   const { t } = useTranslation()
   const map = useMap()
-  const [local, setLocal] = React.useState(badge)
-  const badgeIcon = useStatic((s) => s.Icons.getMisc(`badge_${local}`))
-
-  React.useEffect(() => setLocal(badge), [badge])
+  const badgeIcon = useStatic((s) => s.Icons.getMisc(`badge_${badge}`))
 
   return badge ? (
     <Box className="vgrid-item">
@@ -442,7 +439,7 @@ const BadgeTile = ({ badge, ...gym }) => {
         size="small"
         onClick={() =>
           useLayoutStore.setState({
-            gymBadge: { badge: local, gymId: gym.id, open: true },
+            gymBadge: { badge, gymId: gym.id, open: true },
           })
         }
       >
@@ -461,7 +458,7 @@ const BadgeTile = ({ badge, ...gym }) => {
           width={120}
         />
         {gym.deleted && <div className="disabled-overlay badge-diamond" />}
-        {local && <Img src={badgeIcon} alt={local} width={96} zIndex={10} />}
+        {badge && <Img src={badgeIcon} alt={badge} width={96} zIndex={10} />}
       </Button>
 
       <Typography

diff --git a/src/components/popups/Gym.jsx b/src/components/popups/Gym.jsx
@@ -8,22 +8,20 @@ import {
   Collapse,
   IconButton,
   Divider,
-  Dialog,
   MenuItem,
   Menu,
 } from '@mui/material'
 
 import { useTranslation } from 'react-i18next'
 
 import { useSyncData } from '@components/layout/dialogs/webhooks/hooks'
-import { useStore, useStatic } from '@hooks/useStore'
+import { useStore, useStatic, useLayoutStore } from '@hooks/useStore'
 import useWebhook from '@hooks/useWebhook'
 import Utility from '@services/Utility'
 import ErrorBoundary from '@components/ErrorBoundary'
 import { TextWithIcon } from '@components/layout/general/Img'
 
 import Title from './common/Title'
-import BadgeSelection from '../layout/dialogs/BadgeSelection'
 import PowerUp from './common/PowerUp'
 import GenderIcon from './common/GenderIcon'
 import Navigation from './common/Navigation'
@@ -132,39 +130,21 @@ export default function GymPopup({ hasRaid, hasHatched, raidIconUrl, ...gym }) {
  */
 const MenuActions = ({ hasRaid, ...gym }) => {
   const [anchorEl, setAnchorEl] = React.useState(null)
-  const [badgeMenu, setBadgeMenu] = React.useState(false)
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget)
   }
 
   const handleClose = React.useCallback(() => setAnchorEl(null), [])
 
-  const handleCloseBadge = React.useCallback((open) => {
-    handleClose()
-    setBadgeMenu(open)
-  }, [])
-
   return (
     <Grid item xs={2} textAlign="right">
       <IconButton aria-haspopup="true" onClick={handleClick} size="large">
         <MoreVert />
       </IconButton>
       <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={handleClose}>
-        <DropdownOptions
-          {...gym}
-          hasRaid={hasRaid}
-          handleClose={handleClose}
-          handleCloseBadge={handleCloseBadge}
-        />
+        <DropdownOptions {...gym} hasRaid={hasRaid} handleClose={handleClose} />
       </Menu>
-      <Dialog open={badgeMenu} onClose={handleCloseBadge}>
-        <BadgeSelection
-          id={gym.id}
-          setBadgeMenu={handleCloseBadge}
-          badge={gym.badge}
-        />
-      </Dialog>
     </Grid>
   )
 }
@@ -173,15 +153,14 @@ const MenuActions = ({ hasRaid, ...gym }) => {
  *
  * @param {{
  *  handleClose: () => void
- *  handleCloseBadge: (open: boolean) => void
  *  hasRaid: boolean
  * } & import('@rm/types').Gym} param0
  * @returns
  */
 const DropdownOptions = ({
   id,
+  badge,
   handleClose,
-  handleCloseBadge,
   updated,
   team_id,
   hasRaid,
@@ -258,7 +237,10 @@ const DropdownOptions = ({
     if (gymBadges) {
       options.push({
         name: 'gym_badge_menu',
-        action: () => handleCloseBadge(true),
+        action: () =>
+          useLayoutStore.setState({
+            gymBadge: { badge, gymId: id, open: true },
+          }),
       })
     }
   }