Add proper keys for notes

gdn-app/src/components/CNavbar.vue

@@ -4,29 +4,38 @@ import { RiDeleteBinFill, RiNodeTree, RiSettings3Fill } from "@remixicon/vue";
 import CNavbarButton from "./CNavbarButton.vue";
 import CNavbarDropdown from "./CNavbarDropdown.vue";
 import { useUiStore } from "@/stores/ui";
-import { useNotesStore } from "@/stores/notes";
+import { Note, useNotesStore } from "@/stores/notes";
 
 const repos = useReposStore();
 const notes = useNotesStore();
 const ui = useUiStore();
 
-function createSomeNodes() {
+function mkNote(id: string, ...children: string[]): Note {
+  return notes.addNote({ id, text: id, children });
+}
+
+function createSomeNotes() {
   notes.clearNotes();
 
-  const root = notes.addNote("root");
+  const n2n1 = mkNote("n2n1");
+  const n2n2 = mkNote("n2n2");
+  const n2n3 = mkNote("n2n3");
+
+  const n1 = mkNote("n1");
+  const n2 = mkNote("n2", n2n1.id, n2n2.id, n2n3.id);
+  const n3 = mkNote("n3");
+  const n4 = mkNote("n4");
+  const n5 = mkNote("n5", "NaN (not a note)");
+
+  const root = mkNote("root", n1.id, n2.id, n3.id, n4.id, n5.id, n2.id);
+
   ui.anchor = root.id;
 
-  notes.appendChildNote(root.id, "n1")!;
+  // Shuffle children of root
-  const n2 = notes.appendChildNote(root.id, "n2")!;
+  root.children = root.children
-  notes.appendChildNote(root.id, "n3")!;
+    .map((it) => ({ it, rand: Math.random() }))
-  notes.appendChildNote(root.id, "n4")!;
+    .sort((a, b) => a.rand - b.rand)
-  const n5 = notes.appendChildNote(root.id, "n5")!;
+    .map(({ it }) => it);
-
-  notes.appendChildNote(n2.id, "n2n1")!;
-  notes.appendChildNote(n2.id, "n2n2")!;
-  notes.appendChildNote(n2.id, "n2n3")!;
-
-  n5.children.push("NaN (Not a Note)");
 }
 </script>
 
@@ -39,7 +48,7 @@ function createSomeNodes() {
     </div>
 
     <!-- Temporary button for testing -->
-    <CNavbarButton @click="createSomeNodes">
+    <CNavbarButton @click="createSomeNotes">
       <RiNodeTree size="16px" class="inline" />
     </CNavbarButton>
 

gdn-app/src/components/CNote.vue

@@ -8,36 +8,47 @@ const { notes } = useNotesStore();
 const props = defineProps<{ id: string | undefined }>();
 
 const note = computed(() => (props.id ? notes.get(props.id) : undefined));
+const children = computed(() => {
+  if (note.value === undefined) return [];
+  const seen = new Map<string, number>();
+  const children: [string, string][] = [];
+  for (const id of note.value.children) {
+    const n = seen.get(id) || 0;
+    seen.set(id, n + 1);
+    const key = `${id}-${n}`;
+    children.push([id, key]);
+  }
+  return children;
+});
+
 const open = ref(false);
 </script>
 
 <template>
   <div class="flex flex-col">
     <div class="flex flex-row gap-1" @click="open = !open">
-      <div
+      <!-- Fold/unfold symbol -->
-        v-if="note && note.children.length > 0 && !open"
+      <div v-if="children.length > 0 && !open" class="flex items-center">
-        class="flex items-center"
-      >
         <RiArrowRightSLine size="16px" />
       </div>
-      <div
+      <div v-else-if="children.length > 0" class="flex items-center">
-        v-else-if="note && note.children.length > 0"
-        class="flex items-center"
-      >
         <RiArrowDownSLine size="16px" />
       </div>
       <div v-else class="flex items-center">
         <RiArrowRightSLine size="16px" class="text-neutral-400" />
       </div>
-      <!-- <div v-else class="text-neutral-500">v</div> -->
+
+      <!-- Text -->
       <div v-if="note">{{ note.text }}</div>
       <div v-else class="font-light italic">note not found</div>
     </div>
+
+    <!-- Children -->
     <div
       v-if="note && open"
       class="flex flex-col border-l border-neutral-300 pl-3"
     >
-      <CNote v-for="child in note.children" :id="child"></CNote>
+      <CNote v-for="[id, key] in children" :id :key></CNote>
     </div>
   </div>
 </template>

gdn-app/src/stores/notes.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
-type Note = {
+export type Note = {
   id: string;
   text: string;
   children: string[];
@@ -10,16 +10,26 @@ type Note = {
 export const useNotesStore = defineStore("notes", () => {
   const notes = ref<Map<string, Note>>(new Map());
 
-  function addNote(text: string): Note {
+  function addNote(note: Note): Note {
-    const id = crypto.randomUUID();
+    notes.value.set(note.id, note);
-    notes.value.set(id, { id, text, children: [] });
+    return notes.value.get(note.id)!; // Re-getting so returned Note is reactive
-    return notes.value.get(id)!; // Re-getting so returned Note is reactive
   }
 
-  function appendChildNote(parentId: string, text: string): Note | undefined {
+  function addNewNote(text: string): Note {
+    return addNote({
+      id: crypto.randomUUID(),
+      text,
+      children: [],
+    });
+  }
+
+  function appendNewChildNote(
+    parentId: string,
+    text: string,
+  ): Note | undefined {
     const parent = notes.value.get(parentId);
     if (parent === undefined) return undefined;
-    const note = addNote(text);
+    const note = addNewNote(text);
     parent.children.push(note.id);
     return note;
   }
@@ -31,7 +41,8 @@ export const useNotesStore = defineStore("notes", () => {
   return {
     notes,
     addNote,
-    appendChildNote,
+    addNewNote,
+    appendNewChildNote,
     clearNotes,
   };
 });