cherry pick previous commits after bad attempt at fixing merge conflicts

app/(admin)/admin/notifications/page.test.tsx

@@ -1,13 +1,14 @@
+// /Users/ryanfurrer/Developer/GitHub/gridiron-survivor/app/(admin)/admin/notifications/page.test.tsx
+
+import AdminNotifications from './page';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { getCurrentLeague } from '@/api/apiFunctions';
-import { sendEmailNotifications } from './actions/sendEmailNotification';
-import AdminNotifications from './page';
 import React from 'react';
+import { sendEmailNotifications } from './actions/sendEmailNotification';
 
 let contentInput: HTMLInputElement,
-  selectAllUsersRadioOption: HTMLElement,
-  selectRecipientsRadioGroup: HTMLElement,
-  sendEmailButton: HTMLElement,
+  emailButton: HTMLElement,
+  emailTestersButton: HTMLElement,
   subjectInput: HTMLInputElement;
 
 jest.mock('@/api/apiFunctions', () => ({
@@ -19,23 +20,16 @@ jest.mock('./actions/sendEmailNotification', () => ({
 }));
 
 describe('Admin notifications page', () => {
-  beforeEach(async () => {
+  beforeEach(() => {
     jest.clearAllMocks();
 
-    (getCurrentLeague as jest.Mock).mockResolvedValue({
-      participants: ['12345', '1234', '123'],
-      leagueName: 'Test League',
-    });
-
     render(<AdminNotifications />);
 
     contentInput = screen.getByTestId('content-text');
-    selectAllUsersRadioOption = screen.getByTestId('all-users-option');
-    selectRecipientsRadioGroup = screen.getByTestId('radio-group-default');
-    sendEmailButton = screen.getByTestId('send-email');
+    emailButton = screen.getByTestId('send-email');
+    emailTestersButton = screen.getByTestId('email-testers');
     subjectInput = screen.getByTestId('subject-text');
   });
-
   it(`should render it's content`, () => {
     (sendEmailNotifications as jest.Mock).mockResolvedValue({});
 
@@ -44,24 +38,27 @@ describe('Admin notifications page', () => {
     );
     expect(adminNotificationsContent).toBeInTheDocument();
   });
-
   it('should call the sendEmailNotifications function with the provided inputs', async () => {
-    fireEvent.click(selectAllUsersRadioOption);
+    const dummyParticipants = ['12345', '1234', '123'];
+    (getCurrentLeague as jest.Mock).mockResolvedValue({
+      participants: dummyParticipants,
+    });
+
+    fireEvent.click(emailTestersButton);
     fireEvent.change(subjectInput, { target: { value: 'Test Title' } });
     fireEvent.change(contentInput, {
       target: { value: 'Test message section.' },
     });
 
     await waitFor(() => {
-      expect(sendEmailButton).toBeInTheDocument();
+      expect(emailButton).toBeInTheDocument();
     });
 
-    fireEvent.submit(sendEmailButton);
+    fireEvent.submit(emailButton);
 
     await waitFor(() => {
       expect(sendEmailNotifications as jest.Mock).toHaveBeenCalledWith({
         content: 'Test message section.',
-        groupUsers: ['12345', '1234', '123'],
         sendEmailUsers: dummyParticipants,
         subject: 'Test Title',
         testBCC: expect.any(Array),

app/(admin)/admin/notifications/page.tsx

@@ -6,38 +6,26 @@ import { Button } from '@/components/Button/Button';
 import { getCurrentLeague } from '@/api/apiFunctions';
 import { Input } from '@/components/Input/Input';
 import { JSX, useState } from 'react';
-import { LabelText } from '@/components/LabelText/LabelText';
-import {
-  RadioGroupDefault,
-  RadioGroupDefaultItem,
-} from '@/components/RadioGroupDefault/RadioGroupDefault';
+import { Label } from '@/components/Label/Label';
 import { sendEmailNotifications } from './actions/sendEmailNotification';
-import { Textarea } from '@/components/Textarea/Textarea';
-import React, { useEffect } from 'react';
+import React from 'react';
 
 /**
  * The admin home page.
  * @returns The rendered AdminHome page.
  */
 const AdminNotifications = (): JSX.Element => {
   const [content, setContent] = useState<string>('');
-  const [groupUsers, setGroupUsers] = useState<string[]>([]);
-  const [leagueName, setLeagueName] = useState<string>('');
   const [sendEmailUsers, setSendEmailUsers] = useState<string[]>([]);
   const [subject, setSubject] = useState<string>('');
-  const [emailRecipients, setEmailRecipients] = useState<string>('');
 
   /**
-   * To grab all users from the league.
-   * @returns The league data.
    * To grab all participant's userIDs from the league to be passed into the backend email function.
    */
   const participantsEmail = async (): Promise<void> => {
     try {
       const leagueId = '66f1a8e300102bff03ff';
       const leagueData = await getCurrentLeague(leagueId);
-      setGroupUsers(leagueData.participants);
-      setLeagueName(leagueData.leagueName);
       setSendEmailUsers(leagueData.participants);
     } catch (error) {
       throw new Error('Error Sending Email');
@@ -53,103 +41,7 @@ const AdminNotifications = (): JSX.Element => {
     await sendEmailNotifications({ content, sendEmailUsers, subject });
   };
 
-  /**
-   * Function to handle radio selection logic.
-   * @param value - Value of the radio buttons.
-   */
-  const handleRadioChange = (value: string): void => {
-    setEmailRecipients(value);
-  };
-
-  useEffect(() => {
-    /**
-     * Fetches the league data.
-     * @returns The league data.
-     */
-    const fetchData = async (): Promise<void> => {
-      await getLeagueData();
-    };
-    fetchData();
-  }, []);
-
   return (
-    <section
-      className="flex flex-col space-y-6"
-      data-testid="admin-notifications-content"
-    >
-      <p>
-        Choose the users you would like to email in{' '}
-        <span className="font-bold text-orange-500">{leagueName}</span>.
-      </p>
-      <RadioGroupDefault
-        defaultValue="all users"
-        onValueChange={handleRadioChange}
-        required
-      >
-        <div className="flex items-center space-x-2">
-          <RadioGroupDefaultItem
-            value="all users"
-            id="all"
-            data-testid="all-users-option"
-          />
-          <LabelText htmlFor="all">All users</LabelText>
-        </div>
-        <div className="flex items-center space-x-2">
-          <RadioGroupDefaultItem
-            value="all survivors"
-            id="survivors"
-            data-testid="only-survivors-option"
-          />
-          <LabelText htmlFor="survivors">Only the survivors</LabelText>
-        </div>
-        <div className="flex items-center space-x-2">
-          <RadioGroupDefaultItem
-            value="all losers"
-            id="losers"
-            data-testid="only-losers-option"
-          />
-          <LabelText htmlFor="losers">Only the losers</LabelText>
-        </div>
-      </RadioGroupDefault>
-      <form
-        onSubmit={handleSubmit}
-        className="flex flex-col space-y-6 max-w-[80ch]"
-      >
-        <div className="flex gap-2 flex-col">
-          <LabelText htmlFor="subject" className="text-lg">
-            Subject:
-          </LabelText>
-          <Input
-            data-testid="subject-text"
-            id="subject"
-            name="subject"
-            onChange={(e) => setSubject(e.target.value)}
-            type="text"
-          />
-        </div>
-        <div className="flex gap-2 flex-col">
-          <LabelText htmlFor="content" className="text-lg">
-            Message:
-          </LabelText>
-          <Textarea
-            data-testid="content-text"
-            id="content"
-            name="content"
-            onChange={(e) => setContent(e.target.value)}
-          />
-        </div>
-        <p>
-          This email will be sent to{' '}
-          <span className="font-bold text-orange-500">
-            {emailRecipients.toLowerCase()}
-          </span>{' '}
-          in <span className="font-bold text-orange-500">{leagueName}</span>
-        </p>
-        <Button
-          className="md:max-w-fit"
-          data-testid="send-email"
-          label="Send email"
-          type="submit"
     <section data-testid="admin-notifications-content">
       <Button
         label="Email Testers"
@@ -172,6 +64,7 @@ const AdminNotifications = (): JSX.Element => {
           onChange={(e) => setContent(e.target.value)}
           data-testid="content-text"
         />
+        <Button label="Send Email" type="submit" data-testid="send-email" />
       </form>
     </section>
   );

components/Input/Input.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-import { cn } from '../../utils/utils';
 import * as React from 'react';
+import { cn } from '../../utils/utils';
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -13,7 +13,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         {...props}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base text-zinc-50 ring-offset-background placeholder:border-zinc-400 placeholder:font-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-base text-foreground ring-offset-background placeholder:text-muted-foreground placeholder:font-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}

components/LabelText/LabelText.tsx

@@ -25,4 +25,4 @@ const LabelText = React.forwardRef<
 ))
 LabelText.displayName = LabelPrimitive.Root.displayName
 
-export { LabelText }
+export { LabelText }