diff --git a/web/components/badge-display.tsx b/web/components/badge-display.tsx
index 983956cd..df101c7d 100644
--- a/web/components/badge-display.tsx
+++ b/web/components/badge-display.tsx
@@ -1,10 +1,10 @@
import { User } from 'common/user'
-import { NextRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { getBadgesByRarity } from 'common/badge'
import { Row } from 'web/components/layout/row'
import clsx from 'clsx'
import { BadgesModal } from 'web/components/profile/badges-modal'
+import { ParsedUrlQuery } from 'querystring'
export const goldClassName = 'text-amber-400'
export const silverClassName = 'text-gray-500'
@@ -12,16 +12,16 @@ export const bronzeClassName = 'text-amber-900'
export function BadgeDisplay(props: {
user: User | undefined | null
- router?: NextRouter
+ query: ParsedUrlQuery
}) {
- const { user, router } = props
+ const { user, query } = props
const [showBadgesModal, setShowBadgesModal] = useState(false)
useEffect(() => {
- if (!router) return
- const showBadgesModal = router.query['show'] === 'badges'
+ const showBadgesModal = query['show'] == 'badges'
setShowBadgesModal(showBadgesModal)
- }, [router])
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
// get number of badges of each rarity type
const badgesByRarity = getBadgesByRarity(user)
const badgesByRarityItems = Object.entries(badgesByRarity).map(
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index f0ad0569..3f2176dc 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -50,8 +50,8 @@ export function UserPage(props: { user: User }) {
setShowConfetti(claimedMana)
const query = { ...router.query }
if (query.claimedMana || query.show) {
- delete query['claimed-mana']
- delete query['show']
+ const queriesToDelete = ['claimed-mana', 'show', 'badge']
+ queriesToDelete.forEach((key) => delete query[key])
router.replace(
{
pathname: router.pathname,
@@ -102,7 +102,7 @@ export function UserPage(props: { user: User }) {