refactored react imports

src/components/common/Anchor/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import NextLink from 'next/link';
 import { Link } from 'react-router-dom';

src/components/common/ArcProgress/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { describeArc } from '~/utils/dom';
 
@@ -11,6 +11,14 @@ interface IProps {
 
 export const ArcProgress: FC<IProps> = ({ size, progress = 0 }) => (
   <svg className={styles.icon} width={size} height={size}>
-    <path d={describeArc(size / 2, size / 2, size / 2 - 2, 360 * (1 - progress), 360)} />
+    <path
+      d={describeArc(
+        size / 2,
+        size / 2,
+        size / 2 - 2,
+        360 * (1 - progress),
+        360,
+      )}
+    />
   </svg>
 );

src/components/common/Authorized/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 

src/components/common/Avatar/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/BetterScrollDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEventHandler, useEffect, useRef } from 'react';
+import { FC, MouseEventHandler, ReactChild, useEffect, useRef } from 'react';
 
 import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
 
@@ -8,7 +8,7 @@ import { LoaderCircle } from '~/components/common/LoaderCircle';
 import styles from './styles.module.scss';
 
 interface IProps {
-  children: React.ReactChild;
+  children: ReactChild;
   header?: JSX.Element;
   footer?: JSX.Element;
   backdrop?: JSX.Element;

src/components/common/BlurWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, { AllHTMLAttributes, FC } from 'react';
+import { AllHTMLAttributes, FC } from 'react';
 
 import classNames from 'classnames';
 
@@ -7,5 +7,7 @@ import styles from './styles.module.scss';
 type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
 
 export const BlurWrapper: FC<IProps> = ({ children, is_blurred }) => (
-  <div className={classNames(styles.blur, { [styles.is_blurred]: is_blurred })}>{children}</div>
+  <div className={classNames(styles.blur, { [styles.is_blurred]: is_blurred })}>
+    {children}
+  </div>
 );

src/components/common/Card/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/CellGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/Columns/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 
 import Masonry from 'react-masonry-css';
 

src/components/common/CoverBackdrop/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/DialogTitle/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 import styles from './styles.module.scss';
 
@@ -6,6 +6,8 @@ interface IProps {
   children: ReactNode;
 }
 
-const DialogTitle: FC<IProps> = ({ children }) => <h2 className={styles.title}>{children}</h2>;
+const DialogTitle: FC<IProps> = ({ children }) => (
+  <h2 className={styles.title}>{children}</h2>
+);
 
 export { DialogTitle };

src/components/common/DropHereIcon/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { SVGProps } from '~/utils/types';
 

src/components/common/Filler/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement>;
+type IProps = HTMLAttributes<HTMLDivElement>;
 
 export const Filler: FC<IProps> = ({ className = '', ...props }) => (
   <div className={classNames(styles.filler, className)} {...props} />

src/components/common/Grid/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement> & {
+type IProps = HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
   vertical?: boolean;
   columns?: string;
@@ -41,7 +41,9 @@ const Grid: FC<IProps> = ({
       gridTemplateColumns: square
         ? `repeat(auto-fill, ${(columns !== 'auto' && columns) || size})`
         : columns,
-      gridTemplateRows: square ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})` : rows,
+      gridTemplateRows: square
+        ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})`
+        : rows,
       gridAutoRows: rows,
       gridAutoColumns: columns,
       gridRowGap: gap,

src/components/common/Group/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement> & {
+type IProps = HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
   top?: boolean;
   bottom?: boolean;
@@ -33,7 +33,7 @@ const Group: FC<IProps> = ({
         [styles.wrap]: wrap,
         [styles.seamless]: seamless,
       },
-      className
+      className,
     )}
     {...props}
   >

src/components/common/Hoverable/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/Icon/index.tsx

@@ -1,15 +1,13 @@
-import React, { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 
 import { IIcon } from '~/types';
 
-type IProps = React.SVGAttributes<SVGElement> & {
+type IProps = SVGAttributes<SVGElement> & {
   size?: number;
   icon: IIcon;
 };
 
-export const Icon: FC<IProps> = ({
-  size = 20, icon, style, ...props
-}) => (
+export const Icon: FC<IProps> = ({ size = 20, icon, style, ...props }) => (
   <svg
     width={size}
     height={size}

src/components/common/ImageLoadingWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   CSSProperties,
   ReactNode,
   forwardRef,

src/components/common/ImageWithSSRLoad/index.tsx

@@ -1,7 +1,16 @@
-import React, { useEffect, useRef, VFC } from 'react';
+import {
+  DetailedHTMLProps,
+  ImgHTMLAttributes,
+  useEffect,
+  useRef,
+  VFC,
+} from 'react';
 
 interface ImgProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+  extends DetailedHTMLProps<
+    ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  > {
   onLoad?: () => void;
 }
 

src/components/common/InfiniteScroll/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
+import { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
 
 import styles from './styles.module.scss';
 
@@ -8,7 +8,13 @@ interface IProps extends HTMLAttributes<HTMLDivElement> {
   loadMore: () => void;
 }
 
-const InfiniteScroll: FC<IProps> = ({ children, hasMore, scrollReactPx, loadMore, ...props }) => {
+const InfiniteScroll: FC<IProps> = ({
+  children,
+  hasMore,
+  scrollReactPx,
+  loadMore,
+  ...props
+}) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const onScrollEnd = useCallback(
@@ -16,7 +22,7 @@ const InfiniteScroll: FC<IProps> = ({ children, hasMore, scrollReactPx, loadMore
       if (!hasMore || !entries[0].isIntersecting) return;
       loadMore();
     },
-    [hasMore, loadMore]
+    [hasMore, loadMore],
   );
 
   useEffect(() => {

src/components/common/InlineUsername/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { useColorFromString } from '~/hooks/color/useColorFromString';
 

src/components/common/LoaderCircle/components/LoaderCircleInner/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, SVGAttributes } from 'react';
+import { FC, SVGAttributes } from 'react';
 
 import classNames from 'classnames';
 
@@ -12,7 +12,12 @@ interface IProps extends SVGAttributes<SVGElement> {
 }
 
 const LoaderCircleInner: FC<IProps> = ({ size, className, ...props }) => (
-  <svg className={classNames(styles.icon, className)} width={size} height={size} {...props}>
+  <svg
+    className={classNames(styles.icon, className)}
+    width={size}
+    height={size}
+    {...props}
+  >
     <path d={describeArc(size / 2, size / 2, size / 2, 0, 90)} />
     <path d={describeArc(size / 2, size / 2, size / 2, 180, 270)} />
   </svg>

src/components/common/LoaderCircle/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/LoaderScreen/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/LoadingProgress/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, VFC } from 'react';
+import { Fragment, VFC } from 'react';
 
 import { useSSRLoadingIndicator } from '~/hooks/dom/useSSRLoadingIndicator';
 

src/components/common/Markdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { DetailedHTMLProps, VFC, HTMLAttributes } from 'react';
+import { DetailedHTMLProps, VFC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/ModalWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEventHandler } from 'react';
+import { FC, MouseEventHandler } from 'react';
 
 import ReactDOM from 'react-dom';
 
@@ -14,7 +14,7 @@ const ModalWrapper: FC<IProps> = ({ children, onOverlayClick }) => {
       <div className={styles.overlay} onClick={onOverlayClick} />
       <div className={styles.content}>{children}</div>
     </div>,
-    document.body
+    document.body,
   );
 };
 

src/components/common/Padder/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement> & {
+type IProps = HTMLAttributes<HTMLDivElement> & {
   padding?: number;
   vertical?: boolean;
   horizontal?: boolean;

src/components/common/PageTitle/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import Head from 'next/head';
 

src/components/common/Panel/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 
@@ -9,8 +9,17 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   stretchy?: boolean;
 };
 
-const Panel: FC<IProps> = ({ className, children, seamless, stretchy, ...props }) => (
-  <div className={classNames(styles.panel, className, { seamless, stretchy })} {...props}>
+const Panel: FC<IProps> = ({
+  className,
+  children,
+  seamless,
+  stretchy,
+  ...props
+}) => (
+  <div
+    className={classNames(styles.panel, className, { seamless, stretchy })}
+    {...props}
+  >
     {children}
   </div>
 );

src/components/common/Pressable/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/ScrollHelperBottom/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import { VFC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/Square/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/StatsRow/index.tsx

@@ -1,15 +1,24 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Placeholder } from '~/components/placeholders/Placeholder';
 
 import styles from './styles.module.scss';
 
-const StatsRow: FC<{ isLoading: boolean; label: string }> = ({ isLoading, label, children }) => (
+const StatsRow: FC<{ isLoading: boolean; label: string }> = ({
+  isLoading,
+  label,
+  children,
+}) => (
   <li className={styles.row}>
     {isLoading ? (
       <>
         <Placeholder active={isLoading} loading className={styles.label} />
-        <Placeholder active={isLoading} loading className={styles.value} width="24px" />
+        <Placeholder
+          active={isLoading}
+          loading
+          className={styles.value}
+          width="24px"
+        />
       </>
     ) : (
       <>

src/components/common/Sticky/index.tsx

@@ -1,4 +1,4 @@
-import React, { DetailsHTMLAttributes, FC } from 'react';
+import { DetailsHTMLAttributes, FC } from 'react';
 
 import StickyBox from 'react-sticky-box';
 

src/components/common/SubTitle/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/common/Superpower/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 

src/components/common/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext, useMemo, useState, VFC } from 'react';
+import { createContext, FC, useContext, useMemo, useState, VFC } from 'react';
 
 import classNames from 'classnames';
 
@@ -20,7 +20,9 @@ const HorizontalList: VFC<TabProps> = ({ items }) => {
     <div className={styles.tabs}>
       {items.map((it, index) => (
         <div
-          className={classNames(styles.tab, { [styles.active]: activeTab === index })}
+          className={classNames(styles.tab, {
+            [styles.active]: activeTab === index,
+          })}
           onClick={() => setActiveTab(index)}
           key={it}
         >
@@ -38,20 +40,27 @@ const Content: FC<any> = ({ children }) => {
       return [children];
     }
 
-    return children.filter(it => it);
+    return children.filter((it) => it);
   }, [children]);
 
-  if (Array.isArray(notEmptyChildren) && notEmptyChildren.length - 1 < activeTab) {
+  if (
+    Array.isArray(notEmptyChildren) &&
+    notEmptyChildren.length - 1 < activeTab
+  ) {
     return notEmptyChildren[notEmptyChildren.length - 1];
   }
 
   return notEmptyChildren[activeTab];
 };
 
-const Tabs = function({ children }) {
+const Tabs = function ({ children }) {
   const [activeTab, setActiveTab] = useState(0);
 
-  return <TabContext.Provider value={{ activeTab, setActiveTab }}>{children}</TabContext.Provider>;
+  return (
+    <TabContext.Provider value={{ activeTab, setActiveTab }}>
+      {children}
+    </TabContext.Provider>
+  );
 };
 
 Tabs.Horizontal = HorizontalList;

src/components/common/TagField/index.tsx

@@ -1,9 +1,11 @@
-import React, { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import styles from './styles.module.scss';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {};
 
-const TagField: FC<IProps> = ({ children }) => <div className={styles.wrap}>{children}</div>;
+const TagField: FC<IProps> = ({ children }) => (
+  <div className={styles.wrap}>{children}</div>
+);
 
 export { TagField };

src/components/common/Zone/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';