Remove console.logs, add useDebounce hook, update HeaderSearch to new…

… TextInput
VanyaMate · Oct 13, 2024 · 5c32ec0 · 5c32ec0
1 parent eb33a6c
commit 5c32ec0
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 29 deletions.
diff --git a/src/features/notification/hooks/useDialoguesStoreUpdaterByNotifications.ts b/src/features/notification/hooks/useDialoguesStoreUpdaterByNotifications.ts
@@ -28,8 +28,6 @@ export const useDialoguesStoreUpdaterByNotifications = function () {
     }, []);
 
     useLayoutEffect(() => {
-        console.log('here', dialogues, notification);
-
         if (dialogues) {
             const onPrivateMessageIn   = applyEffect(sendPrivateMessageNotificationEffect);
             const onReadMessage        = applyEffect(readPrivateMessageNotificationEffect);

diff --git a/src/pages/DialoguesPage/ui/DialoguesPage.tsx b/src/pages/DialoguesPage/ui/DialoguesPage.tsx
@@ -68,7 +68,6 @@ export const DialoguesPage: FC<DialoguesPageProps> = memo(function DialoguesPage
             const dialogue      = dialogues.find((dialogue) => dialogue.id === dialogueId);
             const dialogueTitle = dialogue.title || dialogue.user.login;
 
-            console.log('set page title to with dialogue', t.app.dialogue_page);
             setPageTitle(
                 replace(
                     t.app.dialogue_page,
@@ -78,7 +77,6 @@ export const DialoguesPage: FC<DialoguesPageProps> = memo(function DialoguesPage
                 ),
             );
         } else {
-            console.log('set page title to', t.app.dialogue_page);
             setPageTitle(t.app.dialogues_page);
         }
     }, [ dialogueId, dialogueNotSelected, dialogues, replace, setPageTitle, t.app.dialogue_page, t.app.dialogues_page ]);

diff --git a/src/shared/hooks/useDebounce/useDebounce.ts b/src/shared/hooks/useDebounce/useDebounce.ts
@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+
+
+export type DebounceCallback = () => any;
+
+export const useDebounce = function (ms: number) {
+    const timer = useRef<ReturnType<typeof setTimeout>>();
+
+    return (callback: DebounceCallback) => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(callback, ms);
+    };
+};
diff --git a/src/shared/ui-kit/box/Virtual/hooks/useVirtualScroll/useVirtualScroll.ts b/src/shared/ui-kit/box/Virtual/hooks/useVirtualScroll/useVirtualScroll.ts
@@ -99,8 +99,6 @@ export const useVirtualScroll = function (props: UseVirtualScrollProps) {
             previousScrollHeight.current = ref.scrollHeight;
 
             return () => {
-                console.log('[RETURN] RefContainerHeight', ref.scrollHeight);
-
             };
         }
     });

diff --git a/src/shared/ui-kit/input/TextInput/ui/TextInput.module.scss b/src/shared/ui-kit/input/TextInput/ui/TextInput.module.scss
@@ -71,16 +71,16 @@
         background    : var(--bg-ghost-color);
         color         : var(--bg-second-foreground-color);
 
-        &:valid {
-            border : 1px solid var(--primary-color);
-        }
-
         &:focus {
             box-shadow : 0 0 0 1px var(--primary-color), 0 5px 25px -5px var(--primary-color);
             border     : 1px solid var(--primary-color);
             background : var(--bg-main-color);
         }
 
+        &:required:valid {
+            border : 1px solid var(--primary-color);
+        }
+
         &.inputError:not(:focus) {
             border : 1px solid var(--danger-color);
 

diff --git a/src/shared/ui-kit/modal/Tooltip/ui/Tooltip.tsx b/src/shared/ui-kit/modal/Tooltip/ui/Tooltip.tsx
@@ -83,7 +83,6 @@ export const Tooltip: FC<TooltipProps> = memo(function Tooltip (props) {
     useEffect(() => {
         if (show && currentTooltipRenderState && elementRef.current && tooltipRef.current) {
             const observer = new IntersectionObserver(() => {
-                console.log('resized');
                 setPositionOffset(() => {
                     const positionDelta = getModalPosition(elementRef, tooltipRef, tooltipPosition);
                     return {

diff --git a/src/widgets/language/container/LanguagesContainer/ui/LanguagesContainer.tsx b/src/widgets/language/container/LanguagesContainer/ui/LanguagesContainer.tsx
@@ -55,7 +55,6 @@ export const LanguagesContainer: FC<LanguagesContainerProps> = memo(function Lan
 
     useLayoutEffect(() => {
         // Tempo
-        console.log('loading for ->', userId);
         getMyLanguagesEffect();
     }, [ userId ]);
 

diff --git a/src/widgets/posts/CreatePostForm/ui/CreatePostForm.tsx b/src/widgets/posts/CreatePostForm/ui/CreatePostForm.tsx
@@ -36,6 +36,7 @@ export const CreatePostForm: FC = memo(function CreatePostForm () {
                 className={ css.input }
                 errorMessage={ formState.errors.message?.message }
                 placeholder={ t.page.posts.write_new_post }
+                required
                 type="text"
                 { ...register('message', {
                     required: true,

diff --git a/src/widgets/site/search/HeaderSearch/HeaderSearch.tsx b/src/widgets/site/search/HeaderSearch/HeaderSearch.tsx
@@ -2,12 +2,6 @@ import { ComponentPropsWithoutRef, FC, memo } from 'react';
 import classNames from 'classnames';
 import css from './HeaderSearch.module.scss';
 import { useSearchParams } from 'react-router-dom';
-import {
-    useInputWithError,
-} from '@/shared/ui-kit/inputs/InputWithError/hooks/useInputWithError.ts';
-import {
-    InputWithError,
-} from '@/shared/ui-kit/inputs/InputWithError/ui/InputWithError.tsx';
 import {
     useDropdownController,
 } from '@/shared/ui-kit/modal/Dropdown/hooks/useDropdownController.ts';
@@ -16,6 +10,9 @@ import {
     SearchContainer,
 } from '@/widgets/search/container/SearchContainer/SearchContainer.tsx';
 import { useTranslation } from '@/features/i18n/hook/useTranslation.ts';
+import { TextInput } from '@/shared/ui-kit/input/TextInput/ui/TextInput.tsx';
+import { useForm } from 'react-hook-form';
+import { useDebounce } from '@/shared/hooks/useDebounce/useDebounce.ts';
 
 
 export type HeaderSearchProps =
@@ -25,6 +22,7 @@ export type HeaderSearchProps =
 export const HeaderSearch: FC<HeaderSearchProps> = memo(function HeaderSearch (props) {
     const { className, ...other }           = props;
     const [ searchParams, setSearchParams ] = useSearchParams();
+    const debounce                          = useDebounce(300);
     const dropdown                          = useDropdownController();
     const setQuery                          = (query: string) => {
         if (query) {
@@ -35,11 +33,9 @@ export const HeaderSearch: FC<HeaderSearchProps> = memo(function HeaderSearch (p
             dropdown.setOpened(false);
         }
     };
-    const search                            = useInputWithError({
-        name           : '',
-        onChangeHandler: setQuery,
-        debounce       : 300,
-    });
+    const { handleSubmit, register }        = useForm<{ search: string }>(
+        { mode: 'onChange' },
+    );
     const { t }                             = useTranslation();
 
     return (
@@ -57,12 +53,17 @@ export const HeaderSearch: FC<HeaderSearchProps> = memo(function HeaderSearch (p
                 }
             >
                 <search role="search">
-                    <InputWithError
-                        className={ classNames(css.input, {}, [ css.item ]) }
-                        containerClassName={ css.inputContainer }
-                        controller={ search }
-                        placeholder={ t.search.search_placeholder }
-                    />
+                    <form
+                        className={ css.inputContainer }
+                        onChange={ handleSubmit(({ search }) => debounce(() => setQuery(search))) }
+                    >
+                        <TextInput
+                            className={ css.input }
+                            placeholder={ t.search.search_placeholder }
+                            type="text"
+                            { ...register('search') }
+                        />
+                    </form>
                 </search>
             </Dropdown>
         </div>
-Original file line number
+Diff line change
@@ Expand Up @@
                 previousScrollHeight.current = ref.scrollHeight;
                 return () => {
-                    console.log('[RETURN] RefContainerHeight', ref.scrollHeight);
                 };
             }
         });
@@ Expand Down @@