fix: debounce

Author: FedoseevSM

src/lib/forum.ts

@@ -39,7 +39,8 @@ function matchesSearch(item: { author: string; body: string }, options?: { autho
   if (textQuery) {
     const normalizedBody = normalizeText(item.body);
     const normalizedQuery = normalizeText(textQuery);
-    if (!normalizedBody.includes(normalizedQuery)) return false;
+    const words = normalizedBody.split(/\s+/);
+    if (!words.some(word => word.startsWith(normalizedQuery))) return false;
   }
   return true;
 }

src/lib/utils.ts

@@ -62,5 +62,22 @@ export function transliterate(text: string): string {
 }
 
 export function normalizeText(text: string): string {
-  return transliterate(text).toLowerCase();
+  const russianToLatin: Record<string, string> = {
+    'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'Yo', 
+    'Ж': 'Zh', 'З': 'Z', 'И': 'I', 'Й': 'Y', 'К': 'K', 'Л': 'L', 'М': 'M', 
+    'Н': 'N', 'О': 'O', 'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U', 
+    'Ф': 'F', 'Х': 'Kh', 'Ц': 'Ts', 'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sch', 
+    'Ъ': '', 'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu', 'Я': 'Ya',
+    'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 
+    'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm', 
+    'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 
+    'ф': 'f', 'х': 'kh', 'ц': 'ts', 'ч': 'ch', 'ш': 'sh', 'щ': 'sch', 
+    'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya'
+  };
+  return text
+    .split('')
+    .map(char => russianToLatin[char] || char)
+    .join('')
+    .toLowerCase()
+    .trim();
 }

src/pages/ForumPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import {
   Plus,
@@ -25,16 +25,35 @@ export function ForumPage() {
   const [newTopicBody, setNewTopicBody] = useState('');
   const [authorSearch, setAuthorSearch] = useState('');
   const [textSearch, setTextSearch] = useState('');
+  const [debouncedAuthorSearch, setDebouncedAuthorSearch] = useState('');
+  const [debouncedTextSearch, setDebouncedTextSearch] = useState('');
+  const authorTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const textTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const { t } = useTranslation();
   const { user } = useAuth();
+
+  useEffect(() => {
+    if (authorTimeoutRef.current) clearTimeout(authorTimeoutRef.current);
+    authorTimeoutRef.current = setTimeout(() => {
+      setDebouncedAuthorSearch(authorSearch);
+    }, 300);
+  }, [authorSearch]);
+
+  useEffect(() => {
+    if (textTimeoutRef.current) clearTimeout(textTimeoutRef.current);
+    textTimeoutRef.current = setTimeout(() => {
+      setDebouncedTextSearch(textSearch);
+    }, 300);
+  }, [textSearch]);
+
   const loadData = async () => {
     if (!slug) return;
     setIsLoading(true);
     setError('');
     try {
       const [forumData, topicsData] = await Promise.all([
       getForum(slug),
-      listTopics(slug, { author: authorSearch || undefined, text: textSearch || undefined })
+      listTopics(slug, { author: debouncedAuthorSearch || undefined, text: debouncedTextSearch || undefined })
       ]);
       setForum(forumData);
       setTopics(topicsData);
@@ -47,7 +66,7 @@ export function ForumPage() {
   };
   useEffect(() => {
     loadData();
-  }, [slug, authorSearch, textSearch]);
+  }, [slug, debouncedAuthorSearch, debouncedTextSearch]);
   const handleCreateTopic = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!user || !slug) return;

src/pages/TopicPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { Loader2, User as UserIcon, Clock, Send, Quote } from 'lucide-react';
 import { Topic, Post, getTopic, listPosts, createPost } from '../lib/forum';
@@ -19,16 +19,35 @@ export function TopicPage() {
   const [isReplying, setIsReplying] = useState(false);
   const [authorSearch, setAuthorSearch] = useState('');
   const [textSearch, setTextSearch] = useState('');
+  const [debouncedAuthorSearch, setDebouncedAuthorSearch] = useState('');
+  const [debouncedTextSearch, setDebouncedTextSearch] = useState('');
+  const authorTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const textTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const { t } = useTranslation();
   const { user } = useAuth();
+
+  useEffect(() => {
+    if (authorTimeoutRef.current) clearTimeout(authorTimeoutRef.current);
+    authorTimeoutRef.current = setTimeout(() => {
+      setDebouncedAuthorSearch(authorSearch);
+    }, 300);
+  }, [authorSearch]);
+
+  useEffect(() => {
+    if (textTimeoutRef.current) clearTimeout(textTimeoutRef.current);
+    textTimeoutRef.current = setTimeout(() => {
+      setDebouncedTextSearch(textSearch);
+    }, 300);
+  }, [textSearch]);
+
   const loadData = async () => {
     if (!id) return;
     setIsLoading(true);
     setError('');
     try {
       const [topicData, postsData] = await Promise.all([
       getTopic(id),
-      listPosts(id, { author: authorSearch || undefined, text: textSearch || undefined })
+      listPosts(id, { author: debouncedAuthorSearch || undefined, text: debouncedTextSearch || undefined })
       ]);
       setTopic(topicData);
       setPosts(postsData);
@@ -41,14 +60,19 @@ export function TopicPage() {
   };
   useEffect(() => {
     loadData();
-  }, [id, authorSearch, textSearch]);
+  }, [id, debouncedAuthorSearch, debouncedTextSearch]);
   const allMessages = topic ? [
     { id: 'original', author: topic.author, body: topic.body, createdAt: topic.createdAt },
     ...posts
   ] : [];
   const filteredMessages = allMessages.filter(message =>
-    (authorSearch === '' || normalizeText(message.author).includes(normalizeText(authorSearch))) &&
-    (textSearch === '' || normalizeText(message.body).includes(normalizeText(textSearch)))
+    (debouncedAuthorSearch === '' || normalizeText(message.author).includes(normalizeText(debouncedAuthorSearch))) &&
+    (debouncedTextSearch === '' || (() => {
+      const normalizedBody = normalizeText(message.body);
+      const normalizedQuery = normalizeText(debouncedTextSearch);
+      const words = normalizedBody.split(/\s+/);
+      return words.some(word => word.startsWith(normalizedQuery));
+    })())
   );
   const handleReply = async (e: React.FormEvent) => {
     e.preventDefault();