feat: context factory for components and BuildEmailFormExtensible with context and BulkEmailTaskManager pluggable

Author: johnvente

jest.config.js

@@ -11,6 +11,7 @@ module.exports = createConfig('jest', {
     'src/i18n',
   ],
   moduleNameMapper: {
-    '@node_modules/(.*)': '<rootDir>/node_modules/$1'
+    '@node_modules/(.*)': '<rootDir>/node_modules/$1',
+    '@communications-app/(.*)': '<rootDir>/$1'
   },
 });

package-lock.json

@@ -79,6 +79,7 @@
     "@edx/reactifex": "^2.1.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "axios-mock-adapter": "1.21.2",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-webpack": "^0.13.8",

package.json

@@ -11,6 +11,7 @@ import BuildEmailFormExtensible from './bulk-email-form/BuildEmailFormExtensible
 import { CourseMetadataContext } from '../page-container/PageContainer';
 import { BulkEmailProvider } from './bulk-email-context';
 import BackToInstructor from '../navigation-tabs/BackToInstructor';
+import PluggableComponent from '../PluggableComponent';
 
 export default function BulkEmailTool() {
   const { courseId } = useParams();
@@ -36,7 +37,13 @@ export default function BulkEmailTool() {
                 <BuildEmailFormExtensible courseId={courseId} cohorts={courseMetadata.cohorts} />
               </div>
               <div className="row py-5">
-                <BulkEmailTaskManager courseId={courseId} />
+                <PluggableComponent
+                  id="build-email-task-manager"
+                  as="communications-app-build-email-task-manager"
+                  courseId={courseId}
+                >
+                  <BulkEmailTaskManager />
+                </PluggableComponent>
               </div>
             </Container>
           </BulkEmailProvider>

src/components/bulk-email-tool/BulkEmailTool.jsx

@@ -0,0 +1,11 @@
+import contextFactory from '@communications-app/src/utils/contextFactory';
+
+import { INITIAL_STATE, reducer } from './reducer';
+
+export const {
+  useSelector,
+  withContextProvider,
+  useDispatch,
+  DispatchContext,
+  StateContext,
+} = contextFactory(reducer, INITIAL_STATE);

src/components/bulk-email-tool/bulk-email-form/BuildEmailFormExtensible/context/index.js

@@ -0,0 +1,36 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useContext } from 'react';
+
+import { INITIAL_STATE } from './reducer';
+
+import {
+  useSelector, useDispatch, StateContext, DispatchContext,
+} from '.';
+
+describe('BuildEmailFormExtensible stateContext', () => {
+  test('useSelector returns the state', () => {
+    const { result } = renderHook(() => useSelector((state) => state));
+    expect(result.current).toEqual(INITIAL_STATE);
+  });
+
+  test('Context contains the initial value', () => {
+    const {
+      result: { current: stateContextValue },
+    } = renderHook(() => useContext(StateContext));
+    const {
+      result: { current: dispatchContextValue },
+    } = renderHook(() => useContext(DispatchContext));
+    expect(stateContextValue).toEqual(INITIAL_STATE);
+    expect(dispatchContextValue).toBeTruthy();
+  });
+
+  test("useDispatch returns the context's dispatch", () => {
+    const {
+      result: { current: hookDispatch },
+    } = renderHook(() => useDispatch());
+    const {
+      result: { current: dispatchContextValue },
+    } = renderHook(() => useContext(DispatchContext));
+    expect(hookDispatch).toEqual(dispatchContextValue);
+  });
+});

src/components/bulk-email-tool/bulk-email-form/BuildEmailFormExtensible/context/index.test.js

@@ -0,0 +1,50 @@
+import { produce } from 'immer';
+
+export const INITIAL_STATE = {
+  form: {
+    isFormValid: true,
+    isFormSubmitted: false,
+    scheduleValid: true,
+    isScheduled: false,
+    isEditMode: false,
+    formStatus: 'default',
+    isScheduleButtonClicked: false,
+    courseId: '',
+    cohorts: '',
+    scheduleDate: '',
+    scheduleTime: '',
+    isScheduledSubmitted: false,
+    emailId: '',
+    schedulingId: '',
+    emailRecipients: [],
+    subject: '',
+    body: '',
+  },
+};
+const ActionTypes = {
+  UPDATE_FORM: 'UPDATE_FORM',
+  RESET_FORM: 'RESET_FORM',
+};
+
+export const actionCreators = {
+  updateForm: (updates) => ({ type: ActionTypes.UPDATE_FORM, updates }),
+  resetForm: () => ({ type: ActionTypes.RESET_FORM }),
+};
+
+// eslint-disable-next-line consistent-return
+export const reducer = produce((draft, action) => {
+  switch (action.type) {
+    case ActionTypes.UPDATE_FORM: {
+      Object.assign(draft.form, action.updates);
+      break; // No explicit return needed due to 'produce' creating a draft
+    }
+    case ActionTypes.RESET_FORM: {
+      // Resets to initial form state
+      return INITIAL_STATE;
+    }
+    // Add other case handlers if needed
+    default:
+      // No changes, return the current state
+      break;
+  }
+}, INITIAL_STATE);

src/components/bulk-email-tool/bulk-email-form/BuildEmailFormExtensible/context/reducer.js

@@ -1,52 +1,36 @@
-import { useState, useEffect, useContext } from 'react';
+import { useContext } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import {
   Form,
   Spinner,
   useToggle,
 } from '@edx/paragon';
-import { BulkEmailContext } from '../bulk-email-context';
-import useMobileResponsive from '../../../utils/useMobileResponsive';
-import PluggableComponent from '../../PluggableComponent';
+import { BulkEmailContext } from '../../bulk-email-context';
+import useMobileResponsive from '../../../../utils/useMobileResponsive';
+import PluggableComponent from '../../../PluggableComponent';
 
-function BuildEmailFormExtensible({ courseId, cohorts }) {
+import { withContextProvider, useDispatch } from './context';
+import { actionCreators as formActions } from './context/reducer';
+
+const BuildEmailFormExtensible = ({ courseId, cohorts }) => {
   const isMobile = useMobileResponsive();
   const [{ editor }] = useContext(BulkEmailContext);
   const [isTaskAlertOpen, openTaskAlert, closeTaskAlert] = useToggle(false);
-  const [formState, setFormState] = useState({
-    isFormValid: true,
-    isFormSubmitted: false,
-    scheduleValid: true,
-    isScheduled: false,
-    isEditMode: false,
-    formStatus: 'default',
-    isScheduleButtonClicked: false,
-    courseId,
-    cohorts,
-    scheduleDate: '',
-    scheduleTime: '',
-    isScheduledSubmitted: false,
-    emailId: '',
-    schedulingId: '',
-    emailRecipients: { value: [], isLoaded: false },
-    subject: { value: '', isLoaded: false },
-    body: { value: '', isLoaded: false },
-  });
+  const dispatch = useDispatch();
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (editor.editMode) {
-      const { emailRecipients, subject, body } = formState;
-      const newRecipientsValue = { ...emailRecipients, value: editor.emailRecipients };
-      const newSubjectValue = { ...subject, value: editor.emailSubject };
-      const newBodyValue = { ...body, value: editor.emailBody };
+      const newRecipientsValue = editor.emailRecipients;
+      const newSubjectValue = editor.emailSubject;
+      const newBodyValue = editor.emailBody;
       const newScheduleDate = editor.scheduleDate;
       const newScheduleTime = editor.scheduleTime;
       const newEmailId = editor.emailId;
       const newSchedulingId = editor.schedulingId;
 
-      setFormState({
-        ...formState,
+      dispatch(formActions.updateForm({
         isEditMode: true,
         formStatus: 'reschedule',
         isScheduled: true,
@@ -57,10 +41,9 @@ function BuildEmailFormExtensible({ courseId, cohorts }) {
         emailRecipients: newRecipientsValue,
         subject: newSubjectValue,
         body: newBodyValue,
-      });
+      }));
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor.editMode, editor.emailRecipients, editor.emailSubject, editor.emailBody]);
+  }, [editor, dispatch]);
 
   return (
     <div className={classNames('w-100 m-auto', !isMobile && 'p-4 border border-primary-200')}>
@@ -69,23 +52,19 @@ function BuildEmailFormExtensible({ courseId, cohorts }) {
         <PluggableComponent
           id="build-email-form-tasks-alert-modal"
           as="communications-app-task-alert-modal"
-          formState={formState}
-          setFormState={setFormState}
+          courseId={courseId}
           {...{ isTaskAlertOpen, openTaskAlert, closeTaskAlert }}
         />
 
         <PluggableComponent
           id="build-email-form-recipients-field"
           as="communications-app-recipients-checks"
-          formState={formState}
-          setFormState={setFormState}
+          cohorts={cohorts}
         />
 
         <PluggableComponent
           id="build-email-form-subject-field"
           as="communications-app-subject-form"
-          formState={formState}
-          setFormState={setFormState}
         />
 
         <PluggableComponent
@@ -99,29 +78,23 @@ function BuildEmailFormExtensible({ courseId, cohorts }) {
               screenReaderText="loading"
             />
            )}
-          formState={formState}
-          setFormState={setFormState}
         />
 
         <PluggableComponent
           id="build-email-form-instructions-form"
           as="communications-app-instructions-pro-freading"
-          formState={formState}
-          setFormState={setFormState}
         />
 
         <PluggableComponent
           id="build-email-form-schedule-section"
           as="communications-app-schedule-section"
-          formState={formState}
-          setFormState={setFormState}
           openTaskAlert={openTaskAlert}
         />
 
       </Form>
     </div>
   );
-}
+};
 
 BuildEmailFormExtensible.defaultProps = {
   cohorts: [],
@@ -132,4 +105,4 @@ BuildEmailFormExtensible.propTypes = {
   cohorts: PropTypes.arrayOf(PropTypes.string),
 };
 
-export default BuildEmailFormExtensible;
+export default withContextProvider(BuildEmailFormExtensible);