refactored hooks directory

src/components/boris/Superpower/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectAuthIsTester, selectUser } from '~/redux/auth/selectors';
 
 interface IProps {}

src/components/comment/CommentForm/index.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useCallback, useState } from 'react';
-import { useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik';
+import { useCommentFormFormik } from '~/hooks/comments/useCommentFormFormik';
 import { FormikProvider } from 'formik';
 import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
 import { Button } from '~/components/input/Button';
-import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/useFileUploader';
+import { FileUploaderProvider, useFileUploader } from '~/hooks/data/useFileUploader';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
 import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
 import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
@@ -14,7 +14,7 @@ import { EMPTY_COMMENT } from '~/redux/node/constants';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import styles from './styles.module.scss';
 import { ERROR_LITERAL } from '~/constants/errors';
-import { useInputPasteUpload } from '~/utils/hooks/useInputPasteUpload';
+import { useInputPasteUpload } from '~/hooks/dom/useInputPasteUpload';
 import { Filler } from '~/components/containers/Filler';
 
 interface IProps {

src/components/comment/CommentFormAttaches/index.tsx

@@ -5,9 +5,9 @@ import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
 import { IFile } from '~/redux/types';
 import { SortEnd } from 'react-sortable-hoc';
 import { moveArrItem } from '~/utils/fn';
-import { useFileDropZone } from '~/utils/hooks';
+import { useFileDropZone } from '~/hooks';
 import { COMMENT_FILE_TYPES, UPLOAD_TYPES } from '~/redux/uploads/constants';
-import { useFileUploaderContext } from '~/utils/hooks/useFileUploader';
+import { useFileUploaderContext } from '~/hooks/data/useFileUploader';
 
 const CommentFormAttaches: FC = () => {
   const uploader = useFileUploaderContext();

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useEffect } from 'react';
 import { ButtonGroup } from '~/components/input/ButtonGroup';
 import { Button } from '~/components/input/Button';
-import { useFormatWrapper, wrapTextInsideInput } from '~/utils/hooks/useFormatWrapper';
+import { useFormatWrapper, wrapTextInsideInput } from '~/hooks/dom/useFormatWrapper';
 import styles from './styles.module.scss';
 
 interface IProps {

src/components/comment/LocalCommentFormTextarea/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, KeyboardEventHandler, useCallback } from 'react';
 import { Textarea } from '~/components/input/Textarea';
-import { useCommentFormContext } from '~/utils/hooks/useCommentFormFormik';
+import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
 import { useRandomPhrase } from '~/constants/phrases';
 
 interface IProps {

src/components/containers/Authorized/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectUser } from '~/redux/auth/selectors';
 
 interface IProps {}

src/components/editors/AudioEditor/index.tsx

@@ -8,10 +8,10 @@ import { selectUploads } from '~/redux/uploads/selectors';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import styles from './styles.module.scss';
 import { NodeEditorProps } from '~/redux/node/types';
-import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
-import { useNodeAudios } from '~/utils/hooks/node/useNodeAudios';
-import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
-import { useFileUploaderContext } from '~/utils/hooks/useFileUploader';
+import { useNodeImages } from '~/hooks/node/useNodeImages';
+import { useNodeAudios } from '~/hooks/node/useNodeAudios';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { useFileUploaderContext } from '~/hooks/data/useFileUploader';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 
 type IProps = NodeEditorProps;

src/components/editors/EditorActionsPanel/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, createElement } from 'react';
 import styles from './styles.module.scss';
 import { NODE_PANEL_COMPONENTS } from '~/redux/node/constants';
 import { has } from 'ramda';
-import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
 const EditorActionsPanel: FC = () => {
   const { values } = useNodeFormContext();

src/components/editors/EditorButtons/index.tsx

@@ -4,7 +4,7 @@ import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
 import { Padder } from '~/components/containers/Padder';
-import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
 const EditorButtons: FC = () => {
   const { values, handleChange, isSubmitting } = useNodeFormContext();

src/components/editors/EditorPublicSwitch/index.tsx

@@ -3,7 +3,7 @@ import { IEditorComponentProps } from '~/redux/node/types';
 import { Button } from '~/components/input/Button';
 import { Icon } from '~/components/input/Icon';
 import styles from './styles.module.scss';
-import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
 interface IProps extends IEditorComponentProps {}
 

src/components/editors/EditorUploadButton/index.tsx

@@ -3,9 +3,9 @@ import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { IEditorComponentProps } from '~/redux/node/types';
-import { useFileUploaderContext } from '~/utils/hooks/useFileUploader';
+import { useFileUploaderContext } from '~/hooks/data/useFileUploader';
 import { getFileType } from '~/utils/uploader';
-import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 import { Button } from '~/components/input/Button';
 
 type IProps = IEditorComponentProps & {

src/components/editors/EditorUploadCoverButton/index.tsx

@@ -11,8 +11,8 @@ import { getURL } from '~/utils/dom';
 import { Icon } from '~/components/input/Icon';
 import { PRESETS } from '~/constants/urls';
 import { IEditorComponentProps } from '~/redux/node/types';
-import { useFileUploader, useFileUploaderContext } from '~/utils/hooks/useFileUploader';
-import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
+import { useFileUploader, useFileUploaderContext } from '~/hooks/data/useFileUploader';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 import { getFileType } from '~/utils/uploader';
 
 type IProps = IEditorComponentProps & {};

src/components/editors/ImageEditor/index.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { ImageGrid } from '~/components/editors/ImageGrid';
 import styles from './styles.module.scss';
 import { NodeEditorProps } from '~/redux/node/types';
-import { useFileUploaderContext } from '~/utils/hooks/useFileUploader';
+import { useFileUploaderContext } from '~/hooks/data/useFileUploader';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 
 type IProps = NodeEditorProps;

src/components/editors/TextEditor/index.tsx

@@ -4,7 +4,7 @@ import styles from './styles.module.scss';
 import { Textarea } from '~/components/input/Textarea';
 import { path } from 'ramda';
 import { NodeEditorProps } from '~/redux/node/types';
-import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
 type IProps = NodeEditorProps & {};
 

src/components/editors/VideoEditor/index.tsx

@@ -6,7 +6,7 @@ import { InputText } from '~/components/input/InputText';
 import classnames from 'classnames';
 import { getYoutubeThumb } from '~/utils/dom';
 import { NodeEditorProps } from '~/redux/node/types';
-import { useNodeFormContext } from '~/utils/hooks/node/useNodeFormFormik';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
 type IProps = NodeEditorProps & {};
 

src/components/flow/FlowCell/index.tsx

@@ -6,8 +6,8 @@ import { FlowDisplay, INode } from '~/redux/types';
 import { FlowCellText } from '~/components/flow/FlowCellText';
 import classNames from 'classnames';
 import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
-import { useFlowCellControls } from '~/utils/hooks/flow/useFlowCellControls';
-import { useClickOutsideFocus } from '~/utils/hooks/useClickOutsideFocus';
+import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
+import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
 import { MenuDots } from '~/components/common/MenuDots';
 import { FlowCellImage } from '~/components/flow/FlowCellImage';
 

src/components/input/InputText/index.tsx

@@ -4,7 +4,7 @@ import styles from '~/styles/common/inputs.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IInputTextProps } from '~/redux/types';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { useTranslatedError } from '~/utils/hooks/useTranslatedError';
+import { useTranslatedError } from '~/hooks/data/useTranslatedError';
 
 const InputText: FC<IInputTextProps> = ({
   wrapperClassName,

src/components/lab/LabDescription/index.tsx

@@ -3,7 +3,7 @@ import { INodeComponentProps } from '~/redux/node/constants';
 import styles from './styles.module.scss';
 import { Markdown } from '~/components/containers/Markdown';
 import { formatText } from '~/utils/dom';
-import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
+import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { Paragraph } from '~/components/placeholders/Paragraph';
 
 const LabDescription: FC<INodeComponentProps> = ({ node, isLoading }) => {

src/components/lab/LabImage/index.tsx

@@ -9,8 +9,8 @@ import 'swiper/components/zoom/zoom.scss';
 import 'swiper/components/navigation/navigation.scss';
 
 import styles from './styles.module.scss';
-import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
-import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
+import { useNodeImages } from '~/hooks/node/useNodeImages';
+import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { normalizeBrightColor } from '~/utils/color';
 import { ImagePreloader } from '~/components/media/ImagePreloader';

src/components/lab/LabLine/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { INodeComponentProps } from '~/redux/node/constants';
-import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
+import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 
 interface Props extends INodeComponentProps {}
 

src/components/lab/LabNode/index.tsx

@@ -1,11 +1,11 @@
 import React, { FC, useMemo } from 'react';
 import { INode } from '~/redux/types';
-import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
+import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
 import styles from './styles.module.scss';
 import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
 import { isAfter, parseISO } from 'date-fns';
 import classNames from 'classnames';
-import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
+import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 
 interface IProps {
   node: INode;

src/components/lab/LabNodeTitle/index.tsx

@@ -4,7 +4,7 @@ import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
 import Tippy from '@tippy.js/react';
-import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
+import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { INodeComponentProps } from '~/redux/node/constants';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 

src/components/lab/LabPad/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { INodeComponentProps } from '~/redux/node/constants';
-import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
+import { useGotoNode } from '~/hooks/node/useGotoNode';
 
 const LabPad: FC<INodeComponentProps> = ({ node }) => {
   const onClick = useGotoNode(node.id);

src/components/lab/LabText/index.tsx

@@ -4,7 +4,7 @@ import { INodeComponentProps } from '~/redux/node/constants';
 import { formatTextParagraphs } from '~/utils/dom';
 import { path } from 'ramda';
 import styles from './styles.module.scss';
-import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
+import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { Paragraph } from '~/components/placeholders/Paragraph';
 
 const LabText: FC<INodeComponentProps> = ({ node, isLoading }) => {

src/components/main/Header/index.tsx

@@ -19,7 +19,7 @@ import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IState } from '~/redux/store';
 import isBefore from 'date-fns/isBefore';
 import { Authorized } from '~/components/containers/Authorized';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
 import { selectFlowUpdated } from '~/redux/flow/selectors';
 import { Button } from '~/components/input/Button';

src/components/media/ImagePreloader/index.tsx

@@ -6,7 +6,7 @@ import styles from './styles.module.scss';
 import { IFile } from '~/redux/types';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { Icon } from '~/components/input/Icon';
-import { useResizeHandler } from '~/utils/hooks/useResizeHandler';
+import { useResizeHandler } from '~/hooks/dom/useResizeHandler';
 import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
 
 interface IProps {

src/components/node/NodeAudioBlock/index.tsx

@@ -4,7 +4,7 @@ import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import styles from './styles.module.scss';
 import { INodeComponentProps } from '~/redux/node/constants';
-import { useNodeAudios } from '~/utils/hooks/node/useNodeAudios';
+import { useNodeAudios } from '~/hooks/node/useNodeAudios';
 
 interface IProps extends INodeComponentProps {}
 

src/components/node/NodeAudioImageBlock/index.tsx

@@ -6,7 +6,7 @@ import { path } from 'ramda';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import { INodeComponentProps } from '~/redux/node/constants';
-import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
+import { useNodeImages } from '~/hooks/node/useNodeImages';
 
 interface IProps extends INodeComponentProps {}
 

src/components/node/NodeAuthorBlock/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import { Avatar } from '~/components/common/Avatar';
 import { openUserProfile } from '~/utils/user';
-import { useUserDescription } from '~/utils/hooks/user/useUserDescription';
+import { useUserDescription } from '~/hooks/user/useUserDescription';
 import { INodeUser } from '~/redux/types';
 
 interface Props {

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -10,12 +10,11 @@ import styles from './styles.module.scss';
 
 import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper';
 
-import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
+import { useNodeImages } from '~/hooks/node/useNodeImages';
 import SwiperClass from 'swiper/types/swiper-class';
-import { modalShowPhotoswipe } from '~/redux/modal/actions';
-import { useDispatch } from 'react-redux';
 import { ImagePreloader } from '~/components/media/ImagePreloader';
 import { normalizeBrightColor } from '~/utils/color';
+import { useImageModal } from '~/hooks/navigation/useImageModal';
 
 SwiperCore.use([Navigation, Pagination, Keyboard]);
 
@@ -28,8 +27,8 @@ const breakpoints: SwiperOptions['breakpoints'] = {
 };
 
 const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
-  const dispatch = useDispatch();
   const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
+  const showPhotoSwiper = useImageModal();
 
   const images = useNodeImages(node);
 
@@ -50,9 +49,9 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
         return;
       }
 
-      dispatch(modalShowPhotoswipe(images, index));
+      showPhotoSwiper(images, index);
     },
-    [dispatch, images, controlledSwiper]
+    [images, controlledSwiper, showPhotoSwiper]
   );
 
   if (!images?.length) {

src/components/node/NodeRelatedItem/index.tsx

@@ -6,7 +6,7 @@ import { PRESETS, URLS } from '~/constants/urls';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { getURL } from '~/utils/dom';
 import { Avatar } from '~/components/common/Avatar';
-import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
+import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 
 type IProps = RouteComponentProps & {
   item: Partial<INode>;

src/components/upload/UploadDropzone/index.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import styles from './styles.module.scss';
 import { DivProps } from '~/utils/types';
 import { DropHereIcon } from '~/components/input/DropHereIcon';
-import { useDragDetector } from '~/utils/hooks/useDragDetector';
+import { useDragDetector } from '~/hooks/dom/useDragDetector';
 
 interface IProps extends DivProps {
   onUpload: (files: File[]) => void;

src/containers/App.tsx

@@ -7,8 +7,8 @@ import { Modal } from '~/containers/dialogs/Modal';
 import { PageCover } from '~/components/containers/PageCover';
 import { BottomContainer } from '~/containers/main/BottomContainer';
 import { MainRouter } from '~/containers/main/MainRouter';
-import { DragDetectorProvider } from '~/utils/hooks/useDragDetector';
-import { useUser } from '~/utils/hooks/user/userUser';
+import { DragDetectorProvider } from '~/hooks/dom/useDragDetector';
+import { useUser } from '~/hooks/user/userUser';
 import { UserContextProvider } from '~/utils/context/UserContextProvider';
 import { SWRConfigProvider } from '~/utils/providers/SWRConfigProvider';
 

src/containers/dialogs/BetterScrollDialog/index.tsx

@@ -3,7 +3,7 @@ import styles from './styles.module.scss';
 import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
 import { Icon } from '~/components/input/Icon';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { useCloseOnEscape } from '~/utils/hooks';
+import { useCloseOnEscape } from '~/hooks';
 
 interface IProps {
   children: React.ReactChild;

src/containers/dialogs/EditorCreateDialog/index.tsx

@@ -5,8 +5,8 @@ import { useHistory, useRouteMatch } from 'react-router';
 import { values } from 'ramda';
 import { INode } from '~/redux/types';
 import { apiPostNode } from '~/redux/node/api';
-import { useUpdateNode } from '~/utils/hooks/data/useUpdateNode';
-import { useCreateNode } from '~/utils/hooks/data/useCreateNode';
+import { useUpdateNode } from '~/hooks/node/useUpdateNode';
+import { useCreateNode } from '~/hooks/node/useCreateNode';
 
 const EditorCreateDialog: FC = () => {
   const history = useHistory();

src/containers/dialogs/EditorDialog/index.tsx

@@ -5,15 +5,15 @@ import { NODE_EDITORS } from '~/redux/node/constants';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { prop } from 'ramda';
-import { useNodeFormFormik } from '~/utils/hooks/node/useNodeFormFormik';
+import { useNodeFormFormik } from '~/hooks/node/useNodeFormFormik';
 import { EditorButtons } from '~/components/editors/EditorButtons';
-import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/useFileUploader';
+import { FileUploaderProvider, useFileUploader } from '~/hooks/data/useFileUploader';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
 import { FormikProvider } from 'formik';
 import { INode } from '~/redux/types';
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
-import { useTranslatedError } from '~/utils/hooks/useTranslatedError';
-import { useCloseOnEscape } from '~/utils/hooks';
+import { useTranslatedError } from '~/hooks/data/useTranslatedError';
+import { useCloseOnEscape } from '~/hooks';
 import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
 import { on } from 'cluster';
 

src/containers/dialogs/EditorEditDialog/index.tsx

@@ -4,8 +4,8 @@ import { useHistory, useRouteMatch } from 'react-router';
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import styles from './styles.module.scss';
-import { useGetNode } from '~/utils/hooks/data/useGetNode';
-import { useUpdateNode } from '~/utils/hooks/data/useUpdateNode';
+import { useGetNode } from '~/hooks/node/useGetNode';
+import { useUpdateNode } from '~/hooks/node/useUpdateNode';
 import { INode } from '~/redux/types';
 
 const EditorEditDialog: FC = () => {

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,7 +1,7 @@
 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';
+import { useCloseOnEscape } from '~/hooks';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
@@ -18,7 +18,7 @@ import { pick } from 'ramda';
 import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
 import { OAUTH_EVENT_TYPES } from '~/redux/types';
 import { DialogTitle } from '~/components/dialogs/DialogTitle';
-import { useTranslatedError } from '~/utils/hooks/useTranslatedError';
+import { useTranslatedError } from '~/hooks/data/useTranslatedError';
 
 const mapStateToProps = state => ({
   ...pick(['error', 'is_registering'], selectAuthLogin(state)),
@@ -80,7 +80,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
     [authGotOauthLoginEvent]
   );
 
-  useEffect(() => { 
+  useEffect(() => {
     if (error) userSetLoginError('');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [username, password]);

src/containers/dialogs/LoginSocialRegisterDialog/index.tsx

@@ -9,7 +9,7 @@ import { InputText } from '~/components/input/InputText';
 import styles from './styles.module.scss';
 import { selectAuthRegisterSocial } from '~/redux/auth/selectors';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import { useCloseOnEscape } from '~/utils/hooks';
+import { useCloseOnEscape } from '~/hooks';
 import { LoginSocialRegisterButtons } from '~/containers/dialogs/LoginSocialRegisterButtons';
 import { Toggle } from '~/components/input/Toggle';
 

src/containers/dialogs/Modal/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { DIALOG_CONTENT } from '~/constants/dialogs';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectModal } from '~/redux/modal/selectors';
 import { modalSetDialog, modalSetShown, modalShowDialog } from '~/redux/modal/actions';
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';

src/containers/dialogs/PhotoSwipe/index.tsx

@@ -12,7 +12,7 @@ import { PRESETS } from '~/constants/urls';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
-import { useBlockBackButton } from '~/utils/hooks/useBlockBackButton';
+import { useBlockBackButton } from '~/hooks/navigation/useBlockBackButton';
 
 const mapStateToProps = (state: IState) => ({
   photoswipe: selectModal(state).photoswipe,

src/containers/dialogs/RestorePasswordDialog/index.tsx

@@ -12,7 +12,7 @@ import { pick } from 'ramda';
 import { selectAuthRestore } from '~/redux/auth/selectors';
 import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
 import { Icon } from '~/components/input/Icon';
-import { useCloseOnEscape } from '~/utils/hooks';
+import { useCloseOnEscape } from '~/hooks';
 
 const mapStateToProps = state => ({
   restore: selectAuthRestore(state),

src/containers/dialogs/RestoreRequestDialog/index.tsx

@@ -12,7 +12,7 @@ import { pick } from 'ramda';
 import { selectAuthRestore } from '~/redux/auth/selectors';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { Icon } from '~/components/input/Icon';
-import { useCloseOnEscape } from '~/utils/hooks';
+import { useCloseOnEscape } from '~/hooks';
 
 const mapStateToProps = state => ({
   restore: selectAuthRestore(state),

src/containers/lab/LabGrid/index.tsx

@@ -4,7 +4,7 @@ import styles from './styles.module.scss';
 import { LabNode } from '~/components/lab/LabNode';
 import { EMPTY_NODE, NODE_TYPES } from '~/redux/node/constants';
 import { values } from 'ramda';
-import { useLabPagination } from '~/utils/hooks/lab/useLabPagination';
+import { useLabPagination } from '~/hooks/lab/useLabPagination';
 import { useLabContext } from '~/utils/context/LabContextProvider';
 
 interface IProps {}

src/containers/main/MainRouter/index.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { URLS } from '~/constants/urls';
 import { ErrorNotFound } from '~/containers/pages/ErrorNotFound';
 import { Redirect, Route, Switch, useLocation } from 'react-router';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectAuthUser } from '~/redux/auth/selectors';
 import { ProfileLayout } from '~/layouts/ProfileLayout';
 import FlowPage from '~/pages';

src/containers/node/NodeBottomBlock/index.tsx

@@ -4,7 +4,7 @@ import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
-import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
+import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
 import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
 import StickyBox from 'react-sticky-box/dist/esnext';
 import styles from './styles.module.scss';

src/containers/node/NodeComments/index.tsx

@@ -5,7 +5,7 @@ import { ICommentGroup } from '~/redux/types';
 import { canEditComment } from '~/utils/node';
 import { COMMENTS_DISPLAY } from '~/redux/node/constants';
 import { plural } from '~/utils/dom';
-import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments';
+import { useGrouppedComments } from '~/hooks/node/useGrouppedComments';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';
 import { Comment } from '~/components/comment/Comment';
 import { useUserContext } from '~/utils/context/UserContextProvider';

src/containers/player/PlayerView/index.tsx

@@ -1,6 +1,6 @@
 import React, { VFC } from 'react';
 import { PlayerBar } from '~/components/bars/PlayerBar';
-import { usePlayer } from '~/utils/hooks/player/usePlayer';
+import { usePlayer } from '~/hooks/player/usePlayer';
 
 interface PlayerViewProps {}
 

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -9,7 +9,7 @@ import { Filler } from '~/components/containers/Filler';
 import { Route, Switch, useHistory, useRouteMatch } from 'react-router';
 import * as USER_ACTIONS from '~/redux/auth/actions';
 import { ProfileSidebarMenu } from '~/components/profile/ProfileSidebarMenu';
-import { useCloseOnEscape } from '~/utils/hooks';
+import { useCloseOnEscape } from '~/hooks';
 import { Icon } from '~/components/input/Icon';
 import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
 import classNames from 'classnames';

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useEffect, useRef } from 'react';
 import styles from './styles.module.scss';
 import { createPortal } from 'react-dom';
 import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
-import { useCloseOnEscape } from '~/utils/hooks';
+import { useCloseOnEscape } from '~/hooks';
 
 interface IProps {
   onClose?: () => void;

src/hooks/boris/useBoris.ts

@@ -3,9 +3,9 @@ import { useCallback, useEffect } from 'react';
 import isBefore from 'date-fns/isBefore';
 import { authSetState, authSetUser } from '~/redux/auth/actions';
 import { borisLoadStats } from '~/redux/boris/actions';
-import { useUser } from '~/utils/hooks/user/userUser';
+import { useUser } from '~/hooks/user/userUser';
 import { IComment } from '~/redux/types';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectAuthIsTester } from '~/redux/auth/selectors';
 import { selectBorisStats } from '~/redux/boris/selectors';
 import { useRandomPhrase } from '~/constants/phrases';

src/hooks/comments/useCommentFormFormik.ts

@@ -2,7 +2,7 @@ import { IComment, INode } from '~/redux/types';
 import { useCallback, useEffect, useRef } from 'react';
 import { FormikHelpers, useFormik, useFormikContext } from 'formik';
 import { array, object, string } from 'yup';
-import { FileUploader } from '~/utils/hooks/useFileUploader';
+import { FileUploader } from '~/hooks/data/useFileUploader';
 import { useDispatch } from 'react-redux';
 import { nodePostLocalComment } from '~/redux/node/actions';
 

src/hooks/data/useFileUploader.tsx

@@ -13,7 +13,7 @@ import { getFileType } from '~/utils/uploader';
 import uuid from 'uuid4';
 import { useDispatch } from 'react-redux';
 import { uploadUploadFiles } from '~/redux/uploads/actions';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { path } from 'ramda';
 import { IUploadStatus } from '~/redux/uploads/reducer';

src/hooks/dom/useClickOutsideFocus.ts

@@ -2,7 +2,7 @@
  * Handles blur by detecting clicks outside refs.
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useCloseOnEscape } from '~/utils/hooks/index';
+import { useCloseOnEscape } from '~/hooks';
 
 export const useClickOutsideFocus = () => {
   const ref = useRef<HTMLElement>();

src/hooks/dom/useFormatWrapper.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 
+/** wraps text inside textarea with tags */
 export const useFormatWrapper = (
   target: HTMLTextAreaElement,
   onChange: (val: string) => void,
@@ -15,6 +16,7 @@ export const useFormatWrapper = (
   );
 };
 
+/** wraps text inside textarea with tags */
 export const wrapTextInsideInput = (
   target: HTMLTextAreaElement,
   prefix: string,

src/hooks/flow/useFlow.ts

@@ -1,9 +1,9 @@
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectFlow } from '~/redux/flow/selectors';
-import { useFlowLayout } from '~/utils/hooks/flow/useFlowLayout';
+import { useFlowLayout } from '~/hooks/flow/useFlowLayout';
 import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
 import { useDispatch } from 'react-redux';
-import { useFlowPagination } from '~/utils/hooks/flow/useFlowPagination';
+import { useFlowPagination } from '~/hooks/flow/useFlowPagination';
 import { useCallback, useMemo } from 'react';
 import { FlowDisplay, INode } from '~/redux/types';
 import { flowSetCellView } from '~/redux/flow/actions';

src/hooks/flow/useFlowLayout.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { usePersistedState } from '~/utils/hooks/usePersistedState';
+import { usePersistedState } from '~/hooks/data/usePersistedState';
 import { experimentalFeatures } from '~/constants/features';
 
 enum Layout {

src/hooks/flow/useFlowPagination.ts

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

src/hooks/lab/useLab.ts

@@ -1,4 +1,4 @@
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import {
   selectLabList,
   selectLabStatsHeroes,

src/hooks/node/useCreateNode.ts

@@ -5,7 +5,7 @@ import { selectFlowNodes } from '~/redux/flow/selectors';
 import { flowSetNodes } from '~/redux/flow/actions';
 import { selectLabListNodes } from '~/redux/lab/selectors';
 import { labSetList } from '~/redux/lab/actions';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { useDispatch } from 'react-redux';
 
 export const useCreateNode = () => {

src/hooks/node/useFullNode.ts

@@ -1,7 +1,7 @@
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectNode } from '~/redux/node/selectors';
-import { useLoadNode } from '~/utils/hooks/node/useLoadNode';
-import { useOnNodeSeen } from '~/utils/hooks/node/useOnNodeSeen';
+import { useLoadNode } from '~/hooks/node/useLoadNode';
+import { useOnNodeSeen } from '~/hooks/node/useOnNodeSeen';
 
 export const useFullNode = (id: string) => {
   const {

src/hooks/node/useGetNode.ts

@@ -1,7 +1,7 @@
 import useSWR from 'swr';
 import { ApiGetNodeResponse } from '~/redux/node/types';
 import { API } from '~/constants/api';
-import { useOnNodeSeen } from '~/utils/hooks/node/useOnNodeSeen';
+import { useOnNodeSeen } from '~/hooks/node/useOnNodeSeen';
 import { apiGetNode } from '~/redux/node/api';
 import { useCallback } from 'react';
 import { INode } from '~/redux/types';

src/hooks/node/useNodeFormFormik.ts

@@ -1,5 +1,5 @@
 import { INode } from '~/redux/types';
-import { FileUploader } from '~/utils/hooks/useFileUploader';
+import { FileUploader } from '~/hooks/data/useFileUploader';
 import { useCallback, useRef } from 'react';
 import { FormikConfig, FormikHelpers, useFormik, useFormikContext } from 'formik';
 import { object } from 'yup';

src/hooks/node/useNodePermissions.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { canEditNode, canLikeNode, canStarNode } from '~/utils/node';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectUser } from '~/redux/auth/selectors';
 import { INode } from '~/redux/types';
 

src/hooks/node/useNodeTags.ts

@@ -2,7 +2,7 @@ import { useHistory } from 'react-router';
 import { useCallback } from 'react';
 import { ITag } from '~/redux/types';
 import { URLS } from '~/constants/urls';
-import { useGetNode } from '~/utils/hooks/data/useGetNode';
+import { useGetNode } from '~/hooks/node/useGetNode';
 import { apiDeleteNodeTag, apiPostNodeTags } from '~/redux/node/api';
 
 export const useNodeTags = (id: number) => {

src/hooks/node/useUpdateNode.ts

@@ -1,4 +1,4 @@
-import { useGetNode } from '~/utils/hooks/data/useGetNode';
+import { useGetNode } from '~/hooks/node/useGetNode';
 import { useCallback } from 'react';
 import { INode } from '~/redux/types';
 import { apiPostNode } from '~/redux/node/api';
@@ -6,7 +6,7 @@ import { selectFlowNodes } from '~/redux/flow/selectors';
 import { flowSetNodes } from '~/redux/flow/actions';
 import { selectLabListNodes } from '~/redux/lab/selectors';
 import { labSetList } from '~/redux/lab/actions';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { useDispatch } from 'react-redux';
 
 export const useUpdateNode = (id: number) => {

src/hooks/player/usePlayer.ts

@@ -1,4 +1,4 @@
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectPlayer } from '~/redux/player/selectors';
 import { useCallback } from 'react';
 import { playerPause, playerPlay, playerSeek, playerStop } from '~/redux/player/actions';

src/hooks/search/useSearch.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { flowChangeSearch, flowLoadMoreSearch } from '~/redux/flow/actions';
 import { useDispatch } from 'react-redux';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectFlow } from '~/redux/flow/selectors';
 
 export const useSearch = () => {

src/hooks/user/userUser.ts

@@ -1,4 +1,4 @@
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectUser } from '~/redux/auth/selectors';
 
 export const useUser = () => useShallowSelect(selectUser);

src/layouts/NodeLayout/index.tsx

@@ -6,16 +6,16 @@ import { Footer } from '~/components/main/Footer';
 
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
 import { Container } from '~/containers/main/Container';
-import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
+import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
 import { NodeBottomBlock } from '~/containers/node/NodeBottomBlock';
-import { useNodeCoverImage } from '~/utils/hooks/node/useNodeCoverImage';
+import { useNodeCoverImage } from '~/hooks/node/useNodeCoverImage';
 import { URLS } from '~/constants/urls';
 import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog';
 
 import styles from './styles.module.scss';
 import { useNodeContext } from '~/utils/context/NodeContextProvider';
-import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
-import { useNodeActions } from '~/utils/hooks/node/useNodeActions';
+import { useNodePermissions } from '~/hooks/node/useNodePermissions';
+import { useNodeActions } from '~/hooks/node/useNodeActions';
 import { NodeTitle } from '~/components/node/NodeTitle';
 
 type IProps = {};

src/layouts/ProfileLayout/index.tsx

@@ -3,7 +3,7 @@ import styles from './styles.module.scss';
 import { RouteComponentProps } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { authLoadProfile } from '~/redux/auth/actions';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { selectAuthProfile, selectUser } from '~/redux/auth/selectors';
 import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft';
 import { Container } from '~/containers/main/Container';