eslint auto-fix

craco.config.js

@@ -13,6 +13,18 @@ module.exports = {
   eslint: {
     enable: false,
     mode: 'file',
+    rules: {
+      'sort-imports': [
+        'error',
+        {
+          ignoreCase: false,
+          ignoreDeclarationSort: false,
+          ignoreMemberSort: false,
+          memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+          allowSeparatedGroups: false,
+        },
+      ],
+    },
   },
   jest: {
     setupTestFrameworkScriptFile: '<rootDir>/src/setupTests.js',

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -20,7 +20,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
       event.preventDefault();
       wrapTextInsideInput(element, '**', '**', handler);
     },
-    [wrap, handler]
+    [element, handler]
   );
 
   const wrapItalic = useCallback(
@@ -28,7 +28,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
       event.preventDefault();
       wrapTextInsideInput(element, '*', '*', handler);
     },
-    [wrap, handler]
+    [element, handler]
   );
 
   const onKeyPress = useCallback(

src/components/containers/InfiniteScroll/index.tsx

@@ -29,7 +29,7 @@ const InfiniteScroll: FC<IProps> = ({ children, hasMore, scrollReactPx, loadMore
     observer.observe(ref.current);
 
     return () => observer.disconnect();
-  }, [ref.current, onScrollEnd]);
+  }, [onScrollEnd]);
 
   return (
     <div {...props}>

src/components/editors/EditorUploadButton/index.tsx

@@ -34,7 +34,7 @@ const EditorUploadButton: FC<IProps> = ({
 
       uploadFiles(files);
     },
-    [uploadFiles]
+    [type, uploadFiles]
   );
 
   const color = values.is_promoted ? 'primary' : 'lab';

src/components/flow/CellShade/index.tsx

@@ -21,7 +21,7 @@ const CellShade: FC<Props> = ({ color, size = 50, ...rest }) => {
 
     return `linear-gradient(7deg, ${normalized} ${size}px, ${transparentize(normalized, 1)} ${size *
       5}px)`;
-  }, [color]);
+  }, [color, size]);
 
   return (
     <div {...rest} className={classNames(rest.className, styles.shade)} style={{ background }} />

src/components/flow/FlowHero/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { IFlowState } from '~/redux/flow/reducer';
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 import { getURL } from '~/utils/dom';
-import { withRouter, RouteComponentProps, useHistory } from 'react-router';
+import { RouteComponentProps, useHistory, withRouter } from 'react-router';
-import { URLS, PRESETS } from '~/constants/urls';
+import { PRESETS, URLS } from '~/constants/urls';
 import { Icon } from '~/components/input/Icon';
 import { INode } from '~/redux/types';
 
@@ -32,7 +32,7 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes }) => {
 
   const title = useMemo(() => {
     return loaded[current]?.title || '';
-  }, [loaded, current, heroes]);
+  }, [loaded, current]);
 
   const onNext = useCallback(() => {
     if (heroes.length > limit) setLimit(limit + 1);
@@ -45,16 +45,16 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes }) => {
 
   const goToNode = useCallback(() => {
     history.push(URLS.NODE_URL(loaded[current].id));
-  }, [current, loaded]);
+  }, [current, history, loaded]);
 
   useEffect(() => {
     timer.current = setTimeout(onNext, 5000);
     return () => clearTimeout(timer.current);
-  }, [current, timer.current]);
+  }, [current, onNext]);
 
   useEffect(() => {
     if (loaded.length === 1) onNext();
-  }, [loaded]);
+  }, [loaded, onNext]);
 
   return (
     <div className={styles.wrap}>

src/components/flow/FlowStamp/index.tsx

@@ -61,7 +61,7 @@ const FlowStamp: FC<IProps> = ({
       ) : (
         <Icon icon="search" size={24} className={styles.search_icon} />
       ),
-    [searchText]
+    [onClearSearch, searchText]
   );
 
   return (

src/components/input/Button/index.tsx

@@ -48,7 +48,7 @@ const Button: FC<IButtonProps> = memo(
           has_icon_right: !!iconRight,
           round,
         }),
-      [round, disabled, className, stretchy, iconLeft, iconRight, size, color]
+      [className, size, color, disabled, stretchy, iconLeft, iconRight, title, children, iconOnly, round]
     );
 
     return (

src/components/lab/LabBottomPanel/index.tsx

@@ -20,7 +20,7 @@ type Props = {
 
 const LabBottomPanel: FC<Props> = ({ node, hasNewComments, commentCount, isLoading }) => {
   const history = useHistory();
-  const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [node.id]);
+  const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [history, node.id]);
 
   return (
     <Group horizontal className={styles.wrap} onClick={onClick}>

src/components/lab/LabText/index.tsx

@@ -9,7 +9,7 @@ import { Paragraph } from '~/components/placeholders/Paragraph';
 
 const LabText: FC<INodeComponentProps> = ({ node, isLoading }) => {
   const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [
-    node.blocks,
+    node,
   ]);
 
   const onClick = useGotoNode(node.id);

src/components/main/Header/index.tsx

@@ -62,7 +62,7 @@ const HeaderUnconnected: FC<IProps> = memo(
 
     useEffect(() => {
       onScroll();
-    }, []);
+    }, [onScroll]);
 
     useEffect(() => {
       window.addEventListener('scroll', onScroll);
@@ -74,7 +74,7 @@ const HeaderUnconnected: FC<IProps> = memo(
         is_user &&
         boris_commented_at &&
         (!last_seen_boris || isBefore(new Date(last_seen_boris), new Date(boris_commented_at))),
-      [boris_commented_at, last_seen_boris]
+      [boris_commented_at, is_user, last_seen_boris]
     );
 
     const hasLabUpdates = useMemo(() => labUpdates.length > 0, [labUpdates]);

src/components/main/Notifications/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState, useCallback, useEffect } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { Icon } from '~/components/input/Icon';
 import styles from './styles.module.scss';
 import { connect } from 'react-redux';
@@ -7,7 +7,7 @@ import { pick } from 'ramda';
 import classNames from 'classnames';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { NotificationBubble } from '../../notifications/NotificationBubble';
-import { INotification, IMessageNotification } from '~/redux/types';
+import { IMessageNotification, INotification } from '~/redux/types';
 
 const mapStateToProps = state => ({
   user: pick(['last_seen_messages'], selectAuthUser(state)),
@@ -62,7 +62,7 @@ const NotificationsUnconnected: FC<IProps> = ({
   useEffect(() => {
     if (!visible || !has_new || !last) return;
     authSetLastSeenMessages(last);
-  }, [visible, last]);
+  }, [visible, last, has_new, authSetLastSeenMessages]);
 
   return (
     <div

src/components/media/AudioPlayer/index.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useState, useEffect, memo, useMemo } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
 import { selectPlayer } from '~/redux/player/selectors';
 import * as PLAYER_ACTIONS from '~/redux/player/actions';
 import { IFile } from '~/redux/types';
 import { PLAYER_STATES } from '~/redux/player/constants';
-import { Player, IPlayerProgress } from '~/utils/player';
+import { IPlayerProgress, Player } from '~/utils/player';
 import classNames from 'classnames';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
@@ -90,7 +90,7 @@ const AudioPlayerUnconnected = memo(
             [file.metadata.id3artist, file.metadata.id3title].filter(el => el).join(' - '))) ||
         file.orig_name ||
         '',
-      [file.metadata]
+      [file.metadata, file.orig_name]
     );
 
     const onRename = useCallback(

src/components/media/ImagePreloader/index.tsx

@@ -44,7 +44,7 @@ const ImagePreloader: FC<IProps> = ({ file, color, onLoad, onClick, className })
 
   const [width, height] = useMemo(
     () => [file?.metadata?.width || DEFAULT_WIDTH, file?.metadata?.height || DEFAULT_HEIGHT],
-    [file?.metadata]
+    [file]
   );
 
   useResizeHandler(onResize);

src/components/node/CommendDeleted/index.tsx

@@ -9,7 +9,7 @@ interface IProps {
 }
 
 const CommendDeleted: FC<IProps> = ({ id, onDelete }) => {
-  const onRestore = useCallback(() => onDelete(id, false), [onDelete]);
+  const onRestore = useCallback(() => onDelete(id, false), [id, onDelete]);
 
   return (
     <div className={styles.wrap}>

src/components/node/NodeAuthorBlock/index.tsx

@@ -10,7 +10,7 @@ interface Props {
 }
 
 const NodeAuthorBlock: FC<Props> = ({ user }) => {
-  const onOpenProfile = useCallback(() => openUserProfile(user?.username), [user?.username]);
+  const onOpenProfile = useCallback(() => openUserProfile(user?.username), [user]);
 
   const description = useUserDescription(user);
 

src/components/node/NodeRelatedItem/index.tsx

@@ -4,10 +4,8 @@ import classNames from 'classnames';
 import { INode } from '~/redux/types';
 import { PRESETS, URLS } from '~/constants/urls';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { getURL, stringToColour } from '~/utils/dom';
+import { getURL } from '~/utils/dom';
 import { Avatar } from '~/components/common/Avatar';
-import { normalizeBrightColor } from '~/utils/color';
-import { adjustHue } from 'color2k';
 import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
 
 type IProps = RouteComponentProps & {
@@ -53,7 +51,7 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
     cb();
 
     return () => window.removeEventListener('resize', cb);
-  }, [ref.current]);
+  }, []);
 
   const size = useMemo<CellSize>(() => {
     if (width > 90) return 'large';

src/components/node/NodeTextBlock/index.tsx

@@ -9,9 +9,7 @@ import markdown from '~/styles/common/markdown.module.scss';
 interface IProps extends INodeComponentProps {}
 
 const NodeTextBlock: FC<IProps> = ({ node }) => {
-  const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [
+  const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [node]);
-    node.blocks,
-  ]);
 
   return (
     <div

src/components/profile/ProfileSettings/index.tsx

@@ -7,7 +7,6 @@ import { Button } from '~/components/input/Button';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
 import { InputText } from '~/components/input/InputText';
-import { reject } from 'ramda';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { ProfileAccounts } from '~/components/profile/ProfileAccounts';
@@ -61,7 +60,7 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
 
   useEffect(() => {
     authSetProfile({ patch_errors: {} });
-  }, [password, new_password, data]);
+  }, [password, new_password, data, authSetProfile]);
 
   return (
     <form className={styles.wrap} onSubmit={onSubmit}>

src/components/tags/TagAutocomplete/index.tsx

@@ -83,7 +83,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
   useEffect(() => {
     setSelected(-1);
     tagLoadAutocomplete(search, exclude);
-  }, [search]);
+  }, [exclude, search, tagLoadAutocomplete]);
 
   useEffect(() => {
     tagSetAutocomplete({ options: [] });
@@ -102,7 +102,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
     if (clientHeight - scrollTop + el.clientHeight < offsetTop || offsetTop < scrollTop) {
       scroll.current.scrollTo(0, el.offsetTop - el.clientHeight);
     }
-  }, [selected, scroll.current]);
+  }, [selected]);
 
   return (
     <div

src/components/tags/TagInput/index.tsx

@@ -45,7 +45,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
 
       setInput(items[items.length - 1] || '');
     },
-    [setInput]
+    [onAppend]
   );
 
   const onKeyDown = useCallback(
@@ -71,7 +71,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
         setInput('');
       }
     },
-    [input, setInput, onClearTag, onAppend, onSubmit, ref.current, wrapper.current]
+    [input, setInput, onClearTag, onAppend]
   );
 
   const onFocus = useCallback(() => setFocused(true), []);
@@ -94,7 +94,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
 
       onSubmit([]);
     },
-    [input, onAppend, setInput, onSubmit]
+    [input, setInput, onSubmit]
   );
 
   const onAutocompleteSelect = useCallback(

src/components/tags/Tags/index.tsx

@@ -43,12 +43,12 @@ export const Tags: FC<IProps> = ({
 
       onTagsChange(uniqueTags);
     },
-    [data]
+    [data, onTagsChange, tags]
   );
 
   useEffect(() => {
     setData(data.filter(title => !tags.some(tag => tag?.title?.trim() === title.trim())));
-  }, [tags]);
+  }, [data, tags]);
 
   const onAppendTag = useCallback(
     (created: string[]) => {

src/components/upload/UploadDropzone/index.tsx

@@ -19,7 +19,7 @@ const UploadDropzone: FC<IProps> = ({ children, onUpload, helperClassName, ...re
       onStopDragging();
       onUpload(files);
     },
-    [onUpload]
+    [onStopDragging, onUpload]
   );
 
   return (

src/constants/phrases.ts

@@ -64,4 +64,4 @@ export const PHRASES = {
 };
 
 export const useRandomPhrase = (key: keyof typeof PHRASES) =>
-  useMemo(() => PHRASES[key][Math.floor(Math.random() * PHRASES[key].length)], []);
+  useMemo(() => PHRASES[key][Math.floor(Math.random() * PHRASES[key].length)], [key]);

src/containers/dialogs/EditorDialog/index.tsx

@@ -15,7 +15,6 @@ import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 import { useTranslatedError } from '~/utils/hooks/useTranslatedError';
 import { useCloseOnEscape } from '~/utils/hooks';
 import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
-import { UploadDropzone } from '~/components/upload/UploadDropzone';
 
 interface Props extends IDialogProps {
   node: INode;
@@ -46,7 +45,7 @@ const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
     }
 
     setConfirmModalShown(true);
-  }, [onRequestClose, dirty, isConfirmModalShown, setConfirmModalShown]);
+  }, [dirty, isConfirmModalShown, onRequestClose, closeConfirmModal]);
 
   const error = useTranslatedError(status);
 
@@ -56,7 +55,7 @@ const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
     }
 
     setStatus('');
-  }, [values]);
+  }, [setStatus, status, values]);
 
   useCloseOnEscape(onClose);
 

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { DIALOGS, IDialogProps } from '~/redux/modal/constants';
 import { useCloseOnEscape } from '~/utils/hooks';
@@ -18,7 +18,6 @@ import { pick } from 'ramda';
 import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
 import { OAUTH_EVENT_TYPES } from '~/redux/types';
 import { DialogTitle } from '~/components/dialogs/DialogTitle';
-import { ERROR_LITERAL } from '~/constants/errors';
 import { useTranslatedError } from '~/utils/hooks/useTranslatedError';
 
 const mapStateToProps = state => ({
@@ -60,7 +59,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
       event.preventDefault();
       modalShowDialog(DIALOGS.RESTORE_REQUEST);
     },
-    [modalShowDialog, userSetLoginError]
+    [modalShowDialog]
   );
 
   const openOauthWindow = useCallback(
@@ -83,7 +82,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
 
   useEffect(() => {
     if (error) userSetLoginError('');
-  }, [username, password]);
+  }, [username, password, error, userSetLoginError]);
 
   useEffect(() => {
     window.addEventListener('message', onMessage);

src/containers/dialogs/LoginSocialRegisterDialog/index.tsx

@@ -51,15 +51,15 @@ const LoginSocialRegisterDialogUnconnected: FC<Props> = ({
 
   useEffect(() => {
     if (errors.username) authSetRegisterSocialErrors({ username: '' });
-  }, [username]);
+  }, [authSetRegisterSocialErrors, errors.username, username]);
 
   useEffect(() => {
     if (errors.password) authSetRegisterSocialErrors({ password: '' });
-  }, [password]);
+  }, [authSetRegisterSocialErrors, errors.password, password]);
 
   useEffect(() => {
     if (error) authSetRegisterSocial({ error: '' });
-  }, [username, password]);
+  }, [username, password, error, authSetRegisterSocial]);
 
   useCloseOnEscape(onRequestClose);
 

src/containers/dialogs/PhotoSwipe/index.tsx

@@ -66,7 +66,7 @@ const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
       ps.listen('destroy', closeModal);
       ps.listen('close', closeModal);
     });
-  }, [photoswipe.images, photoswipe.index]);
+  }, [closeModal, photoswipe.images, photoswipe.index]);
 
   useBlockBackButton(closeModal);
 

src/containers/dialogs/RestorePasswordDialog/index.tsx

@@ -44,14 +44,14 @@ const RestorePasswordDialogUnconnected: FC<IProps> = ({
 
       authRestorePassword(password);
     },
-    [doesnt_match, authRestorePassword]
+    [doesnt_match, authRestorePassword, password]
   );
 
   useEffect(() => {
     if (error || is_succesfull) {
       authSetRestore({ error: '', is_succesfull: false });
     }
-  }, [password, password_again]);
+  }, [authSetRestore, error, is_succesfull, password, password_again]);
 
   const buttons = useMemo(
     () => (
@@ -80,7 +80,7 @@ const RestorePasswordDialogUnconnected: FC<IProps> = ({
       ) : (
         undefined
       ),
-    [is_succesfull]
+    [is_succesfull, onRequestClose, user]
   );
 
   const not_ready = useMemo(
@@ -105,7 +105,7 @@ const RestorePasswordDialogUnconnected: FC<IProps> = ({
       ) : (
         undefined
       ),
-    [is_loading, user, error]
+    [is_loading, user, error, onRequestClose]
   );
 
   useCloseOnEscape(onRequestClose);

src/containers/dialogs/RestoreRequestDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useMemo, useCallback, useEffect } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
 import { BetterScrollDialog } from '../BetterScrollDialog';
@@ -45,7 +45,7 @@ const RestoreRequestDialogUnconnected: FC<IProps> = ({
     if (error || is_succesfull) {
       authSetRestore({ error: '', is_succesfull: false });
     }
-  }, [field]);
+  }, [authSetRestore, error, field, is_succesfull]);
 
   const buttons = useMemo(
     () => (
@@ -75,7 +75,7 @@ const RestoreRequestDialogUnconnected: FC<IProps> = ({
       ) : (
         undefined
       ),
-    [is_succesfull]
+    [is_succesfull, onRequestClose]
   );
 
   useCloseOnEscape(onRequestClose);

src/containers/lab/LabGrid/index.tsx

@@ -31,10 +31,7 @@ const LoadingNode = () => (
 );
 
 const LabGrid: FC<IProps> = ({ isLoading, nodes, onLoadMore }) => {
-  const columns = useMemo(() => Array.from(document.querySelectorAll(`.${styles.column}`)), [
+  const columns = useMemo(() => Array.from(document.querySelectorAll(`.${styles.column}`)), []);
-    isLoading,
-    nodes,
-  ]);
 
   useLabPagination(isLoading, columns, onLoadMore);
 

src/containers/profile/ProfileLayout/index.tsx

@@ -24,7 +24,7 @@ const ProfileLayoutUnconnected: FC<IProps> = ({ history, nodeSetCoverImage }) =>
 
   useEffect(() => {
     if (user) setUser(undefined);
-  }, [username]);
+  }, [user, username]);
 
   useEffect(() => {
     if (user && user.id && user.cover) {
@@ -33,7 +33,7 @@ const ProfileLayoutUnconnected: FC<IProps> = ({ history, nodeSetCoverImage }) =>
         nodeSetCoverImage(undefined);
       };
     }
-  }, [user]);
+  }, [nodeSetCoverImage, user]);
 
   return (
     <Group className={styles.wrap} horizontal>

src/containers/profile/ProfileMessages/index.tsx

@@ -47,7 +47,7 @@ const ProfileMessagesUnconnected: FC<IProps> = ({
     if (profile.is_loading || !profile.user || !profile.user.username) return;
 
     messagesGetMessages(profile.user.username);
-  }, [profile.user]);
+  }, [messagesGetMessages, profile.is_loading, profile.user]);
 
   useEffect(() => {
     const timer = setInterval(messagesRefreshMessages, 20000);
@@ -73,7 +73,7 @@ const ProfileMessagesUnconnected: FC<IProps> = ({
     if (wasAtBottom.current) {
       parent.scrollTo(0, parent.scrollHeight);
     }
-  }, [messages.messages]);
+  }, [messages.messages, wrap]);
 
   const onScroll = useCallback(() => {
     const parent = wrap?.parentElement;

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import styles from './styles.module.scss';
 import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
 import { connect } from 'react-redux';
@@ -37,11 +37,11 @@ const ProfileSidebarUnconnected: FC<Props> = ({
 
   useEffect(() => {
     authLoadProfile(username);
-  }, [username]);
+  }, [authLoadProfile, username]);
 
   const history = useHistory();
   const basePath = url.replace(new RegExp(`\/~${username}$`), '');
-  const onClose = useCallback(() => history.push(basePath), [basePath]);
+  const onClose = useCallback(() => history.push(basePath), [basePath, history]);
 
   useCloseOnEscape(onClose);
 

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useRef } from 'react';
 import styles from './styles.module.scss';
 import { createPortal } from 'react-dom';
-import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
 import { useCloseOnEscape } from '~/utils/hooks';
 
 interface IProps {
@@ -18,7 +18,7 @@ const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
     disableBodyScroll(ref.current, { reserveScrollBarGap: true });
 
     return () => clearAllBodyScrollLocks();
-  }, [ref.current]);
+  }, []);
 
   return createPortal(
     <div className={styles.wrapper} ref={ref}>

src/containers/sidebars/TagSidebar/index.tsx

@@ -31,7 +31,7 @@ const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes })
   const history = useHistory();
 
   const basePath = url.replace(new RegExp(`\/tag\/${tag}$`), '');
-  const onClose = useCallback(() => history.push(basePath), [basePath]);
+  const onClose = useCallback(() => history.push(basePath), [basePath, history]);
 
   useEffect(() => {
     tagLoadNodes(tag);
@@ -39,7 +39,7 @@ const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes })
     return () => {
       tagSetNodes({ list: [], count: 0 });
     };
-  }, [tag]);
+  }, [tag, tagLoadNodes, tagSetNodes]);
 
   const loadMore = useCallback(() => {
     if (nodes.isLoading) return;

src/layouts/ProfileLayout/index.tsx

@@ -27,7 +27,7 @@ const ProfileLayout: FC<Props> = ({
 
   useEffect(() => {
     dispatch(authLoadProfile(username));
-  }, [username]);
+  }, [dispatch, username]);
 
   const profile = useShallowSelect(selectAuthProfile);
 

src/pages/boris.tsx

@@ -25,7 +25,7 @@ const BorisPage: VFC = () => {
   useEffect(() => {
     if (node.is_loading) return;
     dispatch(nodeLoadNode(696, 'DESC'));
-  }, [dispatch]);
+  }, [dispatch, node.is_loading]);
 
   return (
     <CommentProvider

src/utils/hooks/flow/useFlow.ts

@@ -20,7 +20,7 @@ export const useFlow = () => {
 
   const onChangeCellView = useCallback(
     (id: INode['id'], val: FlowDisplay) => dispatch(flowSetCellView(id, val)),
-    []
+    [dispatch]
   );
 
   return { nodes, heroes, recent, updates, isFluid, toggleLayout, onChangeCellView };

src/utils/hooks/flow/useFlowCellControls.ts

@@ -9,7 +9,7 @@ export const useFlowCellControls = (
 ) => {
   const onChange = useCallback(
     (value: Partial<FlowDisplay>) => onChangeCellView(id, { ...flow, ...value }),
-    [flow, onChangeCellView]
+    [flow, id, onChangeCellView]
   );
 
   const hasDescription = !!description && description.length > 32;

src/utils/hooks/flow/useFlowPagination.ts

@@ -1,10 +1,10 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { flowGetMore } from '~/redux/flow/actions';
 import { useDispatch } from 'react-redux';
 import { useInfiniteLoader } from '~/utils/hooks/useInfiniteLoader';
 
 export const useFlowPagination = ({ isLoading }) => {
   const dispatch = useDispatch();
-  const loadMore = useCallback(() => dispatch(flowGetMore()), []);
+  const loadMore = useCallback(() => dispatch(flowGetMore()), [dispatch]);
   useInfiniteLoader(loadMore, isLoading);
 };

src/utils/hooks/index.ts

@@ -53,6 +53,6 @@ export const useFileDropZone = (onUpload: (file: File[]) => void, allowedTypes?:
 
       onUpload(files);
     },
-    [onUpload]
+    [allowedTypes, onUpload]
   );
 };

src/utils/hooks/lab/useLabPagination.ts

@@ -40,5 +40,5 @@ export const useLabPagination = (
     return () => {
       lastItems.forEach(item => observer.unobserve(item));
     };
-  }, [observer, columns]);
+  }, [observer, columns, isLoading]);
 };

src/utils/hooks/node/useGotoNode.ts

@@ -6,5 +6,5 @@ import { URLS } from '~/constants/urls';
 // useGotoNode returns fn, that navigates to node
 export const useGotoNode = (id: INode['id']) => {
   const history = useHistory();
-  return useCallback(() => history.push(URLS.NODE_URL(id)), [id]);
+  return useCallback(() => history.push(URLS.NODE_URL(id)), [history, id]);
 };

src/utils/hooks/node/useGrouppedComments.ts

@@ -13,5 +13,5 @@ export const useGrouppedComments = (
         groupCommentsByUser(lastSeen),
         []
       ),
-    [comments, order]
+    [comments, lastSeen, order]
   );

src/utils/hooks/node/useLoadNode.ts

@@ -14,5 +14,5 @@ export const useLoadNode = (id: any, isLoading: boolean) => {
     return () => {
       dispatch(nodeSetCurrent(EMPTY_NODE));
     };
-  }, [dispatch, id]);
+  }, [dispatch, id, isLoading]);
 };

src/utils/hooks/node/useNodeActions.ts

@@ -6,14 +6,10 @@ import { nodeEdit, nodeLike, nodeLock, nodeStar } from '~/redux/node/actions';
 export const useNodeActions = (node: INode) => {
   const dispatch = useDispatch();
 
-  const onEdit = useCallback(() => dispatch(nodeEdit(node.id)), [dispatch, nodeEdit, node]);
+  const onEdit = useCallback(() => dispatch(nodeEdit(node.id)), [dispatch, node]);
-  const onLike = useCallback(() => dispatch(nodeLike(node.id)), [dispatch, nodeLike, node]);
+  const onLike = useCallback(() => dispatch(nodeLike(node.id)), [dispatch, node]);
-  const onStar = useCallback(() => dispatch(nodeStar(node.id)), [dispatch, nodeStar, node]);
+  const onStar = useCallback(() => dispatch(nodeStar(node.id)), [dispatch, node]);
-  const onLock = useCallback(() => dispatch(nodeLock(node.id, !node.deleted_at)), [
+  const onLock = useCallback(() => dispatch(nodeLock(node.id, !node.deleted_at)), [dispatch, node]);
-    dispatch,
-    nodeLock,
-    node,
-  ]);
 
   return { onEdit, onLike, onStar, onLock };
 };

src/utils/hooks/useBlockBackButton.ts

@@ -19,6 +19,6 @@ export const useBlockBackButton = (callback?: () => void) => {
           callback();
         }
       }),
-    [callback, history]
+    [callback]
   );
 };

src/utils/hooks/useClickOutsideFocus.ts

@@ -25,7 +25,7 @@ export const useClickOutsideFocus = () => {
     document.addEventListener('mouseup', deactivator);
 
     return () => document.removeEventListener('mouseup', deactivator);
-  }, [isActive]);
+  }, [deactivate, isActive]);
 
   useCloseOnEscape(deactivate);
 

src/utils/hooks/useColorFromString.ts

@@ -5,6 +5,6 @@ import { stringToColour } from '~/utils/dom';
 export const useColorFromString = (val?: string, saturation = 3, lightness = 3) => {
   return useMemo(
     () => (val && normalizeBrightColor(stringToColour(val), saturation, lightness)) || '',
-    []
+    [lightness, saturation, val]
   );
 };

src/utils/hooks/useColorGradientFromString.ts

@@ -19,4 +19,4 @@ export const useColorGradientFromString = (
     const third = normalizeBrightColor(adjustHue(color, 90), saturation, lightness);
 
     return `linear-gradient(${angle}deg, ${color}, ${second}, ${third})`;
-  }, [val]);
+  }, [angle, lightness, saturation, val]);

src/utils/hooks/useCommentFormFormik.ts

@@ -71,7 +71,7 @@ export const useCommentFormFormik = (
     if (formik.status) {
       formik.setStatus('');
     }
-  }, [formik.values.text]);
+  }, [formik, formik.values.text]);
 
   return formik;
 };

src/utils/hooks/useDragDetector.tsx

@@ -1,5 +1,4 @@
-import React, { FC, useContext } from 'react';
+import React, { createContext, FC, useCallback, useContext, useEffect, useState } from 'react';
-import { createContext, useCallback, useEffect, useState } from 'react';
 
 const DragContext = createContext({
   isDragging: false,
@@ -44,7 +43,7 @@ export const useDragDetector = () => {
       document.removeEventListener('blur', removeClass);
       document.removeEventListener('drop', onStopDragging);
     };
-  }, [setIsDragging]);
+  }, [onStopDragging, setIsDragging]);
 
   return { isDragging, onStopDragging };
 };

src/utils/hooks/useInputPasteUpload.ts

@@ -12,7 +12,7 @@ export const useInputPasteUpload = (
     if (!image) return;
 
     onUpload([image]);
-  }, []);
+  }, [onUpload]);
 
   useEffect(() => {
     if (!input) return;

src/utils/hooks/useNodeFormFormik.ts

@@ -1,8 +1,8 @@
-import { IComment, INode } from '~/redux/types';
+import { INode } from '~/redux/types';
 import { FileUploader } from '~/utils/hooks/useFileUploader';
 import { useCallback, useEffect, useRef } from 'react';
 import { FormikHelpers, useFormik, useFormikContext } from 'formik';
-import { object, string } from 'yup';
+import { object } from 'yup';
 import { useDispatch } from 'react-redux';
 import { nodeSubmitLocal } from '~/redux/node/actions';
 import { keys } from 'ramda';
@@ -39,7 +39,7 @@ export const useNodeFormFormik = (
   const onSubmit = useCallback((values: INode, helpers: FormikHelpers<INode>) => {
     helpers.setSubmitting(true);
     dispatch(nodeSubmitLocal(values, onSuccess(helpers)));
-  }, []);
+  }, [dispatch]);
 
   const { current: initialValues } = useRef(values);
 
@@ -60,7 +60,7 @@ export const useNodeFormFormik = (
 
   useEffect(() => {
     formik.setFieldValue('files', uploader.files);
-  }, [formik.setFieldValue, uploader.files]);
+  }, [formik, formik.setFieldValue, uploader.files]);
 
   return formik;
 };