Create Diary Entry

[jeressia]

User Story

As a user, I would like to keep track of my diary entries.

Acceptance Criteria

CREATE:
GIVEN a user wants to create a diary entry on their dashboard
WHEN the user performs a gesture on a New Diary affordance
THEN a form should be presented to the user in which the following information can be entered:

1. Date
2. Title
3. Entry

GIVEN a user has entered in all field values for storing a new diary entry
WHEN the user performs a gesture on the Save Diary affordance
THEN the diary should be saved in the database, and assigned to the user

Development

• Create a div with an id of diary-div
• Create a file called diaryData.js inside helpers/data/
• Inside this file import axios and apiKeys.js
• Create a function called addNewDiaryEntry that posts a diary object to the firebase url
• Create two files named addDiary.js and addDiary.scss with a path of src/javascripts/components/diary
• Inside of addDiary.js import the printToDom function from util.js
• Import firebase and firebase/auth
• Import diaryData.js from helpers/data/diaryData.js
• Create a form inside of the diaryStringBuilder that allows a user to input and date, title, entry of a diary entry.
• The form should have two buttons labeled Save Diary and Cancel with ids of save-diary and cancel-save-diary
• Print the diaryStringBuilder to diary-div
• Create click event listeners for the Save Diary and Cancel that run functions saveDiaryEvent and cancelDiaryEvent, respectively.
• Create saveDiaryEvent function that captures data for new data and post to the diary database like this:

const saveNewDiary = (e) => {
  e.preventDefault();
  const newDiary = {
    date: document.getElementById('date').value,
    title: document.getElementById('title').value,
    entry: document.getElementById('entry').value,
    uid: firebase.auth().currentUser.uid,
  };
  diaryData.addNewDiary(newDiary)
    .then(() => {
      document.getElementById('date').value = '';
      document.getElementById('title').value = '';
      document.getElementById('entry').value = '';
    })
    .catch(err => console.error('no new friends', err));
  console.error(newFriend);
};