fix: hide alert when user is logged in

src/app/(default)/components/LandingHero.tsx

@@ -1,10 +1,10 @@
-import { MiniAlert } from '@/components/broadcast/MiniAlert'
+import { AppAlert } from '@/components/broadcast/AppAlert'
 import { SignupButton } from './DesktopHeader'
 
 export const LandingHero: React.FC = () => {
   return (
     <section className='mt-4'>
-      <MiniAlert
+      <AppAlert
         message={
           <>
             <h1 className='text-xl tracking-tighter font-bold'>Share your climbing route knowledge!</h1>

src/components/broadcast/MiniAlert.tsx → src/components/broadcast/AppAlert.tsx

@@ -1,26 +1,29 @@
 'use client'
 import Cookies from 'js-cookie'
 import { useState, useEffect } from 'react'
+import { useSession } from 'next-auth/react'
 import { SuppressButton } from './SuppressButton'
 
 const STORAGE_KEY = 'suppress-main-banner'
 
-export interface MiniAlertProps {
+export interface AppAlertProps {
   message: JSX.Element
 }
 
 /**
  * Main alert to be displayed under the nav bar.  Users can snooze the alert.
  * @param message alert content
  */
-export const MiniAlert: React.FC<MiniAlertProps> = ({ message }) => {
+export const AppAlert: React.FC<AppAlertProps> = ({ message }) => {
+  const { status } = useSession()
   const [showAlert, setShowAlert] = useState(false)
   useEffect(() => {
     const suppressed = Cookies.get(STORAGE_KEY)
     setShowAlert(suppressed == null)
   }, [])
 
-  return showAlert
+  // Hide alert if user is logged in
+  return showAlert && status !== 'authenticated'
     ? (
       <div className='z-40 w-fit alert alert-info flex flex-wrap justify-center xl:p-4 gap-4'>
         <div className='flex flex-col gap-2 items-start'>

src/components/broadcast/__tests__/AppAlert.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { MiniAlertProps } from '../MiniAlert'
+import { AppAlertProps } from '../AppAlert'
 import React from 'react'
 
 const cookieGetter = jest.fn()
@@ -14,20 +14,27 @@ jest.mock('js-cookie', () => ({
   }
 }))
 
-let MiniAlertComponent: React.FC<MiniAlertProps>
+jest.mock('next-auth/react', () => ({
+  __esModule: 'true',
+  useSession: () => ({
+    status: 'unauthenticated'
+  })
+}))
+
+let AppAlertComponent: React.FC<AppAlertProps>
 
 describe('Banner suppression', () => {
   beforeAll(async () => {
     // why async import?  see https://github.com/facebook/jest/issues/10025#issuecomment-716789840
-    const module = await import('../MiniAlert')
-    MiniAlertComponent = module.MiniAlert
+    const module = await import('../AppAlert')
+    AppAlertComponent = module.AppAlert
   })
 
   it('doesn\'t show alert when cookie exists', async () => {
     // cookie exists
     cookieGetter.mockReturnValueOnce('foo')
     render(
-      <MiniAlertComponent
+      <AppAlertComponent
         message={
           <div>
             important message
@@ -36,22 +43,23 @@ describe('Banner suppression', () => {
       />)
 
     expect(screen.queryAllByRole('button').length).toEqual(0)
+    cookieGetter.mockClear()
   })
 
   it('shows alert', async () => {
     // Clear previous cookie setting if any
-    cookieGetter.mockClear()
-
+    // cookieGetter.mockClear()
+    // cookieGetter.mockRejectedValueOnce(null)
     const user = userEvent.setup({ skipHover: true })
     render(
-      <MiniAlertComponent
+      <AppAlertComponent
         message={
           <div>
             important message 2
           </div>
       }
       />)
-
+    screen.debug()
     // click the Suppress button
     await user.click(screen.getByRole('button', { name: /Don't show this again/i }))
 

src/components/media/__tests__/PhotoUploadError.tsx

@@ -5,7 +5,7 @@ jest.mock('next/router')
 
 jest.mock('../../DesktopAppBar')
 jest.mock('../../MobileAppBar')
-jest.mock('../../broadcast/MiniAlert')
+jest.mock('../../broadcast/AppAlert')
 
 const getPhotoUploadErrorMessageFn = jest.fn()
 const setPhotoUploadErrorMessageFn = jest.fn()