NOJIRA: refactor redux connect to hooks

src/components/pages/AdminPage.jsx

@@ -2,13 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { Redirect, Route, Switch } from 'react-router';
-import Immutable from 'immutable';
+import { useSelector } from 'react-redux';
 import AccountPageContainer from '../../containers/pages/AccountPageContainer';
 import AuthRolePageContainer from '../../containers/pages/AuthRolePageContainer';
 import AdminNavBar from '../admin/AdminNavBar';
 import TitleBar from '../sections/TitleBar';
 import { canList } from '../../helpers/permissionHelpers';
 import styles from '../../../styles/cspace-ui/AdminPage.css';
+import { getAdminTab, getUserPerms } from '../../reducers';
 
 const messages = defineMessages({
   title: {
@@ -26,17 +27,16 @@ const propTypes = {
   match: PropTypes.shape({
     url: PropTypes.string,
   }),
-  perms: PropTypes.instanceOf(Immutable.Map),
-  preferredTab: PropTypes.string,
 };
 
 export default function AdminPage(props) {
   const {
     match,
-    perms,
-    preferredTab,
   } = props;
 
+  const perms = useSelector(getUserPerms);
+  const preferredTab = useSelector(getAdminTab);
+
   const basename = match.url;
   const title = <FormattedMessage {...messages.title} />;
   const permittedTabs = tabs.filter((tab) => canList(tab, perms));

src/components/pages/AuthorizePage.jsx

@@ -3,12 +3,13 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import { createAuthCodeUrl } from '../../actions/login';
 
 const propTypes = {
   config: PropTypes.shape({
     serverUrl: PropTypes.string,
   }),
-  createAuthCodeUrl: PropTypes.func.isRequired,
   location: PropTypes.shape({
     state: PropTypes.object,
   }).isRequired,
@@ -21,8 +22,8 @@ const contextTypes = {
 };
 
 export default function AuthorizePage(props, context) {
+  const dispatch = useDispatch();
   const {
-    createAuthCodeUrl,
     location,
   } = props;
 
@@ -33,7 +34,7 @@ export default function AuthorizePage(props, context) {
   const landingPath = get(location, ['state', 'continuation']) || '';
 
   useEffect(() => {
-    createAuthCodeUrl(config, landingPath).then((url) => {
+    dispatch(createAuthCodeUrl(config, landingPath)).then((url) => {
       window.location.replace(url);
     });
   }, []);

src/components/pages/AuthorizedPage.jsx

@@ -1,21 +1,23 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Immutable from 'immutable';
+import { useDispatch, useSelector } from 'react-redux';
 import LoginForm from '../login/LoginForm';
 import styles from '../../../styles/cspace-ui/AuthorizedPage.css';
+import {
+  getLoginError,
+  getLoginLandingPath,
+  isLoginPending as isLoginPendingSelector,
+  isLoginSuccess as isLoginSuccessSelector,
+} from '../../reducers';
+import { receiveAuthCode } from '../../actions/login';
 
 const propTypes = {
   history: PropTypes.shape({
     replace: PropTypes.func.isRequired,
   }).isRequired,
-  isLoginPending: PropTypes.bool,
-  isLoginSuccess: PropTypes.bool,
-  landingPath: PropTypes.string,
   location: PropTypes.shape({
     search: PropTypes.string,
   }).isRequired,
-  loginError: PropTypes.instanceOf(Immutable.Map),
-  receiveAuthCode: PropTypes.func.isRequired,
 };
 
 const contextTypes = {
@@ -30,13 +32,16 @@ export default function AuthorizedPage(props, context = {}) {
   } = context;
 
   const {
-    isLoginPending,
-    isLoginSuccess,
     location,
-    loginError,
-    receiveAuthCode,
   } = props;
 
+  const isLoginPending = useSelector(isLoginPendingSelector);
+  const isLoginSuccess = useSelector(isLoginSuccessSelector);
+  const landingPath = useSelector(getLoginLandingPath);
+  const loginError = useSelector(getLoginError);
+
+  const dispatch = useDispatch();
+
   useEffect(() => {
     const {
       search,
@@ -46,14 +51,13 @@ export default function AuthorizedPage(props, context = {}) {
     const authCodeRequestId = params.get('state');
     const authCode = params.get('code');
 
-    receiveAuthCode(config, authCodeRequestId, authCode);
+    dispatch(receiveAuthCode(config, authCodeRequestId, authCode));
   }, []);
 
   useEffect(() => {
     if (isLoginSuccess) {
       const {
         history,
-        landingPath,
       } = props;
 
       history.replace(landingPath);

src/components/pages/RootPage.jsx

@@ -6,9 +6,6 @@ import { Helmet } from 'react-helmet';
 import classNames from 'classnames';
 import ProtectedRouteContainer from '../../containers/routes/ProtectedRouteContainer';
 import PublicRoute from '../routes/PublicRoute';
-import AdminPageContainer from '../../containers/pages/AdminPageContainer';
-import AuthorizePageContainer from '../../containers/pages/AuthorizePageContainer';
-import AuthorizedPageContainer from '../../containers/pages/AuthorizedPageContainer';
 import ConfigPage from './ConfigPage';
 import ContentViewerPageContainer from '../../containers/pages/ContentViewerPageContainer';
 import CreatePageContainer from '../../containers/pages/CreatePageContainer';
@@ -24,6 +21,9 @@ import SearchResultPageContainer from '../../containers/pages/SearchResultPageCo
 import NotificationBarContainer from '../../containers/notification/NotificationBarContainer';
 import styles from '../../../styles/cspace-ui/RootPage.css';
 import favicon from '../../../images/favicon.png';
+import AdminPage from './AdminPage';
+import AuthorizedPage from './AuthorizedPage';
+import AuthorizePage from './AuthorizePage';
 
 const messages = defineMessages({
   title: {
@@ -66,13 +66,13 @@ function RootPage(props) {
         <PublicRoute path="/welcome" component={WelcomePage} />
         <PublicRoute path="/logout" component={LogoutPageContainer} decorated={false} />
         <PublicRoute path="/config" component={ConfigPage} />
-        <PublicRoute path="/authorize" component={AuthorizePageContainer} decorated={false} />
-        <PublicRoute path="/authorized" component={AuthorizedPageContainer} decorated={false} />
+        <PublicRoute path="/authorize" component={AuthorizePage} decorated={false} />
+        <PublicRoute path="/authorized" component={AuthorizedPage} decorated={false} />
 
         <ProtectedRouteContainer path="/dashboard" component={DashboardPage} />
         <ProtectedRouteContainer path="/create" component={injectIntl(CreatePageContainer)} />
         <ProtectedRouteContainer path="/tool" component={ToolPageContainer} />
-        <ProtectedRouteContainer path="/admin" component={AdminPageContainer} />
+        <ProtectedRouteContainer path="/admin" component={AdminPage} />
 
         <ProtectedRouteContainer
           path="/search/:recordType?/:vocabulary?"