fix: frondend error.

Author: PttCodingMan

frontend/eslint.config.js

@@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'coverage']),
   {
     files: ['**/*.{js,jsx}'],
     extends: [

frontend/src/api/client.test.js

@@ -1,6 +1,5 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterAll } from 'vitest'
 import api from './client'
-import axios from 'axios'
 
 describe('API Client', () => {
   const originalLocation = window.location
@@ -33,14 +32,11 @@ describe('API Client', () => {
       }
     }
 
-    // Try to trigger the error interceptor
     try {
-      // Accessing the private interceptors array might be brittle, 
-      // but it's a way to test it without making real calls.
       const interceptor = api.interceptors.response.handlers[0].rejected
       await interceptor(error401)
-    } catch (e) {
-      // Expected to reject
+    } catch {
+      // expected: interceptor rejects after redirect
     }
 
     expect(window.location.href).toBe('/login')
@@ -59,7 +55,9 @@ describe('API Client', () => {
     try {
       const interceptor = api.interceptors.response.handlers[0].rejected
       await interceptor(error401)
-    } catch (e) {}
+    } catch {
+      // expected: interceptor rejects without redirect
+    }
 
     expect(window.location.href).toBe('/login')
   })
@@ -79,7 +77,9 @@ describe('API Client', () => {
     try {
       const interceptor = api.interceptors.response.handlers[0].rejected
       await interceptor(error401)
-    } catch (e) {}
+    } catch {
+      // expected: interceptor rejects without redirect
+    }
 
     // href must stay at the public URL — no hard redirect to /login
     expect(window.location.href).toBe(pathname)

frontend/src/components/Comments.jsx

@@ -61,21 +61,35 @@ export default function Comments({ slug }) {
   const [comments, setComments] = useState([])
   const [total, setTotal] = useState(0)
   const [loading, setLoading] = useState(true)
+  const [loadedSlug, setLoadedSlug] = useState(slug)
   const [newComment, setNewComment] = useState('')
   const [submitting, setSubmitting] = useState(false)
 
+  // Reset loading when the slug changes (adjusting state during render).
+  if (loadedSlug !== slug) {
+    setLoadedSlug(slug)
+    setLoading(true)
+  }
+
   const loadComments = async () => {
     try {
       const res = await api.get(`/pages/${slug}/comments`)
       setComments(res.data.comments || [])
       setTotal(res.data.total || 0)
     } catch { /* ignore */ }
-    setLoading(false)
   }
 
   useEffect(() => {
-    setLoading(true)
-    loadComments()
+    let cancelled = false
+    api.get(`/pages/${slug}/comments`)
+      .then((res) => {
+        if (cancelled) return
+        setComments(res.data.comments || [])
+        setTotal(res.data.total || 0)
+        setLoading(false)
+      })
+      .catch(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
   }, [slug])
 
   const handleSubmit = async (e) => {

frontend/src/components/Editor/Editor.jsx

@@ -1,12 +1,11 @@
 import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react'
 import { Editor as MilkdownEditor, rootCtx, defaultValueCtx, commandsCtx } from '@milkdown/kit/core'
-import { commonmark, headingSchema, blockquoteSchema, hrSchema, bulletListSchema, orderedListSchema, codeBlockSchema, paragraphSchema, imageSchema, insertImageCommand } from '@milkdown/kit/preset/commonmark'
+import { commonmark, headingSchema, blockquoteSchema, hrSchema, bulletListSchema, orderedListSchema, codeBlockSchema, insertImageCommand } from '@milkdown/kit/preset/commonmark'
 import { clearTextInCurrentBlockCommand, setBlockTypeCommand, wrapInBlockTypeCommand, addBlockTypeCommand } from '@milkdown/kit/preset/commonmark'
 import { gfm } from '@milkdown/kit/preset/gfm'
 import { listener, listenerCtx } from '@milkdown/kit/plugin/listener'
 import { clipboard } from '@milkdown/kit/plugin/clipboard'
 import { history } from '@milkdown/kit/plugin/history'
-import { getMarkdown } from '@milkdown/kit/utils'
 import { slashFactory, SlashProvider } from '@milkdown/kit/plugin/slash'
 import { TextSelection, Plugin, PluginKey } from '@milkdown/kit/prose/state'
 import { $prose } from '@milkdown/kit/utils'
@@ -354,10 +353,13 @@ const Editor = forwardRef(function Editor({ defaultValue = '', onChange, onDrawi
   const editorRef = useRef(null)
   const containerRef = useRef(null)
   const onChangeRef = useRef(onChange)
-  onChangeRef.current = onChange
   const drawioHandlerRef = useRef(onDrawioOpen)
   const editorViewRef = useRef(null)
 
+  useEffect(() => {
+    onChangeRef.current = onChange
+  })
+
   useEffect(() => {
     drawioHandlerRef.current = onDrawioOpen || null
   }, [onDrawioOpen])

frontend/src/components/Layout/Sidebar.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useState, useRef } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import usePages from '../../store/usePages'
 import useBookmarks from '../../store/useBookmarks'
@@ -9,16 +9,20 @@ function TreeNode({ node, depth = 0, parentId = null, index = 0 }) {
   const { movePage } = usePages()
   const isActive = location.pathname === `/page/${node.slug}`
   const hasChildren = node.children?.length > 0
-  const [expanded, setExpanded] = useState(isActive || depth < 1)
+  const [expanded, setExpanded] = useState(
+    () => isActive || depth < 1 || (hasChildren && isChildActive(node, location.pathname))
+  )
+  const [trackedPath, setTrackedPath] = useState(location.pathname)
   const [dropPosition, setDropPosition] = useState(null) // 'before' | 'inside' | 'after'
   const rowRef = useRef(null)
 
-  // Auto-expand if a child is active
-  useEffect(() => {
+  // Auto-expand when navigation lands on a descendant (adjusting state during render).
+  if (trackedPath !== location.pathname) {
+    setTrackedPath(location.pathname)
     if (hasChildren && isChildActive(node, location.pathname)) {
       setExpanded(true)
     }
-  }, [location.pathname])
+  }
 
   const handleDragStart = (e) => {
     e.dataTransfer.setData('application/json', JSON.stringify({

frontend/src/components/Search/SearchModal.jsx

@@ -1,29 +1,37 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useEffect, useRef, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import useSearch from '../../store/useSearch'
 
 export default function SearchModal({ isOpen, onClose }) {
   const [query, setQuery] = useState('')
   const [selectedIdx, setSelectedIdx] = useState(0)
+  const [wasOpen, setWasOpen] = useState(isOpen)
   const inputRef = useRef(null)
   const navigate = useNavigate()
   const { results, loading, search, clearSearch } = useSearch()
 
-  useEffect(() => {
+  // Reset form each time the modal transitions closed → open (adjusting state during render).
+  if (wasOpen !== isOpen) {
+    setWasOpen(isOpen)
     if (isOpen) {
       setQuery('')
       clearSearch()
       setSelectedIdx(0)
-      setTimeout(() => inputRef.current?.focus(), 50)
     }
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+    const t = setTimeout(() => inputRef.current?.focus(), 50)
+    return () => clearTimeout(t)
   }, [isOpen])
 
-  const doSearch = useCallback(
-    debounce((q) => {
+  const doSearch = useMemo(
+    () => debounce((q) => {
       if (q.trim()) search(q.trim())
       else clearSearch()
     }, 300),
-    []
+    [search, clearSearch]
   )
 
   const handleInput = (e) => {

frontend/src/pages/Admin.jsx

@@ -90,7 +90,13 @@ function UsersSection() {
     } catch { /* ignore */ }
   }
 
-  useEffect(() => { loadUsers() }, [])
+  useEffect(() => {
+    let cancelled = false
+    api.get('/users')
+      .then((res) => { if (!cancelled) setUsers(res.data.users || []) })
+      .catch(() => { /* ignore */ })
+    return () => { cancelled = true }
+  }, [])
 
   const handleCreate = async (e) => {
     e.preventDefault()

frontend/src/pages/NewPage.jsx

@@ -92,7 +92,7 @@ export default function NewPage() {
       setError(err?.response?.data?.detail || err.message || 'Create failed')
       setSaving(false)
     }
-  }, [title, content, saving, selectedTemplate])
+  }, [title, content, saving, selectedTemplate, createPage, fetchTree, navigate])
 
   // Ctrl+S
   useEffect(() => {

frontend/src/pages/PageEdit.jsx

@@ -18,11 +18,12 @@ export default function PageEdit() {
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState('')
   const [conflict, setConflict] = useState(null)  // { currentVersion } on 409
-  const [dirty, setDirty] = useState(false)
-  const originalRef = useRef({ title: '', content: '' })
+  const [original, setOriginal] = useState({ title: '', content: '' })
   const baseVersionRef = useRef(null)
   const editorRef = useRef(null)
 
+  const dirty = !!page && (title !== original.title || content !== original.content)
+
   // Preview state
   const [showPreview, setShowPreview] = useState(false)
 
@@ -38,19 +39,13 @@ export default function PageEdit() {
       setPage(p)
       setTitle(p.title)
       setContent(p.content_md)
-      originalRef.current = { title: p.title, content: p.content_md }
+      setOriginal({ title: p.title, content: p.content_md })
       baseVersionRef.current = p.version
     }).catch(() => {
       navigate('/')
     })
   }, [slug])
 
-  useEffect(() => {
-    if (!page) return
-    const { title: origTitle, content: origContent } = originalRef.current
-    setDirty(title !== origTitle || content !== origContent)
-  }, [title, content, page])
-
   // Extract diagram IDs from content and fetch their data
   const diagramIds = useMemo(() => {
     const ids = []
@@ -142,7 +137,7 @@ export default function PageEdit() {
       })
       baseVersionRef.current = updated.version
       await fetchTree()
-      setDirty(false)
+      setOriginal({ title, content })
       setSaving(false)
       navigate(`/page/${slug}`)
     } catch (err) {
@@ -171,10 +166,9 @@ export default function PageEdit() {
       if (confirm('Discard your changes and load the latest version?')) {
         setTitle(latest.title)
         setContent(latest.content_md)
-        originalRef.current = { title: latest.title, content: latest.content_md }
+        setOriginal({ title: latest.title, content: latest.content_md })
         baseVersionRef.current = latest.version
         setConflict(null)
-        setDirty(false)
       }
     } catch (e) {
       console.error('Failed to reload:', e)