CREATE - logs

[phillipsja97]

UserStory

• When the user clicks on the "add logs item" button, a modal should pop up with the general information of (destinationID, date, message, crewIDs, share(boolean). They should then be able to fill in the details of each part and click the "save changes" button which will add the new card of the new logs item to the page.

AC

WHEN the "add logs" button is pressed THEN a modal will pop up with blank input fields of the above data fields AND after completion when the the "save changes" button is clicked THEN the new information will be printed on a card with the other cards on the page.

DevNotes

• An "add logs item" button will be centered at the top of the page underneath the h1 tag.
• All buttons will be the "primary" selector button from bootstrap.
• There will be a click event on the the "add logs item" button that will trigger a modal with 5 input fields.
• A second click event will be on the "save and add" button in the modal which will trigger the function addLogItem.
• The addLogItem inside of newLogs.js will define a new object from the modal inputs like below:

  const newLog = {
  "destination": "",
  "date": "",
  "message": "",
  "crew": "",
  "share": "boolean"
  };

• The newLog object will be passed as a parameter when calling the postNewLogs axios post function in LogData.js.
• The addLogItem function will then call the main printLogs function from printLogs.js and then hide the modal.
• Inside the LogsData.js file the postNewLogs axios call will post the results to the firebase like seen here:

  const addNewLog = (newLog) => axios.post(`${baseUrl}/logs.json`, newLogs);

• Once firebase is updated with the axios post call the new array of objects from firebase will then print to the DOM with the new log item card printed.