Fix: Display current note in BreadCrumbs component

src/application/services/useNote.ts

@@ -1,8 +1,7 @@
-import { onMounted, ref, type Ref, type MaybeRefOrGetter, computed, toValue, watch } from 'vue';
-import { noteService, editorToolsService } from '@/domain';
-import type { Note, NoteContent, NoteId } from '@/domain/entities/Note';
-import type { NoteTool } from '@/domain/entities/Note';
-import { useRouter, useRoute } from 'vue-router';
+import { computed, type MaybeRefOrGetter, onMounted, ref, type Ref, toValue, watch } from 'vue';
+import { editorToolsService, noteService } from '@/domain';
+import type { Note, NoteContent, NoteId, NoteTool } from '@/domain/entities/Note';
+import { useRoute, useRouter } from 'vue-router';
 import type { NoteDraft } from '@/domain/entities/NoteDraft';
 import type EditorTool from '@/domain/entities/EditorTool';
 import DomainError from '@/domain/entities/errors/Base';
@@ -188,9 +187,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    * @param id - note id
    */
   async function getNoteHierarchy(id: NoteId): Promise<void> {
-    let response = await noteService.getNoteHierarchy(id);
-
-    noteHierarchy.value = response;
+    noteHierarchy.value = await noteService.getNoteHierarchy(id);
   }
 
   /**
@@ -263,6 +260,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
        */
       const noteCreated = await noteService.createNote(content, specifiedNoteTools, parentId);
 
+      noteParents.value = (await noteService.getNoteById(noteCreated.id)).parents;
       /**
        * Replace the current route with note id
        */

src/presentation/components/breadcrumbs/BreadCrumbs.vue

@@ -2,10 +2,10 @@
   <RouterLink
     v-for="(parent, index) in displayedParents"
     :key="index"
-    :to="{ path: parent.id ? `/note/${parent.id}` : '' }"
+    :to="`/note/${parent.id}`"
     class="breadcrumb"
   >
-    {{ parent.content ? getTitle(parent.content) : '...' }}
+    {{ parentTitle(parent.content) }}
     <Icon
       v-if="index < displayedParents.length - 1"
       name="ChevronRight"
@@ -20,9 +20,10 @@ import { RouterLink } from 'vue-router';
 import { computed } from 'vue';
 import { Note } from '@/domain/entities/Note.ts';
 import { Icon } from '@codexteam/ui/vue';
+import { OutputData } from '@editorjs/editorjs';
 
 const props = defineProps<{
-  noteParents: Note[];
+  noteParents: (Note | { id: string; content: string })[];
 }>();
 /**
  * Note parents hierarchy
@@ -40,6 +41,23 @@ const displayedParents = computed(() => {
 
   return props.noteParents;
 });
+
+/**
+ * title of the parent
+ *
+ * @param content - parent's content
+ * @returns {string} - parent title in string implementation
+ */
+function parentTitle(content: string | null | OutputData): string {
+  if (content === null) {
+    return '...';
+  }
+  if (typeof content === 'string') {
+    return content;
+  }
+
+  return getTitle(content);
+}
 </script>
 
 <style scoped>

src/presentation/pages/Note.vue

@@ -5,7 +5,11 @@
     >
       <template #left>
         <BreadCrumbs
-          :note-parents="noteParents"
+          :note-parents="
+            note && noteId ?
+              [...noteParents, { id: noteId, content: noteTitle }] :
+              noteParents
+          "
         />
       </template>
       <template #right>