Badge notifications ui changes

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 = query['show'] == 'badges'
-    const showBadgesModal = router.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(

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']
+      const queriesToDelete = ['claimed-mana', 'show', 'badge']
-      delete query['show']
+      queriesToDelete.forEach((key) => delete query[key])
       router.replace(
         {
           pathname: router.pathname,
@@ -102,7 +102,7 @@ export function UserPage(props: { user: User }) {
                 </span>
                 <Row className="sm:text-md -mt-1 items-center gap-x-3 text-sm ">
                   <span className={' text-greyscale-4'}>@{user.username}</span>
-                  <BadgeDisplay user={user} router={router} />
+                  <BadgeDisplay user={user} query={router.query} />
                 </Row>
               </Col>
               {isCurrentUser && (

web/pages/notifications.tsx

@@ -826,7 +826,8 @@ function NotificationFrame(props: {
   subtitle: string
   children: React.ReactNode
   isChildOfGroup?: boolean
-  showUserName?: boolean
+  hideUserName?: boolean
+  hideLinkToGroupOrQuestion?: boolean
 }) {
   const {
     notification,
@@ -834,7 +835,8 @@ function NotificationFrame(props: {
     highlighted,
     subtitle,
     children,
-    showUserName,
+    hideUserName,
+    hideLinkToGroupOrQuestion,
   } = props
   const {
     sourceType,
@@ -888,7 +890,7 @@ function NotificationFrame(props: {
               }
             >
               <div>
-                {showUserName && (
+                {!hideUserName && (
                   <UserLink
                     name={sourceUserName || ''}
                     username={sourceUserUsername || ''}
@@ -900,7 +902,9 @@ function NotificationFrame(props: {
                 {isChildOfGroup ? (
                   <RelativeTimestamp time={notification.createdTime} />
                 ) : (
-                  <QuestionOrGroupLink notification={notification} />
+                  !hideLinkToGroupOrQuestion && (
+                    <QuestionOrGroupLink notification={notification} />
+                  )
                 )}
               </div>
             </div>
@@ -1034,7 +1038,8 @@ function BadgeNotification(props: {
       isChildOfGroup={isChildOfGroup}
       highlighted={highlighted}
       subtitle={subtitle}
-      showUserName={false}
+      hideUserName={true}
+      hideLinkToGroupOrQuestion={true}
     >
       <Row>
         <span>{sourceText} 🎉</span>