text: import React, { Component } from 'react';
  import {connect} from 'react-redux';
  import { Button, TextField } from '@material-ui/core';
  
  class RegisterPage extends Component {
    state = {
      username: '',
      password: '',
    };
  
    registerUser = (event) => {
      event.preventDefault();
  
      if (this.state.username && this.state.password) {
        this.props.dispatch({
          type: 'REGISTER',
          payload: {
            username: this.state.username,
            password: this.state.password,
          },
        });
      } else {
        this.props.dispatch({type: 'REGISTRATION_INPUT_ERROR'});
      }
    } // end registerUser
  
    handleInputChangeFor = propertyName => (event) => {
      this.setState({
        [propertyName]: event.target.value,
      });
    }
  
    render() {
      return (
        <div>
          {this.props.errors.registrationMessage && (
            <h2
              className="alert"
              role="alert"
            >
              {this.props.errors.registrationMessage}
            </h2>
          )}
          <form onSubmit={this.registerUser}>
            <div align="center">
                <TextField
                  label="Create a Username"
                  type="text"
                  name="username"
                  value={this.state.username}
                  placeholder="Username"
                  onChange={this.handleInputChangeFor('username')}
                  margin="dense"
                  variant="filled"
                />
            </div>
            <div align="center">
                <TextField
                  label="Create a Password:"
                  type="password"
                  name="password"
                  placeholder="Password"
                  value={this.state.password}
                  onChange={this.handleInputChangeFor('password')}
                  margin="dense"
                  variant="filled"
                />
            </div>
            <div align="center">
              <input
                className="register"
                type="submit"
                name="submit"
                value="Register"
              />
            </div>
          </form>
          <center>
            <Button
              variant="contained"
              type="button"
              className="link-button"
              onClick={() => {this.props.dispatch({type: 'SET_TO_LOGIN_MODE'})}}
            >
              Cancel
            </Button>
          </center>
        </div>
      );
    }
  }
  
  // Instead of taking everything from state, we just want the error messages.
  // if you wanted you could write this code like this:
  // const mapStateToProps = ({errors}) => ({ errors });
  const mapStateToProps = state => ({
    errors: state.errors,
  });
  
  export default connect(mapStateToProps)(RegisterPage);
  
  