Destination-Read

[aleshakay]

User Story As a user, I should be able to read all possible destinations.

AC WHEN I am on the home/landing page I should see all the destinations. THEN I should be able to view all of the current destinations.

Dev Notes

• create destination.json file

  
  "environmentId": "",
  "name": "",
  "description": ""
  }```

• import file into firebase
• create an destinationData.js file in javascripts/helpers/data to pull the data firebase
• add the following lines to destinationData.js

  
  import apiKeys from '../apiKeys.json';
  import 'firebase/auth';
  const baseUrl = apiKeys.firebaseKeys.databaseURL;```

• pull data from database.

  
  axios.get(`${baseUrl}/destinations.json?orderBy="destinationId"&equalTo="${destinationId}"`)
  .then((response) => {
    const demDestinations = response.data;
    const destinations = [];
    Object.keys(demDestinations).forEach((fbId) => {
      demDestinations[fbId].id = fbId;
      destinations.push(demDestinations[fbId]);
    });
    resolve(destinations); // Hard code to only return first machine that comes back
  })
  .catch((error) => reject(error));
  });```

• create component file destination.js and destination.scss
• import destinations.scss to the destination.js file.
• export the destinationBuilder and import it into main.js
• place the destinationBuilder into the init function in main.js
• create function destinationBuilder destinationBuilder should printToDom the current destinations pulled from firebase.
• the printToDom should be near the bottom of the page when rendered.
• the destinationBuilder will print in a table format
• the destinationBuilder have a button to view add/delete/edit functions
• Use bootstrap table and table-striped classes https://getbootstrap.com/docs/4.0/content/tables/#table-head-options

[aleshakay]