notes

Note.js

<template>
  <div>
    <button @click="showForm = !showForm" class="btn btn-success">Toggle Form</button>
    <form v-if="showForm" @submit.prevent="addNote()">
      <fieldset>
        <div class="form-group">
          <label for="text">Title</label>
          <input
            type="text"
            class="form-control"
            id="title"
            aria-describedby="title"
            placeholder="Enter the title"
            required
            v-model="newNote.title"
          >
        </div>
        <br>
        <div class="form-group">
          <label for="description">Notes</label>
          <textarea class="form-control" id="description" rows="3" v-model="newNote.note"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Add Notes</button>
      </fieldset>
    </form>
    <section>
      <div
        v-for="note in notes"
        :key="note._id"
        class="card text-white bg-dark mb-3"
        style="max-width: 20rem;"
      >
        <div class="card-header">Header</div>
        <div class="card-body">
          <h4 class="card-title">Note title - {{note.title}}</h4>
          <p
            class="card-text"
          >{{note.note}}</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { bus } from '../main.js';

const API_URL = 'http://localhost:5000/';

export default {
  data: () => ({
    showForm: true,
    newNote: {
      title: '',
      note: '',
    },
    notes: [],
  }),

  // mounted() {
  //   this.getNotes()
  // },

  methods: {
    addNote() {
      // console.log(this.newNote)
      fetch(`${API_URL}api/v1/notes`, {
        method: 'POST',
        body: JSON.stringify(this.newNote),
        headers: {
          'content-type': 'application/json',
          authorization: `Bearer ${localStorage.token}`, // means that we are allowing that save note for this perticular user
        },
      })
        .then(res => res.json())
        .then((note) => {
          console.log('resopond notes from server', note);
          this.notes.push(note);
          this.clearValues();
        });
    },

    getNotes() {
      const getNotesExport = fetch(`${API_URL}api/v1/notes`, {
        method: 'POST',
        headers: {
          authorization: `Bearer ${localStorage.token}`,
        },
      })
        .then(res => res.json())
        .then(notes => (this.notes = notes));

      bus.$emit('getNotesExport', getNotesExport);
    },

    clearValues() {
      const newNote = this.newNote;
      for (const val in newNote) {
        newNote[val] = '';
        console.log('clear val');
      }
    },
  },
};
</script>

<style>
</style>