refactored react imports

src/utils/context/CommentContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext } from 'react';
+import { createContext, FC, useContext } from 'react';
 
 import { IComment, IFile } from '~/types';
 

src/utils/context/LabContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext } from 'react';
+import { createContext, FC, useContext } from 'react';
 
 import { IFlowNode, ITag } from '~/types';
 import { ILabNode, LabNodesSort } from '~/types/lab';
@@ -36,8 +36,9 @@ const defaultValues: LabContextProps = {
 
 const LabContext = createContext<LabContextProps>(defaultValues);
 
-export const LabContextProvider: FC<LabContextProps> = ({ children, ...rest }) => (
-  <LabContext.Provider value={rest}>{children}</LabContext.Provider>
-);
+export const LabContextProvider: FC<LabContextProps> = ({
+  children,
+  ...rest
+}) => <LabContext.Provider value={rest}>{children}</LabContext.Provider>;
 
 export const useLabContext = () => useContext(LabContext);

src/utils/context/NodeContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext } from 'react';
+import { createContext, FC, useContext } from 'react';
 
 import { EMPTY_NODE } from '~/constants/node';
 import { INode, NodeBackLink } from '~/types';

src/utils/context/NodeRelatedContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext } from 'react';
+import { createContext, FC, useContext } from 'react';
 
 import { INodeRelated } from '~/types/node';
 
@@ -12,8 +12,14 @@ const NodeRelatedContext = createContext<NodeRelatedProviderProps>({
   isLoading: false,
 });
 
-export const NodeRelatedContextProvider: FC<NodeRelatedProviderProps> = ({ children, ...rest }) => (
-  <NodeRelatedContext.Provider value={rest}>{children}</NodeRelatedContext.Provider>
+export const NodeRelatedContextProvider: FC<NodeRelatedProviderProps> = ({
+  children,
+  ...rest
+}) => (
+  <NodeRelatedContext.Provider value={rest}>
+    {children}
+  </NodeRelatedContext.Provider>
 );
 
-export const useNodeRelatedContext = () => useContext<NodeRelatedProviderProps>(NodeRelatedContext);
+export const useNodeRelatedContext = () =>
+  useContext<NodeRelatedProviderProps>(NodeRelatedContext);

src/utils/context/StoreContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext } from 'react';
+import { createContext, FC, useContext } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
@@ -6,10 +6,14 @@ import { Store } from '~/store';
 
 export const StoreContext = createContext<Store>(new Store());
 
-export const StoreContextProvider: FC<{ store: Store }> = observer(({ children, store }) => {
-  if (!store.isHydrated) return null;
+export const StoreContextProvider: FC<{ store: Store }> = observer(
+  ({ children, store }) => {
+    if (!store.isHydrated) return null;
 
-  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-});
+    return (
+      <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+    );
+  },
+);
 
 export const useStore = () => useContext(StoreContext);

src/utils/context/TagsContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext } from 'react';
+import { createContext, FC, useContext } from 'react';
 
 import { ITag } from '~/types';
 
@@ -22,8 +22,13 @@ const TagContext = createContext<TagContextProps>({
   onTagDelete: () => {},
 });
 
-export const TagsContextProvider: FC<TagContextProps> = ({ children, ...contextValue }) => {
-  return <TagContext.Provider value={contextValue}>{children}</TagContext.Provider>;
+export const TagsContextProvider: FC<TagContextProps> = ({
+  children,
+  ...contextValue
+}) => {
+  return (
+    <TagContext.Provider value={contextValue}>{children}</TagContext.Provider>
+  );
 };
 
 export const useTagContext = () => useContext(TagContext);

src/utils/context/UploaderContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext } from 'react';
+import { createContext, FC, useContext } from 'react';
 
 import { EMPTY_FILE } from '~/constants/uploads';
 import { useUploader } from '~/hooks/data/useUploader';

src/utils/context/UserContextProvider.tsx

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

src/utils/providers/AudioPlayerProvider.tsx

@@ -1,4 +1,12 @@
-import React, { createContext, FC, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import {
+  createContext,
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { PlayerState } from '~/constants/player';
 import { IFile } from '~/types';
@@ -35,10 +43,16 @@ const PlayerContext = createContext<AudioPlayerProps>({
 });
 
 export const AudioPlayerProvider: FC = ({ children }) => {
-  const audio = useRef(typeof Audio !== 'undefined' ? new Audio() : undefined).current;
+  const audio = useRef(
+    typeof Audio !== 'undefined' ? new Audio() : undefined,
+  ).current;
   const [status, setStatus] = useState(PlayerState.UNSET);
   const [file, setFile] = useState<IFile | undefined>();
-  const [progress, setProgress] = useState<PlayerProgress>({ progress: 0, current: 0, total: 0 });
+  const [progress, setProgress] = useState<PlayerProgress>({
+    progress: 0,
+    current: 0,
+    total: 0,
+  });
 
   /** controls */
   const play = async () => audio?.play();
@@ -58,14 +72,14 @@ export const AudioPlayerProvider: FC = ({ children }) => {
 
       audio.currentTime = time;
     },
-    [audio]
+    [audio],
   );
 
   const toPercent = useCallback(
     (percent: number) => {
       toTime((progress.total * percent) / 100);
     },
-    [progress, toTime]
+    [progress, toTime],
   );
 
   /** handles progress update */
@@ -109,12 +123,26 @@ export const AudioPlayerProvider: FC = ({ children }) => {
   const metadata: IFile['metadata'] = path(['metadata'], file);
   const title =
     (metadata &&
-      (metadata.title || [metadata.id3artist, metadata.id3title].filter(el => !!el).join(' - '))) ||
+      (metadata.title ||
+        [metadata.id3artist, metadata.id3title]
+          .filter((el) => !!el)
+          .join(' - '))) ||
     '';
 
   return (
     <PlayerContext.Provider
-      value={{ file, setFile, title, progress, toTime, toPercent, play, pause, stop, status }}
+      value={{
+        file,
+        setFile,
+        title,
+        progress,
+        toTime,
+        toPercent,
+        play,
+        pause,
+        stop,
+        status,
+      }}
     >
       {children}
     </PlayerContext.Provider>

src/utils/providers/FlowProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext, useMemo } from 'react';
+import { createContext, FC, useContext, useMemo } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
@@ -32,27 +32,36 @@ export const FlowContext = createContext<FlowContextProps>({
   onChangeCellView: () => {},
 });
 
-export const FlowProvider: FC<FlowProviderProps> = observer(({ fallbackData, children }) => {
-  const flow = useFlow();
+export const FlowProvider: FC<FlowProviderProps> = observer(
+  ({ fallbackData, children }) => {
+    const flow = useFlow();
+
+    const value = useMemo<FlowContextProps>(() => {
+      if (!flow.nodes?.length && fallbackData) {
+        return {
+          ...flow,
+          heroes: fallbackData.heroes || [],
+          updates: fallbackData.updated || [],
+          recent: fallbackData.recent || [],
+          nodes: uniq([
+            ...(fallbackData.before || []),
+            ...(fallbackData.after || []),
+          ]),
+        };
+      }
 
-  const value = useMemo<FlowContextProps>(() => {
-    if (!flow.nodes?.length && fallbackData) {
       return {
         ...flow,
-        heroes: fallbackData.heroes || [],
-        updates: fallbackData.updated || [],
-        recent: fallbackData.recent || [],
-        nodes: uniq([...(fallbackData.before || []), ...(fallbackData.after || [])]),
+        heroes: fallbackData?.heroes?.length
+          ? fallbackData.heroes
+          : flow.heroes,
       };
-    }
+    }, [flow, fallbackData]);
 
-    return {
-      ...flow,
-      heroes: fallbackData?.heroes?.length ? fallbackData.heroes : flow.heroes,
-    };
-  }, [flow, fallbackData]);
-
-  return <FlowContext.Provider value={value}>{children}</FlowContext.Provider>;
-});
+    return (
+      <FlowContext.Provider value={value}>{children}</FlowContext.Provider>
+    );
+  },
+);
 
 export const useFlowContext = () => useContext(FlowContext);

src/utils/providers/LabProvider.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { useLab } from '~/hooks/lab/useLab';
 import { LabContextProvider } from '~/utils/context/LabContextProvider';

src/utils/providers/MetadataProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext, useEffect } from 'react';
+import { createContext, FC, useContext, useEffect } from 'react';
 
 import { observer, useLocalObservable } from 'mobx-react-lite';
 
@@ -26,7 +26,7 @@ const fetchItems = async (ids: string[]) => {
 
 export const MetadataProvider: FC = observer(({ children }) => {
   const { metadata, enqueue, queue, pending, watch } = useLocalObservable(
-    () => new MetadataStore(fetchItems)
+    () => new MetadataStore(fetchItems),
   );
 
   useEffect(watch, [watch]);

src/utils/providers/NodeRelatedProvider.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { useGetNodeRelated } from '~/hooks/node/useGetNodeRelated';
 import { INode, ITag } from '~/types';
@@ -15,11 +15,18 @@ const defaultValue: INodeRelated = {
   similar: [],
 };
 
-const NodeRelatedProvider: FC<NodeRelatedProviderProps> = ({ id, children, tags }) => {
+const NodeRelatedProvider: FC<NodeRelatedProviderProps> = ({
+  id,
+  children,
+  tags,
+}) => {
   const { related, isLoading } = useGetNodeRelated(id);
 
   return (
-    <NodeRelatedContextProvider related={related || defaultValue} isLoading={isLoading}>
+    <NodeRelatedContextProvider
+      related={related || defaultValue}
+      isLoading={isLoading}
+    >
       {children}
     </NodeRelatedContextProvider>
   );

src/utils/providers/SWRConfigProvider.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { SWRConfig, SWRConfiguration } from 'swr';
 

src/utils/providers/SearchProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, FC, useContext } from 'react';
+import { createContext, FC, useContext } from 'react';
 
 import { useSearch } from '~/hooks/search/useSearch';
 import { INode } from '~/types';
@@ -22,7 +22,8 @@ export const SearchContext = createContext<SearchContextProps>({
 });
 
 export const SearchProvider: FC = ({ children }) => {
-  const { results, searchText, isLoading, loadMore, setSearchText, hasMore } = useSearch();
+  const { results, searchText, isLoading, loadMore, setSearchText, hasMore } =
+    useSearch();
 
   return (
     <SearchContext.Provider

src/utils/providers/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   FC,
   useCallback,

src/utils/toast/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 import toast, { ToastOptions } from 'react-hot-toast';
 
@@ -14,21 +12,30 @@ const defaultOptions: ToastOptions = {
 };
 
 export const showToastError = (message: string) =>
-  toast.error(t => <span onClick={() => toast.dismiss(t.id)}>{message}</span>, {
-    ...defaultOptions,
-    className: classNames(styles.toast, styles.error),
-  });
+  toast.error(
+    (t) => <span onClick={() => toast.dismiss(t.id)}>{message}</span>,
+    {
+      ...defaultOptions,
+      className: classNames(styles.toast, styles.error),
+    },
+  );
 
 export const showToastSuccess = (message: string) =>
-  toast.success(t => <span onClick={() => toast.dismiss(t.id)}>{message}</span>, {
-    ...defaultOptions,
-    className: classNames(styles.toast, styles.success),
-  });
+  toast.success(
+    (t) => <span onClick={() => toast.dismiss(t.id)}>{message}</span>,
+    {
+      ...defaultOptions,
+      className: classNames(styles.toast, styles.success),
+    },
+  );
 
 export const showToastInfo = (message: string) =>
-  toast.success(t => <span onClick={() => toast.dismiss(t.id)}>{message}</span>, {
-    ...defaultOptions,
-    className: classNames(styles.toast, styles.info),
-  });
+  toast.success(
+    (t) => <span onClick={() => toast.dismiss(t.id)}>{message}</span>,
+    {
+      ...defaultOptions,
+      className: classNames(styles.toast, styles.info),
+    },
+  );
 
 export const hideToast = (id: string) => toast.dismiss(id);

src/utils/types.ts

@@ -1,23 +1,30 @@
-import React from 'react';
+import {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  HTMLAttributes,
+  ImgHTMLAttributes,
+  SVGProps as ReactSVGProps,
+} from 'react';
 
-export type DivProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
+export type DivProps = DetailedHTMLProps<
+  HTMLAttributes<HTMLDivElement>,
   HTMLDivElement
 >;
 
-export type SVGProps = React.SVGProps<SVGSVGElement>;
+export type SVGProps = ReactSVGProps<SVGSVGElement>;
 
-export type IMGProps = React.DetailedHTMLProps<
-  React.ImgHTMLAttributes<HTMLImageElement>,
+export type IMGProps = DetailedHTMLProps<
+  ImgHTMLAttributes<HTMLImageElement>,
   HTMLImageElement
 >;
 
-export type ButtonProps = React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
+export type ButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 >;
 
-export type LinkProps = React.DetailedHTMLProps<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+export type LinkProps = DetailedHTMLProps<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
   HTMLAnchorElement
 >;