fix: update components to use React imports consistently and handle errors without logging

Author: niktverd

src/blocks/Slider/Slider.tsx

@@ -43,6 +43,7 @@ export interface SliderProps
     initialSlide?: number;
 }
 
+// eslint-disable-next-line react-hooks/rules-of-hooks
 Swiper.use([Autoplay, A11y, Pagination]);
 
 export const SliderBlock = ({

src/blocks/SliderOld/SliderOld.tsx

@@ -1,12 +1,4 @@
-import React, {
-    Fragment,
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import * as React from 'react';
 
 import {useUniqId} from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
@@ -93,19 +85,19 @@ export const SliderOldBlock = (props: React.PropsWithChildren<SliderOldProps>) =
         initialIndex = 0,
     } = props;
 
-    const {isServer} = useContext(SSRContext);
-    const isMobile = useContext(MobileContext);
-    const [breakpoint, setBreakpoint] = useState<number>(BREAKPOINTS.xl);
+    const {isServer} = React.useContext(SSRContext);
+    const isMobile = React.useContext(MobileContext);
+    const [breakpoint, setBreakpoint] = React.useState<number>(BREAKPOINTS.xl);
     const sliderId = useUniqId();
-    const disclosedChildren = useMemo<React.ReactElement[]>(
+    const disclosedChildren = React.useMemo<React.ReactElement[]>(
         () => discloseAllNestedChildren(children as React.ReactElement[], sliderId),
         [children, sliderId],
     );
     const childrenCount = disclosedChildren.length;
     const isAutoplayEnabled = autoplaySpeed !== undefined && autoplaySpeed > 0;
-    const isUserInteractionRef = useRef(false);
+    const isUserInteractionRef = React.useRef(false);
 
-    const [slidesToShow] = useState<SliderBreakpointParams>(
+    const [slidesToShow] = React.useState<SliderBreakpointParams>(
         getSlidesToShowWithDefaults({
             contentLength: childrenCount,
             breakpoints: props.slidesToShow,
@@ -118,11 +110,11 @@ export const SliderOldBlock = (props: React.PropsWithChildren<SliderOldProps>) =
     const slidesToShowCount = getSlidesToShowCount(slidesToShow);
     const slidesCountByBreakpoint = getSlidesCountByBreakpoint(breakpoint, slidesToShow);
 
-    const [currentIndex, setCurrentIndex] = useState<number>(initialIndex);
-    const [childStyles, setChildStyles] = useState<Object>({});
-    const [slider, setSlider] = useState<SlickSlider>();
-    const prevIndexRef = useRef<number>(0);
-    const autoplayTimeId = useRef<Timeout>();
+    const [currentIndex, setCurrentIndex] = React.useState<number>(initialIndex);
+    const [childStyles, setChildStyles] = React.useState<Object>({});
+    const [slider, setSlider] = React.useState<SlickSlider>();
+    const prevIndexRef = React.useRef<number>(0);
+    const autoplayTimeId = React.useRef<Timeout>();
     const {hasFocus, unsetFocus} = useFocus(slider?.innerSlider?.list);
 
     const asUserInteraction =
@@ -133,7 +125,7 @@ export const SliderOldBlock = (props: React.PropsWithChildren<SliderOldProps>) =
         };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const onResize = useCallback(
+    const onResize = React.useCallback(
         debounce(() => {
             if (!slider) {
                 return;
@@ -151,7 +143,7 @@ export const SliderOldBlock = (props: React.PropsWithChildren<SliderOldProps>) =
         [slider, breakpoint],
     );
 
-    const scrollLastSlide = useCallback(
+    const scrollLastSlide = React.useCallback(
         (current: number) => {
             const lastSlide = childrenCount - slidesToShowCount;
 
@@ -173,15 +165,15 @@ export const SliderOldBlock = (props: React.PropsWithChildren<SliderOldProps>) =
         [autoplaySpeed, childrenCount, isAutoplayEnabled, slider, slidesToShowCount],
     );
 
-    useEffect(() => {
+    React.useEffect(() => {
         if (hasFocus && autoplayTimeId.current) {
             clearTimeout(autoplayTimeId.current);
         } else {
             scrollLastSlide(currentIndex);
         }
     }, [currentIndex, hasFocus, scrollLastSlide]);
 
-    useEffect(() => {
+    React.useEffect(() => {
         onResize();
 
         window.addEventListener('resize', onResize, {passive: true});
@@ -205,7 +197,7 @@ export const SliderOldBlock = (props: React.PropsWithChildren<SliderOldProps>) =
         }
     };
 
-    const onBeforeChange = useCallback(
+    const onBeforeChange = React.useCallback(
         (current: number, next: number) => {
             if (handleBeforeChange) {
                 handleBeforeChange(current, next);
@@ -218,7 +210,7 @@ export const SliderOldBlock = (props: React.PropsWithChildren<SliderOldProps>) =
         [handleBeforeChange],
     );
 
-    const onAfterChange = useCallback(
+    const onAfterChange = React.useCallback(
         (current: number) => {
             if (handleAfterChange) {
                 handleAfterChange(current);
@@ -289,7 +281,7 @@ export const SliderOldBlock = (props: React.PropsWithChildren<SliderOldProps>) =
     const renderAccessibleBar = (index: number) => {
         return (
             // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
-            <Fragment key={`${index}-accessible-bar`}>
+            <React.Fragment key={`${index}-accessible-bar`}>
                 {slidesCountByBreakpoint > 0 && (
                     <li
                         className={b('accessible-bar')}
@@ -306,7 +298,7 @@ export const SliderOldBlock = (props: React.PropsWithChildren<SliderOldProps>) =
                         {...getRovingItemProps(currentIndex + 1)}
                     />
                 )}
-            </Fragment>
+            </React.Fragment>
         );
     };
 

src/blocks/SliderOld/utils.ts

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import * as React from 'react';
 
 import pickBy from 'lodash/pickBy';
 
@@ -113,8 +113,8 @@ export function useRovingTabIndex(props: {
     uniqId: string;
 }) {
     const {itemCount, activeIndex, firstIndex = 0, uniqId} = props;
-    const [currentIndex, setCurrentIndex] = useState(firstIndex);
-    const hasFocusRef = useRef(false);
+    const [currentIndex, setCurrentIndex] = React.useState(firstIndex);
+    const hasFocusRef = React.useRef(false);
     const lastIndex = itemCount + firstIndex - 1;
 
     const getRovingItemProps = (
@@ -130,17 +130,17 @@ export function useRovingTabIndex(props: {
         };
     };
 
-    useEffect(() => {
+    React.useEffect(() => {
         if (!hasFocusRef.current) {
             return;
         }
         document.getElementById(getRovingListItemId(uniqId, currentIndex))?.focus();
     }, [activeIndex, currentIndex, uniqId]);
 
     const setNextIndex = () =>
-        setCurrentIndex((prev) => (prev >= lastIndex ? firstIndex : prev + 1));
+        setCurrentIndex((prev: number) => (prev >= lastIndex ? firstIndex : prev + 1));
     const setPrevIndex = () =>
-        setCurrentIndex((prev) => (prev <= firstIndex ? lastIndex : prev - 1));
+        setCurrentIndex((prev: number) => (prev <= firstIndex ? lastIndex : prev - 1));
 
     const onRovingListKeyDown: React.KeyboardEventHandler<HTMLElement> = (e) => {
         const key = e.key.toLowerCase();

src/components/VideoBlock/VideoBlock.tsx

@@ -110,7 +110,7 @@ const VideoBlock = (props: VideoBlockProps) => {
                 });
 
                 return url.href;
-            } catch (e) {
+            } catch {
                 return src;
             }
         }

src/components/YandexForm/YandexForm.tsx

@@ -118,7 +118,7 @@ const YandexForm = (props: YandexFormProps) => {
                     // to catch this event and handle analytics redirectUrl is added to condition
                     handleSubmit();
                 }
-            } catch (error) {
+            } catch {
                 return;
             }
         },

src/containers/Loadable/Loadable.tsx

@@ -57,7 +57,7 @@ const Loadable = (props: LoadableComponentsProps) => {
                 error = false;
 
                 setDataState({data, loading: false, error});
-            } catch (ex) {
+            } catch {
                 error = true;
                 setDataState({loading: false, error});
             }

src/editor/data/index.ts

@@ -25,7 +25,7 @@ const getBlockPreview = (blockType: BlockType): PreviewComponent => {
         }
 
         return DefaultPreview;
-    } catch (err) {
+    } catch {
         /*eslint-disable no-console */
         console.warn(`Preview image for ${blockType} not found`);
         return DefaultPreview;

src/editor/widget/utils.ts

@@ -3,7 +3,7 @@ export const getHostStyles = () => {
         .map((styleSheet) => {
             try {
                 return [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
-            } catch (e) {
+            } catch {
                 //eslint-disable-next-line no-console
                 console.log(`Access to stylesheet  ${styleSheet.href} is denied. Ignoring...`);
 

src/navigation/components/NavigationItem/components/GithubButton/GithubButton.tsx

@@ -38,7 +38,7 @@ export const GithubButton = ({
                                 if (githubButton.parentNode) {
                                     githubButton.parentNode.replaceChild(el, githubButton);
                                 }
-                            } catch (_) {}
+                            } catch {}
                         });
                     }
                 });

src/utils/blocks.ts

@@ -1,4 +1,4 @@
-import {ReactNode} from 'react';
+import * as React from 'react';
 
 import camelCase from 'lodash/camelCase';
 import flatten from 'lodash/flatten';
@@ -64,7 +64,7 @@ export function getHeaderTag(size: TextSize) {
 type SelectVariantArgs = {
     block?: boolean;
     content?: string;
-    children?: ReactNode;
+    children?: React.ReactNode;
     tagName?: TagName;
 };