refactor(bannerMessages): ent-4899 align hook components

src/components/bannerMessages/bannerMessages.js

@@ -3,42 +3,22 @@ import PropTypes from 'prop-types';
 import { Alert, AlertActionCloseButton, AlertVariant, Button } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { useShallowCompareEffect } from 'react-use';
-import { apiQueries, storeHooks } from '../../redux';
+import { useGetAppMessages } from './bannerMessagesContext';
+import { helpers } from '../../common';
 import { translate } from '../i18n/i18n';
-import { dateHelpers, helpers } from '../../common';
-import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
-import { useRouteDetail } from '../../hooks/useRouter';
 
 /**
  * Render banner messages.
  *
  * @param {object} props
  * @param {Array} props.messages
- * @param {Function} props.useRouteDetail
- * @param {Function} props.useAppMessages
+ * @param {Function} props.useGetAppMessages
  * @returns {Node}
  */
-const BannerMessages = ({ messages, useRouteDetail: useAliasRouteDetail, useAppMessages: useAliasAppMessages }) => {
+const BannerMessages = ({ messages, useGetAppMessages: useAliasGetAppMessages }) => {
   const [hideAlerts, setHideAlerts] = useState({});
   const [alerts, setAlerts] = useState([]);
-  const { pathParameter: productId, productConfig } = useAliasRouteDetail() || {};
-  const isProductConfig = productConfig?.length === 1 && productConfig?.[0];
-  const { query } = apiQueries.parseRhsmQuery(productConfig?.[0]?.query || {});
-  const { appMessages } = useAliasAppMessages();
-
-  useShallowCompareEffect(() => {
-    if (productId && isProductConfig) {
-      const { startDate, endDate } = dateHelpers.getRangedDateTime('CURRENT');
-      const updatedGraphQuery = {
-        ...query,
-        [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY,
-        [RHSM_API_QUERY_TYPES.START_DATE]: startDate.toISOString(),
-        [RHSM_API_QUERY_TYPES.END_DATE]: endDate.toISOString()
-      };
-
-      storeHooks.rhsmActions.useGetMessageReports(productId, updatedGraphQuery);
-    }
-  }, [productId, isProductConfig, query]);
+  const { data: appMessages } = useAliasGetAppMessages();
 
   useShallowCompareEffect(() => {
     const updatedMessages = [];
@@ -81,7 +61,7 @@ const BannerMessages = ({ messages, useRouteDetail: useAliasRouteDetail, useAppM
 /**
  * Prop types.
  *
- * @type {{useAppMessages: Function, messages: Array, useRouteDetail: Function}}
+ * @type {{useGetAppMessages: Function, messages: Array}}
  */
 BannerMessages.propTypes = {
   messages: PropTypes.arrayOf(
@@ -92,14 +72,13 @@ BannerMessages.propTypes = {
       variant: PropTypes.oneOf([...Object.values(AlertVariant)])
     })
   ),
-  useAppMessages: PropTypes.func,
-  useRouteDetail: PropTypes.func
+  useGetAppMessages: PropTypes.func
 };
 
 /**
  * Default props.
  *
- * @type {{useAppMessages: Function, messages: Array, useRouteDetail: Function}}
+ * @type {{useGetAppMessages: Function, messages: Array}}
  */
 BannerMessages.defaultProps = {
   messages: [
@@ -126,8 +105,7 @@ BannerMessages.defaultProps = {
       )
     }
   ],
-  useAppMessages: storeHooks.rhsmSelectors.useAppMessages,
-  useRouteDetail
+  useGetAppMessages
 };
 
 export { BannerMessages as default, BannerMessages };

src/components/bannerMessages/bannerMessagesContext.js

@@ -0,0 +1,81 @@
+import { useShallowCompareEffect } from 'react-use';
+import { reduxActions, storeHooks } from '../../redux';
+import { useProduct, useProductQuery } from '../productView/productViewContext';
+import { dateHelpers } from '../../common';
+import {
+  rhsmConstants,
+  RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES,
+  RHSM_API_QUERY_SET_TYPES
+} from '../../services/rhsm/rhsmConstants';
+
+/**
+ * Get app messages.
+ *
+ * @param {object} options
+ * @param {Function} options.getMessageReports
+ * @param {Function} options.useDispatch
+ * @param {Function} options.useProduct
+ * @param {Function} options.useProductQuery
+ * @param {Function} options.useSelectorsResponse
+ * @returns {object}
+ */
+const useGetAppMessages = ({
+  getMessageReports = reduxActions.rhsm.getMessageReports,
+  useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
+  useProduct: useAliasProduct = useProduct,
+  useProductQuery: useAliasProductQuery = useProductQuery,
+  useSelectorsResponse: useAliasSelectorsResponse = storeHooks.reactRedux.useSelectorsResponse
+} = {}) => {
+  const { productId } = useAliasProduct();
+  const query = useAliasProductQuery();
+  const dispatch = useAliasDispatch();
+  const { error, fulfilled, pending, data } = useAliasSelectorsResponse({
+    id: 'messages',
+    selector: ({ messages }) => messages?.report?.[productId]
+  });
+
+  useShallowCompareEffect(() => {
+    if (productId) {
+      const { startDate, endDate } = dateHelpers.getRangedDateTime('CURRENT');
+      const updatedQuery = {
+        ...query,
+        [RHSM_API_QUERY_SET_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY,
+        [RHSM_API_QUERY_SET_TYPES.START_DATE]: startDate.toISOString(),
+        [RHSM_API_QUERY_SET_TYPES.END_DATE]: endDate.toISOString()
+      };
+
+      getMessageReports(productId, updatedQuery)(dispatch);
+    }
+  }, [productId, query]);
+
+  const updatedData = {
+    cloudigradeMismatch: false
+  };
+
+  if (fulfilled) {
+    const { messages = {} } = data || {};
+
+    updatedData.cloudigradeMismatch =
+      messages?.data
+        ?.reverse()
+        ?.find(
+          ({ [rhsmConstants.RHSM_API_RESPONSE_TALLY_META_TYPES.HAS_CLOUDIGRADE_MISMATCH]: mismatch }) =>
+            mismatch === true
+        ) !== undefined;
+  }
+
+  return {
+    error,
+    fulfilled,
+    pending,
+    data: {
+      ...updatedData
+    }
+  };
+};
+
+const context = {
+  useGetAppMessages
+};
+
+export { context as default, context, useGetAppMessages };

src/components/productView/productView.js

@@ -42,7 +42,7 @@ import { translate } from '../i18n/i18n';
  * @returns {Node}
  */
 const ProductView = ({ t, toolbarGraph, toolbarGraphDescription, useRouteDetail: useAliasRouteDetail }) => {
-  const { pathParameter: routeProductId, productParameter: routeProductLabel, productConfig } = useAliasRouteDetail();
+  const { productParameter: routeProductLabel, productConfig } = useAliasRouteDetail();
 
   const renderProduct = config => {
     const {
@@ -93,6 +93,7 @@ const ProductView = ({ t, toolbarGraph, toolbarGraphDescription, useRouteDetail:
 
     return (
       <ProductViewContext.Provider value={config} key={`product_${productId}`}>
+        <PageMessages>{productId !== RHSM_API_PATH_PRODUCT_TYPES.RHOSAK && <BannerMessages />}</PageMessages>
         <PageToolbar>
           <Toolbar />
         </PageToolbar>
@@ -168,7 +169,6 @@ const ProductView = ({ t, toolbarGraph, toolbarGraphDescription, useRouteDetail:
       <PageHeader productLabel={routeProductLabel}>
         {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: routeProductLabel })}
       </PageHeader>
-      <PageMessages>{routeProductId !== RHSM_API_PATH_PRODUCT_TYPES.RHOSAK && <BannerMessages />}</PageMessages>
       <PageColumns>{productConfig.map(config => renderProduct(config))}</PageColumns>
     </PageLayout>
   );

src/redux/hooks/index.js

@@ -1,11 +1,7 @@
 import { reactReduxHooks } from './useReactRedux';
-import { rhsmActionsHooks } from './useRhsmActions';
-import { rhsmSelectorsHooks } from './useRhsmSelectors';
 
 const storeHooks = {
-  reactRedux: reactReduxHooks,
-  rhsmActions: rhsmActionsHooks,
-  rhsmSelectors: rhsmSelectorsHooks
+  reactRedux: reactReduxHooks
 };
 
-export { storeHooks as default, storeHooks, reactReduxHooks, rhsmActionsHooks, rhsmSelectorsHooks };
+export { storeHooks as default, storeHooks, reactReduxHooks };