Species All

[jbkey2015]

User Story

As a user, I should be able to see all the Species when I arrive at a destination.

AC

WHEN the user is logged in they will be on the homepage. When the user clicks on the species card then they will be able to see all of the species.

AND when the user clicks on the species a card will appear that gives a description of that species.

THEN the user can click on a button to go back to the species page.

DEV Notes

• this satisfies the READ component of C.R.U.D.

1. Wireframe: see wireframe below for the way this page and its cards should appear

2. Creating JSON data

   • [ ] create species.json seed data in the db folder of my project
   • [ ] create 6 species cards with the name, type, and if they are endangered

3. Create Div

• [ ] Create a div in index.html called speciesDiv

4. Helpers/Data
   • [ ] In helpers, I will create a data file called speciesData.
   • [ ] Import axios
   • [ ] Import apiKeys in order to grab the data from firebase
   • [ ] Make a variable called baseURL that will contain the apikeys databae Url const baseUrl = apiKeys.firebaseKeys.databaseURL
   • [ ] Create function called getSpecies
     • make a new promise – use axios.get to retrieve data from firebase
     • EXAMPLE:

const getSpecies = (uid) => new Promise((resolve, reject) => {
  axios.get(`${baseUrl}/species.json?orderBy="id"&equalTo="${id}"`)
    .then((response) => {
      const nautSpecies = response.data;
      const speciesBoards = [];
      Object.keys(nautSpecies).forEach((fbId) => {
        nautSpecies[fbId].id = fbId;
        speciesBoards.push(nautSpecies[fbId]);
      });
      resolve(speciesBoards); 
    })
    .catch((error) => reject(error));
});

• [ ] If that comes back successful then I’ll create a var called findingSpecies that will contain the data that will pass through if the response is successful.
• [ ] Const species will be the array that will hold all the cards.
• [ ] Use object.keys to grab the data from the array, loop through the objects and pass the firebase id through and push the array values to the empty array called species.
• [ ] Export getSpecies

5. speciesCard Component

• [ ] Make folder called speciesCard in the components folder, with speciesCard.js and scss file
• [ ] Create function called makeSpeciesCard that will contain a domString for the species card based off of the object key value pairs declared in the species Json file.
• [ ] Use bootstrap card and positioning elements
• [ ] Use bootstrap links for the delete and edit buttons (but they will be links, not buttons)
• [ ] Export makeSpeciesCard

6. speciesBoard Component

• [ ] Make SpeciesBoard folder in the components folder, with js and scss file
• [ ] Import firebase/app and auth
• [ ] Import utils
• [ ] Import speciesData and speciesCard
• [ ] Create a function called buildSpecies and pass in the id. Grab the data from speciesData and attached the getSpecies function as a method.
• [ ] Create a domString with a div id of speciesSection, d-flex, flex-wrap.
• [ ] Loop over boards and grab speciesCard data and print its content to the div
• [ ] Export buildSpecies
• [ ] Call buildSpecies in authData file.

const buildSpecies = (id) => {
  speciesData.getSpecies(id)
    .then((speciesBoards) => {
      console.log('the boards', speciesBoards);
      let domString = '<div id="boardSection" class="d-flex flex-wrap">';
      speciesBoards.forEach((speciesBoards) => {
        domString += speciesCard.makespeciesCard(board);
      });
      domString += '</div>';
      utilities.printToDom('speciesBoards', domString);
    })
    .catch((error) => console.error(error));
};

export default { buildSpecies};

7. Auth Data

• [ ] import speciesBoard
• [ ] In checklogin status function i will hide my species div to make it read only
• [ ] make a variable: const speciesDiv = $('#speciesBoards');

      speciesBoards.buildSpecies(user.id); 

8. Main.js

• [ ] call buildSpecies function

[jbkey2015]

[jbkey2015]