Permalink
Browse files

changed modal to be a dumb component

  • Loading branch information...
roberto cortes
roberto cortes committed Feb 13, 2020
1 parent 9078ff8 commit ff6e894c455bfe835d887bc88d708c021c0712cd
Showing with 62 additions and 54 deletions.
  1. +51 −16 src/DogContainer/index.js
  2. +11 −38 src/EditDogModal/index.js
@@ -10,7 +10,14 @@ class DogContainer extends Component {

this.state = {
dogs: [],
idOfDogToEdit: -1
editModalOpen: false,
// this will be the data we are editing with the form in the modal
dogToEdit: {
name: '',
owner: '',
breed: '',
id: ''
}
}
}

@@ -137,23 +144,47 @@ class DogContainer extends Component {
// console.log("here's the id of the dog we want to edit");
// console.log(idOfDogToEdit);
// console.log()
const dogToEdit = this.state.dogs.find((dog) => dog.id === idOfDogToEdit)
this.setState({
editModalOpen: true,
dogToEdit: {
...dogToEdit
// the line above is using the spread operator to represent the 4 lines below
// using each property in state to each propety of dogToEdit
}
})
}

handleEditChange = (e) => {

// const dog = this.state.oldDog
// dog[e.target.name] = e.target.value
// often react devs will use fancy new synta like this to show off
this.setState({
idOfDogToEdit: idOfDogToEdit
dogToEdit: {
...this.state.dogToEdit, // copy old props from obj in state and using
[e.target.name]: e.target.value // spread operator to replace the old balue for whatever was
} // edited for the new value
})
}
handleSubmitEditForm = (e) => {
e.preventDefault()
this.updateDog()
}

updateDog = async (e) => {

updateDog = async (newDogInfo) => {
// id of dog we need is in state
// console.log("updateDog in DogContainer, we are trying to update dog ", this.state.idOfDogToEdit);
// console.log("to look like ");
// console.log(newDogInfo);

console.log(this.state.dogToEdit.id);
try {
const updateDogResponse = await fetch(
process.env.REACT_APP_API_URL + "/api/v1/dogs/" + this.state.idOfDogToEdit,
process.env.REACT_APP_API_URL + "/api/v1/dogs/" + this.state.dogToEdit.id,
{
method: 'PUT',
body: JSON.stringify(newDogInfo),
body: JSON.stringify(this.state.dogToEdit),
headers: {
'Content-Type': 'application/json'
}
@@ -177,7 +208,7 @@ class DogContainer extends Component {

// a different way you could replace that one element
const newDogArrayWithUpdatedDog = this.state.dogs.map((dog) => {
if(dog.id === this.state.idOfDogToEdit) {
if(dog.id === updatedDogJson.data.id) {
return updatedDogJson.data
} else {
return dog
@@ -201,27 +232,31 @@ class DogContainer extends Component {

closeModal = () => {
this.setState({
idOfDogToEdit: -1
editModalOpen: false
})
}

render() {
// console.log("here is this.state in render() in DogContainer");
// console.log(this.state);
console.log(this.state.dogToEdit.id);
return(
<React.Fragment>
<DogList dogs={this.state.dogs} deleteDog={this.deleteDog} editDog={this.editDog} />
<NewDogForm createDog={this.createDog} />
{
this.state.idOfDogToEdit !== -1
?
<DogList
dogs={this.state.dogs}
deleteDog={this.deleteDog}
editDog={this.editDog} />
<NewDogForm createDog={this.createDog}
/>

<EditDogModal
dogToEdit={this.state.dogs.find((dog) => dog.id === this.state.idOfDogToEdit)}
handleSubmitEditForm={this.handleSubmitEditForm}
handleEditChange={this.handleEditChange}
open={this.state.editModalOpen}
dogToEdit={this.state.dogToEdit}
updateDog={this.updateDog}
closeModal={this.closeModal}
/>
:
null
}
</React.Fragment>
)
@@ -1,68 +1,41 @@
import React, { Component } from 'react'
import React from 'react'
import { Form, Button, Label, Header, Modal } from 'semantic-ui-react'


class EditDogModal extends Component {
constructor() {
super()
this.state = {
name: '',
breed: '',
owner: ''
}
}
function EditDogModal (props){

componentDidMount() {
this.setState({
name: this.props.dogToEdit.name,
breed: this.props.dogToEdit.breed,
owner: this.props.dogToEdit.owner
})
}

handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value
})
}

handleSubmit = (event) => {
event.preventDefault()
this.props.updateDog(this.state)
}

render() {
// console.log("props in EditDogModal");
// console.log(this.props);
return (

<Modal open closeIcon onClose={this.props.closeModal}>
<Modal open={props.open} closeIcon onClose={props.closeModal}>
<Header>Edit Dog</Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form onSubmit={props.handleSubmitEditForm}>
<Label>Name:</Label>
<Form.Input
type="text"
name="name"
value={this.state.name}
value={props.dogToEdit.name}
placeholder="Enter Dog Name"
onChange={this.handleChange}
onChange={props.handleEditChange}
/>
<Label>Breed:</Label>
<Form.Input
type="text"
name="breed"
value={this.state.breed}
value={props.dogToEdit.breed}
placeholder="Enter Dog Breed"
onChange={this.handleChange}
onChange={props.handleEditChange}
/>
<Label>Owner Name:</Label>
<Form.Input
type="text"
name="owner"
value={this.state.owner}
value={props.dogToEdit.owner}
placeholder="Enter Owner's name"
onChange={this.handleChange}
onChange={props.handleEditChange}
/>
<Modal.Actions>
<Button color={"green"} type="Submit">Update Dog</Button>
@@ -71,7 +44,7 @@ class EditDogModal extends Component {
</Modal.Content>
</Modal>
)
}

}

export default EditDogModal

0 comments on commit ff6e894

Please sign in to comment.