From 60f947330663ae6cb80c635af13760ab60a8f152 Mon Sep 17 00:00:00 2001 From: Mike Bifulco Date: Sat, 4 Jan 2025 14:45:00 -0500 Subject: [PATCH] Revert "Newsletter signup gated by localstorage hook" --- .prettierrc | 1 - pnpm-lock.yaml | 18 ++-- src/components/Analytics/Fathom.tsx | 3 +- .../NewsletterSignup/SubscriberCount.tsx | 3 +- src/components/Post/mentionsSummary.tsx | 2 +- .../SubscriptionForm/SubscriptionForm.tsx | 35 ++------ src/hooks/useLocalStorage.tsx | 85 ------------------- 7 files changed, 18 insertions(+), 129 deletions(-) delete mode 100644 src/hooks/useLocalStorage.tsx diff --git a/.prettierrc b/.prettierrc index 28679ddb..768685e0 100644 --- a/.prettierrc +++ b/.prettierrc @@ -18,7 +18,6 @@ "^@craftwork/(.*)$", "^@components/(.*)$", "^@data/(.*)$", - "^@hooks/(.*)$", "^@layouts/(.*)$", "^@lib/(.*)$", "^@ui/(.*)$", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e7b0c15f..a8ac06f8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -203,7 +203,7 @@ importers: version: 2.3.3(eslint@8.57.0) eslint-plugin-import: specifier: ^2.31.0 - version: 2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + version: 2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.0) eslint-plugin-jsx-a11y: specifier: ^6.10.2 version: 6.10.2(eslint@8.57.0) @@ -7643,8 +7643,8 @@ snapshots: '@typescript-eslint/parser': 8.19.0(eslint@8.57.0)(typescript@5.7.2) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.0) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0) eslint-plugin-react: 7.37.3(eslint@8.57.0) eslint-plugin-react-hooks: 5.1.0(eslint@8.57.0) @@ -7672,7 +7672,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint@8.57.0))(eslint@8.57.0): + eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.0): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.4.0 @@ -7684,22 +7684,22 @@ snapshots: is-glob: 4.0.3 stable-hash: 0.0.4 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.0) transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.19.0(eslint@8.57.0)(typescript@5.7.2) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint@8.57.0))(eslint@8.57.0) + eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.0) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.0): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -7710,7 +7710,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.19.0(eslint@8.57.0)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 diff --git a/src/components/Analytics/Fathom.tsx b/src/components/Analytics/Fathom.tsx index 6900774a..eea44fc5 100644 --- a/src/components/Analytics/Fathom.tsx +++ b/src/components/Analytics/Fathom.tsx @@ -3,11 +3,10 @@ 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 }) => { diff --git a/src/components/NewsletterSignup/SubscriberCount.tsx b/src/components/NewsletterSignup/SubscriberCount.tsx index dde5efa8..08a7d0a5 100644 --- a/src/components/NewsletterSignup/SubscriberCount.tsx +++ b/src/components/NewsletterSignup/SubscriberCount.tsx @@ -1,6 +1,5 @@ -import NumberFlow from '@number-flow/react'; - import useNewsletterStats from '@hooks/useNewsletterStats'; +import NumberFlow from '@number-flow/react'; type SubscriberCountProps = { label?: string; diff --git a/src/components/Post/mentionsSummary.tsx b/src/components/Post/mentionsSummary.tsx index 95e62757..2e175286 100644 --- a/src/components/Post/mentionsSummary.tsx +++ b/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'; diff --git a/src/components/SubscriptionForm/SubscriptionForm.tsx b/src/components/SubscriptionForm/SubscriptionForm.tsx index 2a721259..e7bf8928 100644 --- a/src/components/SubscriptionForm/SubscriptionForm.tsx +++ b/src/components/SubscriptionForm/SubscriptionForm.tsx @@ -1,12 +1,9 @@ -'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 = { @@ -15,19 +12,11 @@ type SubscriptionFormProps = { buttonText?: string; }; -type SubscriptionRecord = { - email?: string; - firstName?: string; - date?: string; -}; - const SubscriptionForm: React.FC = ({ tags: _, source, buttonText = 'Subscribe', }) => { - const [subscriptionRecord, setSubscriptionRecord] = - useLocalStorage('tiny-improvements-subscribed', {}); const [getHoneypottedNerd, setGetHoneypottedNerd] = useState(false); const addSubscriberMutation = trpc.mailingList.subscribe.useMutation({ onSuccess: () => { @@ -41,12 +30,6 @@ const SubscriptionForm: React.FC = ({ email, firstName, }); - - setSubscriptionRecord({ - email, - firstName, - date: new Date().toISOString(), - }); }, onError: (error) => { const email = emailRef.current?.value; @@ -115,16 +98,12 @@ const SubscriptionForm: React.FC = ({ ); } - if ( - addSubscriberMutation.isSuccess || - getHoneypottedNerd || - subscriptionRecord?.date - ) { + if (addSubscriberMutation.isSuccess || getHoneypottedNerd) { return (
-

- 🪩 Thanks so much for subscribing. Don't forget to check your - spam folder for emails from{' '} +

+ 🪩 Success! Thanks so much for subscribing. Don't forget to check + your spam folder for emails from{' '} hello@mikebifulco.com.

@@ -136,9 +115,7 @@ const SubscriptionForm: React.FC = ({
diff --git a/src/hooks/useLocalStorage.tsx b/src/hooks/useLocalStorage.tsx deleted file mode 100644 index dd1ded94..00000000 --- a/src/hooks/useLocalStorage.tsx +++ /dev/null @@ -1,85 +0,0 @@ -// 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(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, - ]; -}