Complete migration from redux mapping to redux hooks for plugin-hrm-form

plugin-hrm-form/src/___tests__/components/case/caseOverview/EditCaseOverview.test.tsx

@@ -49,7 +49,9 @@ const state: RecursivePartial<RootState> = {
         list: [],
         hash: { worker1: 'worker1 name' },
       },
-      definitionVersions: {},
+      definitionVersions: {
+        'as-v1': null,
+      },
       currentDefinitionVersion: {
         caseStatus: {
           open: {
@@ -129,10 +131,10 @@ describe('Test EditCaseOverview', () => {
     mockReset();
     ownProps = {
       task: task as StandaloneITask,
-      definitionVersion: mockV1,
       can: () => true,
     };
     store.dispatch = jest.fn();
+    state[namespace].configuration.definitionVersions['as-v1'] = mockV1;
   });
   test('Test close functionality', async () => {
     render(

plugin-hrm-form/src/components/CSAMReport/CSAMReport.tsx

@@ -14,10 +14,10 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { Dispatch } from 'react';
+import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { CircularProgress } from '@material-ui/core';
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import CSAMReportStatusScreen from './CSAMReportStatusScreen';
 import CSAMReportCounsellorForm from './CSAMReportCounsellorForm';
@@ -30,45 +30,24 @@ import CSAMReportChildForm from './CSAMReportChildForm';
 import { getHrmConfig, getTemplateStrings } from '../../hrmConfig';
 import { configurationBase, namespace } from '../../states/storeNamespaces';
 
-type OwnProps = {
+type Props = {
   api: CSAMReportApi;
 };
 
-const mapStateToProps = (state: RootState, { api }: OwnProps) => ({
-  csamReportState: api.reportState(state),
-  currentPage: api.currentPage(state),
-  counselorsHash: state[namespace][configurationBase].counselors.hash,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<any>, { api }: OwnProps) => {
-  return {
-    updateCounsellorForm: api.updateCounsellorReportDispatcher(dispatch),
-    updateChildForm: api.updateChildReportDispatcher(dispatch),
-    updateStatus: api.updateStatusDispatcher(dispatch),
-    navigate: api.navigationActionDispatcher(dispatch),
-    exit: api.exitActionDispatcher(dispatch),
-    addCSAMReportEntry: api.addReportDispatcher(dispatch),
-    pickReportType: api.pickReportTypeDispatcher(dispatch),
-  };
-};
-
-// eslint-disable-next-line no-use-before-define
-export type Props = OwnProps & ConnectedProps<typeof connector>;
-
 // exported for test purposes
-export const CSAMReportScreen: React.FC<Props> = ({
-  updateChildForm,
-  updateCounsellorForm,
-  updateStatus,
-  navigate,
-  exit,
-  addCSAMReportEntry,
-  csamReportState,
-  currentPage,
-  counselorsHash,
-  api,
-  pickReportType,
-}) => {
+export const CSAMReportScreen: React.FC<Props> = ({ api }) => {
+  const dispatch = useDispatch();
+  const csamReportState = useSelector((state: RootState) => api.reportState(state));
+  const currentPage = useSelector((state: RootState) => api.currentPage(state));
+  const counselorsHash = useSelector((state: RootState) => state[namespace][configurationBase].counselors.hash);
+
+  const updateCounsellorForm = api.updateCounsellorReportDispatcher(dispatch);
+  const updateChildForm = api.updateChildReportDispatcher(dispatch);
+  const updateStatus = api.updateStatusDispatcher(dispatch);
+  const navigate = api.navigationActionDispatcher(dispatch);
+  const exit = api.exitActionDispatcher(dispatch);
+  const addCSAMReportEntry = api.addReportDispatcher(dispatch);
+  const pickReportType = api.pickReportTypeDispatcher(dispatch);
   const methods = useForm({ reValidateMode: 'onChange' });
 
   const { workerSid } = getHrmConfig();
@@ -186,7 +165,4 @@ export const CSAMReportScreen: React.FC<Props> = ({
 
 CSAMReportScreen.displayName = 'CSAMReportScreen';
 
-const connector = connect(mapStateToProps, mapDispatchToProps);
-const connected = connector(CSAMReportScreen);
-
-export default connected;
+export default CSAMReportScreen;

plugin-hrm-form/src/components/NavigableContainer/index.tsx

@@ -14,7 +14,7 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import { connect, ConnectedProps } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Template } from '@twilio/flex-ui';
 import React from 'react';
 import { Close } from '@material-ui/icons';
@@ -33,58 +33,44 @@ import useFocus from '../../utils/useFocus';
 
 type FocusTarget = 'back' | 'close';
 
-type OwnProps = {
+type Props = {
   task: CustomITask | StandaloneITask;
   titleCode: string;
   titleValues?: Record<string, string>;
   onGoBack?: () => void;
   onCloseModal?: () => void;
-  focusPriority: FocusTarget[];
+  focusPriority?: FocusTarget[];
   noOverflow?: boolean;
-};
-
-const mapStateToProps = ({ [namespace]: { routing } }: RootState, { task: { taskSid } }: OwnProps) => {
-  const routeStack = getCurrentTopmostRouteStackForTask(routing, taskSid);
-  return {
-    routing: routeStack[routeStack.length - 1],
-    hasHistory: routeStack.length > 1,
-    isModal: isRouteModal(getCurrentBaseRoute(routing, taskSid)),
-  };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-  const taskId = ownProps.task.taskSid;
-
-  return {
-    goBack: () => dispatch(newGoBackAction(taskId)),
-    closeModal: () => {
-      dispatch(newCloseModalAction(taskId));
-    },
-    viewContactDetails: ({ id }: Contact) => {
-      dispatch(changeRoute({ route: 'contact', subroute: 'view', id: id.toString() }, taskId));
-    },
-  };
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type Props = OwnProps & ConnectedProps<typeof connector> & StyledProps;
+} & Partial<StyledProps>;
 
 const NavigableContainer: React.FC<Props> = ({
   children,
-  goBack,
-  onGoBack = () => goBack(),
-  closeModal,
-  onCloseModal = () => closeModal(),
+  task,
+  onGoBack,
+  onCloseModal,
   titleCode,
   titleValues = {},
-  hasHistory,
-  isModal,
   focusPriority = ['back', 'close'],
-  routing,
   noOverflow,
   ...boxProps
 }) => {
+  const dispatch = useDispatch();
+  const { taskSid } = task;
+
+  const routeStack = useSelector((state: RootState) =>
+    getCurrentTopmostRouteStackForTask(state[namespace].routing, taskSid),
+  );
+  const routing = routeStack[routeStack.length - 1];
+  const hasHistory = routeStack.length > 1;
+  const isModal = useSelector((state: RootState) =>
+    isRouteModal(getCurrentBaseRoute(state[namespace].routing, taskSid)),
+  );
+
+  const goBack = () => dispatch(newGoBackAction(taskSid));
+  const closeModal = () => dispatch(newCloseModalAction(taskSid));
+
+  const handleGoBack = onGoBack || goBack;
+  const handleCloseModal = onCloseModal || closeModal;
   const validFocusPriority = (focusPriority ?? []).filter(
     target => (target === 'back' && hasHistory) || (target === 'close' && isModal),
   );
@@ -99,7 +85,7 @@ const NavigableContainer: React.FC<Props> = ({
           {hasHistory && (
             <StyledBackButton
               style={{ marginTop: '10px', marginRight: '5px' }}
-              onClick={onGoBack}
+              onClick={handleGoBack}
               data-testid="NavigableContainer-BackButton"
               ref={ref => {
                 if (shouldFocus('back')) {
@@ -119,7 +105,7 @@ const NavigableContainer: React.FC<Props> = ({
         </NavigableContainerTitle>
         {isModal && (
           <HeaderCloseButton
-            onClick={onCloseModal}
+            onClick={handleCloseModal}
             data-testid="NavigableContainer-CloseCross"
             style={{ marginRight: '15px', opacity: '.75' }}
             ref={ref => {
@@ -140,4 +126,4 @@ const NavigableContainer: React.FC<Props> = ({
   );
 };
 
-export default connector(NavigableContainer);
+export default NavigableContainer;