updated React-App to React as of Spring 2020

react-app/package.json

@@ -1,20 +1,24 @@
 {
   "name": "react-app",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "bootstrap": "^4.1.0",
-    "formik": "^0.11.11",
+    "formik": "2.1.4",
     "prop-types": "^15.6.1",
-    "react": "^16.3.2",
+    "react-redux": "7.2.0",
-    "react-dom": "^16.3.2",
+    "react-router-dom": "5.1.2",
-    "react-redux": "^5.0.7",
+    "react-script": "^2.0.5",
-    "react-router-dom": "^4.2.2",
+    "react-scripts": "3.4.1",
-    "react-scripts": "1.1.4",
+    "reactstrap": "8.4.1",
-    "reactstrap": "^5.0.0",
     "redux": "^4.0.0",
     "redux-thunk": "^2.2.0",
-    "superagent": "^3.8.2",
+    "superagent": "5.2.2",
     "toastr": "^2.1.4"
   },
   "scripts": {
@@ -23,5 +27,17 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:9999/"
+  "proxy": "http://localhost:9999/",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

react-app/src/NOTES

@@ -1,3 +1,6 @@
 
 https://reacttraining.com/react-router/web/guides/redux-integration
 
+Updated Spring 2020 to React 16.13.1 and react-redux 7.2.0
+
+

react-app/src/actions/auth.js

@@ -14,6 +14,9 @@ export function login(username, password) {
     onSuccess(dispatch, data, getState) {
         toastr.success(`Success logging in: ${JSON.stringify(data)}`);
     },
+    onError(dispatch, data, getState) {
+        toastr.success(`Error logging in: ${JSON.stringify(data && data.response && data.response.text)}`);
+    },
   });
 }
 

react-app/src/components/Logout.js

@@ -1,17 +1,14 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
 import store from '../store';
 
-class Logout extends React.Component {
+const Logout = () => {
-    componentWillMount() {
+    // normally, we would inform the server just in case.
-        // normally, we would inform the server just in case.
+    document.cookie = "auth_token=";
-        document.cookie = "auth_token=";
+    useEffect(() => {
         store.dispatch({ type: "LOGOUT" });
-    }
+    }, []);
-
+    return (<Redirect to="/" />);
-    render() {
+};
-        return (<Redirect to="/" />);
-    }
-}
 
 export default Logout;

react-app/src/components/TopNavBar.js

@@ -1,5 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import {
   Collapse,
   Navbar,
@@ -55,69 +54,50 @@ const DropDowns = (props) => {
 /**
  * Navigation bar component
  */
-class NavBar extends React.Component {
+const NavBar = (props) => {
-    static propTypes = {
+  let [isOpen, setOpen] = useState(false);
-        menus: PropTypes.object,
-        user: PropTypes.object,
-        branding: PropTypes.string,
-    }
 
-    constructor(props) {
+  const menus = props.menus
-        super(props);
+  const user = props.user
+  const toggle = () => { setOpen(!isOpen); }
 
-        this.toggle = this.toggle.bind(this);
+  return (
-        this.state = {
+    <div>
-          isOpen: false
+      <Navbar color="light" light expand="md">
-        };
+        <NavbarToggler onClick={toggle} />
-    }
+        <NavbarBrand to="/">{props.branding}</NavbarBrand>
+        <Collapse isOpen={isOpen} navbar>
+          <Nav className="mr-auto" navbar>
+            {menus.topbar.map((item) =>
+              <NavItem key={item.path}>
+                <NavLink to={item.path} activeClassName="active" tag={RRNavLink}>
+                  {item.label}
+                </NavLink>
+              </NavItem>
+            )}
+            {menus.leftdropdowns &&
+              <DropDowns className="mr-auto" dropdowns={menus.leftdropdowns} user={user} />
+            }
+          </Nav>
+          <Nav className="ml-auto">
+            {menus.rightdropdowns &&
+              <DropDowns className="ml-auto" dropdowns={menus.rightdropdowns} user={user} />
+            }
 
-    toggle() {
+            {isLoaded(user) ?
-        this.setState({
+              <NavItem>
-            isOpen: !this.state.isOpen
+                <NavLink activeClassName="active" tag={RRNavLink} to={props.logoutUrl}>Logout ({user.sub})</NavLink>
-        });
+              </NavItem>
-    }
+              :
-
+              <NavItem>
-    render() {
+                <NavLink activeClassName="active" tag={RRNavLink} to={props.loginUrl}>Login</NavLink>
-        const menus = this.props.menus
+              </NavItem>
-        const user = this.props.user
+            }
-        return (
+          </Nav>
-          <div>
+        </Collapse>
-            <Navbar color="light" light expand="md">
+      </Navbar>
-              <NavbarToggler onClick={this.toggle} />
+    </div>
-              <NavbarBrand to="/">{this.props.branding}</NavbarBrand>
+  );
-              <Collapse isOpen={this.state.isOpen} navbar>
-                <Nav className="mr-auto" navbar>
-                  {menus.topbar.map((item) =>
-                     <NavItem key={item.path}>
-                       <NavLink to={item.path} activeClassName="active" tag={RRNavLink}>
-                         {item.label}
-                       </NavLink>
-                     </NavItem>
-                  )}
-                  { menus.leftdropdowns &&
-                    <DropDowns className="mr-auto" dropdowns={menus.leftdropdowns} user={user} />
-                  }
-                </Nav>
-                <Nav className="ml-auto">
-                  { menus.rightdropdowns &&
-                    <DropDowns className="ml-auto" dropdowns={menus.rightdropdowns} user={user} />
-                  }
-
-                  {isLoaded(user) ?
-                    <NavItem>
-                      <NavLink activeClassName="active" tag={RRNavLink} to={this.props.logoutUrl}>Logout ({user.sub})</NavLink>
-                    </NavItem>
-                  :
-                    <NavItem>
-                      <NavLink activeClassName="active" tag={RRNavLink} to={this.props.loginUrl}>Login</NavLink>
-                    </NavItem>
-                  } 
-                </Nav>
-              </Collapse>
-            </Navbar>
-          </div>
-        );
-    }
 }
 
 export default NavBar;

react-app/src/components/forms/LoginForm.js

@@ -3,80 +3,70 @@ import { Row, Label, Input, Alert, Button, ButtonToolbar, Form, FormGroup } from
 import { withFormik } from 'formik';
 
 /*
- * This is a connected form that display username/password.
+ * This is a form that display username/password.
  * When the user hits submit, the 'onSubmit' method is called
  * in the parent, which receives the username/password the user
  * entered.  It also performs validation.
  */
-class LoginForm extends React.Component {
+const LoginForm = (props) => {
-  render() {
+  const {
-    const {
+    handleSubmit, // rest is from HOC
-      handleSubmit, // rest is from HOC
+    isSubmitting,
-      isSubmitting,
+    handleReset,
-      handleReset,
+    handleBlur,
-      handleBlur,
+    handleChange,
-      handleChange,
+    // errors,
-      // errors,
+    dirty,
-      dirty,
+    // touched,
-      // touched,
+    values,
-      values,
+    // valid
-      // valid
+  } = props;
-    } = this.props;
 
-    return (
+  return (
-      <Form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
-         <Row>
+        <Row>
+          <FormGroup>
+            <Label for="username">User Name</Label>
+            <Input type="text" name="username" value={values.username}
+              onChange={handleChange}
+              onBlur={handleBlur}
+            />
+          </FormGroup>
+          <FormGroup>
+            <Label for="password">Password</Label>
+            <Input type="password" name="password"
+              onChange={handleChange}
+              onBlur={handleBlur}
+            />
+          </FormGroup>
+
+        { props.autherror && 
             <FormGroup>
-              <Label for="username">User Name</Label>
+              <Alert bsstyle='danger'>
-              <Input type="text" name="username" value={values.username}
+                {props.autherror.message || 'Login failed'}
-                onChange={handleChange}
+              </Alert>
-                onBlur={handleBlur}
-              />
-            </FormGroup>
-            <FormGroup>
-              <Label for="password">Password</Label>
-              <Input type="password" name="password"
-                onChange={handleChange}
-                onBlur={handleBlur}
-              />
             </FormGroup>
+        }
+        </Row>
 
-         { this.props.autherror && 
+        <Row>
-             <FormGroup>
+            <ButtonToolbar>
-                <Alert bsstyle='danger'>
+              <Button
-                  {this.props.autherror.message || 'Login failed'}
+                type='submit'
-                </Alert>
+                bsstyle='success' className="mr-2">
-             </FormGroup>
+                Submit
-         }
+              </Button> 
-         </Row>
+              <Button
-
+                type="button"
-         <Row>
+                onClick={handleReset}
-             <ButtonToolbar>
+                disabled={!dirty || isSubmitting}>
-                <Button
+                Reset
-                  type='submit'
+              </Button>
-                  bsstyle='success' className="mr-2">
+            </ButtonToolbar>
-                  Submit
+        </Row>
-                </Button> 
+    </Form>
-                <Button
+  );
-                  type="button"
+};
-                  onClick={handleReset}
-                  disabled={!dirty || isSubmitting}>
-                  Reset
-                </Button>
-             </ButtonToolbar>
-         </Row>
-      </Form>
-    );
-  }
-}
-
-/*
-function mapStateToProps(state) {
-  return {
-    autherror: state.auth.error
-  };
-}
-*/
 
 export default withFormik({
   mapPropsToValues: () => ({ username: '', password: '' }),

react-app/src/components/privateroute.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
-import { connect } from 'react-redux';
-
-import { isLoaded } from '../util/loadingObject';
-
-// From https://github.com/gillisd/react-router-v4-redux-auth
-const PrivateRoute = ({component: ComposedComponent, ...rest}) => {
-
-  class Authentication extends React.Component {
-
-    // redirect if not authenticated; otherwise, 
-    // return the component input into <PrivateRoute />
-    handleRender(props) {
-      if (!this.props.authenticated) {
-        return <Redirect to={{
-          pathname: '/login',
-          state: {
-            from: props.location
-          }
-        }}/>
-      } else {
-        return <ComposedComponent {...props}/>
-      }
-    }
-
-    render() {
-      return (
-        <Route {...rest} render={this.handleRender.bind(this)}/>
-      )
-    }
-  }
-
-  function mapStateToProps(state) {
-    return {authenticated: isLoaded(state.auth)};
-  }
-
-  const AuthenticationContainer = connect(mapStateToProps)(Authentication)
-  return <AuthenticationContainer/>
-}
-
-export { PrivateRoute };

react-app/src/config/index.js

@@ -3,13 +3,13 @@ const publicUrl = process.env.PUBLIC_URL
 
 const menus = {
     topbar : [
-        { path: `${publicUrl}/`, label: "Home" },
+        { path: `/`, label: "Home" },
     ],
     leftdropdowns : [
         {
             label: "Public",
             entries: [
-              { path: `${publicUrl}/public`, label: "Public Content" }
+              { path: `/public`, label: "Public Content" }
             ]
         }
     ],
@@ -18,7 +18,7 @@ const menus = {
             label: "Private",
             onlyifauthenticated: true,
             entries: [
-              { path: `${publicUrl}/protected`, label: "Private Content" }
+              { path: `/protected`, label: "Private Content" }
             ]
         }
     ]

react-app/src/containers/AppContainer.js

@@ -7,7 +7,6 @@ import PublicPage from '../pages/PublicPage';
 import NotFoundPage from '../pages/NotFoundPage';
 import HomePage from '../pages/HomePage';
 import PrivatePage from '../pages/PrivatePage';
-import { PrivateRoute } from '../components/privateroute';
 
 import { Switch, Route, withRouter } from 'react-router-dom';
 
@@ -17,30 +16,26 @@ import config from '../config/';
  * children in the main part of the page.  Its children will
  * be chosen based on the selected route.
  */
-class AppContainer extends React.Component {
+const AppContainer = (props) => (
-  render() {
+    <div>
-    return (
+      <TopNavBar branding="CS3214 Demo App 2020"
-        <div>
+                  menus={config.menus} 
-          <TopNavBar branding="CS3214 Demo App"
+                  user={props.user} 
-                     menus={config.menus} 
+                  loginUrl={`/login`}
-                     user={this.props.user} 
+                  logoutUrl={`/logout`}
-                     loginUrl={`${config.publicUrl}/login`}
+        />
-                     logoutUrl={`${config.publicUrl}/logout`}
+      <div className="container-fluid marketing">
-            />
+          <Switch>
-          <div className="container-fluid marketing">
+              <Route exact path={`/`} component={HomePage} />
-              <Switch>
+              <Route path={`/logout`} component={Logout} />
-                  <Route exact path={`${config.publicUrl}/`} component={HomePage} />
+              <Route path={`/login`} component={LoginPage} />
-                  <Route path={`${config.publicUrl}/logout`} component={Logout} />
+              <Route path={`/public`} component={PublicPage} />
-                  <Route path={`${config.publicUrl}/login`} component={LoginPage} />
+              <Route path={`/protected`} component={PrivatePage} />
-                  <Route path={`${config.publicUrl}/public`} component={PublicPage} />
+              <Route component={NotFoundPage} />
-                  <PrivateRoute path={`${config.publicUrl}/protected`} component={PrivatePage} />
+          </Switch>
-                  <Route component={NotFoundPage} />
+      </div>
-              </Switch>
+    </div>
-          </div>
+);
-        </div>
-    );
-  }
-}
 
 function mapStateToProps(state) {
   return {

react-app/src/containers/RequireAuthentication.js

@@ -0,0 +1,36 @@
+/*
+ * This HOC can be used to wrap components so that if they are rendered without authentication,
+ * they redirect to '/login' first and then come back.
+ */
+
+import React from 'react';
+import { Redirect, withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import { isLoaded } from '../util/loadingObject';
+
+function mapStateToProps(state) {
+  return {
+    user: state.auth
+  };
+}
+
+export default function RequireAuthentication(Component) {
+  const wrapper = props => {
+    if (isLoaded(props.user)) {
+      return <Component {...props} />;
+    } else {
+      return (
+        <Redirect
+          to={{
+            pathname: `/login`,
+            state: {
+              from: props.history.location
+            }
+          }}
+        />
+      );
+    }
+  };
+
+  return withRouter(connect(mapStateToProps)(wrapper));
+}

react-app/src/index.js

@@ -13,6 +13,7 @@ import jQuery from 'jquery';    // for toastr;
 import AppContainer from './containers/AppContainer';
 import store from './store';
 import {checklogin} from './actions/auth';
+import config from './config';
 
 toastr.options.closeButton = true;
 toastr.options.positionClass = 'toast-bottom-right';
@@ -23,7 +24,7 @@ store.dispatch(checklogin());
 const mountPoint = document.getElementById('root');
 const rootNode = (
   <Provider store={store}>
-    <Router>
+    <Router basename={config.publicUrl}>
       <AppContainer />
     </Router>
   </Provider>

react-app/src/pages/HomePage.js

@@ -1,32 +1,27 @@
 import React from 'react';
 import { Container, Row, Col } from 'reactstrap';
 import { Link } from 'react-router-dom';
-import config from '../config/';
 import logo from './logo.svg';
 
-class HomePage extends React.Component {
+let HomePage = (props) => (
-  render() {
+  <Container>
-    return (
+    <h1>CS3214 Demo App</h1>
-    <Container>
+    <img alt="" src={logo} className="app-logo" />
-      <h1>CS3214 Demo App</h1>
+    <Row>
-      <img alt="" src={logo} className="app-logo" />
+      <Col>
-      <Row>
+        <p>
-        <Col>
+          This small <a href="https://reactjs.org/">React {React.version}</a> app
-            <p>
-            This small <a href="https://reactjs.org/">React {React.version}</a> app
             shows how to use the JWT authentication facilities of your
             server in a progressive single-page web application.
             </p>
-        </Col>
+      </Col>
-      </Row>
+    </Row>
-      <Row>
+    <Row>
-        <Col>
+      <Col>
-            Click <Link to={`${config.publicUrl}/protected`}>here</Link> to
+        Click <Link to={`/protected`}>here</Link> to
             navigate to a protected section of the app.
         </Col>
-      </Row>
+    </Row>
-    </Container>);
+  </Container >);
-  }
-}
 
 export default HomePage

react-app/src/pages/LoginPage.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
 
 import { Card, CardHeader, CardBody, Container, Row, Col } from 'reactstrap';
 import { login } from '../actions/auth.js';
@@ -8,28 +7,20 @@ import { isLoading, isLoaded } from '../util/loadingObject'
 import LoginForm from '../components/forms/LoginForm';
 import { Redirect } from 'react-router-dom';
 
-class LoginPage extends React.Component {
+const LoginPage = (props) => {
-  static contextTypes = {
+  let dispatch = useDispatch();
-    router: PropTypes.object.isRequired
+  function doLogin({username, password}) {
+    dispatch(login(username, password));
   }
 
-  static propTypes = {
+  const user = useSelector(state => state.auth);
-    user: PropTypes.object.isRequired
+  const isAuthenticated = isLoaded(user);
+  const { from } = props.location.state || { from: { pathname: "/" } };
+  if (isAuthenticated) {
+    return (<Redirect to={from} />);
   }
 
-  doLogin({username, password}) {
+  return (
-    this.props.dispatch(login(username, password));
-  }
-
-  render() {
-    const user = this.props.user;
-    const isAuthenticated = isLoaded(user);
-    const { from } = this.props.location.state || { from: { pathname: "/" } };
-    if (isAuthenticated) {
-      return (<Redirect to={from} />);
-    }
-
-    return (
     <Container>
       <Row className="pb-5 pt-5">
         <Col xsoffset={0} xs={10} smoffset={4} sm={4}>
@@ -39,21 +30,12 @@ class LoginPage extends React.Component {
               <LoginForm
                 loading={isLoading(user)}
                 autherror={user.error}
-                onSubmit={v => this.doLogin(v)} />
+                onSubmit={v => doLogin(v)} />
             </CardBody>
           </Card>
         </Col>
       </Row>
-    </Container>
+    </Container>);
-    );
-  }
 }
 
-function mapStateToProps(state) {
+export default LoginPage;
-  return {
-    user: state.auth
-  };
-}
-
-export default connect(mapStateToProps)(LoginPage);
-

react-app/src/pages/NotFoundPage.js

@@ -4,12 +4,12 @@ import React from 'react';
  * See https://facebook.github.io/react/docs/reusable-components.html#stateless-functions
  */
 const NotFound = (props) => 
-  <div><h1>Route not found Error</h1>
+  (<div><h1>Route not found Error</h1>
     <div>
         Something went wrong: {window.location.pathname} could not be found!
     </div>
         {/* JSON.stringify(props) */}
-  </div>
+  </div>);
 
 export default NotFound
 

react-app/src/pages/PrivatePage.js

@@ -1,21 +1,24 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Container } from 'reactstrap';
+import RequireAuthentication from '../containers/RequireAuthentication';
 
-class PrivatePage extends React.Component {
+const PrivatePage = () => {
-  render() {
+  let user = useSelector(state => state.auth);
-    return (
+
-    <Container>
+  return (<Container>
-      <h1>Welcome to a private page</h1>
+    <h1>Welcome to a private page</h1>
-      <div>
+    <div>
-        You have successfully authenticated.
+      You have successfully authenticated as user <tt>{user.sub}</tt>.
-      </div>
+      Your token was issued at {new Date(user.iat*1000).toString()}, 
-      <div>
+      it expires {new Date(user.exp*1000).toString()}
-        This page is "private" only inasmuch as the front-end does not
+    </div>
-        display it to unauthenticated users.  In a fully-fledged app,
+    <div>
-        this page would now perform API requests that require authentication.
+      This page is "private" only inasmuch as the front-end does not
-      </div>
+      display it to unauthenticated users.  In a fully-fledged app,
-    </Container>);
+      this page would now perform API requests that require authentication.
-  }
+    </div>
+  </Container>);
 }
 
-export default PrivatePage
+export default RequireAuthentication(PrivatePage);

react-app/src/pages/PublicPage.js

@@ -1,16 +1,12 @@
 import React from 'react';
 import { Container } from 'reactstrap';
 
-class PublicPage extends React.Component {
+const PublicPage = () => (
-  render() {
+  <Container>
-    return (
+    <h1>Welcome to a public page</h1>
-    <Container>
+    <div>
-      <h1>Welcome to a public page</h1>
+      This public page is accessible to anyone.
-      <div>
-        This public page is accessible to anyone.
       </div>
-    </Container>);
+  </Container>);
-  }
-}
 
-export default PublicPage
+export default PublicPage;

react-app/src/reducers/auth.js

@@ -20,7 +20,7 @@ const checkloginHandler = asyncHandler('CHECKLOGIN', initialState);
 
 export default function(state = initialState, action) {
     let newState;
-    if (action.type === 'LOGIN:OK') {
+    if (action.type.startsWith('LOGIN:')) {
         newState = loginHandler(state, action);
     }
     if (action.type === 'CHECKLOGIN:OK') {

react-app/src/store.js

@@ -3,9 +3,10 @@ import thunk from 'redux-thunk';
 
 import rootReducer from './reducers/root';
 
-const createStoreWithMiddleware = compose(
+// https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
-  applyMiddleware(thunk),
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-  window.devToolsExtension ? window.devToolsExtension() : f => f
+const createStoreWithMiddleware = composeEnhancers(
+  applyMiddleware(thunk)
 )(createStore);
 
 const store = createStoreWithMiddleware(rootReducer);