import Alert from 'react-bootstrap/Alert' import styles from './banners.module.css' import { useEffect, useState } from 'react' import { useMe } from '../components/me' import { useMutation } from '@apollo/client' import { WELCOME_BANNER_MUTATION } from '../fragments/users' import { useToast } from '../components/toast' export default function WelcomeBanner () { const me = useMe() const toaster = useToast() const [hidden, setHidden] = useState(true) const handleClose = async () => { window.localStorage.setItem('hideWelcomeBanner', true) setHidden(true) if (me) { try { await hideWelcomeBanner() } catch (err) { console.log(err) toaster.danger('mutation failed') } } } const [hideWelcomeBanner] = useMutation(WELCOME_BANNER_MUTATION, { update (cache) { cache.modify({ id: `User:${me.id}`, fields: { hideWelcomeBanner () { return true } } }) } }) useEffect(() => { setHidden(me?.hideWelcomeBanner || (!me && window.localStorage.getItem('hideWelcomeBanner'))) }, [me?.hideWelcomeBanner]) if (hidden) return return ( 👋 Welcome to Stacker News!

To get started, check out our{' '} FAQs or{' '} content guidelines, or go ahead and{' '} { me ? ( make a post ) : ( <> sign up or create an{' '} anonymous post ) }.

) }