update PrivateDialogueWindowHeader input to TextInput

src/widgets/private-dialogue/PrivateDialogueWindow/PrivateDialogueWindowHeader/ui/PrivateDialogueWindowHeader.tsx

@@ -1,13 +1,13 @@
-import { ComponentPropsWithoutRef, FC, memo, useEffect } from 'react';
+import {
+    ComponentPropsWithoutRef,
+    FC,
+    memo,
+    useCallback,
+    useEffect,
+} from 'react';
 import classNames from 'classnames';
 import css from './PrivateDialogueWindowHeader.module.scss';
 import { Row } from '@/shared/ui-kit/box/Row/ui/Row.tsx';
-import {
-    InputWithError,
-} from '@/shared/ui-kit/inputs/InputWithError/ui/InputWithError.tsx';
-import {
-    useInputWithError,
-} from '@/shared/ui-kit/inputs/InputWithError/hooks/useInputWithError.ts';
 import {
     ArchivePrivateDialogue,
 } from '@/features/private-dialogue/button/ArchivePrivateDialogue/ui/ArchivePrivateDialogue.tsx';
@@ -27,6 +27,9 @@ import {
 } from '@/shared/ui-kit/buttons/ButtonWithLoading/ui/ButtonWithLoading.tsx';
 import { IoSearch } from 'react-icons/io5';
 import { useTranslation } from '@/features/i18n/hook/useTranslation.ts';
+import { useForm } from 'react-hook-form';
+import { TextInput } from '@/shared/ui-kit/input/TextInput/ui/TextInput.tsx';
+import { useDebounce } from '@/shared/hooks/useDebounce/useDebounce.ts';
 
 
 export type PrivateDialogueWindowHeaderProps =
@@ -39,27 +42,25 @@ export const PrivateDialogueWindowHeader: FC<PrivateDialogueWindowHeaderProps> =
     const { className, dialogueId, children, ...other } = props;
     const messagesStatus                                = useStore($privateMessagesIsPending);
     const { t }                                         = useTranslation();
-    const search                                        = useInputWithError({
-        name           : '',
-        debounce       : 500,
-        onChangeHandler: (query) => {
-            query
-            ? getPrivateMessagesByQueryEffect([
-                dialogueId, {
-                    query,
-                    limit : 20,
-                    offset: 0,
-                },
-            ])
-            : resetPrivateMessagesSearchEffect(dialogueId);
-        },
-    });
+    const debounce                                      = useDebounce(500);
+
+    const onSearchHandler = useCallback((query: string) => {
+        query
+        ? getPrivateMessagesByQueryEffect([
+            dialogueId, {
+                query,
+                limit : 20,
+                offset: 0,
+            },
+        ])
+        : resetPrivateMessagesSearchEffect(dialogueId);
+    }, [ dialogueId ]);
+
+    const { handleSubmit, register, reset } = useForm<{ search: string }>(
+        { mode: 'onChange' },
+    );
 
-    useEffect(() => {
-        // TODO: Temp
-        search.inputRef.current.value = '';
-        search.value.current          = '';
-    }, [ dialogueId, search.inputRef, search.value ]);
+    useEffect(() => reset(), [ dialogueId, reset ]);
 
     return (
         <div
@@ -75,10 +76,16 @@ export const PrivateDialogueWindowHeader: FC<PrivateDialogueWindowHeaderProps> =
                     >
                         <IoSearch/>
                     </ButtonWithLoading>
-                    <InputWithError
-                        controller={ search }
-                        placeholder={ t.page.dialogues.search_message }
-                    />
+                    <search>
+                        <form
+                            onChange={ handleSubmit(({ search }) => debounce(() => onSearchHandler(search))) }>
+                            <TextInput
+                                placeholder={ t.page.dialogues.search_message }
+                                type="text"
+                                { ...register('search') }
+                            />
+                        </form>
+                    </search>
                 </Row>
                 <Row>
                     <ReadAllMessagesPrivateDialogue dialogueId={ dialogueId }/>