feat: next safe ad exempt

src/app/components/PatreonPlug.tsx

@@ -2,14 +2,20 @@
 
 import { CheckIcon } from '@radix-ui/react-icons';
 import { Button, Flex, Link, Text } from '@radix-ui/themes';
+import { useLayoutEffect, useState } from 'react';
 import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
 import { useAdExempt } from '../../hooks/useAdExempt';
 import { PatreonIcon } from '../../icons/Patreon';
 import * as App from '../../stores/app';
 
 export function PatreonPlug() {
-  const patreon = App.use((state) => state.logins.patreon);
+  const [hasPatreon, setHasPatreon] = useState(false);
   const exempt = useAdExempt();
+  const patreon = App.use((state) => state.logins.patreon);
+
+  useLayoutEffect(() => {
+    setHasPatreon(patreon !== undefined);
+  }, [patreon]);
 
   return (
     <Flex
@@ -36,7 +42,7 @@ export function PatreonPlug() {
             {exempt ? 'Manage membership' : 'Support on Patreon'}
           </Button>
         </Link>
-        {!patreon && !exempt && (
+        {!hasPatreon && !exempt && (
           <Link href={patreonLoginUrl()}>
             <Button variant="outline">Log in with Patreon</Button>
           </Link>

src/hooks/useAdExempt.ts

@@ -1,30 +1,36 @@
-import { use, useMemo } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import * as App from '../stores/app';
 
-let cache: Record<string, boolean> = {};
+let cache: Record<string, boolean | Promise<boolean>> = {};
 
 export function useAdExempt() {
   const patreon = App.use((state) => state.logins.patreon);
-  const promise = useMemo(
-    () =>
-      new Promise<boolean>(async (resolve) => {
-        if (!patreon) return resolve(false);
-        if (patreon.token in cache) return resolve(cache[patreon.token]);
+  const [exempt, setExempt] = useState(false);
 
-        const response = await fetch(
-          `/api/patreon/membership/${patreon.token}`,
-          { cache: 'force-cache' },
-        );
+  useLayoutEffect(() => {
+    (async () => {
+      if (!patreon) return setExempt(false);
 
-        if (!response.ok) return resolve(false);
+      if (!(patreon.token in cache)) {
+        cache[patreon.token] = new Promise<boolean>(async (resolve) => {
+          const response = await fetch(
+            `/api/patreon/membership/${patreon.token}`,
+            { cache: 'force-cache' },
+          );
 
-        const json = await response.json();
-        const exempt = typeof json === 'boolean' && json;
-        cache[patreon.token] = exempt;
+          if (!response.ok) return resolve(false);
 
-        resolve(exempt);
-      }),
-    [patreon?.token],
-  );
-  return use(promise);
+          const json = await response.json();
+          const exempt = typeof json === 'boolean' && json;
+
+          cache[patreon.token] = exempt;
+          resolve(exempt);
+        });
+      }
+
+      setExempt(await cache[patreon.token]);
+    })();
+  }, []);
+
+  return exempt;
 }