use fetch instead of server action

Author: gabrielmfern

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

@@ -1,16 +1,14 @@
 import * as Popover from '@radix-ui/react-popover';
-import * as React from 'react';
+import { useId, useRef, 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] = React.useState(false);
-  const [secondsRemaining, setSecondsRemaining] =
-    React.useState(startingSeconds);
+  const [isActive, setIsActive] = useState(false);
+  const [secondsRemaining, setSecondsRemaining] = useState(startingSeconds);
 
-  const interval = React.useRef<NodeJS.Timeout | undefined>(undefined);
+  const interval = useRef<NodeJS.Timeout | undefined>(undefined);
 
   return {
     isActive,
@@ -37,33 +35,41 @@ const useTimer = (startingSeconds: number, onStop?: () => void) => {
 };
 
 export const Send = ({ markup }: { markup: string }) => {
-  const [to, setTo] = React.useState('');
-  const [subject, setSubject] = React.useState('Testing React Email');
-  const [isSending, setIsSending] = React.useState(false);
-  const [isPopOverOpen, setIsPopOverOpen] = React.useState(false);
+  const [to, setTo] = useState('');
+  const [subject, setSubject] = useState('Testing React Email');
+  const [isSending, setIsSending] = useState(false);
+  const [isPopOverOpen, setIsPopOverOpen] = useState(false);
 
-  const rateLimiter = useTimer(60);
+  const [isRateLimited, setIsRateLimited] = useState(false);
+  const rateLimiter = useTimer(60, () => {
+    setIsRateLimited(false);
+  });
 
   const onFormSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSending(true);
 
     try {
-      const { status, ok } = await sendTestEmail({
-        to,
-        subject,
-        markup,
+      const response = await fetch('https://react.email/api/send/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          to,
+          subject,
+          html: markup,
+        }),
       });
 
       if (!rateLimiter.isActive) {
         rateLimiter.start();
       }
 
-      if (ok) {
+      if (response.ok) {
         toast.success('Email sent! Check your inbox.');
-      } else if (status === 429) {
+      } else if (response.status === 429) {
         toast.error('Too many requests.');
         rateLimiter.start();
+        setIsRateLimited(true);
       } else {
         toast.error('Something went wrong. Please try again.');
       }
@@ -73,8 +79,8 @@ export const Send = ({ markup }: { markup: string }) => {
     setIsSending(false);
   };
 
-  const toId = React.useId();
-  const subjectId = React.useId();
+  const toId = useId();
+  const subjectId = useId();
 
   return (
     <Popover.Root
@@ -162,14 +168,12 @@ export const Send = ({ markup }: { markup: string }) => {
                   subject.length === 0 ||
                   to.length === 0 ||
                   isSending ||
-                  rateLimiter.isActive
+                  isRateLimited
                 }
                 type="submit"
               >
                 Send
-                {rateLimiter.isActive
-                  ? ` ${rateLimiter.secondsRemaining}s`
-                  : null}
+                {isRateLimited ? ` ${rateLimiter.secondsRemaining}s` : null}
               </Button>
             </div>
           </form>