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;