improve code a bit more

Author: gabrielmfern

packages/preview-server/src/actions/has-resend-api-key.ts

@@ -12,10 +12,15 @@ import { Toolbar } from '../../../components/toolbar';
 import type { LintingRow } from '../../../components/toolbar/linter';
 import type { SpamCheckingResult } from '../../../components/toolbar/spam-assassin';
 import { PreviewProvider } from '../../../contexts/preview';
+import { ToolbarProvider } from '../../../contexts/toolbar';
 import { getEmailsDirectoryMetadata } from '../../../utils/get-emails-directory-metadata';
 import { getLintingSources, loadLintingRowsFrom } from '../../../utils/linting';
 import { loadStream } from '../../../utils/load-stream';
-import { emailsDirectoryAbsolutePath, isBuilding } from '../../env';
+import {
+  emailsDirectoryAbsolutePath,
+  isBuilding,
+  resendApiKey,
+} from '../../env';
 import Preview from './preview';
 
 export const dynamicParams = true;
@@ -132,11 +137,13 @@ This is most likely not an issue with the preview server. Maybe there was a typo
         <Suspense>
           <Preview emailTitle={path.basename(emailPath)} />
 
-          <Toolbar
-            serverLintingRows={lintingRows}
-            serverSpamCheckingResult={spamCheckingResult}
-            serverCompatibilityResults={compatibilityCheckingResults}
-          />
+          <ToolbarProvider hasApiKey={(resendApiKey ?? '').trim().length > 0}>
+            <Toolbar
+              serverLintingRows={lintingRows}
+              serverSpamCheckingResult={spamCheckingResult}
+              serverCompatibilityResults={compatibilityCheckingResults}
+            />
+          </ToolbarProvider>
         </Suspense>
       </Shell>
     </PreviewProvider>

packages/preview-server/src/app/preview/[...slug]/page.tsx

@@ -7,6 +7,7 @@ import * as React from 'react';
 import type { CompatibilityCheckingResult } from '../actions/email-validation/check-compatibility';
 import { isBuilding } from '../app/env';
 import { usePreviewContext } from '../contexts/preview';
+import { useToolbarContext } from '../contexts/toolbar';
 import { cn } from '../utils';
 import CodeSnippet from './code-snippet';
 import { IconArrowDown } from './icons/icon-arrow-down';
@@ -15,7 +16,7 @@ import { IconInfo } from './icons/icon-info';
 import { IconReload } from './icons/icon-reload';
 import { Compatibility, useCompatibility } from './toolbar/compatibility';
 import { Linter, type LintingRow, useLinter } from './toolbar/linter';
-import { Resend, useResend } from './toolbar/resend';
+import { ResendIntegration } from './toolbar/resend';
 import {
   SpamAssassin,
   type SpamCheckingResult,
@@ -65,6 +66,8 @@ const ToolbarInner = ({
   const searchParams = useSearchParams();
   const router = useRouter();
 
+  const { hasSetupResendIntegration } = useToolbarContext();
+
   const { activeTab, toggled } = useToolbarState();
 
   const setActivePanelValue = (newValue: ToolbarTabValue | undefined) => {
@@ -111,9 +114,6 @@ const ToolbarInner = ({
     initialResults: serverCompatibilityResults ?? cachedCompatibilityResults,
   });
 
-  const [resendStatus, { load: loadResend, loading: resendLoading }] =
-    useResend();
-
   if (!isBuilding) {
     // biome-ignore lint/correctness/useHookAtTopLevel: This is fine since isBuilding does not change at runtime
     React.useEffect(() => {
@@ -126,8 +126,6 @@ const ToolbarInner = ({
 
         const compatibilityCheckingResults = await loadCompatibility();
         setCachedCompatibilityResults(compatibilityCheckingResults);
-
-        await loadResend();
       })();
     }, []);
   }
@@ -191,15 +189,10 @@ const ToolbarInner = ({
               >
                 <IconInfo size={24} />
               </ToolbarButton>
-              {isBuilding ? null : (
+              {isBuilding || activeTab === 'resend' ? null : (
                 <ToolbarButton
                   tooltip="Reload"
-                  disabled={
-                    lintLoading ||
-                    spamLoading ||
-                    compatibilityLoading ||
-                    resendLoading
-                  }
+                  disabled={lintLoading || spamLoading || compatibilityLoading}
                   onClick={async () => {
                     if (activeTab === undefined) {
                       setActivePanelValue('linter');
@@ -210,19 +203,14 @@ const ToolbarInner = ({
                       await loadLinting();
                     } else if (activeTab === 'compatibility') {
                       await loadCompatibility();
-                    } else if (activeTab === 'resend') {
-                      await loadResend();
                     }
                   }}
                 >
                   <IconReload
                     size={24}
                     className={cn({
                       'opacity-60 animate-spin-fast':
-                        lintLoading ||
-                        spamLoading ||
-                        compatibilityLoading ||
-                        resendLoading,
+                        lintLoading || spamLoading || compatibilityLoading,
                     })}
                   />
                 </ToolbarButton>
@@ -292,16 +280,17 @@ const ToolbarInner = ({
               )}
             </Tabs.Content>
             <Tabs.Content value="resend">
-              {resendLoading ? (
-                <LoadingState message="Checking Resend API Key..." />
-              ) : resendStatus?.hasApiKey ? (
-                <Resend emailSlug={emailSlug} htmlMarkup={prettyMarkup} />
+              {hasSetupResendIntegration ? (
+                <ResendIntegration
+                  emailSlug={emailSlug}
+                  htmlMarkup={prettyMarkup}
+                />
               ) : (
                 <SuccessWrapper>
                   <SuccessTitle>Connect to Resend</SuccessTitle>
                   <SuccessDescription>
                     Run <CodeSnippet>email resend setup re_xxxxxx</CodeSnippet>{' '}
-                    to connect your Resend account.
+                    to connect your Resend account and refresh.
                   </SuccessDescription>
                 </SuccessWrapper>
               )}
@@ -371,11 +360,11 @@ interface ToolbarProps {
   serverCompatibilityResults: CompatibilityCheckingResult[] | undefined;
 }
 
-export const Toolbar = ({
+export function Toolbar({
   serverLintingRows,
   serverSpamCheckingResult,
   serverCompatibilityResults,
-}: ToolbarProps) => {
+}: ToolbarProps) {
   const { emailPath, emailSlug, renderedEmailMetadata } = usePreviewContext();
 
   if (renderedEmailMetadata === undefined) return null;
@@ -393,4 +382,4 @@ export const Toolbar = ({
       serverCompatibilityResults={serverCompatibilityResults}
     />
   );
-};
+}

packages/preview-server/src/components/toolbar.tsx

@@ -1,8 +1,7 @@
 import { useAction } from 'next-safe-action/hooks';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { exportSingleTemplate } from '../../actions/export-single-template';
 import { getEmailPathFromSlug } from '../../actions/get-email-path-from-slug';
-import { hasResendApiKey } from '../../actions/has-resend-api-key';
 import { renderEmailByPath } from '../../actions/render-email-by-path';
 import { useEmails } from '../../contexts/emails';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
@@ -18,50 +17,21 @@ export interface ResendStatus {
   error: string | null;
 }
 
-export const useResend = ({
-  initialStatus,
-}: {
-  initialStatus?: ResendStatus;
-} = {}) => {
-  const [status, setStatus] = useState<ResendStatus | undefined>(initialStatus);
-  const [loading, setLoading] = useState(false);
-  const isLoadingRef = useRef(false);
-
-  const load = async () => {
-    if (isLoadingRef.current) return;
-    isLoadingRef.current = true;
-    setLoading(true);
-
-    try {
-      if (await hasResendApiKey()) {
-        const result = { hasApiKey: true, error: null };
-        setStatus(result);
-        return result;
-      }
-    } catch (exception) {
-      console.error('Error checking Resend API key', exception);
-    } finally {
-      setLoading(false);
-      isLoadingRef.current = false;
-    }
-  };
-
-  return [status, { loading, load }] as const;
-};
-
 interface ResendItem {
   status: 'uploading' | 'failed' | 'succeeded';
   name: string;
   id?: string;
 }
 
-export const Resend = ({
-  emailSlug,
-  htmlMarkup,
-}: {
+type ResendIntegrationProps = {
   emailSlug: string;
   htmlMarkup: string;
-}) => {
+};
+
+export function ResendIntegration({
+  emailSlug,
+  htmlMarkup,
+}: ResendIntegrationProps) {
   const { emailsDirectoryMetadata } = useEmails();
   const [items, setItems] = useState<ResendItem[]>([]);
   const [isBulkProcessing, setIsBulkProcessing] = useState(false);
@@ -163,10 +133,10 @@ export const Resend = ({
                       prevItems.map((item, index) =>
                         index === i
                           ? {
-                              ...item,
-                              status: 'succeeded',
-                              id: exportResult.data!.id,
-                            }
+                            ...item,
+                            status: 'succeeded',
+                            id: exportResult.data!.id,
+                          }
                           : item,
                       ),
                     );
@@ -250,7 +220,7 @@ export const Resend = ({
       ))}
     </Results>
   );
-};
+}
 
 const SuccessWrapper = ({ children }: { children: React.ReactNode }) => {
   return (

packages/preview-server/src/components/toolbar/resend.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { createContext, use } from 'react';
+
+const ToolbarContext = createContext<
+  | {
+    hasSetupResendIntegration: boolean;
+  }
+  | undefined
+>(undefined);
+
+interface ToolbarProviderProps {
+  hasApiKey: boolean;
+  children: React.ReactNode;
+}
+
+export function ToolbarProvider({ hasApiKey, children }: ToolbarProviderProps) {
+  return (
+    <ToolbarContext.Provider value={{ hasSetupResendIntegration: hasApiKey }}>
+      {children}
+    </ToolbarContext.Provider>
+  );
+}
+
+export const useToolbarContext = () => {
+  const previewContext = use(ToolbarContext);
+
+  if (typeof previewContext === 'undefined') {
+    throw new Error(
+      'Cannot call `useToolbarContext` outside of a `ToolbarContext` provider.',
+    );
+  }
+
+  return previewContext;
+};