Newsletter signup gated by localstorage hook

.prettierrc

@@ -18,6 +18,7 @@
     "^@craftwork/(.*)$",
     "^@components/(.*)$",
     "^@data/(.*)$",
+    "^@hooks/(.*)$",
     "^@layouts/(.*)$",
     "^@lib/(.*)$",
     "^@ui/(.*)$",

src/components/Analytics/Fathom.tsx

@@ -3,10 +3,11 @@
 import { Suspense, useEffect } from 'react';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/router';
-import { useRouterType } from '@hooks/useRouterType';
 import * as Fathom from 'fathom-client';
 import posthog from 'posthog-js';
 
+import { useRouterType } from '@hooks/useRouterType';
+
 const FATHOM_DOMAINS = ['mikebifulco.com', 'www.mikebifulco.com'];
 
 const FathomPagesRouter = ({ siteId }: { siteId: string }) => {

src/components/NewsletterSignup/SubscriberCount.tsx

@@ -1,6 +1,7 @@
-import useNewsletterStats from '@hooks/useNewsletterStats';
 import NumberFlow from '@number-flow/react';
 
+import useNewsletterStats from '@hooks/useNewsletterStats';
+
 type SubscriberCountProps = {
   label?: string;
 };

src/components/Post/mentionsSummary.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
-import { useWebMentions } from '@hooks/useWebMentions';
 import pluralize from 'pluralize';
 
+import { useWebMentions } from '@hooks/useWebMentions';
 import formatDate from '@utils/format-date';
 import type { WebMention } from '@utils/webmentions';
 import { Avatar, AvatarGroup } from '../Avatar';

src/components/SubscriptionForm/SubscriptionForm.tsx

@@ -1,9 +1,12 @@
+'use client';
+
 import { useRef, useState } from 'react';
 import Link from 'next/link';
-import useNewsletterStats from '@hooks/useNewsletterStats';
 import posthog from 'posthog-js';
 
 import Button from '@components/Button';
+import { useLocalStorage } from '@hooks/useLocalStorage';
+import useNewsletterStats from '@hooks/useNewsletterStats';
 import { trpc } from '@utils/trpc';
 
 type SubscriptionFormProps = {
@@ -12,11 +15,19 @@ type SubscriptionFormProps = {
   buttonText?: string;
 };
 
+type SubscriptionRecord = {
+  email?: string;
+  firstName?: string;
+  date?: string;
+};
+
 const SubscriptionForm: React.FC<SubscriptionFormProps> = ({
   tags: _,
   source,
   buttonText = 'Subscribe',
 }) => {
+  const [subscriptionRecord, setSubscriptionRecord] =
+    useLocalStorage<SubscriptionRecord>('tiny-improvements-subscribed', {});
   const [getHoneypottedNerd, setGetHoneypottedNerd] = useState<boolean>(false);
   const addSubscriberMutation = trpc.mailingList.subscribe.useMutation({
     onSuccess: () => {
@@ -30,6 +41,12 @@ const SubscriptionForm: React.FC<SubscriptionFormProps> = ({
         email,
         firstName,
       });
+
+      setSubscriptionRecord({
+        email,
+        firstName,
+        date: new Date().toISOString(),
+      });
     },
     onError: (error) => {
       const email = emailRef.current?.value;
@@ -98,12 +115,16 @@ const SubscriptionForm: React.FC<SubscriptionFormProps> = ({
     );
   }
 
-  if (addSubscriberMutation.isSuccess || getHoneypottedNerd) {
+  if (
+    addSubscriberMutation.isSuccess ||
+    getHoneypottedNerd ||
+    subscriptionRecord?.date
+  ) {
     return (
       <div className="flex flex-col gap-2">
-        <p className="text-xl font-semibold text-inherit">
-          🪩 Success! Thanks so much for subscribing. Don&apos;t forget to check
-          your spam folder for emails from{' '}
+        <p className="text-xl font-medium text-inherit">
+          🪩 Thanks so much for subscribing. Don&apos;t forget to check your
+          spam folder for emails from{' '}
           <span className="text-pink-600">[email protected].</span>
         </p>
       </div>
@@ -115,7 +136,9 @@ const SubscriptionForm: React.FC<SubscriptionFormProps> = ({
       <form ref={formRef} className="w-full" onSubmit={handleSubmission}>
         <fieldset
           disabled={
-            addSubscriberMutation.isPending || addSubscriberMutation.isSuccess
+            subscriptionRecord?.date !== undefined ||
+            addSubscriberMutation.isPending ||
+            addSubscriberMutation.isSuccess
           }
         >
           <div data-style="clean">

src/hooks/useLocalStorage.tsx

@@ -0,0 +1,85 @@
+// Sourced (and typesafe-tweaked) from https://github.com/uidotdev/usehooks/blob/main/index.js#L616
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { useCallback, useEffect, useSyncExternalStore } from 'react';
+
+function dispatchStorageEvent(key: string, newValue: string | null) {
+  window.dispatchEvent(new StorageEvent('storage', { key, newValue }));
+}
+
+const setLocalStorageItem = (key: string, value: unknown) => {
+  const stringifiedValue = JSON.stringify(value);
+  window.localStorage.setItem(key, stringifiedValue);
+  dispatchStorageEvent(key, stringifiedValue);
+};
+
+const removeLocalStorageItem = (key: string) => {
+  window.localStorage.removeItem(key);
+  dispatchStorageEvent(key, null);
+};
+
+const getLocalStorageItem = (key: string) => {
+  return window.localStorage.getItem(key);
+};
+
+const useLocalStorageSubscribe = (callback: (event: StorageEvent) => void) => {
+  window.addEventListener('storage', callback);
+  return () => window.removeEventListener('storage', callback);
+};
+
+const getLocalStorageServerSnapshot = () => {
+  // throw Error('useLocalStorage is a client-only hook');
+  return '{}';
+};
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const getSnapshot = () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const stored = JSON.parse(getLocalStorageItem(key) ?? '');
+    return JSON.stringify({
+      ...initialValue,
+      ...stored,
+    });
+  };
+
+  const store = useSyncExternalStore(
+    useLocalStorageSubscribe,
+    getSnapshot,
+    getLocalStorageServerSnapshot
+  );
+
+  const setState = useCallback(
+    (v: unknown) => {
+      try {
+        /* eslint-disable @typescript-eslint/no-unsafe-call */
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const nextState =
+          typeof v === 'function' ? v(JSON.parse(store || '{}')) : v;
+        /* eslint-enable @typescript-eslint/no-unsafe-call */
+
+        if (nextState === undefined || nextState === null) {
+          removeLocalStorageItem(key);
+        } else {
+          setLocalStorageItem(key, nextState);
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+    },
+    [key, store]
+  );
+
+  useEffect(() => {
+    if (
+      getLocalStorageItem(key) === null &&
+      typeof initialValue !== 'undefined'
+    ) {
+      setLocalStorageItem(key, initialValue);
+    }
+  }, [key, initialValue]);
+
+  return [store ? JSON.parse(store) : initialValue, setState] as [
+    T,
+    (v: unknown) => void,
+  ];
+}