Alex/implement email notification functionality

api/serverConfig.ts

@@ -13,3 +13,4 @@ const client = new sdk.Client()
   .setKey(API_KEY);
 
 export const users = new sdk.Users(client);
+export const messaging = new sdk.Messaging(client);

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

@@ -1,15 +1,76 @@
-// /Users/ryanfurrer/Developer/GitHub/gridiron-survivor/app/(admin)/admin/notifications/page.test.tsx
-
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { getCurrentLeague } from '@/api/apiFunctions';
+import { getUserTargets, sendEmailNotifications } from './serverFunctions/serverFunctionHelper';
 import AdminNotifications from './page';
 import React from 'react';
 
+let contentInput: HTMLInputElement,
+  selectAllUsersRadioOption: HTMLElement,
+  selectRecipientsRadioGroup: HTMLElement,
+  sendEmailButton: HTMLElement,
+  subjectInput: HTMLInputElement;
+
+jest.mock('@/api/apiFunctions', () => ({
+  getCurrentLeague: jest.fn(),
+}));
+
+jest.mock('./serverFunctions/serverFunctionHelper', () => ({
+  sendEmailNotifications: jest.fn(),
+  getUserTargets: jest.fn(),
+}));
+
 describe('Admin notifications page', () => {
-  it(`should render it's content`, () => {
+  beforeEach(async () => {
+    jest.clearAllMocks();
+
+    (getCurrentLeague as jest.Mock).mockResolvedValue({
+      participants: ['12345', '1234', '123'],
+      leagueName: 'Test League',
+    });
+
+    (getUserTargets as jest.Mock).mockResolvedValue([
+      'target1',
+      'target2',
+      'target3',
+    ]);
+
     render(<AdminNotifications />);
+
+    contentInput = screen.getByTestId('content-text');
+    selectAllUsersRadioOption = screen.getByTestId('all-users-option');
+    selectRecipientsRadioGroup = screen.getByTestId('radio-group-default');
+    sendEmailButton = screen.getByTestId('send-email');
+    subjectInput = screen.getByTestId('subject-text');
+  });
+
+  it(`should render it's content`, () => {
+    (sendEmailNotifications as jest.Mock).mockResolvedValue({});
+
     const adminNotificationsContent = screen.getByTestId(
       'admin-notifications-content',
     );
     expect(adminNotificationsContent).toBeInTheDocument();
   });
+
+  it('should call the sendEmailNotifications function with the provided inputs', async () => {
+    fireEvent.click(selectAllUsersRadioOption);
+    fireEvent.change(subjectInput, { target: { value: 'Test Title' } });
+    fireEvent.change(contentInput, {
+      target: { value: 'Test message section.' },
+    });
+
+    await waitFor(() => {
+      expect(sendEmailButton).toBeInTheDocument();
+    });
+
+    fireEvent.submit(sendEmailButton);
+
+    await waitFor(() => {
+      expect(sendEmailNotifications as jest.Mock).toHaveBeenCalledWith({
+        content: 'Test message section.',
+        groupUsers: ['target1', 'target2', 'target3'],
+        subject: 'Test Title',
+      });
+    });
+  });
 });

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

@@ -1,16 +1,163 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-import { JSX } from 'react';
+'use client';
+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 { sendEmailNotifications } from './serverFunctions/serverFunctionHelper';
+import { Textarea } from '@/components/Textarea/Textarea';
+import React, { useEffect } from 'react';
+import { getUserTargets } from './serverFunctions/serverFunctionHelper';
 
 /**
  * The admin home page.
  * @returns The rendered AdminHome page.
  */
 const AdminNotifications = (): JSX.Element => {
+  const [content, setContent] = useState<string>('');
+  const [emailSubjects, setEmailSubjects] = useState<string>('all users');
+  const [groupUsers, setGroupUsers] = useState<string[]>([]);
+  const [leagueName, setLeagueName] = useState<string>('');
+  const [subject, setSubject] = useState<string>('');
+
+  /**
+   * To grab all users from the league.
+   * @returns The league data.
+   */
+  const getLeagueData = async (): Promise<void> => {
+    try {
+      const leagueId = '66f1a8e300102bff03ff'; // EMAIL TEST LEAGUE (DO NOT CHANGE)
+      const leagueData = await getCurrentLeague(leagueId);
+      const userTargets = await getUserTargets({
+        userIDs: leagueData.participants,
+      });
+      setGroupUsers(userTargets);
+      setLeagueName(leagueData.leagueName);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * Handle form submission
+   * @param event - Prevents the default reloading.
+   */
+  const handleSubmit = async (event: React.FormEvent): Promise<void> => {
+    event.preventDefault();
+    await sendEmailNotifications({
+      content,
+      groupUsers,
+      subject,
+    });
+  };
+
+  /**
+   * Function to handle radio selection logic.
+   * @param value - Value of the radio buttons.
+   */
+  const handleRadioChange = (value: string): void => {
+    setGroupUsers([value]);
+    setEmailSubjects(value);
+  };
+
+  useEffect(() => {
+    /**
+     * Fetches the league data.
+     * @returns The league data.
+     */
+    const fetchData = async (): Promise<void> => {
+      await getLeagueData();
+    };
+    fetchData();
+  }, []);
+
   return (
-    <section data-testid="admin-notifications-content">
-      <p>{`This is where I'd put my notifation dashboard, IF I HAD ONE!`}</p>
+    <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">
+            {emailSubjects.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"
+        />
+      </form>
     </section>
   );
 };

app/(admin)/admin/notifications/serverFunctions/serverFunctionHelper.test.tsx

@@ -0,0 +1,52 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use server';
+import { messaging } from '@/api/serverConfig';
+import { sendEmailNotifications } from './serverFunctionHelper';
+
+jest.mock('./serverFunctionHelper', () => ({
+  sendEmailNotifications: jest.fn(),
+}));
+
+jest.mock('@/api/serverConfig', () => ({
+  messaging: {
+    createEmail: jest.fn(),
+  },
+}));
+
+describe('SendEmailNotification', () => {
+  it('should send email with provided information', async () => {
+    const content = 'Test';
+    const groupUsers = ['123456', '12345', '1234'];
+    const subject = 'This is a test';
+
+    (sendEmailNotifications as jest.Mock).mockImplementation(
+      async ({ content, groupUsers, subject }) => {
+        await (messaging.createEmail as jest.Mock)(
+          '1234567890',
+          subject,
+          content,
+          [],
+          '1234567890',
+          [],
+          [],
+          groupUsers,
+        );
+      },
+    );
+
+    await sendEmailNotifications({ content, groupUsers, subject });
+
+    expect(messaging.createEmail).toHaveBeenCalledWith(
+      expect.any(String),
+      subject,
+      content,
+      [],
+      '1234567890',
+      [],
+      [],
+      groupUsers,
+    );
+  });
+});

app/(admin)/admin/notifications/serverFunctions/serverFunctionHelper.ts

@@ -0,0 +1,62 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use server';
+import { ID } from 'appwrite';
+import { messaging, users } from '@/api/serverConfig';
+
+/**
+ * Function to send email.
+ * @param props - subject, content.
+ * @param props.content - The actual email you are wanting to send.
+ * @param props.groupUsers - User id's being passed in from the notification page.
+ * @param props.subject - The subject of the email.
+ */
+export const sendEmailNotifications = async ({
+  content,
+  groupUsers,
+  subject,
+}: {
+  content: string;
+  groupUsers: string[];
+  subject: string;
+}): Promise<void> => {
+  try {
+    await messaging.createEmail(
+      ID.unique(),
+      subject,
+      content,
+      [],
+      ['672a3534000502297d88'],
+      [],
+      [],
+      groupUsers,
+    );
+  } catch (error) {
+    throw error;
+  }
+};
+
+/**
+ * Function to take the userIDs and grab their targetIDs for emailing.
+ * @param props - userIDs
+ * @param props.userIDs - All the passed in userIDs.
+ * @returns {Promise<void>}
+ */
+export async function getUserTargets({
+  userIDs,
+}: {
+  userIDs: string[];
+}): Promise<string[]> {
+  try {
+    const userTargets = await Promise.all(
+      userIDs.map(async (userID) => {
+        const userTarget = await users.get(userID);
+        return userTarget.targets.map((target) => target.$id);
+      }),
+    );
+    return userTargets.flat();
+  } catch (error) {
+    throw error;
+  }
+}

components/LabelText/LabelText.test.tsx

@@ -0,0 +1,25 @@
+import { LabelText } from './LabelText';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+describe('LabelText Component', () => {
+  it('renders properly', () => {
+    const { getByTestId } = render(<LabelText>Test Label</LabelText>);
+    expect(getByTestId('label-text')).toBeInTheDocument();
+  });
+
+  it('renders the correct text', () => {
+    const { getByTestId } = render(<LabelText>Test Label</LabelText>);
+    expect(getByTestId('label-text')).toHaveTextContent('Test Label');
+  });
+
+  it('applies disabled styles when peer-disabled', () => {
+    const { getByTestId } = render(
+      <LabelText className="peer-disabled">Test Label</LabelText>,
+    );
+    expect(getByTestId('label-text')).toHaveClass(
+      'peer-disabled:cursor-not-allowed',
+    );
+    expect(getByTestId('label-text')).toHaveClass('peer-disabled:opacity-70');
+  });
+});