Update files

frontend/src/components/CommentsModal.jsx

@@ -72,7 +72,7 @@ export default function CommentsModal({ post, onClose, onUpdate }) {
     return () => {
       cancelled = true
     }
-  }, [post?._id || null]) // Только ID поста в зависимостях, используем null для стабильности
+  }, [post?._id]) // Используем просто post?._id без || null
   
   // Проверка на существование поста ПОСЛЕ хуков
   const displayPost = fullPost || post
@@ -104,10 +104,6 @@ export default function CommentsModal({ post, onClose, onUpdate }) {
         setComment('')
         hapticFeedback('success')
         
-        // Обновить данные поста для синхронизации (но не блокируем UI)
-        // Перезагружаем через useEffect, который сработает при изменении post._id
-        // Но так как post._id не меняется, просто обновим локально
-        
         if (onUpdate) {
           onUpdate()
         }
@@ -124,6 +120,7 @@ export default function CommentsModal({ post, onClose, onUpdate }) {
   }
 
   const formatDate = (date) => {
+    if (!date) return 'только что'
     const d = new Date(date)
     const now = new Date()
     const diff = Math.floor((now - d) / 1000) // секунды
@@ -142,17 +139,15 @@ export default function CommentsModal({ post, onClose, onUpdate }) {
     }
   }
 
-  // Если нет валидного поста, не рендерим модалку вообще
-  if (!hasValidPost) {
-    return null
-  }
-
+  // ВСЕГДА рендерим createPortal, даже если пост не валиден
+  // Это критично для соблюдения правил хуков
   return createPortal(
     <div 
       className="comments-modal-overlay" 
       onMouseDown={(e) => e.stopPropagation()}
       onTouchStart={(e) => e.stopPropagation()}
       onClick={handleOverlayClick}
+      style={{ display: hasValidPost ? 'flex' : 'none' }}
     >
       <div className="comments-modal" onClick={(e) => e.stopPropagation()}>
         {/* Хедер */}
@@ -165,7 +160,13 @@ export default function CommentsModal({ post, onClose, onUpdate }) {
         </div>
 
         {/* Пост */}
-        {loadingPost ? (
+        {!hasValidPost ? (
+          <div className="post-preview">
+            <div className="loading-state">
+              <p>Загрузка...</p>
+            </div>
+          </div>
+        ) : loadingPost ? (
           <div className="post-preview">
             <div className="loading-state">
               <div className="spinner" />
@@ -205,6 +206,7 @@ export default function CommentsModal({ post, onClose, onUpdate }) {
         )}
 
         {/* Список комментариев */}
+        {hasValidPost && (
           <div className="comments-list">
             {comments.length === 0 ? (
               <div className="empty-comments">
@@ -249,8 +251,10 @@ export default function CommentsModal({ post, onClose, onUpdate }) {
                 .filter(Boolean) // Убираем null значения
             )}
           </div>
+        )}
 
         {/* Форма добавления комментария */}
+        {hasValidPost && (
           <div className="comment-form">
             <input
               type="text"
@@ -268,8 +272,9 @@ export default function CommentsModal({ post, onClose, onUpdate }) {
               <Send size={20} />
             </button>
           </div>
+        )}
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }
-