fix circular import in buzz.utils

package.json

@@ -24,6 +24,7 @@
     "postinstall": "npm run db:generate",
     "typecheck": "cross-env NODE_OPTIONS=\"--max_old_space_size=8192\" tsc --noEmit",
     "lint": "next lint",
+    "eslint": "cross-env TIMING=1 eslint src/ --quiet --cache --cache-strategy metadata",
     "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
     "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
     "db:ui": "prisma studio",
@@ -297,4 +298,4 @@
       "zod": "$zod"
     }
   }
-}
+}

src/components/Buzz/BuzzPurchase.tsx

@@ -48,7 +48,7 @@ import {
 } from '~/utils/number-helpers';
 
 import { AlertWithIcon } from '~/components/AlertWithIcon/AlertWithIcon';
-import { useQueryBuzzPackages } from '~/components/Buzz/buzz.utils';
+import { useQueryBuzzPackages } from '~/components/Buzz/useQueryBuzzPackages';
 import { CurrencyIcon } from '~/components/Currency/CurrencyIcon';
 import AlertDialog from '~/components/Dialog/Common/AlertDialog';
 // import { BuzzPaypalButton } from './BuzzPaypalButton';

src/components/Buzz/BuzzPurchase/BuzzPurchaseImproved.tsx

@@ -50,7 +50,7 @@ import {
   numberWithCommas,
 } from '~/utils/number-helpers';
 
-import { useQueryBuzzPackages } from '~/components/Buzz/buzz.utils';
+import { useQueryBuzzPackages } from '~/components/Buzz/useQueryBuzzPackages';
 import { CurrencyIcon } from '~/components/Currency/CurrencyIcon';
 import { dialogStore } from '~/components/Dialog/dialogStore';
 import { BuzzCoinbaseButton } from '~/components/Buzz/BuzzPurchase/Buttons/BuzzCoinbaseButton';

src/components/Buzz/buzz.utils.ts

@@ -18,68 +18,6 @@ import dynamic from 'next/dynamic';
 
 const BuyBuzzModal = dynamic(() => import('~/components/Modals/BuyBuzzModal'));
 
-export const useQueryBuzzPackages = ({ onPurchaseSuccess }: { onPurchaseSuccess?: () => void }) => {
-  const router = useRouter();
-  const [processing, setProcessing] = useState<boolean>(false);
-  const queryUtils = trpc.useUtils();
-
-  const { data: packages = [], isLoading } = trpc.stripe.getBuzzPackages.useQuery();
-
-  const createBuzzSessionMutation = trpc.stripe.createBuzzSession.useMutation({
-    onSuccess: async ({ url, sessionId }) => {
-      if (url) await router.push(url);
-      else {
-        const stripe = await getClientStripe();
-        if (!stripe) {
-          return;
-        }
-
-        await stripe.redirectToCheckout({ sessionId });
-      }
-    },
-    onError: (error) => {
-      showErrorNotification({
-        title: 'Could not process purchase',
-        error: new Error(error.message),
-      });
-    },
-  });
-
-  const { mutateAsync: completeStripeBuzzPurchaseMutation } =
-    trpc.buzz.completeStripeBuzzPurchase.useMutation({
-      async onSuccess() {
-        await queryUtils.buzz.getBuzzAccount.invalidate();
-        setProcessing(false);
-        showSuccessNotification({
-          title: 'Transaction completed successfully!',
-          message: 'Your Buzz has been added to your account.',
-        });
-        onPurchaseSuccess?.();
-      },
-      onError(error) {
-        showErrorNotification({
-          title: 'There was an error while attempting to purchase Buzz. Please contact support.',
-          error: new Error(error.message),
-        });
-
-        setProcessing(false);
-      },
-    });
-
-  const createCheckoutSession = (data: CreateBuzzSessionInput) => {
-    return createBuzzSessionMutation.mutateAsync(data);
-  };
-
-  return {
-    packages,
-    isLoading,
-    createCheckoutSession,
-    completeStripeBuzzPurchaseMutation,
-    processing,
-    setProcessing,
-  };
-};
-
 export const useBuyBuzz = (): ((props: BuyBuzzModalProps) => void) => {
   const features = useFeatureFlags();
 

src/components/Buzz/useQueryBuzzPackages.ts

@@ -0,0 +1,68 @@
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import type { CreateBuzzSessionInput } from '~/server/schema/stripe.schema';
+import { getClientStripe } from '~/utils/get-client-stripe';
+import { showErrorNotification, showSuccessNotification } from '~/utils/notifications';
+import { trpc } from '~/utils/trpc';
+
+export const useQueryBuzzPackages = ({ onPurchaseSuccess }: { onPurchaseSuccess?: () => void }) => {
+  const router = useRouter();
+  const [processing, setProcessing] = useState<boolean>(false);
+  const queryUtils = trpc.useUtils();
+
+  const { data: packages = [], isLoading } = trpc.stripe.getBuzzPackages.useQuery();
+
+  const createBuzzSessionMutation = trpc.stripe.createBuzzSession.useMutation({
+    onSuccess: async ({ url, sessionId }) => {
+      if (url) await router.push(url);
+      else {
+        const stripe = await getClientStripe();
+        if (!stripe) {
+          return;
+        }
+
+        await stripe.redirectToCheckout({ sessionId });
+      }
+    },
+    onError: (error) => {
+      showErrorNotification({
+        title: 'Could not process purchase',
+        error: new Error(error.message),
+      });
+    },
+  });
+
+  const { mutateAsync: completeStripeBuzzPurchaseMutation } =
+    trpc.buzz.completeStripeBuzzPurchase.useMutation({
+      async onSuccess() {
+        await queryUtils.buzz.getBuzzAccount.invalidate();
+        setProcessing(false);
+        showSuccessNotification({
+          title: 'Transaction completed successfully!',
+          message: 'Your Buzz has been added to your account.',
+        });
+        onPurchaseSuccess?.();
+      },
+      onError(error) {
+        showErrorNotification({
+          title: 'There was an error while attempting to purchase Buzz. Please contact support.',
+          error: new Error(error.message),
+        });
+
+        setProcessing(false);
+      },
+    });
+
+  const createCheckoutSession = (data: CreateBuzzSessionInput) => {
+    return createBuzzSessionMutation.mutateAsync(data);
+  };
+
+  return {
+    packages,
+    isLoading,
+    createCheckoutSession,
+    completeStripeBuzzPurchaseMutation,
+    processing,
+    setProcessing,
+  };
+};