Refactor NotesPanel component to integrate ApiServerContext for fetching notes, add support for parent type in new note creation, and streamline note handling logic.

src/components/Dashboard/common/NotesPanel.jsx

@@ -26,6 +26,7 @@ import MarkdownDisplay from './MarkdownDisplay'
 import axios from 'axios'
 import config from '../../../config'
 import { AuthContext } from '../context/AuthContext'
+import { ApiServerContext } from '../context/ApiServerContext'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon'
 import NoteTypeSelect from './NoteTypeSelect'
 import IdDisplay from './IdDisplay'
@@ -259,7 +260,7 @@ NoteItem.propTypes = {
   onChildNoteAdded: PropTypes.func
 }
 
-const NotesPanel = ({ _id, onNewNote }) => {
+const NotesPanel = ({ _id, onNewNote, type }) => {
   const [newNoteOpen, setNewNoteOpen] = useState(false)
   const [showMarkdown, setShowMarkdown] = useState(false)
   const [loading, setLoading] = useState(true)
@@ -273,6 +274,7 @@ const NotesPanel = ({ _id, onNewNote }) => {
   const [expandedNotes, setExpandedNotes] = useState({})
   const [newNoteForm] = Form.useForm()
   const [selectedParentId, setSelectedParentId] = useState(null)
+  const [selectedParentType, setSelectedParentType] = useState(null)
   const [childNoteCallbacks, setChildNoteCallbacks] = useState({})
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
   const [noteToDelete, setNoteToDelete] = useState(null)
@@ -289,22 +291,12 @@ const NotesPanel = ({ _id, onNewNote }) => {
   }, [newNoteForm, newNoteFormUpdateValues])
 
   const { authenticated, userProfile } = useContext(AuthContext)
+  const { fetchNotes } = useContext(ApiServerContext)
 
-  const fetchData = useCallback(async (id) => {
+  const fetchData = useCallback(
+    async (id) => {
       try {
-      const response = await axios.get(`${config.backendUrl}/notes`, {
-        params: {
-          parent: id,
-          sort: 'createdAt',
-          order: 'ascend'
-        },
-        headers: {
-          Accept: 'application/json'
-        },
-        withCredentials: true
-      })
-
-      const newData = response.data
+        const newData = await fetchNotes(id)
         setLoading(false)
         return newData
       } catch (error) {
@@ -312,7 +304,20 @@ const NotesPanel = ({ _id, onNewNote }) => {
         setError(error)
         setLoading(false)
       }
-  }, [])
+    },
+    [fetchNotes]
+  )
+
+  const handleNewChildNote = useCallback(
+    (parentId) => {
+      setSelectedParentId(parentId)
+      setSelectedParentType('note')
+      setNewNoteOpen(true)
+      newNoteForm.resetFields()
+      setNewNoteFormValues({})
+    },
+    [newNoteForm]
+  )
 
   const generateNotes = useCallback(
     async (id) => {
@@ -345,7 +350,7 @@ const NotesPanel = ({ _id, onNewNote }) => {
           expandedNotes={expandedNotes}
           setExpandedNotes={setExpandedNotes}
           fetchData={fetchData}
-          onNewNote={handleNewNoteFromDropdown}
+          onNewNote={handleNewChildNote}
           onDeleteNote={handleDeleteNote}
           userProfile={userProfile}
           onChildNoteAdded={(noteId, callback) => {
@@ -357,7 +362,7 @@ const NotesPanel = ({ _id, onNewNote }) => {
         />
       ))
     },
-    [loading, fetchData, expandedNotes, userProfile]
+    [loading, fetchData, expandedNotes, userProfile, handleNewChildNote]
   )
 
   const handleNewNote = async () => {
@@ -365,7 +370,11 @@ const NotesPanel = ({ _id, onNewNote }) => {
     try {
       await axios.post(
         `${config.backendUrl}/notes`,
-        { ...newNoteFormValues, parent: selectedParentId || _id },
+        {
+          ...newNoteFormValues,
+          parent: selectedParentId,
+          parentType: selectedParentType
+        },
         {
           withCredentials: true
         }
@@ -402,13 +411,6 @@ const NotesPanel = ({ _id, onNewNote }) => {
     }
   }
 
-  const handleNewNoteFromDropdown = (parentId) => {
-    setSelectedParentId(parentId)
-    setNewNoteOpen(true)
-    newNoteForm.resetFields()
-    setNewNoteFormValues({})
-  }
-
   const handleDeleteNote = async (noteId) => {
     setNoteToDelete(noteId)
     setDeleteConfirmOpen(true)
@@ -499,7 +501,8 @@ const NotesPanel = ({ _id, onNewNote }) => {
         setLoading(true)
         handleReloadData()
       } else if (key === 'newNote') {
-        setSelectedParentId(null)
+        setSelectedParentId(_id)
+        setSelectedParentType(type)
         setNewNoteOpen(true)
         newNoteForm.resetFields()
         setNewNoteFormValues({})
@@ -522,7 +525,8 @@ const NotesPanel = ({ _id, onNewNote }) => {
             icon={<PlusIcon />}
             disabled={loading}
             onClick={() => {
-              setSelectedParentId(null)
+              setSelectedParentId(_id)
+              setSelectedParentType(type)
               setNewNoteOpen(true)
               newNoteForm.resetFields()
               setNewNoteFormValues({})
@@ -688,6 +692,7 @@ const NotesPanel = ({ _id, onNewNote }) => {
 
 NotesPanel.propTypes = {
   _id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
   onNewNote: PropTypes.func
 }