From 31af6fa3ec31cc8fbfc0382c894a8f43380d4e0a Mon Sep 17 00:00:00 2001
From: Regalijan <r@regalijan.com>
Date: Tue, 19 Nov 2024 18:46:55 -0500
Subject: [PATCH] Fix unsupported browser alert

---
 app/routes/events-team_.outstanding.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/routes/events-team_.outstanding.tsx b/app/routes/events-team_.outstanding.tsx
index 9bfb522..87bafc3 100644
--- a/app/routes/events-team_.outstanding.tsx
+++ b/app/routes/events-team_.outstanding.tsx
@@ -25,7 +25,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export async function loader({ context }: { context: RequestContext }) {
   const now = new Date();
@@ -56,6 +56,10 @@ export default function () {
   const [isBrowserSupported, setIsBrowserSupported] = useState(true);
   const toast = useToast();
 
+  useEffect(() => {
+    if (typeof structuredClone === "undefined") setIsBrowserSupported(false);
+  }, []);
+
   async function displayErrorToast(response: Response, title: string) {
     let msg = "Unknown error";
 
@@ -197,7 +201,7 @@ export default function () {
         <AlertIcon />
         The cutoff period for retroactively actioning events has passed.
       </Alert>
-      <Alert display={isBrowserSupported ? undefined : "none"} status="error">
+      <Alert display={isBrowserSupported ? "none" : undefined} status="error">
         <AlertIcon />
         This browser is unsupported. Please upgrade to a browser not several
         years out of date.