text: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { withTranslation } from 'react-i18next';
  import PropTypes from 'prop-types';
  import Fab from '@material-ui/core/Fab';
  import SettingsIcon from '@material-ui/icons/Settings';
  import { withStyles } from '@material-ui/core/styles';
  import './TeacherView.css';
  import {
    patchAppInstanceResource,
    postAppInstanceResource,
    deleteAppInstanceResource,
    openSettings,
  } from '../../../actions';
  import { getUsers } from '../../../actions/users';
  import Canvas from '../../canvas/Canvas';
  import Settings from './Settings';
  
  export class TeacherView extends Component {
    static propTypes = {
      // eslint-disable-next-line react/no-unused-prop-types
      t: PropTypes.func.isRequired,
      dispatchGetUsers: PropTypes.func.isRequired,
      dispatchOpenSettings: PropTypes.func.isRequired,
      classes: PropTypes.shape({}).isRequired,
    };
  
    static styles = theme => ({
      fab: {
        margin: theme.spacing.unit,
        position: 'fixed',
        bottom: theme.spacing.unit * 2,
        right: theme.spacing.unit * 2,
      },
    });
  
    constructor(props) {
      super(props);
      const { dispatchGetUsers } = this.props;
      dispatchGetUsers();
    }
  
    render() {
      const { t, classes, dispatchOpenSettings } = this.props;
  
      return (
        <div>
          <Canvas />
          <Settings />
          <Fab
            color="primary"
            aria-label={t('Settings')}
            className={classes.fab}
            onClick={dispatchOpenSettings}
          >
            <SettingsIcon />
          </Fab>
        </div>
      );
    }
  }
  
  // get the app instance resources that are saved in the redux store
  const mapStateToProps = ({ appInstanceResources }) => ({
    appInstanceResources: appInstanceResources.content,
  });
  
  // allow this component to dispatch a post
  // request to create an app instance resource
  const mapDispatchToProps = {
    dispatchOpenSettings: openSettings,
    dispatchGetUsers: getUsers,
    dispatchPostAppInstanceResource: postAppInstanceResource,
    dispatchPatchAppInstanceResource: patchAppInstanceResource,
    dispatchDeleteAppInstanceResource: deleteAppInstanceResource,
  };
  
  const ConnectedComponent = connect(
    mapStateToProps,
    mapDispatchToProps
  )(TeacherView);
  
  const StyledComponent = withStyles(TeacherView.styles)(ConnectedComponent);
  
  export default withTranslation()(StyledComponent);
  