don't show announcement when signed in

components/Announcement.js

@@ -1,39 +1,44 @@
 import React from 'react'
 
+import { useAuth } from './AuthContext'
+
 const key = 'CARBON_CTA_1'
 
-class Toast extends React.Component {
+function Toast() {
-  state = {
+  const [open, setState] = React.useState(false)
-    open: false
-  }
 
-  close = () => {
+  React.useEffect(() => {
-    this.setState({ open: false })
-    window.localStorage.setItem(key, true)
-  }
-
-  componentDidMount() {
     window.localStorage.removeItem('CARBON_CTA')
     if (!window.localStorage.getItem(key)) {
-      this.setState({ open: true })
+      setState(true)
-    }
     }
+  }, [])
+
+  const user = useAuth()
 
-  render() {
   if (process.env.NODE_ENV !== 'production') {
     return null
   }
 
-    if (!this.state.open) {
+  if (!open) {
     return null
   }
 
+  if (user) {
+    return null
+  }
+
+  function close() {
+    setState(false)
+    window.localStorage.setItem(key, true)
+  }
+
   return (
     <div className="toast mb4">
       <div className="toast-content">
         <p>Never lose a Carbon again - save your work automatically!</p>
         Click &quot;Sign up&quot; to try it out!
-          <button className="close-toast" onClick={this.close}>
+        <button className="close-toast" onClick={close}>
           &times;
         </button>
       </div>
@@ -87,7 +92,6 @@ class Toast extends React.Component {
       </style>
     </div>
   )
-  }
 }
 
 export default Toast

components/Page.js

@@ -11,9 +11,9 @@ class Page extends React.Component {
     return (
       <main className="main mt4 mb4">
         <Meta />
+        <AuthContext>
           <Announcement />
           <Header enableHeroText={enableHeroText} />
-        <AuthContext>
           <div className="page">{children}</div>
         </AuthContext>