separate into a server action, because the fetch throws an exception in the brwoser

Author: gabrielmfern

packages/preview-server/src/actions/send-test-email.ts

@@ -0,0 +1,19 @@
+'use server';
+
+export async function sendTestEmail(
+  to: string,
+  subject: string,
+  html: string,
+): Promise<{ ok: boolean; status: number }> {
+  const response = await fetch('https://react.email/api/send/test', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      to,
+      subject,
+      html,
+    }),
+  });
+
+  return { ok: response.ok, status: response.status };
+}

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

@@ -1,81 +1,30 @@
 import * as Popover from '@radix-ui/react-popover';
-import { useId, useRef, useState } from 'react';
+import { useId, useState } from 'react';
 import { toast } from 'sonner';
+import { sendTestEmail } from '../actions/send-test-email';
 import { Button } from './button';
 import { Text } from './text';
 
-const useTimer = (startingSeconds: number, onStop?: () => void) => {
-  const [isActive, setIsActive] = useState(false);
-  const [secondsRemaining, setSecondsRemaining] = useState(startingSeconds);
-
-  const interval = useRef<NodeJS.Timeout | undefined>(undefined);
-
-  return {
-    isActive,
-    secondsRemaining,
-    start: () => {
-      setIsActive(true);
-      setSecondsRemaining(startingSeconds);
-      clearInterval(interval.current);
-
-      let secondsRemainingTemp = startingSeconds;
-      interval.current = setInterval(() => {
-        setSecondsRemaining((v) => v - 1);
-        secondsRemainingTemp -= 1;
-
-        if (secondsRemainingTemp <= 0) {
-          clearInterval(interval.current);
-          setIsActive(false);
-          setSecondsRemaining(startingSeconds);
-          onStop?.();
-        }
-      }, 1_000);
-    },
-  };
-};
-
 export const Send = ({ markup }: { markup: string }) => {
   const [to, setTo] = useState('');
   const [subject, setSubject] = useState('Testing React Email');
   const [isSending, setIsSending] = useState(false);
   const [isPopOverOpen, setIsPopOverOpen] = useState(false);
 
-  const [isRateLimited, setIsRateLimited] = useState(false);
-  const rateLimiter = useTimer(60, () => {
-    setIsRateLimited(false);
-  });
-
   const onFormSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSending(true);
 
-    try {
-      const response = await fetch('https://react.email/api/send/test', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          to,
-          subject,
-          html: markup,
-        }),
-      });
+    const response = await sendTestEmail(to, subject, markup);
 
-      if (!rateLimiter.isActive) {
-        rateLimiter.start();
-      }
-
-      if (response.ok) {
-        toast.success('Email sent! Check your inbox.');
-      } else if (response.status === 429) {
-        toast.error('Too many requests.');
-        rateLimiter.start();
-        setIsRateLimited(true);
-      } else {
-        toast.error('Something went wrong. Please try again.');
-      }
-    } catch {
+    if (response.ok) {
+      toast.success('Email sent! Check your inbox.');
+    } else if (response.status === 429) {
+      toast.error('Too many requests. Try again in around 1 minute');
+    } else {
       toast.error('Something went wrong. Please try again.');
     }
+
     setIsSending(false);
   };
 
@@ -151,29 +100,29 @@ export const Send = ({ markup }: { markup: string }) => {
               type="checkbox"
             />
             <div className="mt-3 flex items-center justify-between">
-              <Text className="inline-block" size="1">
-                Powered by{' '}
-                <a
-                  className="text-white/85 transition duration-300 ease-in-out hover:text-slate-12"
-                  href="https://go.resend.com/react-email"
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  Resend
-                </a>
-              </Text>
+              <div className="flex flex-col inline-block">
+                <Text size="1">
+                  Powered by{' '}
+                  <a
+                    className="text-white/85 transition duration-300 ease-in-out hover:text-slate-12"
+                    href="https://go.resend.com/react-email"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    Resend
+                  </a>
+                </Text>
+              </div>
               <Button
                 className="disabled:border-transparent disabled:bg-slate-11"
                 disabled={
                   subject.length === 0 ||
                   to.length === 0 ||
-                  isSending ||
-                  isRateLimited
+                  isSending
                 }
                 type="submit"
               >
                 Send
-                {isRateLimited ? ` ${rateLimiter.secondsRemaining}s` : null}
               </Button>
             </div>
           </form>