Planetary System: Create

[ConnorSullivan10]

User Story

As a user, I should be able to add a Planetary System.

AC

GIVEN the user is logged in and visits the Planetary System page THEN they should see a Planetary System Module div where all the planetary systems and details are listed AND on centered over the Planetary System div will be an "Add Planetary System" button THEN when they click the button, a modal pops up where you can enter the new planetary system details AND upon completing the form and clicking a "Submit" button in the modal, the new planetary system will be added to the database and subsequently reprint the planetary system cards so the new card will show up along with the pre-existing ones

Dev Notes

• create function in foodData.js in your data folder that will use axios.post to update your Firebase database with a new food item:

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

const baseUrl = apiKeys.firebaseKeys.databaseURL;

const addNewSystem = (newSystem) => axios.post(`${baseUrl}/planetSystem.json`, newSystem);

export default { addNewSystem }

• Create a const systemModal function in planetSystems.js that will print a modal with or without prepopulated values for each key value pair, using a ternary function that will be shared by the "Add Data" button and "Edit" button on each card. The printed modal will populate when you click the "Add System" button on the page. Should look something along the lines of:

const systemModal = (system) => {
  const domString = `<div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <a class="navbar-brand d-flex" href="#">
            <img id="imperial-logo" src="https://vignette.wikia.nocookie.net/starwars/images/2/2e/Imperial_Emblem.svg/revision/latest/scale-to-width-down/200?cb=20080220004323" alt="" style="max-width: 180px; align-items: left; justify-content: left;">
        </a>
        <h5 class="modal-title" id="exampleModalLabel" style="margin-top:34px; margin-right:180px; color: #1c69b1;">New System</h5>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group>
            <label for="name" class="col-form-label">Name:</label>
            <input type="text" class="form-control" id="name" value="${system.name ? system.name : ''}">
          </div>
          <div class="form-group">
            <label for="size" class="col-form-label">Size:</label>
            <input type="text" class="form-control" id="size" value="${system.size ? system.size : ''}"></input>
          </div>
          <div class="form-group">
            <label for="sectorImg" class="col-form-label">Image URL:</label>
            <input type="text" class="form-control" id="sectorImg" value="${system.planetaryImg ? system.planetaryImg : ''}"></input>
          </div>
          <div class="form-group">
            <label for="isAlly" class="col-form-label">Ally?:</label>
            <input type="text" class="form-control" id="isAlly" value="${system.isAlly ? system.isAlly : ''}"></input>
          </div>
          <div class="form-group">
            <label for="info" class="col-form-label">Info:</label>
            <input type="text" class="form-control" id="info" value="${system.info ? system.info : ''}"></input>
          </div>
        </form>
      </div>
      <div class="modal-footer text-center" id="${system.id}">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="${system.id ? 'update' : 'submit'}" class="btn btn-danger">Submit</button>
      </div>
    </div>
  </div>`;
  return domString;
};

• the addNewSystem function will then be imported and called in planetSystem.js under the function const addNewPlanetSystem which will take the values of the input form on the modal and create a new object for your database:

const addNewPlanetSystem = (e) => {
  e.stopImmediatePropagation();
  const newSystem = {
    name: $('#name').val(),
    isAlly: $('#isAlly').val(),
    planetaryImg: $('#planetaryImg').val(),
    info: $('#info').val(),
    size: $('#size').val(),
    sectorId: ('#sectorId').val()
  };
  systemData.addNewSystem(newSystem)
    .then(() => {
      $('#exampleModal').modal('hide');
      // eslint-disable-next-line no-use-before-define
      createSystemCards();
    })
    .catch((error) => console.error(error));
};

• Create a click event listener at the bottom of const createSystemCards. The event listener will be attached to the submit button by id, and will pass the addNewPlanetSystem above on click of the "submit" button: $('#submit').on('click', addNewPlanetSystem);