Temp(?) note refactors

src/components/AppSidebar.tsx

@@ -10,12 +10,28 @@ import ListItem from "./ListItem"
 import { useNote } from "../contexts/ActiveNoteContext"
 import { useNotesStore } from "../contexts/NotesStore"
 import { useTheme } from "../contexts/ThemeContext"
+import { ReactNode } from "react"
 
 function AppSidebar() {
   const { notes, createNote } = useNotesStore()
-  const { setCurrentNote } = useNote()
+  const { setCurrentNoteId } = useNote()
   const { theme, toggleTheme } = useTheme()
 
+  const buildNoteListItems = () => {
+    const out: ReactNode[] = []
+    notes.forEach((note, key, _) => {
+      out.push(
+        <ListItem
+          key={key}
+          id={note.id}
+          label={note.title}
+          onSelect={() => setCurrentNoteId(note.id)}
+        />
+      )
+    })
+    return out;
+  }
+
   return (
     <Sidebar>
 
@@ -32,14 +48,7 @@ function AppSidebar() {
       <SidebarContent>
         <ScrollArea className="h-full px-2 py-2">
           <div className="space-y-1 py-2">
-            {notes.map((note) => (
+            {buildNoteListItems()}
-              <ListItem
-                key={note.id}
-                id={note.id}
-                label={note.title}
-                onSelect={() => setCurrentNote(note)}
-              />
-            ))}
           </div>
 
           <Button

src/components/NoteEditor.tsx

@@ -4,16 +4,21 @@ import { BlockNoteView } from "@blocknote/shadcn";
 import { useCreateBlockNote } from "@blocknote/react"
 import { useNote } from "../contexts/ActiveNoteContext"
 import { useTheme } from "../contexts/ThemeContext";
+import { useNotesStore } from "@/contexts/NotesStore";
+import { Note } from "@/models/Note";
 
 function NoteEditor() {
-  const { currentNote } = useNote();
+  const { notes } = useNotesStore()
+  const { currentNoteId } = useNote();
   const { theme } = useTheme();
 
+  const currentNote: Note = notes.get(currentNoteId)
+
   const editor = useCreateBlockNote({
     initialContent: currentNote?.body
   });
 
-  if (!currentNote) return (
+  if (!currentNoteId) return (
     <div className="p-6">
     </div>
   )
@@ -21,7 +26,7 @@ function NoteEditor() {
   return (
     <div className="p-6 w-full max-w-7/10 mx-auto">
       <div className="h-16" role="spacer"></div>
-      <h1 className="text-4xl font-medium mb-4">{ currentNote.title }</h1>
+      <h1 className="text-4xl font-medium mb-4">{ currentNote?.title }</h1>
       <BlockNoteView editor={editor as any} theme={theme} />
     </div>
   )

src/contexts/ActiveNoteContext.tsx

@@ -1,18 +1,17 @@
 import { createContext, Dispatch, SetStateAction, ReactNode, useContext, useState } from "react";
-import { Note } from "../models/Note";
 
 type ActiveNoteType = {
-  currentNote: Note | null;
+  currentNoteId: string | null;
-  setCurrentNote: Dispatch<SetStateAction<Note | null>>;
+  setCurrentNoteId: Dispatch<SetStateAction<string | null>>;
 }
 
 const ActiveNote = createContext<ActiveNoteType | null>(null);
 
 export function NoteProvider({ children }: { children: ReactNode }) {
-  const [currentNote, setCurrentNote] = useState<Note | null>(null);
+  const [currentNoteId, setCurrentNoteId] = useState<string | null>(null);
 
   return (
-    <ActiveNote.Provider value={{ currentNote, setCurrentNote }}>
+    <ActiveNote.Provider value={{ currentNoteId, setCurrentNoteId }}>
       {children}
     </ActiveNote.Provider>
   );

src/contexts/NotesStore.tsx

@@ -1,8 +1,8 @@
-import { createContext, useContext, useState, ReactNode, useEffect } from "react";
+import { createContext, useContext, useState, ReactNode } from "react";
 import { Note } from "../models/Note"
 
 type NotesStoreType = {
-  notes: Note[];
+  notes: Map<string, Note>;
   createNote: () => void;
   updateNote: (noteId: string, changeset: Partial<Note>) => void;
   deleteNote: (noteId: string) => void;
@@ -12,26 +12,28 @@ type NotesStoreType = {
 const NotesStore = createContext<NotesStoreType | null>(null);
 
 export function NotesStoreProvider({ children }: { children: ReactNode }) {
-  const [notes, setNotes] = useState<Note[]>([]);
+  const [notes, setNotes] = useState<Map<string, Note>>(new Map<string, Note>());
 
   const createNote = () => {
     const newNote = new Note();
-    setNotes([...notes, newNote]);
+    setNotes(prev => new Map(prev.set(newNote.id, newNote)));
     return newNote;
   }
 
   const updateNote = (noteId: string, changeset: Partial<Note>) => {
-    setNotes(notes.map(note => 
+    const noteToUpdate = notes.get(noteId)
-      note.id === noteId ? new Note({ ...note, ...changeset }) : note
+    const updatedNote = new Note({ ...noteToUpdate, ...changeset })
-    ))
+
+    setNotes(prev => new Map(prev.set(noteId, updatedNote)));
   }
 
   const deleteNote = (noteId: string) => {
-    setNotes(notes.filter(note => note.id !== noteId))
+    notes.delete(noteId);
+    setNotes(prev => new Map(prev))
   }
 
   const getNoteById = (noteId: string) => {
-    return notes.find(note => note.id === noteId);
+    return notes.get(noteId);
   }
 
   return (