Create custom hook for LOA3 user data in Health Care Application (#32169

)

src/applications/hca/containers/App.jsx

@@ -1,40 +1,24 @@
-import React, { useEffect } from 'react';
-import { connect, useSelector } from 'react-redux';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import RoutedSavableApp from 'platform/forms/save-in-progress/RoutedSavableApp';
-import { fetchEnrollmentStatus } from '../utils/actions/enrollment-status';
-import { fetchTotalDisabilityRating } from '../utils/actions/disability-rating';
 import { selectFeatureToggles } from '../utils/selectors/feature-toggles';
 import { selectAuthStatus } from '../utils/selectors/auth-status';
 import { useBrowserMonitoring } from '../hooks/useBrowserMonitoring';
 import { useYesNoInputEvents } from '../hooks/useYesNoInputEvents';
 import { useDefaultFormData } from '../hooks/useDefaultFormData';
+import { useLoa3UserData } from '../hooks/useLoa3UserData';
 import content from '../locales/en/content.json';
 import formConfig from '../config/form';
 
 const App = props => {
-  const {
-    children,
-    location,
-    getDisabilityRating,
-    getEnrollmentStatus,
-  } = props;
-
+  const { children, location } = props;
   const { isLoadingFeatureFlags } = useSelector(selectFeatureToggles);
-  const { isUserLOA3, isLoadingProfile } = useSelector(selectAuthStatus);
+  const { isLoadingProfile } = useSelector(selectAuthStatus);
   const isAppLoading = isLoadingFeatureFlags || isLoadingProfile;
 
-  // Attempt to fetch disability rating for LOA3 users
-  useEffect(
-    () => {
-      if (isUserLOA3) {
-        getDisabilityRating();
-        getEnrollmentStatus();
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isUserLOA3],
-  );
+  // Fetch appropriate data for LOA3 users
+  useLoa3UserData();
 
   // Set default view fields within the form data
   useDefaultFormData();
@@ -63,17 +47,7 @@ App.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]),
-  getDisabilityRating: PropTypes.func,
-  getEnrollmentStatus: PropTypes.func,
   location: PropTypes.object,
 };
 
-const mapDispatchToProps = {
-  getEnrollmentStatus: fetchEnrollmentStatus,
-  getDisabilityRating: fetchTotalDisabilityRating,
-};
-
-export default connect(
-  null,
-  mapDispatchToProps,
-)(App);
+export default App;

src/applications/hca/hooks/useLoa3UserData.jsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchEnrollmentStatus } from '../utils/actions/enrollment-status';
+import { fetchTotalDisabilityRating } from '../utils/actions/disability-rating';
+import { selectAuthStatus } from '../utils/selectors/auth-status';
+
+export const useLoa3UserData = () => {
+  const { isUserLOA3 } = useSelector(selectAuthStatus);
+  const dispatch = useDispatch();
+
+  const getDisabilityRating = () => dispatch(fetchTotalDisabilityRating());
+  const getEnrollmentStatus = () => dispatch(fetchEnrollmentStatus());
+
+  useEffect(
+    () => {
+      if (isUserLOA3) {
+        getDisabilityRating();
+        getEnrollmentStatus();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isUserLOA3],
+  );
+};

src/applications/hca/tests/unit/hooks/useLoa3UserData.unit.spec.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render } from '@testing-library/react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import { useLoa3UserData } from '../../../hooks/useLoa3UserData';
+
+// create wrapper component for our hook
+const TestComponent = () => {
+  useLoa3UserData();
+  return null;
+};
+
+describe('hca `useLoa3UserData` hook', () => {
+  const getData = ({ loggedIn = true }) => ({
+    mockStore: {
+      getState: () => ({
+        user: {
+          login: { currentlyLoggedIn: loggedIn },
+          profile: {
+            loa: { current: loggedIn ? 3 : null },
+            loading: false,
+          },
+        },
+      }),
+      subscribe: () => {},
+      dispatch: sinon.stub(),
+    },
+  });
+  const subject = ({ mockStore }) =>
+    render(
+      <Provider store={mockStore}>
+        <TestComponent />
+      </Provider>,
+    );
+
+  it('should fire the dispatch action(s) when the user is logged in', () => {
+    const { mockStore } = getData({});
+    const { dispatch } = mockStore;
+    subject({ mockStore });
+    expect(dispatch.called).to.be.true;
+  });
+
+  it('should not fire the dispatch action(s) when the user is logged out', () => {
+    const { mockStore } = getData({ loggedIn: false });
+    const { dispatch } = mockStore;
+    subject({ mockStore });
+    expect(dispatch.called).to.be.false;
+  });
+});