by id fix

Author: maxchistt

client/src/NoteComponents/ModalNoteEdit.js

@@ -25,10 +25,10 @@ function calcMaxRows() {
  */
 function ModalNoteEdit() {
     /**получение контекста */
-    const { removeNote, changeNoteColor, unsetEditNoteId, editNoteContent, getNoteByIndex, editNoteId } = React.useContext(NotesContext)
+    const { removeNote, changeNoteColor, unsetEditNoteId, editNoteContent, getNoteById, editNoteId } = React.useContext(NotesContext)
 
     /** обьект заметки */
-    const note = getNoteByIndex(editNoteId)
+    const note = getNoteById(editNoteId)
     React.useEffect(() => { if (note !== null) open() }, [note])
 
     /**хук состояния формы */

client/src/NoteComponents/NoteItem.js

@@ -2,7 +2,6 @@
  * @file NoteItem.js
  */
 import React, { useContext } from 'react'
-import PropTypes from 'prop-types'
 import NotesContext from '../Context/NotesContext'
 import Note, { PropTypeNote } from '../Shared/noteType/Note'
 import ReactMarkdown from 'react-markdown'
@@ -18,7 +17,7 @@ function fixLineBreaks(mdStr) {
  * @param {*} param0 
  *  
  */
-function NoteItem({ note = new Note(), index }) {
+function NoteItem({ note = new Note() }) {
     /**Подключение контекста */
     const { setEditNoteId, editNoteOrder } = useContext(NotesContext)
 
@@ -39,7 +38,7 @@ function NoteItem({ note = new Note(), index }) {
         <div className="p-1" >
             <div className="card" style={{ backgroundColor: bgColor }} >
                 {/**Заголовок и текст заметки с обработчиками отображения markdown*/}
-                <div className="card-body" onClick={() => setEditNoteId(index)} >
+                <div className="card-body" onClick={() => setEditNoteId(note.id)} >
                     <div
                         className="card-title h5"
                         style={{ overflow: "hidden", display: "-webkit-box", WebkitLineClamp: String(lineClip / 2), WebkitBoxOrient: "vertical" }} >
@@ -56,14 +55,14 @@ function NoteItem({ note = new Note(), index }) {
                     <button
                         className={footerBtn.className}
                         style={footerBtn.style}
-                        onClick={() => editNoteOrder(index, false)}
+                        onClick={() => editNoteOrder(note.id, false)}
                     >
                         <i className="bi bi-chevron-compact-right"></i>
                     </button>
                     <button
                         className={footerBtn.className}
                         style={footerBtn.style}
-                        onClick={() => editNoteOrder(index, true)}
+                        onClick={() => editNoteOrder(note.id, true)}
                     >
                         <i className="bi bi-chevron-compact-left"></i>
                     </button>
@@ -75,8 +74,7 @@ function NoteItem({ note = new Note(), index }) {
 
 // Валидация
 NoteItem.propTypes = {
-    note: PropTypeNote.isRequired,
-    index: PropTypes.number
+    note: PropTypeNote.isRequired
 }
 
 export default NoteItem

client/src/NoteComponents/NoteList.js

@@ -54,9 +54,9 @@ function NoteList(props) {
             {/**Отзывчивая сетка карточек */}
             <StackGrid className="container p-0" {...gridSettings}>
                 {/**Рендер каждой карточки из массива */}
-                {Array.isArray(props.notes) ? (props.notes.sort(sortByOrder).reverse().map((note, index) => {
+                {Array.isArray(props.notes) ? (props.notes.sort(sortByOrder).reverse().map((note) => {
                     return (
-                        <NoteItem note={note} key={note.id} index={index} />
+                        <NoteItem note={note} key={note.id} />
                     )
                 })) : null}
             </StackGrid>

client/src/Pages/NotesPage.js

@@ -86,9 +86,10 @@ function NotesPage() {
 
     /**
      * удаление карточки
-     * @param {*} index 
+     * @param {*} id 
      */
-    function removeNote(index) {
+    function removeNote(id) {
+        const index = getNoteIndexById(id)
         const toDelete = notesArr.splice(index, 1)[0]
         setNotesArr([...notesArr])
         loadDataToServer(toDelete, "delete")
@@ -107,21 +108,20 @@ function NotesPage() {
             text: noteData.text,
             order: calcOrder(notesArr)
         })
-        //console.log(newId, newNote.id);
-        const newIndex = (notesArr != null) ? notesArr.length : 0
         setNotesArr(
             (notesArr != null) ? notesArr.concat([newNote]) : [newNote]
         )
         loadDataToServer(newNote, "set")
-        setEditNoteId(newIndex)
+        setEditNoteId(newId)
     }
 
     /**
      * Изменение цвета карточки
      * @param {*} index 
      * @param {*} color 
      */
-    function changeNoteColor(index, color) {
+    function changeNoteColor(id, color) {
+        const index = getNoteIndexById(id)
         notesArr[index].color = color
         setNotesArr([...notesArr])
         loadDataToServer(notesArr[index], "set")
@@ -133,8 +133,9 @@ function NotesPage() {
      * @param {*} name 
      * @param {*} text 
      */
-    function editNoteContent(index, name, text) {
-        if (notesArr[index]) {
+    function editNoteContent(id, name, text) {
+        const index = getNoteIndexById(id)
+        if (index !== null) {
             let note = new Note(notesArr[index])
             note.name = name
             note.text = text
@@ -149,8 +150,9 @@ function NotesPage() {
      * @param {number} index 
      * @param {boolean} orderOperationFlag 
      */
-    function editNoteOrder(index, orderOperationFlag) {
-        if (notesArr[index]) {
+    function editNoteOrder(id, orderOperationFlag) {
+        const index = getNoteIndexById(id)
+        if (index !== null) {
             notesArr[index].order += orderOperationFlag ? 1 : -1
             let fixedArr = fixOrders(notesArr)
             setNotesArr(fixedArr)
@@ -160,9 +162,34 @@ function NotesPage() {
         }
     }
 
+    ///////////
+
     /**функция получения карточки по id */
-    function getNoteByIndex(index) {
-        return index !== null ? notesArr[index] : null
+    function getNoteById(id) {
+        const byId = () => {
+            let note = null
+            if (Array.isArray(notesArr)) {
+                notesArr.forEach((val, index) => {
+                    if (val.id === id) note = val
+                })
+            }
+            return note
+        }
+        return id !== null ? byId() : null
+    }
+
+    /**функция получения индекса карточки по id */
+    function getNoteIndexById(id) {
+        const byId = () => {
+            let index = null
+            if (Array.isArray(notesArr)) {
+                notesArr.forEach((val, ind) => {
+                    if (val.id === id) index = ind
+                })
+            }
+            return index
+        }
+        return id !== null ? byId() : null
     }
 
     ///////////
@@ -186,7 +213,7 @@ function NotesPage() {
     /**рендер */
     return (
         /**Здесь отрисовываются меню добавления и редактирования заметок и сам перечнь заметок в виде динамичной отзывчивой сетки */
-        <NotesContext.Provider value={{ addNote, removeNote, changeNoteColor, editNoteContent, editNoteOrder, setEditNoteId, unsetEditNoteId, editNoteId, getNoteByIndex }}>
+        <NotesContext.Provider value={{ addNote, removeNote, changeNoteColor, editNoteContent, editNoteOrder, setEditNoteId, unsetEditNoteId, editNoteId, getNoteById }}>
             <div className="NotesPage">
                 <main className="p-1 pb-3 mb-3">
                     {/**Компонент добавления карточки и модальное окно редактирования */}