don't show announcement when signed in

components/Announcement.js

@@ -1,93 +1,97 @@
 import React from 'react'
 
-const key = 'CARBON_CTA_1'
+import { useAuth } from './AuthContext'
 
-class Toast extends React.Component {
-  state = {
-    open: false
-  }
+const key = 'CARBON_CTA_1'
 
-  close = () => {
-    this.setState({ open: false })
-    window.localStorage.setItem(key, true)
-  }
+function Toast() {
+  const [open, setState] = React.useState(false)
 
-  componentDidMount() {
+  React.useEffect(() => {
     window.localStorage.removeItem('CARBON_CTA')
     if (!window.localStorage.getItem(key)) {
-      this.setState({ open: true })
+      setState(true)
     }
+  }, [])
+
+  const user = useAuth()
+
+  if (process.env.NODE_ENV !== 'production') {
+    return null
   }
 
-  render() {
-    if (process.env.NODE_ENV !== 'production') {
-      return null
-    }
+  if (!open) {
+    return null
+  }
 
-    if (!this.state.open) {
-      return null
-    }
+  if (user) {
+    return null
+  }
 
-    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}>
-            &times;
-          </button>
-        </div>
-        <style jsx>
-          {`
-            @keyframes slide {
-              from {
-                transform: translateY(-128px);
-              }
-              to {
-                transform: translateY(0px);
-              }
-            }
+  function close() {
+    setState(false)
+    window.localStorage.setItem(key, true)
+  }
 
-            .toast {
-              padding: 8px 16px;
-              color: #fff;
-              border: 1px solid #fff;
-              border-radius: 2px;
-              margin-top: calc(var(--x4) * -1);
-              animation-name: slide;
-              animation-duration: 600ms;
+  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={close}>
+          &times;
+        </button>
+      </div>
+      <style jsx>
+        {`
+          @keyframes slide {
+            from {
+              transform: translateY(-128px);
             }
-
-            .toast-content {
-              display: flex;
-              align-items: center;
+            to {
+              transform: translateY(0px);
             }
+          }
 
-            a {
-              text-decoration: underline;
-            }
+          .toast {
+            padding: 8px 16px;
+            color: #fff;
+            border: 1px solid #fff;
+            border-radius: 2px;
+            margin-top: calc(var(--x4) * -1);
+            animation-name: slide;
+            animation-duration: 600ms;
+          }
 
-            .close-toast {
-              padding-left: 0;
-              padding-right: 0;
-              background: transparent;
-              color: white;
-              border: none;
-              font-size: 100%;
-              margin-left: 32px;
-              text-decoration: none;
-              cursor: pointer;
-            }
+          .toast-content {
+            display: flex;
+            align-items: center;
+          }
 
-            p {
-              margin: 0;
-              margin-right: 12px;
-            }
-          `}
-        </style>
-      </div>
-    )
-  }
+          a {
+            text-decoration: underline;
+          }
+
+          .close-toast {
+            padding-left: 0;
+            padding-right: 0;
+            background: transparent;
+            color: white;
+            border: none;
+            font-size: 100%;
+            margin-left: 32px;
+            text-decoration: none;
+            cursor: pointer;
+          }
+
+          p {
+            margin: 0;
+            margin-right: 12px;
+          }
+        `}
+      </style>
+    </div>
+  )
 }
 
 export default Toast

components/Page.js

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