Skip to content

Commit d19fc74

Browse files
TurtIeSocksTurtIeSocks
committed
fix: the travesty that was the nest popup
1 parent 744ca90 commit d19fc74

5 files changed

Lines changed: 142 additions & 121 deletions

File tree

‎src/components/dialogs/NestSubmission.jsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,8 @@ import { useLayoutStore } from '@store/useLayoutStore'
1313
import { Header } from './Header'
1414
import { Footer } from './Footer'
1515

16-
/**
17-
* @param {{ id: number, name: string }} props
18-
* @returns
19-
*/
20-
export function NestSubmission({ id, name }) {
21-
const open = useLayoutStore((s) => s.nestSubmissions)
16+
export function NestSubmission() {
17+
const { id, name } = useLayoutStore((s) => s.nestSubmissions)
2218
const [newName, setNewName] = React.useState(name)
2319
const { t } = useTranslation()
2420

@@ -29,7 +25,13 @@ export function NestSubmission({ id, name }) {
2925
},
3026
)
3127

32-
const handleClose = () => useLayoutStore.setState({ nestSubmissions: '0' })
28+
const handleClose = () =>
29+
useLayoutStore.setState({
30+
nestSubmissions: {
31+
id: 0,
32+
name: '',
33+
},
34+
})
3335

3436
const handleSubmit = (e) => {
3537
if (e) e.preventDefault()
@@ -44,7 +46,7 @@ export function NestSubmission({ id, name }) {
4446
}
4547

4648
React.useEffect(() => {
47-
if (name !== newName && open === id) setNewName(name)
49+
if (name !== newName && id) setNewName(name)
4850
}, [id, name])
4951

5052
React.useEffect(() => {
@@ -65,7 +67,7 @@ export function NestSubmission({ id, name }) {
6567
}, [error])
6668

6769
return (
68-
<Dialog open={open === id} onClose={handleClose}>
70+
<Dialog open={!!id} onClose={handleClose}>
6971
<Header titles="nest_submission_menu" action={handleClose} />
7072
<DialogContent sx={{ mt: 2 }}>
7173
<form noValidate autoComplete="off" onSubmit={handleSubmit}>

‎src/features/nest/NestPopup.jsx‎

Lines changed: 114 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@ import { useTranslation } from 'react-i18next'
1313
import { useMemory } from '@store/useMemory'
1414
import { useLayoutStore } from '@store/useLayoutStore'
1515
import { setDeepStore } from '@store/useStorage'
16-
import { NestSubmission } from '@components/dialogs/NestSubmission'
1716
import { getTimeUntil } from '@utils/getTimeUntil'
1817
import { useAnalytics } from '@hooks/useAnalytics'
19-
import { Popup } from 'react-leaflet'
18+
import { Navigation } from '@components/popups/Navigation'
2019

2120
/** @param {number} timeSince */
2221
const getColor = (timeSince) => {
@@ -52,7 +51,7 @@ export function NestPopup({
5251
lon,
5352
}) {
5453
const { t } = useTranslation()
55-
const { perms } = useMemory((s) => s.auth)
54+
const submissionPerm = useMemory((s) => s.auth.perms.nestSubmissions)
5655

5756
const [parkName, setParkName] = React.useState(true)
5857
const [anchorEl, setAnchorEl] = React.useState(null)
@@ -80,121 +79,129 @@ export function NestPopup({
8079
]
8180

8281
return (
83-
<Popup position={[lat, lon]}>
84-
<Grid
85-
container
86-
justifyContent="center"
87-
alignItems="center"
88-
style={{ width: 200 }}
89-
spacing={1}
90-
>
91-
<Grid xs={pokemon_id ? 9 : 12} textAlign="center">
82+
<Grid
83+
container
84+
justifyContent="center"
85+
alignItems="center"
86+
style={{ width: 200 }}
87+
spacing={1}
88+
>
89+
<Grid xs={pokemon_id ? 9 : 12} textAlign="center">
90+
<Typography
91+
variant={name.length > 20 ? 'subtitle2' : 'h6'}
92+
align="center"
93+
noWrap={parkName}
94+
onClick={() => setParkName(!parkName)}
95+
>
96+
{name}
97+
</Typography>
98+
{submitted_by && (
9299
<Typography
93-
variant={name.length > 20 ? 'subtitle2' : 'h6'}
94-
align="center"
100+
variant="caption"
101+
fontSize={10}
95102
noWrap={parkName}
96103
onClick={() => setParkName(!parkName)}
97104
>
98-
{name}
105+
{t('submitted_by')}: {submitted_by}
99106
</Typography>
100-
{submitted_by && (
101-
<Typography
102-
variant="caption"
103-
fontSize={10}
104-
noWrap={parkName}
105-
onClick={() => setParkName(!parkName)}
106-
>
107-
{t('submitted_by')}: {submitted_by}
108-
</Typography>
109-
)}
110-
</Grid>
111-
{!!pokemon_id && (
112-
<Grid xs={3}>
113-
<IconButton aria-haspopup="true" onClick={handleClick} size="large">
114-
<MoreVert />
115-
</IconButton>
116-
</Grid>
117107
)}
118-
<Menu
119-
anchorEl={anchorEl}
120-
keepMounted
121-
open={!!anchorEl}
122-
onClose={handleClose}
123-
PaperProps={{
124-
style: {
125-
maxHeight: 216,
126-
minWidth: '20ch',
127-
},
128-
}}
108+
</Grid>
109+
{!!pokemon_id && (
110+
<Grid xs={3}>
111+
<IconButton aria-haspopup="true" onClick={handleClick} size="large">
112+
<MoreVert />
113+
</IconButton>
114+
</Grid>
115+
)}
116+
<Menu
117+
anchorEl={anchorEl}
118+
keepMounted
119+
open={!!anchorEl}
120+
onClose={handleClose}
121+
PaperProps={{
122+
style: {
123+
maxHeight: 216,
124+
minWidth: '20ch',
125+
},
126+
}}
127+
>
128+
{options.map((option) => (
129+
<MenuItem key={option.key || option.name} onClick={option.action}>
130+
{typeof option.name === 'string' ? t(option.name) : option.name}
131+
</MenuItem>
132+
))}
133+
</Menu>
134+
{!!pokemon_id && (
135+
<Grid xs={6} textAlign="center">
136+
<img
137+
src={iconUrl}
138+
alt={iconUrl}
139+
style={{
140+
maxHeight: 75,
141+
maxWidth: 75,
142+
}}
143+
/>
144+
<br />
145+
<Typography variant="caption">{t(`poke_${pokemon_id}`)}</Typography>
146+
</Grid>
147+
)}
148+
<Grid xs={pokemon_id ? 6 : 12} textAlign="center">
149+
<Typography variant="subtitle2">{t('last_updated')}</Typography>
150+
<Typography
151+
variant={lastUpdated.str.includes('D') ? 'h6' : 'subtitle2'}
152+
color={getColor(lastUpdated.diff)}
129153
>
130-
{options.map((option) => (
131-
<MenuItem key={option.key || option.name} onClick={option.action}>
132-
{typeof option.name === 'string' ? t(option.name) : option.name}
133-
</MenuItem>
134-
))}
135-
</Menu>
136-
{!!pokemon_id && (
137-
<Grid xs={6} textAlign="center">
138-
<img
139-
src={iconUrl}
140-
alt={iconUrl}
141-
style={{
142-
maxHeight: 75,
143-
maxWidth: 75,
144-
}}
145-
/>
154+
{lastUpdated.str.replace('days', t('days')).replace('day', t('day'))}
155+
</Typography>
156+
<Typography variant="subtitle2">
157+
~{pokemon_avg?.toFixed(2) || 0} {t('spawns_per_hour')}
158+
</Typography>
159+
</Grid>
160+
<Grid xs={12}>
161+
<Divider style={{ margin: 4 }} />
162+
</Grid>
163+
<Grid xs={12} textAlign="center">
164+
{recent ? (
165+
<Typography variant="caption">
166+
{t('nest_estimated')}
146167
<br />
147-
<Typography variant="caption">{t(`poke_${pokemon_id}`)}</Typography>
148-
</Grid>
149-
)}
150-
<Grid xs={pokemon_id ? 6 : 12} textAlign="center">
151-
<Typography variant="subtitle2">{t('last_updated')}</Typography>
152-
<Typography
153-
variant={lastUpdated.str.includes('D') ? 'h6' : 'subtitle2'}
154-
color={getColor(lastUpdated.diff)}
155-
>
156-
{lastUpdated.str
157-
.replace('days', t('days'))
158-
.replace('day', t('day'))}
168+
{t('verify_nests')}
159169
</Typography>
160-
<Typography variant="subtitle2">
161-
~{pokemon_avg?.toFixed(2) || 0} {t('spawns_per_hour')}
170+
) : (
171+
<Typography variant="caption">
172+
{t('nest_out_of_date')}
173+
<br />
174+
{t('nest_check_current')}
162175
</Typography>
163-
</Grid>
164-
<Grid xs={12}>
165-
<Divider style={{ margin: 4 }} />
166-
</Grid>
167-
<Grid xs={12} textAlign="center">
168-
{recent ? (
169-
<Typography variant="caption">
170-
{t('nest_estimated')}
171-
<br />
172-
{t('verify_nests')}
173-
</Typography>
174-
) : (
175-
<Typography variant="caption">
176-
{t('nest_out_of_date')}
177-
<br />
178-
{t('nest_check_current')}
179-
</Typography>
180-
)}
181-
</Grid>
182-
{perms.nestSubmissions && (
183-
<Grid xs={12} textAlign="center">
184-
<Button
185-
color="secondary"
186-
variant="outlined"
187-
size="small"
188-
onClick={() =>
189-
useLayoutStore.setState({ nestSubmissions: `${id}` })
190-
}
191-
>
192-
{t('submit_nest_name')}
193-
</Button>
194-
</Grid>
195176
)}
196177
</Grid>
197-
<NestSubmission id={id} name={name} />
198-
</Popup>
178+
{submissionPerm && (
179+
<Grid xs={9} textAlign="center">
180+
<Button
181+
color="secondary"
182+
variant="outlined"
183+
size="small"
184+
onClick={() =>
185+
useLayoutStore.setState({
186+
nestSubmissions: {
187+
id: `${id}`,
188+
name: `${name}`,
189+
},
190+
})
191+
}
192+
>
193+
<Typography variant="caption">{t('submit_nest_name')}</Typography>
194+
</Button>
195+
</Grid>
196+
)}
197+
<Grid
198+
xs={submissionPerm ? 3 : 12}
199+
container
200+
alignItems="center"
201+
justifyContent="center"
202+
>
203+
<Navigation lat={lat} lon={lon} />
204+
</Grid>
205+
</Grid>
199206
)
200207
}

‎src/features/nest/NestTile.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/* eslint-disable react/destructuring-assignment */
33

44
import * as React from 'react'
5-
import { GeoJSON, Marker } from 'react-leaflet'
5+
import { GeoJSON, Marker, Popup } from 'react-leaflet'
66

77
import { basicEqualFn, useMemory } from '@store/useMemory'
88
import { useStorage } from '@store/useStorage'
@@ -40,11 +40,15 @@ const BaseNestTile = (nest) => {
4040
recent={recent}
4141
nest={nest}
4242
>
43-
<NestPopup iconUrl={iconUrl} recent={recent} {...nest} />
43+
<Popup>
44+
<NestPopup iconUrl={iconUrl} recent={recent} {...nest} />
45+
</Popup>
4446
</NestMarker>
4547
)}
4648
<NestGeoJSON polygon_path={nest.polygon_path}>
47-
<NestPopup iconUrl={iconUrl} recent={recent} {...nest} />
49+
<Popup>
50+
<NestPopup iconUrl={iconUrl} recent={recent} {...nest} />
51+
</Popup>
4852
</NestGeoJSON>
4953
</>
5054
)

‎src/pages/map/components/Nav.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { AdvancedFilter } from '@components/filters/Advanced'
2020
import { BadgeSelection } from '@components/dialogs/BadgeSelection'
2121
import { SlotSelection } from '@components/filters/SlotSelection'
2222
import { HelpDialog } from '@components/dialogs/Help'
23+
import { NestSubmission } from '@components/dialogs/NestSubmission'
2324
import { Drawer, PkmnFilterHelp } from '@features/drawer'
2425
import { useMemory } from '@store/useMemory'
2526

@@ -53,6 +54,7 @@ export const Nav = React.memo(
5354
<SlotSelection />
5455
<HelpDialog />
5556
<PkmnFilterHelp />
57+
<NestSubmission />
5658
</>
5759
)}
5860
</>

‎src/store/useLayoutStore.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import { useStorage } from './useStorage'
77

88
/**
99
* @typedef {{
10-
* nestSubmissions: string | number,
10+
* nestSubmissions: {
11+
* id: string | number,
12+
* name: string,
13+
* },
1114
* help: {
1215
* open: boolean,
1316
* category: string,
@@ -42,7 +45,10 @@ import { useStorage } from './useStorage'
4245
* @type {import("zustand").UseBoundStore<import("zustand").StoreApi<UseLayoutStore>>}
4346
*/
4447
export const useLayoutStore = create(() => ({
45-
nestSubmissions: '0',
48+
nestSubmissions: {
49+
id: '',
50+
name: '',
51+
},
4652
help: { open: false, category: '' },
4753
motd: false,
4854
pkmnFilterHelp: false,

0 commit comments

Comments
 (0)