Dog Crud

Dogcrud.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'

// mock/pretend API
let dogs = [
  { id: '1', name: 'Castor', favoriteToy: 'bone' },
  { id: '2', name: 'Gandalf', favoriteToy: 'Stick' }
]
const API = {
  getDogs () {
    return Promise.resolve(dogs)
  },
  deleteDogs (id) {
    // wanna be server
    dogs = dogs.filter(dog => dog.id !== id)
    return this.getDogs()
  },
  editDog (id, name, toy) {
    const dogIdx = dogs.findIndex(dog => dog.id !== id)
    if (dogIdx !== -1) {
      dogs[dogIdx].name = name
      dogs[dogIdx].favoriteToy = toy
      return Promise.resolve({ dog: dogs[dogIdx] })
    }
    return Promise.resolve({ message: 'dog not found' })
  },
  addDog (name, favoriteToy) {
    const id = (dogs.length + 1).toString()
    dogs.push({ id, name, favoriteToy })
    return Promise.resolve({ id })
  }
}

// DogList.js
class DogList extends Component {
  static propTypes = {
    dogs: PropTypes.arrayOf(PropTypes.object).isRequired
  }

  render () {
    return (
      <div>
        {this.props.dogs.map((dog, idx) => (
          <div key={idx}>
            <span>{dog.id}</span>
            <span>{dog.name}</span>
            <span>{dog.favoriteToy}</span>
          </div>
        ))}
      </div>
    )
  }
}

// DogAdd.js
class DogAdd extends Component {
  static propTypes = {
    addDog: PropTypes.func.isRequired
  }

  constructor (props) {
    super(props)
    this.state = {
      name: '',
      toy: ''
    }
    this.handleChange = this.handleChange.bind(this)
    this.addClicked = this.addClicked.bind(this)
  }

  handleChange ({ target: { name, value } }) {
    this.setState({ [name]: value })
  }

  addClicked () {
    const { name, toy } = this.state
    this.props.addDog(name, toy)
  }

  render () {
    const { name, toy } = this.state
    return (
      <div>
        <input name='name' value={name} onChange={this.handleChange} />
        <input name='toy' value={toy} onChange={this.handleChange} />
        <button onClick={this.addClicked}>Add</button>
      </div>
    )
  }
}

// Main component
class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      dogs: []
    }
    this.deleteDog = this.deleteDog.bind(this)
    this.editDog = this.editDog.bind(this)
    this.addDog = this.addDog.bind(this)
  }

  componentDidMount () {
    this.fetchDogs()
  }

  fetchDogs () {
    API.getDogs().then(dogs => this.setState({ dogs }))
  }

  // :( who would want delete dogs?
  deleteDog (dogId) {
    API.deleteDog(dogId).then(() => this.fetchDogs())
  }

  editDog (dogId, dogName, favoriteToy) {
    API.editDog(dogId, dogName, favoriteToy).then(() => this.fetchDogs())
  }

  addDog (dogName, favoriteToy) {
    API.addDog(dogName, favoriteToy).then(() => this.fetchDogs())
  }

  render () {
    const { dogs } = this.state
    return (
      <div>
        <DogAdd addDog={this.addDog} />
        <DogList dogs={dogs} />
        {/*
          <DogUpdate editDog={this.editDog} />
          <DogDelete remove={this.deleteDog} />
        */}
      </div>
    )
  }
}