Home.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';
import LoadingAnimation from './LoadingAnimation';

import Terms from './Terms';

import { Link } from "react-router-dom";
import * as routes from '../constants/routes';
import { auth } from '../firebase';
import { database } from '../firebase/firebase';

import withAuthorization from './Session/withAuthorization';

const styles = theme => ({
  fab: {
    position: 'absolute',
    bottom: '20px',
    right: '20px'
  },
  block: {
    marginTop: '100px'
  },
  progress: {
    display: 'block',
    margin: 'auto'
  }
});

const AddTermFab = (props) => 
  <Link to={routes.ENTER_TERM}>
    <Button variant="fab" color="primary" aria-label="Add" className={props.classes.fab}>
      <AddIcon />
    </Button>
  </Link>

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
    this.handleDelete = this.handleDelete.bind(this);
  };

  // handleDelete(event, term) {
  //   console.log(event);
  //   console.log(term);
  //   // const data = this.props.map()
  //   // this.setState({
  //   //   expanded: expanded ? panel : false,
  //   // });
  //   let userTerms = [];
  //   let termsRef = database.ref('/user-terms/' + auth.getUid());
  //   //database.ref('/user-terms/').child(key).remove();
  //   termsRef.on('value', (snapshot) => {
  //     console.log(snapshot);
  //     snapshot.forEach((childSnapShot) => {
  //       console.log(childSnapShot);
  //       if (childSnapShot.val().term === term) {
  //         termsRef.remove(childSnapShot);
  //         console.log('deleted');
  //         console.log(term);
  //       } else {
  //         userTerms.push(childSnapShot.val());
  //       }
  //     });
  //     this.setState({
  //       isLoading: false,
  //       data: userTerms.sort((userTermA, userTermB) => {
  //         return userTermA.term.toLowerCase() > userTermB.term.toLowerCase();
  //       })
  //     });
  //   });
  // }

  // Doesn't move on to loading state. User exists
  componentWillMount() {
    let termsRef = database.ref('/user-terms/' + auth.getUid());
    let userTerms = [];
    termsRef.on('value', (snapshot) => {
      snapshot.forEach((childSnapShot) => {
        userTerms.push(childSnapShot.val());
      });
      this.setState({
        isLoading: false,
        data: userTerms.sort((userTermA, userTermB) => {
          return userTermA.term.toLowerCase() > userTermB.term.toLowerCase();
        })
      });
    });
  }

  render() {
    const { classes } = this.props;
    const isLoading = this.state.isLoading;
    const data = this.state.data;

    if (isLoading) {
      return (
        <LoadingAnimation classes={classes}/>
      );
    }

    return (
      <div className="App">
        { !data && 
        <p className="App-intro">
            There's nothing here, add a term!
        </p>
        }

        { data && data.length > 0 && <Terms data={data} handleDelete={this.handleDelete}/> }

        <AddTermFab classes={classes}/>
      </div>
    );
  }
}

Home.propTypes = {
  classes: PropTypes.object.isRequired,
};

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(withStyles(styles)(Home));

Terms.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
// import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    flexBasis: '33.33%',
    flexShrink: 0,
  },
  secondaryHeading: {
    fontSize: theme.typography.pxToRem(15),
    color: theme.palette.text.secondary,
  },
  chip: {
    margin: theme.spacing.unit,
  },
});

class Terms extends React.Component {

  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
  }
  state = {
    expanded: null,
  };

  handleEdit(event) {
    console.log(event);
  }

  handleDelete(event) {
    const term = this.state.expanded;
    console.log('handling delete')
    this.props.handleDelete(term);
  }

  generateListItems = data => {
    const { classes } = this.props;

    return this.props.data.map(datum => (
        <ExpansionPanel key={datum.term} expanded={this.state.expanded === datum.term} onChange={this.handleChange(datum.term)}>
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
            <Typography className={classes.heading}>{datum.term}</Typography>
            {datum.acronym && <Typography className={classes.secondaryHeading}>{datum.acronym}</Typography>}
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
                <Typography>
                  {datum.definition}
                </Typography>
                <div>
                  <Button variant="flat" color="primary" type="submit" onChange={this.handleEdit(datum)}>
                    <i className="material-icons">edit</i>
                  </Button>
                  <Button variant="flat" color="primary" onChange={this.handleDelete} type="submit">
                    <i className="material-icons">delete</i>
                  </Button>
                </div>
                
            </ExpansionPanelDetails>
            
            {/* {datum.tags && datum.tags.map((tag) => 
                <Chip label={tag} className={classes.chip} key={tag}/>
            )} */}

        </ExpansionPanel>
    ))
  };

  handleChange = panel => (event, expanded) => {
    this.setState({
      expanded: expanded ? panel : false,
    });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        {this.generateListItems()}
      </div>
    );
  }
}

Terms.propTypes = {
  classes: PropTypes.object.isRequired,
  data: PropTypes.array.isRequired,
};

export default withStyles(styles)(Terms);