eslint auto-fix

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 { URLS, PRESETS } from '~/constants/urls';
+import { RouteComponentProps, useHistory, withRouter } from 'react-router';
+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) || ''), [
-    node.blocks,
-  ]);
+  const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [node]);
 
   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 (