Planetary System: Read

[ConnorSullivan10]

User Story

As a user, I should be able to view all Planetary Systems.

AC

WHEN the user visits the Planetary System tab in the Navbar THEN they should see a div that displays the planetSystem.json data (same as linked in firebase) for all Planetary Systems available

Dev Notes

• create a planetSystem component where you will create planetSystem.js and planetSystem.scss files
• create planetSystemData.js file under your Data Folder in helpers, where you will import axios along with your apiKeys to pull the planetary system data, in a function similar to the following:

import axios from 'axios';
import apiKeys from '../apiKeys.json';

const baseUrl = apiKeys.firebaseKeys.databaseURL;

const getSystems = () => new Promise((resolve, reject) => {
  axios.get(`${baseUrl}/planetSystem.json`)
    .then((response) => {
      const demSystems = response.data;
      const systems = [];
      Object.keys(demSystems).forEach((psId) => {
        demSystems[psId].id = psId;
        systems.push(demSystems[psId]);
      });
      resolve(systems);// Hard code to return systems
    })
    .catch((error) => reject(error));
});

export default { getSystems };

• • in planetSystem.js create a planetary system card inside a <div id="planetarySystemModule></div" using object literals from your seed data, to be used in your index.html and styled in planetSystem.scss. The function should look like something along the lines of:

import $ from 'jquery';
import utilities from '../../helpers/utilities';
import systemData from '../../helpers/data/planetSystemData';
import firebase from 'firebase';

const singleSystemCard = (system) => {
  let domString = '';
  const user = firebase.auth().currentUser;
  if (user != null) {
    domString += `
          <div id="${system.id}" class="card systemCard card-body text-center" style=" width: 20em; max-width: 500px; height: 100%; margin: 2em;">
             <button class="btn delete-button delete-food"  id="${system.id}" style="margin-right:0; margin-left: auto; width: 2em; color:#1c69b1; font-weight:bold;">X</button>
             <img src="${system.planetaryImg}" class="card-img-top" style="width: 100%; height: auto;" alt="..."/>
             <br>
             <h5 class="card-title" id="food">${system.name}</h5>
              <p>Size: ${system.size}</p>
              <p>Ally?: ${system.isAlly}</p>
              <p>${system.info}</p>
              <button type="button" class="btn edit-food" data-toggle="modal" data- 
               target="#exampleModal" id="${system.id}" style="background-color: #1c69b1; color: white;">
                  Edit
               </button>
          </div>`;
  } else {
    domString += `
        <div id="${system.id}" class="card foodCard card-body text-center" style=" width: 20em; max-width: 500px; height: 100%; margin: 2em;">
           <img src="${system.planetaryImg}" class="card-img-top" style="width: 100%; height: auto;" alt="..."/>
           <br>
           <h5 class="card-title" id="food">${system.name}</h5>
           <p>Size: ${system.size}</p>
           <p>Ally?: ${system.isAlly}</p>
           <p>${system.info}</p>
        </div>`;
  }
  return domString;
};

• Then create another that will use the getSystems function imported from planetSystemData.js, as well as the singleSystemCard function above to create cards for each Planetary System. It should look similar to:

const createSystemCards = () => {
  let domString = '<h1 class="text-center">Planetary Systems</h1>';
  const user = firebase.auth().currentUser;
  if (user != null) {
    domString += '<div class="text-center"><button type="button" id="add-new-food" class="btn btn-success" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" style="margin-left: 10px; color: white;">Add New Planetary System</button></div>';
  }
  domString += '<div id="systemDivs" class="d-flex flex-wrap">';
  systemData.getSystems()
    .then((systems) => {
      systemss.forEach((system) => {
        domString += singleSystemCard(system);
      });
      domString += '</div>';
      utilities.printToDom('systemModule', domString);
    })
    .catch((error) => console.error(error));
};

• then import and call the createFoodCards function inside your authentication function in navbars.js, so that the cards will print (with or without the conditional CRUD elements) both after logging in and logging out