content: import React from 'react'
  import Note from './Note'
  import NoteModal from './NoteModal'
  import Paper from 'material-ui/Paper'
  import Divider from 'material-ui/Divider'
  import CircularProgress from 'material-ui/CircularProgress'
  import {CardTitle} from 'material-ui/Card'
  import FlatButton from 'material-ui/FlatButton'
  import {addUserNote, fetchUserNotes, deleteUserNote} from '../dataFuncs'
  
  export default class NoteContainer extends React.Component {
    constructor(props){
      super(props)
  
      this.state = {
        viewable: false,
        notes: [],
        noteTitle: "",
        noteBody: "",
        auth: localStorage.getItem("jwt")
      }
    }
  
  
    componentDidMount(){
        fetchUserNotes(this.state.auth).then((res) => res.json())
        .then(data => this.setState({
          notes: data.notes
        }))
    }
  
    handleNoteTitle = (e) => {
      this.setState({
        noteTitle: e.target.value
      })
    }
  
    handleNoteBody = (e) => {
      this.setState({
        noteBody: e.target.value
      })
    }
  
    handleAddNote = (e) => {
      e.preventDefault()
      if (this.state.noteTitle.length > 0 && this.state.noteBody.length > 0) {
        addUserNote(this.state.noteTitle, this.state.noteBody, this.state.auth)
        .then(res => res.json())
        .then((data) => this.setState({
          notes: [...this.state.notes, data.note]
        }))
      }
    }
  
    deleteNote = (e) => {
      deleteUserNote(e.target.id, this.state.auth)
      this.setState({
        notes: this.state.notes.filter((note) => note.id !== parseInt(e.target.id, 10))
      })
    }
  
    toggleModal = () => {
      this.setState({
        viewable: !this.state.viewable
      })
    }
  
  
    render(){
      if (this.state.notes.length >= 0) {
        return(
          <Paper zDepth={5} className="note-card">
            <CardTitle>Notes</CardTitle>
            <Divider />
              {this.state.notes.slice(Math.max(this.state.notes.length - 5, 0)).sort().map((note) =>  <Note key={note.id} id={note.id} data={note} delete={this.deleteNote}/>  )}
              <NoteModal viewable={this.state.viewable} handleAddNote={this.handleAddNote} toggle={this.toggleModal} body={this.handleNoteBody} title={this.handleNoteTitle}/>
              <br/>
              <FlatButton backgroundColor="F8F8F8" onClick={this.toggleModal} className="note-button" label={<i id="add" className="material-icons">add</i>}/>
          </Paper>
        )
      }else {
        return(
          <Paper zDepth={5} className="note-card">
            <CardTitle>Notes</CardTitle>
            <CircularProgress className="loader"/>
          </Paper>
        )
      }
    }
  
  }
  