DEV-13667: login functional components

src/js/components/login/AuthPage.jsx

@@ -3,36 +3,35 @@
 * Created by Kevin Li 10/24/16
 */
 
-import React from 'react';
 import AuthContainer from 'containers/login/AuthContainer';
 import { kGlobalConstants } from '../../GlobalConstants';
 import LoginWarningTxt from './LoginWarningTxt';
 import LoginIntro from './LoginIntro';
 import TestEnvironmentBanner from '../SharedComponents/banners/TestEnvironmentBanner';
 
 
-export default class AuthPage extends React.Component {
-    render() {
-        let testBanner = null;
-        if (!kGlobalConstants.PROD) {
-            testBanner = <TestEnvironmentBanner />;
-        }
+const AuthPage = (props) => {
+    let testBanner = null;
+    if (!kGlobalConstants.PROD) {
+        testBanner = <TestEnvironmentBanner />;
+    }
 
-        return (
-            <div className="usa-da-login-page">
-                <div className="flex-wrapper">
-                    <div className="usa-da-login container-fluid">
-                        {testBanner}
-                        <div className="login-banner-wrap">
-                            <div className="usa-da-login-wrap">
-                                <LoginIntro />
-                                <AuthContainer {...this.props} />
-                            </div>
+    return (
+        <div className="usa-da-login-page">
+            <div className="flex-wrapper">
+                <div className="usa-da-login container-fluid">
+                    {testBanner}
+                    <div className="login-banner-wrap">
+                        <div className="usa-da-login-wrap">
+                            <LoginIntro />
+                            <AuthContainer {...props} />
                         </div>
-                        <LoginWarningTxt />
                     </div>
+                    <LoginWarningTxt />
                 </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default AuthPage;

src/js/components/login/LoginBanner.jsx

@@ -3,19 +3,18 @@
 * Created by Kyle Fox 2/19/16
 */
 
-import React from 'react';
 import LoginIntro from './LoginIntro';
 import LoginContainer from '../../containers/login/LoginContainer';
 
-export default class LoginBanner extends React.Component {
-    render() {
-        return (
-            <div className="login-banner-wrap">
-                <div className="usa-da-login-wrap">
-                    <LoginIntro />
-                    <LoginContainer {...this.props} />
-                </div>
+const LoginBanner = (props) => {
+    return (
+        <div className="login-banner-wrap">
+            <div className="usa-da-login-wrap">
+                <LoginIntro />
+                <LoginContainer {...props} />
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default LoginBanner;

src/js/components/login/LoginCaia.jsx

@@ -3,9 +3,8 @@
   * Createdd by Kevin Li 10/13/16
   */
 
-import React from 'react';
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
 import Cookies from 'js-cookie';
 import { kGlobalConstants } from '../../GlobalConstants';
 import { getRedirectPath } from '../../helpers/loginHelper';
@@ -14,52 +13,41 @@ const propTypes = {
     location: PropTypes.object
 };
 
-const defaultProps = {
-    location: null
-};
+const LoginCaia = ({location = null}) => {
+    const [loginRedirect, setLoginRedirect] = useState('');
 
-export default class LoginCaia extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            redirect: ''
-        };
-        this.handleClick = this.handleClick.bind(this);
-    }
+    useEffect(() => {
+        detectRedirection();
+    }, []);
 
-    componentDidMount() {
-        this.detectRedirection();
-    }
+    useEffect(() => {
+        detectRedirection();
+    }, [location]);
 
-    componentDidUpdate(prevProps) {
-        if (!_.isEqual(prevProps.location, this.props.location)) {
-            this.detectRedirection();
+    useEffect(() => {
+        if(loginRedirect === '') {
+            // remove the redirect destination cookie
+            Cookies.remove('brokerRedirect');
+        }
+        else {
+            // save the redirect destination as a cookie, expire after 5 min (expressed in units of
+            // days per library documentation)
+            Cookies.set('brokerRedirect', loginRedirect, { expires: (5 / (24 * 60)) });
         }
-    }
+    }, [loginRedirect]);
 
-    detectRedirection() {
+    const detectRedirection = () => {
         // check if the URL has a redirect param, save it in the state
-        const redirectPath = getRedirectPath(this.props.location);
+        const redirectPath = getRedirectPath(location);
         if (redirectPath) {
-            this.setState({
-                redirect: redirectPath
-            }, () => {
-                // save the redirect destination as a cookie, expire after 5 min (expressed in units of
-                // days per library documentation)
-                Cookies.set('brokerRedirect', this.state.redirect, { expires: (5 / (24 * 60)) });
-            });
+            setLoginRedirect(redirectPath);
         }
         else {
-            this.setState({
-                redirect: ''
-            }, () => {
-                // remove the redirect destination cookie
-                Cookies.remove('brokerRedirect');
-            });
+            setLoginRedirect('');
         }
-    }
+    };
 
-    handleClick(e) {
+    const handleClick = (e) => {
         if (e.keyCode === '13' || !e.keyCode) {
             const scope = "openid email profile address phone";
             const url = `${kGlobalConstants.CAIA_ROOT}/as/authorization.oauth2?`
@@ -69,28 +57,26 @@ export default class LoginCaia extends React.Component {
                 + `&client_id=${encodeURIComponent(kGlobalConstants.CAIA_CLIENT)}`;
             window.location.assign(url);
         }
-    }
+    };
 
-    render() {
-        return (
-            <div className="row">
-                <div className="col-xs-12">
-                    <p className="instructions">
-                        Sign in or register for the Data Broker using your CAIA login.
-                    </p>
-                    <button
-                        className="usa-da-button btn-primary btn-lg btn-full bottom-login-button"
-                        tabIndex="0"
-                        role="link"
-                        onKeyDown={this.handleClick}
-                        onClick={this.handleClick}>
-                        Sign In Using CAIA
-                    </button>
-                </div>
+    return (
+        <div className="row">
+            <div className="col-xs-12">
+                <p className="instructions">
+                    Sign in or register for the Data Broker using your CAIA login.
+                </p>
+                <button
+                    className="usa-da-button btn-primary btn-lg btn-full bottom-login-button"
+                    tabIndex="0"
+                    role="link"
+                    onKeyDown={handleClick}
+                    onClick={handleClick}>
+                    Sign In Using CAIA
+                </button>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
 
 LoginCaia.propTypes = propTypes;
-LoginCaia.defaultProps = defaultProps;
+export default LoginCaia;

src/js/components/login/LoginCaiaErrorMessage.jsx

@@ -3,26 +3,24 @@
 * Created by Nipun Monga 11/18/16
 */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const propTypes = {
     message: PropTypes.string.isRequired
 };
 
-export default class LoginCaiaErrorMessage extends React.Component {
-    render() {
-        return (
-            <div className="alert alert-error mt-40 mb-0" role="alert">
-                <FontAwesomeIcon icon="circle-exclamation" className="exclamation-circle-icon" />
-                <div className="alert-header-text">Error</div>
-                <p data-testid="errormessage">
-                    {this.props.message} Please work with your agency to request Data Broker access through CAIA.
-                </p>
-            </div>
-        );
-    }
-}
+const LoginCaiaErrorMessage = (props) => {
+    return (
+        <div className="alert alert-error mt-40 mb-0" role="alert">
+            <FontAwesomeIcon icon="circle-exclamation" className="exclamation-circle-icon" />
+            <div className="alert-header-text">Error</div>
+            <p data-testid="errormessage">
+                {props.message} Please work with your agency to request Data Broker access through CAIA.
+            </p>
+        </div>
+    );
+};
 
 LoginCaiaErrorMessage.propTypes = propTypes;
+export default LoginCaiaErrorMessage;

src/js/components/login/LoginCaiaLoading.jsx

@@ -3,7 +3,6 @@
   * Created by Kevin Li 10/14/16
   */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 
@@ -14,46 +13,40 @@ const propTypes = {
     errorMessage: PropTypes.string
 };
 
-const defaultProps = {
-    errorMessage: ''
-};
-
-export default class LoginCaiaLoading extends React.Component {
-    render() {
-        let errorMessageComponent = null;
-        let hideLoading = '';
-        let hideError = ' hide';
+const LoginCaiaLoading = ({errorMessage = ''}) => {
+    let errorMessageComponent = null;
+    let hideLoading = '';
+    let hideError = ' hide';
 
-        if (this.props.errorMessage) {
-            errorMessageComponent = <LoginCaiaErrorMessage message={this.props.errorMessage} />;
-            hideLoading = ' hide';
-            hideError = '';
-        }
+    if (errorMessage) {
+        errorMessageComponent = <LoginCaiaErrorMessage message={errorMessage} />;
+        hideLoading = ' hide';
+        hideError = '';
+    }
 
-        return (
-            <div>
-                <div className="row">
-                    <div className={`col-md-12 login-loading${hideLoading}`}>
-                        <div className="loading-animation">
-                            <LoadingBauble />
-                        </div>
-                        <div className="loading-text">
-                            Signing into Data Broker...
-                        </div>
+    return (
+        <div>
+            <div className="row">
+                <div className={`col-md-12 login-loading${hideLoading}`}>
+                    <div className="loading-animation">
+                        <LoadingBauble />
+                    </div>
+                    <div className="loading-text">
+                        Signing into Data Broker...
                     </div>
                 </div>
-                <div className={`row${hideError}`}>
-                    <div className="col-md-12">
-                        {errorMessageComponent}
-                        <div className="back-link">
-                            <Link to="/">Back to login page</Link>
-                        </div>
+            </div>
+            <div className={`row${hideError}`}>
+                <div className="col-md-12">
+                    {errorMessageComponent}
+                    <div className="back-link">
+                        <Link to="/">Back to login page</Link>
                     </div>
                 </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
 
 LoginCaiaLoading.propTypes = propTypes;
-LoginCaiaLoading.defaultProps = defaultProps;
+export default LoginCaiaLoading;

src/js/components/login/LoginIntro.jsx

@@ -3,18 +3,16 @@
 * Created by Kyle Fox 12/4/15
 */
 
-import React from 'react';
+const LoginIntro = () => {
+    return (
+        <div className="login-left usa-da-page-title">
+            <div className="login-title">Data Broker</div>
+            <p>
+                Sign in to upload your agency financial data and validate it against the Governmentwide Spending
+                Data Model (GSDM), formerly known as the DATA Act Information Model Schema (DAIMS).
+            </p>
+        </div>
+    );
+};
 
-export default class LoginIntro extends React.Component {
-    render() {
-        return (
-            <div className="login-left usa-da-page-title">
-                <div className="login-title">Data Broker</div>
-                <p>
-                    Sign in to upload your agency financial data and validate it against the Governmentwide Spending
-                    Data Model (GSDM), formerly known as the DATA Act Information Model Schema (DAIMS).
-                </p>
-            </div>
-        );
-    }
-}
+export default LoginIntro;