feat: ✨ test email function

Author: JasonWarrenUK

README.md

@@ -29,8 +29,8 @@ To get started with Beacon, ensure you have the following prerequisites installe
 Clone the repository and install the dependencies:
 
 ```bash
-git clone https://github.com/yourusername/beacon.git
-cd beacon
+git clone https://github.com/foundersandcoders/lift-frontend-v2.git
+cd lift-frontend-v2
 npm install
 ```
 

src/App.tsx

@@ -23,11 +23,7 @@ const AppContent: React.FC = () => {
     // MainPage and Header receives the username from context.
     <>
       <Header />
-      {data.username ? (
-        <MainPage />
-      ) : (
-        <LoginPage onSubmit={handleLoginSubmit} />
-      )}
+      { data.username ? (<MainPage />) : (<LoginPage onSubmit={handleLoginSubmit} />) }
     </>
   );
 };

src/api/resend/routes/sendTest.ts

@@ -1,8 +1,7 @@
 import { EmailTest } from '../../../components/emails/TestEmail';
 import { Resend } from 'resend';
-
-const RESEND_KEY = import.meta.env.VITE_RESEND_KEY;
-const resend = new Resend(RESEND_KEY);
+const resendKey = import.meta.env.VITE_RESEND_KEY;
+const resend = new Resend(resendKey);
 
 const facTeam= {
   to: [

src/api/resend/utils/emailSender.ts

@@ -1,8 +1,7 @@
-import { Resend } from "resend";
 import { Email } from "../../../../types/emails";
-
-const RESEND_KEY = import.meta.env.VITE_RESEND_KEY;
-const resend = new Resend(RESEND_KEY);
+import { Resend } from 'resend';
+const resendKey = import.meta.env.VITE_RESEND_KEY;
+const resend = new Resend(resendKey);
 
 export async function sendEmail(email: Email) {
   try {

src/components/LoginPage.tsx

@@ -39,10 +39,12 @@ const LoginPage: React.FC<LoginPageProps> = ({ onSubmit }) => {
     <div className='min-h-screen flex items-center justify-center p-4 bg-gray-50'>
       <div className='bg-white shadow-lg rounded-lg p-8 max-w-md w-full'>
         <h1 className='text-3xl font-bold mb-6 text-center'>Welcome!</h1>
+
         <p className='mb-6 text-center text-gray-700'>
           Please enter your name and, optionally, your line manager's email to
           continue.
         </p>
+        
         <form onSubmit={handleSubmit} className='space-y-4'>
           <Input
             placeholder='Enter your name'

src/components/MainPage.tsx

@@ -29,9 +29,11 @@ const MainPage: React.FC = () => {
       <h1 className='text-3xl font-bold mb-8 text-center'>
         Statement builder for {username}
       </h1>
+
       <div className='container mx-auto px-4'>
         <StatementList username={username} />
       </div>
+      
       {/* Floating Buttons Container */}
       <div className='fixed bottom-8 right-8 flex items-center space-x-4'>
         {/* Email Button on the left */}

src/components/ShareEmailModal.tsx

@@ -10,10 +10,12 @@ import {
 } from '../components/ui/dialog';
 import { Button } from '../components/ui/button';
 import { useEntries } from '../hooks/useEntries';
+import { POST } from '../api/resend/routes/sendTest';
 
 const ShareEmailModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
   const { data } = useEntries();
   const managerEmail = data.managerEmail;
+  
   // Only include public statements that are not resolved.
   const publicStatements = data.entries.filter(
     (entry) => entry.isPublic && !entry.isResolved
@@ -25,57 +27,49 @@ const ShareEmailModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
         <DialogTitle className='text-lg font-bold'>
           Sharing with: {managerEmail || 'No manager email set'}
         </DialogTitle>
+
         <DialogDescription className='mt-2'>
           Below are your public, unresolved statements and their pending
           actions:
         </DialogDescription>
+
         <div className='mt-4 space-y-4'>
           {publicStatements.length > 0 ? (
-            publicStatements.map((entry) => (
-              <div
-                key={entry.id}
-                className='p-4 border rounded bg-white shadow-sm'
-              >
-                <p className='text-base font-semibold'>{entry.input}</p>
-                {entry.actions && entry.actions.length > 0 && (
-                  <div className='mt-2 space-y-2'>
-                    {entry.actions
-                      .filter((action) => !action.completed)
-                      .map((action) => (
-                        <div
-                          key={action.id}
-                          className='pl-4 border-l-2 border-gray-300'
-                        >
-                          <p className='text-sm'>{action.action}</p>
-                          {action.byDate && action.byDate.trim() !== '' && (
-                            <p className='text-xs text-gray-500'>
-                              Due: {action.byDate}
-                            </p>
-                          )}
-                        </div>
-                      ))}
-                  </div>
-                )}
-              </div>
-            ))
+            publicStatements.map((entry) => (<div
+              key={entry.id}
+              className='p-4 border rounded bg-white shadow-sm'
+            >
+              <p className='text-base font-semibold'>{entry.input}</p>
+              {entry.actions && entry.actions.length > 0 && (
+                <div className='mt-2 space-y-2'>
+                  {entry.actions
+                    .filter((action) => !action.completed)
+                    .map((action) => (
+                      <div
+                        key={action.id}
+                        className='pl-4 border-l-2 border-gray-300'
+                      >
+                        <p className='text-sm'>{action.action}</p>
+                        {action.byDate && action.byDate.trim() !== '' && (
+                          <p className='text-xs text-gray-500'>
+                            Due: {action.byDate}
+                          </p>
+                        )}
+                      </div>
+                    ))}
+                </div>
+              )}
+            </div>))
           ) : (
             <p className='text-gray-600'>
               No public unresolved statements available.
             </p>
           )}
         </div>
+
         <DialogFooter className='mt-4 flex justify-end space-x-4'>
-          <Button
-            variant='pink'
-            onClick={() => {
-              /* placeholder for Send */
-            }}
-          >
-            Send
-          </Button>
-          <Button variant='pink' onClick={onClose}>
-            Close
-          </Button>
+          <Button variant='pink' onClick={() => { POST() }}> Send </Button>
+          <Button variant='pink' onClick={onClose}> Close </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>