refactor(app,auth): ent-4572 convert class components (#852)

* app, authentication, move from class components
* productViewMissing, auto platform nav dispatch
* useRouter, option automatic platform nav dispatch

src/app.js

@@ -1,82 +1,59 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useMount } from 'react-use';
 import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications';
-import { connectRouter, reduxActions } from './redux';
-import { helpers } from './common/helpers';
+import { reduxActions, storeHooks } from './redux';
 import { I18n } from './components/i18n/i18n';
 import { Router } from './components/router';
 import Authentication from './components/authentication/authentication';
 
 /**
  * Application
  *
- * @augments React.Component
+ * @param {object} props
+ * @param {Function} props.getLocale
+ * @param {Function} props.useDispatch
+ * @param {Function} props.useSelector
+ * @returns {Node}
  */
-class App extends React.Component {
-  componentDidMount() {
-    const { getLocale } = this.props;
-    getLocale();
-  }
-
-  /**
-   * Render application.
-   *
-   * @returns {Node}
-   */
-  render() {
-    const { locale } = this.props;
-
-    return (
-      <I18n locale={(locale && locale.value) || null}>
-        <NotificationsPortal />
-        <Authentication>
-          <Router />
-        </Authentication>
-      </I18n>
-    );
-  }
-}
+const App = ({ getLocale, useDispatch: useAliasDispatch, useSelector: useAliasSelector }) => {
+  const dispatch = useAliasDispatch();
+  const { value: locale } = useAliasSelector(({ user }) => user.session?.locale, {});
+
+  useMount(() => {
+    dispatch(getLocale());
+  });
+
+  return (
+    <I18n locale={locale || null}>
+      <NotificationsPortal />
+      <Authentication>
+        <Router />
+      </Authentication>
+    </I18n>
+  );
+};
 
 /**
  * Prop types.
  *
- * @type {{locale: object, getLocale: Function}}
+ * @type {{useSelector: Function, useDispatch: Function, getLocale: Function}}
  */
 App.propTypes = {
   getLocale: PropTypes.func,
-  locale: PropTypes.shape({
-    value: PropTypes.string
-  })
+  useDispatch: PropTypes.func,
+  useSelector: PropTypes.func
 };
 
 /**
  * Default props.
  *
- * @type {{locale: {}, getLocale: Function}}
+ * @type {{useSelector: Function, useDispatch: Function, getLocale: Function}}
  */
 App.defaultProps = {
-  getLocale: helpers.noop,
-  locale: {}
+  getLocale: reduxActions.user.getLocale,
+  useDispatch: storeHooks.reactRedux.useDispatch,
+  useSelector: storeHooks.reactRedux.useSelector
 };
 
-/**
- * Apply actions to props.
- *
- * @param {Function} dispatch
- * @returns {object}
- */
-const mapDispatchToProps = dispatch => ({
-  getLocale: () => dispatch(reduxActions.user.getLocale())
-});
-
-/**
- * Apply state to props.
- *
- * @param {object} state
- * @returns {object}
- */
-const mapStateToProps = state => ({ locale: state.user.session.locale });
-
-const ConnectedApp = connectRouter(mapStateToProps, mapDispatchToProps)(App);
-
-export { ConnectedApp as default, ConnectedApp, App };
+export { App as default, App };

src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap

@@ -1,22 +1,66 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Authentication Component should allow being disabled: disabled 1`] = `
+<MessageView
+  icon={null}
+  message={null}
+  pageTitle={null}
+  title={null}
+>
+  <Maintenance
+    description="t(curiosity-auth.maintenanceCopy, ...)"
+    endTime="8am"
+    redirectLink="https://status.redhat.com/incidents"
+    startTime="6am"
+    timeZone="EST"
+    title="Maintenance in progress"
+    utcEndTime="12am"
+    utcStartTime="10am"
+  />
+</MessageView>
+`;
+
 exports[`Authentication Component should render a connected component: connected 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Object {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "onStateChange": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <Connect(Authentication)>
+    <span
+      className="test"
+    >
+      lorem
+    </span>
+  </Connect(Authentication)>
+</ContextProvider>
 `;
 
 exports[`Authentication Component should render a non-connected component authorized: non-connected authorized 1`] = `
 <Authentication
+  appName="subscriptions"
   authorizeUser={[Function]}
   hideGlobalFilter={[Function]}
-  history={
-    Object {
-      "listen": [Function],
-      "push": [Function],
-    }
-  }
   initializeChrome={[Function]}
+  isDisabled={false}
   onNavigation={[Function]}
   session={
     Object {
@@ -29,6 +73,8 @@ exports[`Authentication Component should render a non-connected component author
   }
   setAppName={[Function]}
   t={[Function]}
+  useDispatch={[Function]}
+  useHistory={[Function]}
 >
   <span
     className="test"
@@ -40,15 +86,11 @@ exports[`Authentication Component should render a non-connected component author
 
 exports[`Authentication Component should render a non-connected component error: non-connected error 1`] = `
 <Authentication
+  appName="subscriptions"
   authorizeUser={[Function]}
   hideGlobalFilter={[Function]}
-  history={
-    Object {
-      "listen": [Function],
-      "push": [Function],
-    }
-  }
   initializeChrome={[Function]}
+  isDisabled={false}
   onNavigation={[Function]}
   session={
     Object {
@@ -59,6 +101,8 @@ exports[`Authentication Component should render a non-connected component error:
   }
   setAppName={[Function]}
   t={[Function]}
+  useDispatch={[Function]}
+  useHistory={[Function]}
 >
   <MessageView
     icon={null}