refactor: migrate subscriptions bulk enrollment and highlights to withAlgoliaSearch (#1443)

Author: adamstankiewicz

package.json

@@ -11,8 +11,9 @@
     "i18n_extract": "fedx-scripts formatjs extract --throws",
     "build:with-theme": "paragon install-theme && fedx-scripts webpack && npm install",
     "check-types": "tsc --noemit",
+    "check-types:watch": "npm run check-types -- --watch",
     "eslint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
-    "lint": "npm run eslint && npm run check-types",
+    "lint": "npm run eslint",
     "lint:fix": "npm run eslint -- --fix",
     "precommit": "npm run lint",
     "prepublishOnly": "npm run build",
@@ -24,7 +25,7 @@
     "debug-test": "node --inspect-brk node_modules/.bin/jest --runInBand --coverage",
     "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests --maxWorkers=50%",
     "test:watch": "npm run test -- --watch",
-    "test:watch-no-cov": "npm run test -- --watch --collectCoverage=false",
+    "test:watch-no-cov": "npm run test:watch -- --collectCoverage=false",
     "snapshot": "fedx-scripts jest --updateSnapshot"
   },
   "license": "AGPL-3.0",

…EnrollmentPage/BulkEnrollmentContext.jsx …EnrollmentPage/BulkEnrollmentContext.tsxsrc/components/BulkEnrollmentPage/BulkEnrollmentContext.jsx renamed to src/components/BulkEnrollmentPage/BulkEnrollmentContext.tsx src/components/BulkEnrollmentPage/BulkEnrollmentContext.jsx renamed to src/components/BulkEnrollmentPage/BulkEnrollmentContext.tsx

@@ -1,44 +1,60 @@
-import React, {
+import {
   createContext, useState, useReducer, useMemo,
 } from 'react';
 import PropTypes from 'prop-types';
 
-import selectedRowsReducer from './data/reducer';
+import selectedRowsReducer, { Action, SelectedRow } from './data/reducer';
 
-export const BulkEnrollContext = createContext({});
+export type Subscription = {
+  uuid: string;
+  enterpriseCatalogUuid: string;
+};
+
+export type BulkEnrollContextValue = {
+  courses: [SelectedRow[], React.Dispatch<Action>],
+  emails: [SelectedRow[], React.Dispatch<Action>],
+  subscription: [Subscription | null, React.Dispatch<React.SetStateAction<Subscription>>],
+};
+
+export const BulkEnrollContext = createContext<BulkEnrollContextValue>({
+  courses: [[], () => {}],
+  emails: [[], () => {}],
+  subscription: [null, () => {}],
+});
 
-const BulkEnrollContextProvider = ({ children, initialEmailsList }) => {
+interface BulkEnrollContextProviderProps {
+  children: React.ReactNode;
+  initialEmailsList?: string[];
+}
+
+const BulkEnrollContextProvider: React.FC<BulkEnrollContextProviderProps> = ({ children, initialEmailsList = [] }) => {
   const [selectedCourses, coursesDispatch] = useReducer(selectedRowsReducer, []);
   // this format is to make this consistent with the format used by ReviewStep components
   // similar to DataTable row objects, but not exactly
-  const formattedEmailsList = initialEmailsList.map(email => ({
+  const formattedEmailsList: SelectedRow[] = initialEmailsList.map(email => ({
     id: email,
     values: {
       userEmail: email,
     },
   }));
   const [selectedEmails, emailsDispatch] = useReducer(selectedRowsReducer, formattedEmailsList);
-  const [selectedSubscription, setSelectedSubscription] = useState({});
+  const [selectedSubscription, setSelectedSubscription] = useState<Subscription>();
 
   const contextValue = useMemo(
     () => ({
       courses: [selectedCourses, coursesDispatch],
       emails: [selectedEmails, emailsDispatch],
       subscription: [selectedSubscription, setSelectedSubscription],
-    }),
+    } as BulkEnrollContextValue),
     [selectedCourses, selectedEmails, selectedSubscription],
   );
 
   return <BulkEnrollContext.Provider value={contextValue}>{children}</BulkEnrollContext.Provider>;
 };
 
-BulkEnrollContextProvider.defaultProps = {
-  initialEmailsList: [],
-};
-
 BulkEnrollContextProvider.propTypes = {
   children: PropTypes.node.isRequired,
-  initialEmailsList: PropTypes.arrayOf(PropTypes.string),
+  initialEmailsList: PropTypes.arrayOf(PropTypes.string.isRequired),
 };
 
 export default BulkEnrollContextProvider;

src/components/BulkEnrollmentPage/data/reducer.js

@@ -0,0 +1,34 @@
+import {
+  SET_SELECTED_ROWS,
+  DELETE_ROW,
+  CLEAR_SELECTION,
+} from './actions';
+
+export type SelectedRow = {
+  id: unknown;
+  values?: {
+    userEmail?: string;
+  };
+};
+
+export type State = SelectedRow[];
+
+export type Action =
+  | { type: typeof SET_SELECTED_ROWS, payload: SelectedRow[] }
+  | { type: typeof DELETE_ROW, payload: unknown }
+  | { type: typeof CLEAR_SELECTION };
+
+const selectedRowsReducer = (state: State = [], action: Action) => {
+  switch (action.type) {
+    case SET_SELECTED_ROWS:
+      return action.payload;
+    case DELETE_ROW:
+      return state.filter((row) => row.id !== action.payload);
+    case CLEAR_SELECTION:
+      return [];
+    default:
+      return state;
+  }
+};
+
+export default selectedRowsReducer;