Species Add

[jbkey2015]

User Story

As a user, I should be able to add a species to the Nautilus.

AC

WHEN the user logs will go to the species page of the app ADD when the user clicks the ADD SPECIES button above the species cards THEN a modal should appear with input fields to add a new species.

Dev Notes

1. In the speciesBOARD component
   • [ ] Add an h1 in the species.html file that states View all Species.
   • [ ] Add a bootstrap button with an id of addSpeciesBtn in the species div.
   • [ ] Within speciesBoard. js create a function called addSpecies
   • [ ] This will pass an event in
   • [ ] Use e.stopImmediaePropagation so that the function will do what I’ve assigned it to do.
   • [ ] Make variable for id
   • [ ] Make variable newSpeciesBoard that will pass in the object keys from the species. json file with their values and the id
   • [ ] Grab the board data and if it's successful then hide the modal and call buildSpecies(id)

Example:

const addSpecies = (e) => {
  e.stopImmediatePropagation();
  const { id } = firebase.auth().currentUser;
  const newSpeciesBoard = {
    name: $('#speciesName').val(),
    speciesImg: $('#speciesImg").val(),
    description: $(#'description').val(),
    id,
  };
  console.log(newSpeciesBoard);
  speciesData.addSpecies(newSpeciesBoard)
    .then(() => {
      $('#exampleModal').modal('hide');
      // eslint-disable-next-line no-use-before-define
      buildSpecies(id);
    })
    .catch((error) => console.log(error));
};

• [ ] In the buildSpecies function I will create a jquery event listener that will grab the id: addSpeciesBtn and on click it will call the addSpecies function.

$('#addSpeciesBtn').click(addSpecies);

• [ ] Create axios post for add component in speciesData const addSpecies = (newSpeciesBoard) => axios.post(`${baseUrl}/species.json`, newSpeciesBoard);