Saba-Var · Saba-Var · Sep 22, 2023 · Sep 22, 2023
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pro Noteballs</title>
+    <title>Vite App</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/Layout/NavBar.vue b/src/components/Layout/NavBar.vue
@@ -2,9 +2,7 @@
   <nav class="navbar is-success" role="navigation" aria-label="main navigation">
     <div class="container is-max-desktop px-2">
       <div class="navbar-brand">
-        <RouterLink to="/" class="navbar-item is-size-4 is-family-monospace is-clickable">
-          Pro Noteballs
-        </RouterLink>
+        <div class="navbar-item is-size-4 is-family-monospace">Pro Noteballs</div>
 
         <a
           @click.prevent="showMobileNavBar = !showMobileNavBar"
@@ -23,23 +21,8 @@
 
       <div id="navbarBasicExample" :class="{ 'is-active': showMobileNavBar }" class="navbar-menu">
         <div class="navbar-end">
-          <RouterLink
-            @click="showMobileNavBar = !showMobileNavBar"
-            active-class="is-active"
-            class="navbar-item"
-            to="/"
-          >
-            Notes
-          </RouterLink>
-
-          <RouterLink
-            @click="showMobileNavBar = !showMobileNavBar"
-            active-class="is-active"
-            class="navbar-item"
-            to="/stats"
-          >
-            Stats</RouterLink
-          >
+          <RouterLink active-class="is-active" to="/" class="navbar-item">Notes</RouterLink>
+          <RouterLink active-class="is-active" to="/stats" class="navbar-item">Stats</RouterLink>
         </div>
       </div>
     </div>

diff --git a/src/components/Notes/AddEditNote.vue b/src/components/Notes/AddEditNote.vue
diff --git a/src/components/Notes/NoteCard.vue b/src/components/Notes/NoteCard.vue
@@ -16,26 +16,16 @@
           <time :datetime="note.createdAt"> {{ note.createdAt }} </time>
         </small>
       </div>
-
-      <div v-if="note.updatedAt" class="has-text-right has-text-grey-light">
-        <small>
-          Updated at:
-          <time :datetime="note.updatedAt"> {{ note.updatedAt }} </time>
-        </small>
-      </div>
     </div>
     <footer class="card-footer">
-      <RouterLink class="card-footer-item" :to="`/edit-note/${note.id}`">Edit</RouterLink>
-
-      <a class="card-footer-item" @click="deleteNoteHandler(note.id)" href="#">Delete</a>
+      <a href="#" class="card-footer-item">Edit</a>
+      <a href="#" @click="deleteNoteHandler" class="card-footer-item">Delete</a>
     </footer>
   </div>
 </template>
 
 <script setup>
-import { useNotesStore } from '@/stores/notes'
-import { defineProps, computed } from 'vue'
-import { RouterLink } from 'vue-router'
+import { defineProps, computed, defineEmits } from 'vue'
 
 const props = defineProps({
   note: {
@@ -44,8 +34,11 @@ const props = defineProps({
   }
 })
 
-const storeNotes = useNotesStore()
-const { deleteNoteHandler } = storeNotes
+const emit = defineEmits(['deleteNoteHandler'])
+
+const deleteNoteHandler = () => {
+  emit('deleteNoteHandler', props.note.id)
+}
 
 const noteContentLengthText = computed(() => {
   const length = props.note.content.length

diff --git a/src/components/Notes/index.js b/src/components/Notes/index.js
@@ -1,2 +1 @@
-export { default as AddEditNote } from './AddEditNote.vue'
 export { default as NoteCard } from './NoteCard.vue'
diff --git a/src/main.js b/src/main.js
@@ -5,10 +5,9 @@ import { createPinia } from 'pinia'
 import App from '@/App.vue'
 import router from '@/router'
 
-const pinia = createPinia()
 const app = createApp(App)
 
-app.use(pinia)
+app.use(createPinia())
 app.use(router)
 
 app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { ViewNotes, ViewStats, ViewEditNote } from '@/views'
+import { ViewNotes, ViewStats } from '@/views'
 
 const routes = [
   {
@@ -12,12 +12,6 @@ const routes = [
     component: ViewStats,
     path: '/stats',
     name: 'stats'
-  },
-
-  {
-    component: ViewEditNote,
-    path: '/edit-note/:id',
-    name: 'edit-note'
   }
 ]
 

diff --git a/src/stores/counter.js b/src/stores/counter.js
@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
diff --git a/src/stores/notes.js b/src/stores/notes.js
diff --git a/src/views/ViewEditNote.vue b/src/views/ViewEditNote.vue
diff --git a/src/views/ViewNotes.vue b/src/views/ViewNotes.vue
@@ -1,43 +1,52 @@
 <template>
   <div class="notes">
-    <AddEditNote ref="addEditNoteRef" v-model="newNoteValue">
-      <template v-slot:buttons>
-        <button
-          :disabled="!newNoteValue.trim()"
-          class="button has-background-success is-link"
-          @click="newNoteAddHandler"
-        >
-          Add New Note
-        </button>
-      </template>
-    </AddEditNote>
-
-    <NoteCard v-for="note in notes" :key="note.id" :note="note" />
+    <div class="card has-background-success-dark p-4 mb-5">
+      <div class="field">
+        <div class="control">
+          <textarea v-model="newNoteValue" class="textarea" placeholder="Add a new note" />
+        </div>
+      </div>
+
+      <div class="field is-grouped is-grouped-right">
+        <div class="control">
+          <button
+            :disabled="!newNoteValue.trim()"
+            class="button has-background-success is-link"
+            @click="newNoteAddHandler"
+          >
+            Add New Note
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <NoteCard
+      v-for="note in notes"
+      @deleteNoteHandler="deleteNoteHandler"
+      :key="note.id"
+      :note="note"
+    />
   </div>
 </template>
 
 <script setup>
-import { NoteCard, AddEditNote } from '@/components'
-import { useNotesStore } from '@/stores/notes'
-import { ref, onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
+import { NoteCard } from '@/components'
+import { ref } from 'vue'
 
 const newNoteValue = ref('')
-const addEditNoteRef = ref(null)
-
-const storeNotes = useNotesStore()
 
-const { notes } = storeToRefs(storeNotes)
-
-const { noteAddHandler } = storeNotes
+const notes = ref([])
 
 const newNoteAddHandler = () => {
-  noteAddHandler(newNoteValue.value)
+  notes.value.push({
+    id: Math.random() + new Date().getTime(),
+    createdAt: new Date().toDateString(),
+    content: newNoteValue.value
+  })
   newNoteValue.value = ''
-  addEditNoteRef.value.focusTextarea()
 }
 
-onMounted(() => {
-  addEditNoteRef.value.focusTextarea()
-})
+const deleteNoteHandler = (id) => {
+  notes.value = notes.value.filter((note) => note.id !== id)
+}
 </script>