refactor: update endpoints and improvements

Author: diana-villalvazo-wgu

src/components/SpecifyLearnerField.test.tsx

@@ -0,0 +1,33 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import SpecifyLearnerField from './SpecifyLearnerField';
+import messages from './messages';
+import { renderWithIntl } from '@src/testUtils';
+
+describe('SpecifyLearnerField', () => {
+  it('renders label and input', () => {
+    renderWithIntl(<SpecifyLearnerField onChange={jest.fn()} />);
+    expect(screen.getByText(messages.specifyLearner.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders select button', () => {
+    renderWithIntl(<SpecifyLearnerField onChange={jest.fn()} />);
+    expect(screen.getByText(messages.select.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls onChange when input changes', async () => {
+    const handleChange = jest.fn();
+    renderWithIntl(<SpecifyLearnerField onChange={handleChange} />);
+    const input = screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);
+    const user = userEvent.setup();
+    await user.type(input, 'testuser');
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it('input has correct name attribute', () => {
+    renderWithIntl(<SpecifyLearnerField onChange={jest.fn()} />);
+    const input = screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);
+    expect(input).toHaveAttribute('name', 'emailOrUsername');
+  });
+});

src/components/SpecifyLearnerField.tsx

@@ -0,0 +1,23 @@
+import { Button, FormControl, FormGroup, FormLabel } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+
+interface SpecifyLearnerFieldProps {
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
+}
+
+const SpecifyLearnerField = ({ onChange }: SpecifyLearnerFieldProps) => {
+  const intl = useIntl();
+
+  return (
+    <FormGroup size="sm">
+      <FormLabel>{intl.formatMessage(messages.specifyLearner)}</FormLabel>
+      <div className="d-flex">
+        <FormControl className="mr-2" name="emailOrUsername" placeholder={intl.formatMessage(messages.specifyLearnerPlaceholder)} size="md" autoResize onChange={onChange} />
+        <Button>{intl.formatMessage(messages.select)}</Button>
+      </div>
+    </FormGroup>
+  );
+};
+
+export default SpecifyLearnerField;

src/components/SpecifyLearnerField/SpecifyLearnerField.tsx

@@ -0,0 +1,21 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  select: {
+    id: 'instruct.specifyLearner.select',
+    defaultMessage: 'Select',
+    description: 'Label for select dropdown in specify learner field',
+  },
+  specifyLearner: {
+    id: 'instruct.specifyLearner.label',
+    defaultMessage: 'Specify Learner:',
+    description: 'Label for specify learner field',
+  },
+  specifyLearnerPlaceholder: {
+    id: 'instruct.specifyLearner.placeholder',
+    defaultMessage: 'Learner email address or username',
+    description: 'Placeholder text for specify learner input field',
+  },
+});
+
+export default messages;

src/components/messages.ts

@@ -9,6 +9,7 @@ import { LearnerDateExtension } from './types';
 import { useAddDateExtensionMutation, useResetDateExtensionMutation } from './data/apiHook';
 import { useAlert } from '@src/providers/AlertProvider';
 import AddExtensionModal from './components/AddExtensionModal';
+import { APIError } from '@src/types';
 
 const DateExtensionsPage = () => {
   const intl = useIntl();
@@ -29,10 +30,10 @@ const DateExtensionsPage = () => {
     setSelectedUser(null);
   };
 
-  const handleErrorOnReset = (error: Error) => {
+  const handleErrorOnReset = (error: APIError | Error) => {
     showModal({
       confirmText: intl.formatMessage(messages.close),
-      message: error.message,
+      message: 'response' in error ? error.response.data.error : error.message,
       variant: 'danger',
       onConfirm: (id) => removeAlert(id)
     });
@@ -69,15 +70,18 @@ const DateExtensionsPage = () => {
     setIsAddExtensionModalOpen(true);
   };
 
-  const handleAddExtension = ({ email_or_username, block_id, due_datetime, reason }) => {
+  const handleAddExtension = ({ emailOrUsername, blockId, dueDatetime, reason }) => {
     addExtensionMutation({ courseId, extensionData: {
-      email_or_username,
-      block_id,
-      due_datetime,
+      emailOrUsername,
+      blockId,
+      dueDatetime,
       reason
     } }, {
       onError: handleErrorOnReset,
-      onSuccess: handleSuccessOnReset
+      onSuccess: (response) => {
+        setIsAddExtensionModalOpen(false);
+        showToast(response.message);
+      }
     });
   };
 

src/dateExtensions/DateExtensionsPage.tsx

@@ -1,44 +1,44 @@
 import { useState } from 'react';
 import { ActionRow, Button, Form, FormControl, FormGroup, FormLabel, ModalDialog } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
-import SpecifyLearnerField from '../../components/SpecifyLearnerField/SpecifyLearnerField';
+import SpecifyLearnerField from '../../components/SpecifyLearnerField';
 import messages from '../messages';
 import SelectGradedSubsection from './SelectGradedSubsection';
 
 interface AddExtensionModalProps {
   isOpen: boolean,
   title: string,
   onClose: () => void,
-  onSubmit: ({ email_or_username, block_id, due_datetime, reason }: {
-    email_or_username: string,
-    block_id: string,
-    due_datetime: string,
+  onSubmit: ({ emailOrUsername, blockId, dueDatetime, reason }: {
+    emailOrUsername: string,
+    blockId: string,
+    dueDatetime: string,
     reason: string,
   }) => void,
 }
 
 const AddExtensionModal = ({ isOpen, title, onClose, onSubmit }: AddExtensionModalProps) => {
   const intl = useIntl();
   const [formData, setFormData] = useState({
-    email_or_username: '',
-    block_id: '',
-    due_date: '',
-    due_time: '',
+    emailOrUsername: '',
+    blockId: '',
+    dueDate: '',
+    dueTime: '',
     reason: '',
   });
 
-  const handleSubmit = (event) => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const { email_or_username, block_id, due_date, due_time, reason } = formData;
+    const { emailOrUsername, blockId, dueDate, dueTime, reason } = formData;
     onSubmit({
-      email_or_username,
-      block_id,
-      due_datetime: `${due_date} ${due_time}`,
+      emailOrUsername,
+      blockId,
+      dueDatetime: new Date(`${dueDate}T${dueTime}`).toISOString(),
       reason
     });
   };
 
-  const onChange = (event) => {
+  const onChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     const { name, value } = event.target;
     setFormData((prevData) => ({
       ...prevData,
@@ -48,17 +48,19 @@ const AddExtensionModal = ({ isOpen, title, onClose, onSubmit }: AddExtensionMod
 
   return (
     <ModalDialog isOpen={isOpen} onClose={onClose} title={title} isOverflowVisible={false} size="xl">
-      <Form onSubmit={handleSubmit}>
-        <ModalDialog.Header className="p-3 pl-4">
-          <h3>{title}</h3>
-        </ModalDialog.Header>
-        <ModalDialog.Body className="border-bottom border-top">
+      <ModalDialog.Header className="p-3 pl-4 border-bottom">
+        <ModalDialog.Title as="h3" className="m-0">
+          {title}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <Form onSubmit={handleSubmit} className="position-relative overflow-auto">
+        <ModalDialog.Body>
           <div className="pt-3">
             <p>{intl.formatMessage(messages.extensionInstructions)}</p>
             <div className="container-fluid border-bottom mb-4.5 pb-3">
               <div className="row">
                 <div className="col-sm-12 col-md-6">
-                  <SpecifyLearnerField onChange={() => {}} />
+                  <SpecifyLearnerField onChange={onChange} />
                 </div>
                 <div className="col-sm-12 col-md-4">
                   <SelectGradedSubsection
@@ -76,20 +78,20 @@ const AddExtensionModal = ({ isOpen, title, onClose, onSubmit }: AddExtensionMod
                   {intl.formatMessage(messages.extensionDate)}:
                 </FormLabel>
                 <div className="d-md-flex w-md-50 align-items-center">
-                  <FormControl name="due_date" type="date" size="md" />
-                  <FormControl name="due_time" type="time" size="md" className="mt-sm-3 mt-md-0" />
+                  <FormControl name="dueDate" type="date" size="md" onChange={onChange} />
+                  <FormControl name="dueTime" type="time" size="md" className="mt-sm-3 mt-md-0" onChange={onChange} />
                 </div>
               </FormGroup>
               <FormGroup className="mt-3" size="sm">
                 <FormLabel>
                   {intl.formatMessage(messages.reasonForExtension)}:
                 </FormLabel>
-                <FormControl name="reason" placeholder={intl.formatMessage(messages.reasonForExtension)} size="md" />
+                <FormControl name="reason" placeholder={intl.formatMessage(messages.reasonForExtension)} size="md" onChange={onChange} />
               </FormGroup>
             </div>
           </div>
         </ModalDialog.Body>
-        <ModalDialog.Footer className="p-4">
+        <ModalDialog.Footer className="p-4 border-top">
           <ActionRow>
             <Button variant="tertiary" onClick={onClose}>{intl.formatMessage(messages.cancel)}</Button>
             <Button type="submit">{intl.formatMessage(messages.addExtension)}</Button>

src/dateExtensions/components/AddExtensionModal.tsx

@@ -22,13 +22,11 @@ const DateExtensionsList = ({
   const intl = useIntl();
   const { courseId } = useParams();
   const [page, setPage] = useState(0);
-  const { data = { count: 0, results: [] }, isLoading } = useDateExtensions(courseId ?? '', {
+  const { data = { count: 0, results: [], numPages: 0 }, isLoading } = useDateExtensions(courseId ?? '', {
     page,
     pageSize: DATE_EXTENSIONS_PAGE_SIZE
   });
 
-  const pageCount = Math.ceil(data.count / DATE_EXTENSIONS_PAGE_SIZE);
-
   const tableColumns = [
     { accessor: 'username', Header: intl.formatMessage(messages.username) },
     { accessor: 'fullName', Header: intl.formatMessage(messages.fullname) },
@@ -77,7 +75,7 @@ const DateExtensionsList = ({
       manualFilters
       manualPagination
       pageSize={DATE_EXTENSIONS_PAGE_SIZE}
-      pageCount={pageCount}
+      pageCount={data.numPages}
     />
   );
 };

src/dateExtensions/components/DateExtensionsList.tsx

@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react';
+import SelectGradedSubsection from './SelectGradedSubsection';
+import { useGradedSubsections } from '../data/apiHook';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({ courseId: 'course-v1:edX+DemoX+Demo_Course' }),
+}));
+
+jest.mock('../data/apiHook', () => ({
+  useGradedSubsections: jest.fn(),
+}));
+
+describe('SelectGradedSubsection', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders label when provided', () => {
+    (useGradedSubsections as jest.Mock).mockReturnValue({ data: { items: [] } });
+    render(
+      <SelectGradedSubsection
+        label="Select Subsection"
+        placeholder="Choose..."
+        onChange={mockOnChange}
+      />
+    );
+    expect(screen.getByText('Select Subsection')).toBeInTheDocument();
+  });
+
+  it('renders placeholder as first option', () => {
+    (useGradedSubsections as jest.Mock).mockReturnValue({ data: { items: [] } });
+    render(
+      <SelectGradedSubsection
+        placeholder="Choose..."
+        onChange={mockOnChange}
+      />
+    );
+    expect(screen.getByRole('option', { name: 'Choose...' })).toBeInTheDocument();
+  });
+
+  it('renders options from data', () => {
+    const items = [
+      { displayName: 'Quiz 1', subsectionId: 'sub1' },
+      { displayName: 'Quiz 2', subsectionId: 'sub2' },
+    ];
+    (useGradedSubsections as jest.Mock).mockReturnValue({ data: { items } });
+    render(
+      <SelectGradedSubsection
+        placeholder="Choose..."
+        onChange={mockOnChange}
+      />
+    );
+    expect(screen.getByRole('option', { name: 'Quiz 1' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Quiz 2' })).toBeInTheDocument();
+  });
+
+  it('calls onChange when option is selected', async () => {
+    const items = [
+      { displayName: 'Quiz 1', subsectionId: 'sub1' },
+    ];
+    (useGradedSubsections as jest.Mock).mockReturnValue({ data: { items } });
+    render(
+      <SelectGradedSubsection
+        placeholder="Choose..."
+        onChange={mockOnChange}
+      />
+    );
+    const user = userEvent.setup();
+    await user.selectOptions(screen.getByRole('combobox'), 'sub1');
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+
+  it('renders without label', () => {
+    (useGradedSubsections as jest.Mock).mockReturnValue({ data: { items: [] } });
+    render(
+      <SelectGradedSubsection
+        placeholder="Choose..."
+        onChange={mockOnChange}
+      />
+    );
+    expect(screen.queryByText('Select Subsection')).not.toBeInTheDocument();
+  });
+});