Set cookie properly on toast dismissal

components/HeaderMenu/index.tsx

@@ -8,10 +8,7 @@ import { retrieveCookies, retrieveLocaleCookies } from '~utils/retrieveCookies'
 import Link from 'next/link'
 import * as Switch from '@radix-ui/react-switch'
 
-import AboutModal from '~components/AboutModal'
 import AccountModal from '~components/AccountModal'
-import ChangelogModal from '~components/ChangelogModal'
-import RoadmapModal from '~components/RoadmapModal'
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
 

components/Layout/index.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
 import { add, format } from 'date-fns'
 import { getCookie } from 'cookies-next'
 
@@ -12,6 +13,7 @@ import './index.scss'
 interface Props {}
 
 const Layout = ({ children }: PropsWithChildren<Props>) => {
+  const router = useRouter()
   const [updateToastOpen, setUpdateToastOpen] = useState(false)
 
   useEffect(() => {
@@ -35,21 +37,30 @@ const Layout = ({ children }: PropsWithChildren<Props>) => {
     setUpdateToastOpen(false)
   }
 
-  function handleToastOpenChanged(open: boolean) {
+  function handleToastClosed() {
     setUpdateToastOpen(false)
   }
 
+  const updateToast = () => {
+    const path = router.asPath.replaceAll('/', '')
+
+    return !['about', 'updates', 'roadmap'].includes(path) ? (
+      <UpdateToast
+        open={updateToastOpen}
+        updateType="feature"
+        onActionClicked={handleToastActionClicked}
+        onCloseClicked={handleToastClosed}
+        lastUpdated={appState.version.updated_at}
+      />
+    ) : (
+      ''
+    )
+  }
+
   return (
     <>
       <TopHeader />
-      {/* TODO: Don't show toast on about pages */}
+      {updateToast()}
-      <UpdateToast
-        open={updateToastOpen}
-        updateType="feature"
-        onActionClicked={handleToastActionClicked}
-        onOpenChange={handleToastOpenChanged}
-        lastUpdated={appState.version.updated_at}
-      />
       <main>{children}</main>
     </>
   )

components/Toast/index.tsx

@@ -8,6 +8,7 @@ interface Props extends ToastPrimitive.ToastProps {
   className?: string
   title?: string
   content: string
+  onCloseClick: () => void
 }
 
 const Toast = ({
@@ -28,7 +29,7 @@ const Toast = ({
             <h3>{title}</h3>
           </ToastPrimitive.Title>
         )}
-        <ToastPrimitive.Close aria-label="Close">
+        <ToastPrimitive.Close aria-label="Close" onClick={props.onCloseClick}>
           <span aria-hidden>×</span>
         </ToastPrimitive.Close>
       </div>

components/UpdateToast/index.tsx

@@ -15,7 +15,7 @@ interface Props {
   updateType: 'feature' | 'content'
   lastUpdated: string
   onActionClicked: () => void
-  onOpenChange: (open: boolean) => void
+  onCloseClicked: () => void
 }
 
 const UpdateToast = ({
@@ -23,7 +23,7 @@ const UpdateToast = ({
   updateType,
   lastUpdated,
   onActionClicked,
-  onOpenChange,
+  onCloseClicked,
 }: Props) => {
   const { t } = useTranslation('roadmap')
 
@@ -42,18 +42,14 @@ const UpdateToast = ({
   }
 
   function handleButtonClicked() {
-    // TODO: Set a timestamped cookie to not show
-    console.log('Primary button clicked')
     window.open('/about', '_blank')
     setToastCookie()
     onActionClicked()
   }
 
-  function handleOpenChanged(open: boolean) {
+  function handleCloseClicked() {
-    if (!open) {
+    setToastCookie()
-      setToastCookie()
+    onCloseClicked()
-      onOpenChange(false)
-    }
   }
 
   return (
@@ -63,7 +59,7 @@ const UpdateToast = ({
       content={t(`toasts.description.${updateType}`)}
       open={open}
       type="background"
-      onOpenChange={handleOpenChanged}
+      onCloseClick={handleCloseClicked}
     >
       <Button
         buttonSize="small"