POC: Quick and dirty POC of redux domain selectors

plugin-hrm-form/src/components/CSAMReport/csamReportApi.ts

@@ -35,7 +35,7 @@ import { acknowledgeCSAMReport, createCSAMReport } from '../../services/CSAMRepo
 import { reportToIWF, selfReportToIWF } from '../../services/ServerlessService';
 import { newCSAMReportActionForContact } from '../../states/csam-report/actions';
 import { csamReportBase, namespace } from '../../states/storeNamespaces';
-import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
+import { selectCurrentTopmostRouteForTask } from '../../states/routing/selectors';
 
 export enum CSAMPage {
   ReportTypePicker = 'report-type-picker',
@@ -123,7 +123,7 @@ const saveReport = async (
 
 export const newContactCSAMApi = (contactId: string, taskSid: string, previousRoute: AppRoutes): CSAMReportApi => ({
   currentPage: (state: RootState) => {
-    const routing = getCurrentTopmostRouteForTask(state[namespace].routing, taskSid);
+    const routing = selectCurrentTopmostRouteForTask(state, taskSid);
     if (routing.route === 'csam-report') {
       const [key] = Object.entries(CSAMPage).find(([, v]) => v === routing.subroute) ?? [];
       return CSAMPage[key];

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

@@ -25,8 +25,7 @@ import { RootState } from '../states';
 import type { CustomITask } from '../types/types';
 import { newContactCSAMApi } from './CSAMReport/csamReportApi';
 import findContactByTaskSid from '../states/contacts/findContactByTaskSid';
-import { namespace } from '../states/storeNamespaces';
-import { getCurrentTopmostRouteForTask } from '../states/routing/getRoute';
+import { selectCurrentTopmostRouteForTask } from '../states/routing/selectors';
 
 type OwnProps = {
   task: CustomITask;
@@ -65,10 +64,9 @@ const HrmForm: React.FC<Props> = ({ routing, task, featureFlags, savedContact })
 HrmForm.displayName = 'HrmForm';
 
 const mapStateToProps = (state: RootState, { task }: OwnProps) => {
-  const routingState = state[namespace].routing;
   const { savedContact, metadata } = findContactByTaskSid(state, task.taskSid) ?? {};
 
-  return { routing: getCurrentTopmostRouteForTask(routingState, task.taskSid), savedContact, metadata };
+  return { routing: selectCurrentTopmostRouteForTask(state, task.taskSid), savedContact, metadata };
 };
 
 const connector = connect(mapStateToProps);

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

@@ -23,7 +23,7 @@ import { StyledProps } from '@material-ui/core';
 
 import { namespace } from '../states/storeNamespaces';
 import { RootState } from '../states';
-import { getCurrentBaseRoute, getCurrentTopmostRouteStackForTask } from '../states/routing/getRoute';
+import { selectCurrentBaseRoute, selectCurrentTopmostRouteStackForTask } from '../states/routing/selectors';
 import { isRouteModal } from '../states/routing/types';
 import { changeRoute, newCloseModalAction, newGoBackAction } from '../states/routing/actions';
 import { Contact, CustomITask, StandaloneITask } from '../types/types';
@@ -39,15 +39,12 @@ type OwnProps = {
   onCloseModal?: () => void;
 };
 
-const mapStateToProps = (
-  { [namespace]: { searchContacts, configuration, routing } }: RootState,
-  { task: { taskSid } }: OwnProps,
-) => {
-  const routeStack = getCurrentTopmostRouteStackForTask(routing, taskSid);
+const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
+  const routeStack = selectCurrentTopmostRouteStackForTask(state, taskSid);
   return {
     routing: routeStack[routeStack.length - 1],
     hasHistory: routeStack.length > 1,
-    isModal: isRouteModal(getCurrentBaseRoute(routing, taskSid)),
+    isModal: isRouteModal(selectCurrentBaseRoute(state, taskSid)),
   };
 };
 

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

@@ -36,7 +36,7 @@ import { getPermissionsForViewingIdentifiers, PermissionActions } from '../permi
 import { CustomITask, isTwilioTask } from '../types/types';
 import { namespace } from '../states/storeNamespaces';
 import { isRouteModal } from '../states/routing/types';
-import { getCurrentBaseRoute } from '../states/routing/getRoute';
+import { selectCurrentBaseRoute } from '../states/routing/selectors';
 
 type OwnProps = {
   task: CustomITask;
@@ -101,7 +101,7 @@ const PreviousContactsBanner: React.FC<Props> = ({
     <div className={modalOpen ? 'editingContact' : ''}>
       <YellowBanner data-testid="PreviousContacts-Container" className="hiddenWhenModalOpen">
         {/* eslint-disable-next-line prettier/prettier */}
-      <pre>
+        <pre>
           <Template code="PreviousContacts-ThereAre" />
           &nbsp;
           {contactsCount === 1 ? (
@@ -149,13 +149,13 @@ const PreviousContactsBanner: React.FC<Props> = ({
 
 PreviousContactsBanner.displayName = 'PreviousContactsBanner';
 
-const mapStateToProps = (
-  { [namespace]: { searchContacts, configuration, activeContacts, routing } }: RootState,
-  { task: { taskSid } }: OwnProps,
-) => {
+const mapStateToProps = (state: RootState, { task: { taskSid } }: OwnProps) => {
+  const {
+    [namespace]: { searchContacts, configuration, activeContacts, routing },
+  } = state;
   const taskSearchState = searchContacts.tasks[taskSid];
   const { counselors } = configuration;
-  const modalOpen = activeContacts.editingContact || isRouteModal(getCurrentBaseRoute(routing, taskSid));
+  const modalOpen = activeContacts.editingContact || isRouteModal(selectCurrentBaseRoute(state, taskSid));
 
   return {
     previousContacts: taskSearchState.previousContacts,

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

@@ -34,7 +34,7 @@ import { updateDraft } from '../states/contacts/existingContacts';
 import { loadContactFromHrmByTaskSidAsyncAction } from '../states/contacts/saveContact';
 import { namespace } from '../states/storeNamespaces';
 import { isRouteModal } from '../states/routing/types';
-import { getCurrentBaseRoute } from '../states/routing/getRoute';
+import { selectCurrentBaseRoute } from '../states/routing/selectors';
 
 type OwnProps = {
   task: CustomITask;
@@ -129,10 +129,10 @@ const TaskView: React.FC<Props> = props => {
 
 TaskView.displayName = 'TaskView';
 
-const mapStateToProps = (
-  { [namespace]: { configuration, activeContacts, routing, searchContacts } }: RootState,
-  ownProps: OwnProps,
-) => {
+const mapStateToProps = (state: RootState, ownProps: OwnProps) => {
+  const {
+    [namespace]: { configuration, activeContacts, routing, searchContacts },
+  } = state;
   const { task } = ownProps;
   const { currentDefinitionVersion } = configuration;
   // Check if the entry for this task exists in each reducer
@@ -149,7 +149,7 @@ const mapStateToProps = (
     contact,
     shouldRecreateState,
     currentDefinitionVersion,
-    isModalOpen: routingStateExists && isRouteModal(getCurrentBaseRoute(routing, task.taskSid)),
+    isModalOpen: routingStateExists && isRouteModal(selectCurrentBaseRoute(state, task.taskSid)),
   };
 };
 

plugin-hrm-form/src/components/case/AddEditCaseItem.tsx

@@ -58,9 +58,10 @@ import {
 import { getHrmConfig, getTemplateStrings } from '../../hrmConfig';
 import asyncDispatch from '../../states/asyncDispatch';
 import { updateCaseAsyncAction } from '../../states/case/saveCase';
-import { namespace } from '../../states/storeNamespaces';
 import NavigableContainer from '../NavigableContainer';
-import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
+import { selectCaseStateForTask } from '../../states/case/selectors';
+import { selectCounselorsHashState } from '../../states/configuration/selectors';
+import { selectCurrentTopmostRouteForTask } from '../../states/routing/selectors';
 
 export type AddEditCaseItemProps = {
   task: CustomITask | StandaloneITask;
@@ -301,14 +302,11 @@ const AddEditCaseItem: React.FC<Props> = ({
 
 AddEditCaseItem.displayName = 'AddEditCaseItem';
 
-const mapStateToProps = (
-  { [namespace]: { routing, configuration, connectedCase: caseState } }: RootState,
-  { task, sectionApi }: AddEditCaseItemProps,
-) => {
-  const currentRoute = getCurrentTopmostRouteForTask(routing, task.taskSid);
+const mapStateToProps = (state: RootState, { task, sectionApi }: AddEditCaseItemProps) => {
+  const currentRoute = selectCurrentTopmostRouteForTask(state, task.taskSid);
   const id = isEditCaseSectionRoute(currentRoute) ? currentRoute.id : undefined;
-  const counselorsHash = configuration.counselors.hash;
-  const { connectedCase, caseWorkingCopy } = caseState.tasks[task.taskSid];
+  const counselorsHash = selectCounselorsHashState(state);
+  const { connectedCase, caseWorkingCopy } = selectCaseStateForTask(state, task.taskSid);
   const workingCopy = sectionApi.getWorkingCopy(caseWorkingCopy, id);
 
   return { connectedCase, counselorsHash, workingCopy, currentRoute };

plugin-hrm-form/src/components/case/Case.tsx

@@ -61,8 +61,10 @@ import { updateCaseAsyncAction } from '../../states/case/saveCase';
 import asyncDispatch from '../../states/asyncDispatch';
 import { connectToCaseAsyncAction, submitContactFormAsyncAction } from '../../states/contacts/saveContact';
 import { ContactMetadata } from '../../states/contacts/types';
-import { configurationBase, connectedCaseBase, contactFormsBase, namespace } from '../../states/storeNamespaces';
-import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
+import { contactFormsBase, namespace } from '../../states/storeNamespaces';
+import { selectCaseStateForTask } from '../../states/case/selectors';
+import { selectConfigurationState, selectCounselorsHashState } from '../../states/configuration/selectors';
+import { selectCurrentTopmostRouteForTask } from '../../states/routing/selectors';
 
 export const isStandaloneITask = (task): task is StandaloneITask => {
   return task && task.taskSid === 'standalone-task-sid';
@@ -358,16 +360,16 @@ const Case: React.FC<Props> = ({
 Case.displayName = 'Case';
 
 const mapStateToProps = (state: RootState, { task }: OwnProps) => {
-  const caseState = state[namespace][connectedCaseBase].tasks[task.taskSid];
+  const caseState = selectCaseStateForTask(state, task.taskSid);
   const { connectedCase } = caseState ?? {};
   const connectedContactIds = new Set((connectedCase?.connectedContacts ?? []).map(cc => cc.id as string));
-  const { definitionVersions, currentDefinitionVersion } = state[namespace][configurationBase];
+  const { definitionVersions, currentDefinitionVersion } = selectConfigurationState(state);
 
   return {
     connectedCaseState: caseState,
     connectedCaseId: connectedCase?.id,
-    counselorsHash: state[namespace][configurationBase].counselors.hash,
-    routing: getCurrentTopmostRouteForTask(state[namespace].routing, task.taskSid) as CaseRoute,
+    counselorsHash: selectCounselorsHashState(state),
+    routing: selectCurrentTopmostRouteForTask(state, task.taskSid) as CaseRoute,
     definitionVersions,
     currentDefinitionVersion,
     savedContacts: Object.values(state[namespace][contactFormsBase].existingContacts)

plugin-hrm-form/src/components/case/ViewCaseItem.tsx

@@ -34,17 +34,16 @@ import { CaseSectionApi } from '../../states/case/sections/api';
 import { FormTargetObject } from '../common/forms/types';
 import { namespace } from '../../states/storeNamespaces';
 import NavigableContainer from '../NavigableContainer';
-import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
+import { selectCaseStateForTask } from '../../states/case/selectors';
+import { selectCounselorsHashState } from '../../states/configuration/selectors';
+import { selectCurrentTopmostRouteForTask } from '../../states/routing/selectors';
 
-const mapStateToProps = (
-  { [namespace]: { routing, connectedCase: caseState, configuration } }: RootState,
-  { task }: ViewCaseItemProps,
-) => {
-  const counselorsHash = configuration.counselors.hash;
+const mapStateToProps = (state: RootState, { task }: ViewCaseItemProps) => {
+  const counselorsHash = selectCounselorsHashState(state);
 
-  const { connectedCase } = caseState.tasks[task.taskSid];
+  const { connectedCase } = selectCaseStateForTask(state, task.taskSid);
 
-  return { counselorsHash, currentRoute: getCurrentTopmostRouteForTask(routing, task.taskSid), connectedCase };
+  return { counselorsHash, currentRoute: selectCurrentTopmostRouteForTask(state, task.taskSid), connectedCase };
 };
 
 export type ViewCaseItemProps = {

plugin-hrm-form/src/components/caseList/CaseList.tsx

@@ -41,8 +41,8 @@ import { undoCaseListSettingsUpdate } from '../../states/caseList/reducer';
 import { dateFilterPayloadFromFilters } from './filters/dateFilters';
 import * as ListContent from '../../states/caseList/listContent';
 import { getHrmConfig } from '../../hrmConfig';
-import { namespace } from '../../states/storeNamespaces';
-import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
+import { selectCaseListState } from '../../states/caseList/selectors';
+import { selectCurrentTopmostRouteForTask } from '../../states/routing/selectors';
 import { newCloseModalAction, newOpenModalAction } from '../../states/routing/actions';
 import ViewContact from '../case/ViewContact';
 
@@ -186,14 +186,14 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-const mapStateToProps = ({ [namespace]: { caseList, routing } }: RootState) => ({
-  currentSettings: caseList.currentSettings,
-  previousSettings: caseList.previousSettings,
-  routing: getCurrentTopmostRouteForTask(routing, standaloneTask.taskSid) ?? {
+const mapStateToProps = (state: RootState) => ({
+  currentSettings: selectCaseListState(state).currentSettings,
+  previousSettings: selectCaseListState(state).previousSettings,
+  routing: selectCurrentTopmostRouteForTask(state, standaloneTask.taskSid) ?? {
     route: 'case-list',
     subroute: 'case-list',
   },
-  ...caseList.content,
+  ...selectCaseListState(state).content,
 });
 
 const connector = connect(mapStateToProps, mapDispatchToProps);

plugin-hrm-form/src/components/contact/ContactDetails.tsx

@@ -38,7 +38,7 @@ import { existingContactCSAMApi } from '../CSAMReport/csamReportApi';
 import { getAseloFeatureFlags, getTemplateStrings } from '../../hrmConfig';
 import { namespace } from '../../states/storeNamespaces';
 import { ContactRawJson, CustomITask, StandaloneITask } from '../../types/types';
-import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
+import { selectCurrentTopmostRouteForTask } from '../../states/routing/selectors';
 import NavigableContainer from '../NavigableContainer';
 import { contactLabelFromHrmContact } from '../../states/contacts/contactIdentifier';
 import { newCloseModalAction, newGoBackAction } from '../../states/routing/actions';
@@ -245,16 +245,18 @@ const mapDispatchToProps = (
     dispatch(newSetContactDialogStateAction(contactId, `${form}-confirm-${dismissAction}`, true)),
 });
 
-const mapStateToProps = (
-  { [namespace]: { configuration, activeContacts, 'csam-report': csamReport, routing } }: RootState,
-  { contactId, task }: OwnProps,
-) => ({
-  definitionVersions: configuration.definitionVersions,
-  savedContact: activeContacts.existingContacts[contactId]?.savedContact,
-  draftContact: activeContacts.existingContacts[contactId]?.draftContact,
-  draftCsamReport: csamReport.contacts[contactId],
-  currentRoute: getCurrentTopmostRouteForTask(routing, task.taskSid),
-});
+const mapStateToProps = (state: RootState, { contactId, task }: OwnProps) => {
+  const {
+    [namespace]: { configuration, activeContacts, 'csam-report': csamReport },
+  } = state;
+  return {
+    definitionVersions: configuration.definitionVersions,
+    savedContact: activeContacts.existingContacts[contactId]?.savedContact,
+    draftContact: activeContacts.existingContacts[contactId]?.draftContact,
+    draftCsamReport: csamReport.contacts[contactId],
+    currentRoute: selectCurrentTopmostRouteForTask(state, task.taskSid),
+  };
+};
 
 ContactDetails.displayName = 'ContactDetails';
 

plugin-hrm-form/src/components/search/SearchResults/index.tsx

@@ -48,7 +48,7 @@ import { SearchPagesType } from '../../../states/search/types';
 import { getPermissionsForContact, getPermissionsForCase, PermissionActions } from '../../../permissions';
 import { namespace } from '../../../states/storeNamespaces';
 import { RootState } from '../../../states';
-import { getCurrentTopmostRouteForTask } from '../../../states/routing/getRoute';
+import { selectCurrentTopmostRouteForTask } from '../../../states/routing/selectors';
 import { changeRoute, newOpenModalAction } from '../../../states/routing/actions';
 import { ChangeRouteMode, SearchRoute } from '../../../states/routing/types';
 
@@ -329,18 +329,18 @@ const SearchResults: React.FC<Props> = ({
 };
 SearchResults.displayName = 'SearchResults';
 
-const mapStateToProps = (
-  { [namespace]: { searchContacts, configuration, routing } }: RootState,
-  { task }: OwnProps,
-) => {
+const mapStateToProps = (state: RootState, { task }: OwnProps) => {
+  const {
+    [namespace]: { searchContacts, configuration, routing },
+  } = state;
   const taskId = task.taskSid;
   const { isRequesting, isRequestingCases } = searchContacts.tasks[taskId];
   const { counselors } = configuration;
   return {
     isRequestingContacts: isRequesting,
     isRequestingCases,
     counselorsHash: counselors.hash,
-    routing: getCurrentTopmostRouteForTask(routing, taskId),
+    routing: selectCurrentTopmostRouteForTask(state, taskId),
   };
 };
 

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

@@ -31,7 +31,7 @@ import { CustomITask, Contact, standaloneTaskSid } from '../../types/types';
 import { handleSearchFormChange, searchContacts, searchCases } from '../../states/search/actions';
 import { RootState } from '../../states';
 import { namespace } from '../../states/storeNamespaces';
-import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
+import { selectCurrentTopmostRouteForTask } from '../../states/routing/selectors';
 import { changeRoute, newCloseModalAction } from '../../states/routing/actions';
 import { SearchRoute } from '../../states/routing/types';
 import NavigableContainer from '../NavigableContainer';
@@ -215,15 +215,15 @@ Search.defaultProps = {
   error: null,
 };
 
-const mapStateToProps = (
-  { [namespace]: { searchContacts, activeContacts, routing } }: RootState,
-  { task }: OwnProps,
-) => {
+const mapStateToProps = (state: RootState, { task }: OwnProps) => {
+  const {
+    [namespace]: { searchContacts, activeContacts, routing },
+  } = state;
   const taskId = task.taskSid;
   const taskSearchState = searchContacts.tasks[taskId];
   const isStandaloneSearch = taskId === standaloneTaskSid;
   const editContactFormOpen = activeContacts.editingContact;
-  const currentRoute = getCurrentTopmostRouteForTask(routing, taskId);
+  const currentRoute = selectCurrentTopmostRouteForTask(state, taskId);
 
   return {
     isRequesting: taskSearchState.isRequesting,

plugin-hrm-form/src/components/tabbedForms/TabbedForms.tsx

@@ -58,7 +58,7 @@ import asyncDispatch from '../../states/asyncDispatch';
 import { submitContactFormAsyncAction, updateContactInHrmAsyncAction } from '../../states/contacts/saveContact';
 import { namespace } from '../../states/storeNamespaces';
 import Search from '../search';
-import { getCurrentBaseRoute, getCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
+import { selectCurrentBaseRoute, selectCurrentTopmostRouteForTask } from '../../states/routing/selectors';
 import { CaseLayout } from '../../styles/case';
 import Case from '../case/Case';
 import { ContactMetadata } from '../../states/contacts/types';
@@ -380,14 +380,14 @@ const TabbedForms: React.FC<Props> = ({
 
 TabbedForms.displayName = 'TabbedForms';
 
-const mapStateToProps = (
-  { [namespace]: { routing, activeContacts, configuration } }: RootState,
-  { task: { taskSid }, contactId }: OwnProps,
-) => {
-  const currentRoute = getCurrentTopmostRouteForTask(routing, taskSid);
+const mapStateToProps = (state: RootState, { task: { taskSid }, contactId }: OwnProps) => {
+  const {
+    [namespace]: { routing, activeContacts, configuration },
+  } = state;
+  const currentRoute = selectCurrentTopmostRouteForTask(state, taskSid);
   const { isCallTypeCaller, existingContacts } = activeContacts;
   const { savedContact, draftContact, metadata } = existingContacts[contactId] || {};
-  const baseRoute = getCurrentBaseRoute(routing, taskSid);
+  const baseRoute = selectCurrentBaseRoute(state, taskSid);
   const searchModalOpen =
     isRouteWithModalSupport(baseRoute) && baseRoute.activeModal?.length && baseRoute.activeModal[0].route === 'search';
   const { currentDefinitionVersion } = configuration;