From e5f8d5a551a8cb5b1815039fe55416ab11ffe24b Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 19 Jan 2022 12:03:54 +0700 Subject: [PATCH] (nextjs) fixed eslint warnings --- .eslintignore | 4 ++++ craco.config.js | 23 +++++++++++++++++++ .../LocalCommentFormTextarea/index.tsx | 7 +----- src/components/common/Anchor/index.tsx | 4 ++-- src/components/common/Avatar/index.tsx | 2 +- src/components/containers/Grid/index.tsx | 8 +++---- src/components/containers/Group/index.tsx | 2 +- src/components/containers/Panel/index.tsx | 10 ++------ src/components/flow/FlowCell/index.tsx | 1 - src/components/flow/FlowSwiperHero/index.tsx | 1 - src/components/lab/LabBottomPanel/index.tsx | 1 - src/components/lab/LabHero/index.tsx | 1 - src/components/node/NodeRelatedItem/index.tsx | 5 ++-- src/components/sidebar/SidebarStack/index.tsx | 2 -- src/constants/comment.ts | 2 +- src/containers/dialogs/EditorDialog/index.tsx | 2 +- src/containers/node/NodeBottomBlock/index.tsx | 1 - src/hooks/auth/useLoginForm.ts | 2 -- src/hooks/auth/useLoginLogoutRestore.ts | 3 +-- src/hooks/dom/useScrollToTop.ts | 1 + src/hooks/flow/useFlowLoader.ts | 2 +- src/hooks/node/useLoadNode.ts | 2 +- src/hooks/node/useNodeActions.ts | 5 +++- src/hooks/node/useNodePageParams.ts | 6 +++-- src/layouts/NodeLayout/index.tsx | 3 --- src/pages/_app.tsx | 1 - src/pages/_document.tsx | 2 +- src/store/index.ts | 2 +- src/utils/providers/AudioPlayerProvider.tsx | 10 +------- 29 files changed, 56 insertions(+), 59 deletions(-) create mode 100644 .eslintignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..3fb19b88 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +build +.next +.husky +node_modules diff --git a/craco.config.js b/craco.config.js index 7be4cbdf..e1a4a1e0 100644 --- a/craco.config.js +++ b/craco.config.js @@ -29,6 +29,29 @@ module.exports = { allowSeparatedGroups: false, }, ], + 'import/order': [ + 'error', + { + groups: ['builtin', 'external', 'internal', 'sibling', 'type', 'object'], + pathGroups: [ + { + pattern: '~/**', + group: 'internal', + }, + { + pattern: '../**', + group: 'sibling', + position: 'after', + }, + { + pattern: './**', + group: 'sibling', + position: 'after', + }, + ], + 'newlines-between': 'always', + }, + ], }, }, jest: { diff --git a/src/components/comment/LocalCommentFormTextarea/index.tsx b/src/components/comment/LocalCommentFormTextarea/index.tsx index 1c4d1e6f..c07fec70 100644 --- a/src/components/comment/LocalCommentFormTextarea/index.tsx +++ b/src/components/comment/LocalCommentFormTextarea/index.tsx @@ -1,9 +1,4 @@ -import React, { - forwardRef, - KeyboardEventHandler, - TextareaHTMLAttributes, - useCallback, -} from 'react'; +import React, { forwardRef, KeyboardEventHandler, TextareaHTMLAttributes, useCallback } from 'react'; import { Textarea } from '~/components/input/Textarea'; import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik'; import { useRandomPhrase } from '~/constants/phrases'; diff --git a/src/components/common/Anchor/index.tsx b/src/components/common/Anchor/index.tsx index 3f5a9c53..6583bca3 100644 --- a/src/components/common/Anchor/index.tsx +++ b/src/components/common/Anchor/index.tsx @@ -6,10 +6,10 @@ import { Link } from 'react-router-dom'; interface AnchorProps extends LinkProps {} -const Anchor: VFC = ({ ref, href, ...rest }) => +const Anchor: VFC = ({ ref, href, children, ...rest }) => CONFIG.isNextEnvironment ? ( - + {children} ) : ( diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx index aece59dd..30fe97a0 100644 --- a/src/components/common/Avatar/index.tsx +++ b/src/components/common/Avatar/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, forwardRef, useCallback } from 'react'; +import React, { forwardRef, useCallback } from 'react'; import { getURLFromString } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import styles from './styles.module.scss'; diff --git a/src/components/containers/Grid/index.tsx b/src/components/containers/Grid/index.tsx index 5f6a3e7d..7c7f1a5f 100644 --- a/src/components/containers/Grid/index.tsx +++ b/src/components/containers/Grid/index.tsx @@ -32,20 +32,18 @@ const Grid: FC = ({ [styles.horizontal]: horizontal, [styles.vertical]: !horizontal, [styles.square]: square, - [styles.stretchy]: stretchy + [styles.stretchy]: stretchy, })} style={{ ...style, gridTemplateColumns: square ? `repeat(auto-fill, ${(columns !== 'auto' && columns) || size})` : columns, - gridTemplateRows: square - ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})` - : rows, + gridTemplateRows: square ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})` : rows, gridAutoRows: rows, gridAutoColumns: columns, gridRowGap: gap, - gridColumnGap: gap + gridColumnGap: gap, }} {...props} > diff --git a/src/components/containers/Group/index.tsx b/src/components/containers/Group/index.tsx index 08099e28..add6697d 100644 --- a/src/components/containers/Group/index.tsx +++ b/src/components/containers/Group/index.tsx @@ -31,7 +31,7 @@ const Group: FC = ({ [styles.wrap]: wrap, [styles.seamless]: seamless, }, - className, + className )} {...props} > diff --git a/src/components/containers/Panel/index.tsx b/src/components/containers/Panel/index.tsx index c6d369d2..85e66d69 100644 --- a/src/components/containers/Panel/index.tsx +++ b/src/components/containers/Panel/index.tsx @@ -6,15 +6,9 @@ import classNames from 'classnames'; type IProps = HTMLAttributes & { seamless?: boolean; stretchy?: boolean; -} +}; -const Panel: FC = ({ - className, - children, - seamless, - stretchy, - ...props -}) => ( +const Panel: FC = ({ className, children, seamless, stretchy, ...props }) => (
{children}
diff --git a/src/components/flow/FlowCell/index.tsx b/src/components/flow/FlowCell/index.tsx index 350625ac..8e3e2e8f 100644 --- a/src/components/flow/FlowCell/index.tsx +++ b/src/components/flow/FlowCell/index.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; -import { NavLink } from 'react-router-dom'; import { CellShade } from '~/components/flow/CellShade'; import { FlowDisplay, INode } from '~/types'; import { FlowCellText } from '~/components/flow/FlowCellText'; diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx index 9e1a165d..e371cabe 100644 --- a/src/components/flow/FlowSwiperHero/index.tsx +++ b/src/components/flow/FlowSwiperHero/index.tsx @@ -8,7 +8,6 @@ import { getURLFromString } from '~/utils/dom'; import { PRESETS, URLS } from '~/constants/urls'; import SwiperClass from 'swiper/types/swiper-class'; import { LoaderCircle } from '~/components/input/LoaderCircle'; -import { useHistory } from 'react-router'; import classNames from 'classnames'; import { IFlowNode } from '~/types'; import { useWindowSize } from '~/hooks/dom/useWindowSize'; diff --git a/src/components/lab/LabBottomPanel/index.tsx b/src/components/lab/LabBottomPanel/index.tsx index 2b7fbd76..bcff0674 100644 --- a/src/components/lab/LabBottomPanel/index.tsx +++ b/src/components/lab/LabBottomPanel/index.tsx @@ -7,7 +7,6 @@ import { INode } from '~/types'; import { Icon } from '~/components/input/Icon'; import classNames from 'classnames'; import { Grid } from '~/components/containers/Grid'; -import { useHistory } from 'react-router'; import { URLS } from '~/constants/urls'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { useNavigation } from '~/hooks/navigation/useNavigation'; diff --git a/src/components/lab/LabHero/index.tsx b/src/components/lab/LabHero/index.tsx index 23f4b911..2b443c8d 100644 --- a/src/components/lab/LabHero/index.tsx +++ b/src/components/lab/LabHero/index.tsx @@ -6,7 +6,6 @@ import styles from './styles.module.scss'; import { INode } from '~/types'; import { getPrettyDate } from '~/utils/dom'; import { URLS } from '~/constants/urls'; -import { useHistory } from 'react-router-dom'; import { useNavigation } from '~/hooks/navigation/useNavigation'; interface IProps { diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx index c627a449..3e6b3abd 100644 --- a/src/components/node/NodeRelatedItem/index.tsx +++ b/src/components/node/NodeRelatedItem/index.tsx @@ -1,9 +1,8 @@ -import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { FC, memo, useEffect, useMemo, useRef, useState } from 'react'; import styles from './styles.module.scss'; import classNames from 'classnames'; import { INode } from '~/types'; -import { PRESETS, URLS } from '~/constants/urls'; -import { RouteComponentProps } from 'react-router'; +import { PRESETS } from '~/constants/urls'; import { getURL, getURLFromString } from '~/utils/dom'; import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString'; import { Square } from '~/components/common/Square'; diff --git a/src/components/sidebar/SidebarStack/index.tsx b/src/components/sidebar/SidebarStack/index.tsx index cd251ac4..e989c1d4 100644 --- a/src/components/sidebar/SidebarStack/index.tsx +++ b/src/components/sidebar/SidebarStack/index.tsx @@ -1,7 +1,5 @@ import React, { FC, useMemo } from 'react'; import styles from './styles.module.scss'; -import { Button } from '~/components/input/Button'; -import { Filler } from '~/components/containers/Filler'; interface SidebarStackProps {} diff --git a/src/constants/comment.ts b/src/constants/comment.ts index 4d46d0f5..ef4c80c2 100644 --- a/src/constants/comment.ts +++ b/src/constants/comment.ts @@ -10,7 +10,7 @@ export const COMMENT_BLOCK_TYPES = { export const COMMENT_BLOCK_DETECTORS = [ { type: COMMENT_BLOCK_TYPES.EMBED, - test: /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-\&\=]+)/gim, + test: /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-&=]+)/gim, }, { type: COMMENT_BLOCK_TYPES.MARK, diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index 29764c95..109de217 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/src/containers/dialogs/EditorDialog/index.tsx @@ -26,7 +26,7 @@ const EditorDialog: FC = observer(({ node, onRequestClose, onSubmit }) => const uploader = useUploader(UploadSubject.Editor, UploadTarget.Nodes, node.files); const formik = useNodeFormFormik(node, uploader, onRequestClose, onSubmit); - const { values, handleSubmit, dirty, status } = formik; + const { values, handleSubmit, dirty } = formik; const component = useMemo(() => node.type && prop(node.type, NODE_EDITORS), [node.type]); diff --git a/src/containers/node/NodeBottomBlock/index.tsx b/src/containers/node/NodeBottomBlock/index.tsx index 592e3747..567cf688 100644 --- a/src/containers/node/NodeBottomBlock/index.tsx +++ b/src/containers/node/NodeBottomBlock/index.tsx @@ -6,7 +6,6 @@ import { NodeCommentForm } from '~/components/node/NodeCommentForm'; import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock'; import { useNodeBlocks } from '~/hooks/node/useNodeBlocks'; import { NodeTagsBlock } from '~/components/node/NodeTagsBlock'; -import StickyBox from 'react-sticky-box'; import styles from './styles.module.scss'; import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock'; import { useNodeContext } from '~/utils/context/NodeContextProvider'; diff --git a/src/hooks/auth/useLoginForm.ts b/src/hooks/auth/useLoginForm.ts index ab783ffe..cf4df701 100644 --- a/src/hooks/auth/useLoginForm.ts +++ b/src/hooks/auth/useLoginForm.ts @@ -3,8 +3,6 @@ import { ERRORS } from '~/constants/errors'; import { useCallback } from 'react'; import { FormikConfig, useFormik } from 'formik'; import { IUser } from '~/types/auth'; -import { showToastSuccess } from '~/utils/toast'; -import { getRandomPhrase } from '~/constants/phrases'; import { showErrorToast } from '~/utils/errors/showToast'; import { getValidationErrors } from '~/utils/errors/getValidationErrors'; diff --git a/src/hooks/auth/useLoginLogoutRestore.ts b/src/hooks/auth/useLoginLogoutRestore.ts index 671aeef2..67d03364 100644 --- a/src/hooks/auth/useLoginLogoutRestore.ts +++ b/src/hooks/auth/useLoginLogoutRestore.ts @@ -1,9 +1,8 @@ import { useAuthStore } from '~/store/auth/useAuthStore'; import { useCallback } from 'react'; import { apiUserLogin } from '~/api/auth'; -import { showErrorToast } from '~/utils/errors/showToast'; import { getRandomPhrase } from '~/constants/phrases'; -import { showToastInfo, showToastSuccess } from '~/utils/toast'; +import { showToastInfo } from '~/utils/toast'; export const useLoginLogoutRestore = () => { const auth = useAuthStore(); diff --git a/src/hooks/dom/useScrollToTop.ts b/src/hooks/dom/useScrollToTop.ts index 3eeb1cd0..1fe85f9a 100644 --- a/src/hooks/dom/useScrollToTop.ts +++ b/src/hooks/dom/useScrollToTop.ts @@ -16,6 +16,7 @@ export const useScrollToTop = (deps?: any[]) => { top: bounds.top - 100, }); }, + // eslint-disable-next-line react-hooks/exhaustive-deps deps && Array.isArray(deps) ? deps : [] ); }; diff --git a/src/hooks/flow/useFlowLoader.ts b/src/hooks/flow/useFlowLoader.ts index af12a2d8..2232739d 100644 --- a/src/hooks/flow/useFlowLoader.ts +++ b/src/hooks/flow/useFlowLoader.ts @@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'; import { getNodeDiff } from '~/api/node'; import { uniq } from 'ramda'; import { useFlowStore } from '~/store/flow/useFlowStore'; -import { runInAction, toJS } from 'mobx'; +import { runInAction } from 'mobx'; import { showErrorToast } from '~/utils/errors/showToast'; export const useFlowLoader = () => { diff --git a/src/hooks/node/useLoadNode.ts b/src/hooks/node/useLoadNode.ts index a536bf05..773d9996 100644 --- a/src/hooks/node/useLoadNode.ts +++ b/src/hooks/node/useLoadNode.ts @@ -1,5 +1,5 @@ import useSWR from 'swr'; -import { ApiGetNodeRequest, ApiGetNodeResponse } from '~/types/node'; +import { ApiGetNodeResponse } from '~/types/node'; import { API } from '~/constants/api'; import { useOnNodeSeen } from '~/hooks/node/useOnNodeSeen'; import { apiGetNode } from '~/api/node'; diff --git a/src/hooks/node/useNodeActions.ts b/src/hooks/node/useNodeActions.ts index 463b4518..4bb9a82d 100644 --- a/src/hooks/node/useNodeActions.ts +++ b/src/hooks/node/useNodeActions.ts @@ -41,7 +41,10 @@ export const useNodeActions = (node: INode, update: (node: Partial) => Pr } }, [node.deleted_at, node.id, update]); - const onEdit = useCallback(() => showModal(Dialog.EditNode, { nodeId: node.id! }), [node]); + const onEdit = useCallback(() => showModal(Dialog.EditNode, { nodeId: node.id! }), [ + node, + showModal, + ]); return { onLike, onStar, onLock, onEdit }; }; diff --git a/src/hooks/node/useNodePageParams.ts b/src/hooks/node/useNodePageParams.ts index 28479222..ed0e568e 100644 --- a/src/hooks/node/useNodePageParams.ts +++ b/src/hooks/node/useNodePageParams.ts @@ -4,6 +4,8 @@ import { CONFIG } from '~/utils/config'; export const useNodePageParams = () => { return CONFIG.isNextEnvironment - ? (useRouter().query.id as string) - : useRouteMatch<{ id: string }>().params.id; + ? // eslint-disable-next-line react-hooks/rules-of-hooks + (useRouter().query.id as string) + : // eslint-disable-next-line react-hooks/rules-of-hooks + useRouteMatch<{ id: string }>().params.id; }; diff --git a/src/layouts/NodeLayout/index.tsx b/src/layouts/NodeLayout/index.tsx index 05cd2a80..1f0e8c82 100644 --- a/src/layouts/NodeLayout/index.tsx +++ b/src/layouts/NodeLayout/index.tsx @@ -1,5 +1,4 @@ import React, { FC } from 'react'; -import { Route } from 'react-router'; import { Card } from '~/components/containers/Card'; import { Footer } from '~/components/main/Footer'; @@ -9,8 +8,6 @@ import { Container } from '~/containers/main/Container'; import { useNodeBlocks } from '~/hooks/node/useNodeBlocks'; import { NodeBottomBlock } from '~/containers/node/NodeBottomBlock'; 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'; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 7389a15a..13d559e0 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -15,7 +15,6 @@ import { AudioPlayerProvider } from '~/utils/providers/AudioPlayerProvider'; import { MetadataProvider } from '~/utils/providers/MetadataProvider'; import { AuthProvider } from '~/utils/providers/AuthProvider'; import { MainLayout } from '~/containers/main/MainLayout'; -import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader'; const mobxStore = getMOBXStore(); diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index cbf734b9..88da4827 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,4 +1,4 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document'; +import Document, { Head, Html, Main, NextScript } from 'next/document'; class MyDocument extends Document { static async getInitialProps(ctx) { diff --git a/src/store/index.ts b/src/store/index.ts index 8abfc642..b4734e10 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -3,7 +3,7 @@ import { FlowStore } from '~/store/flow/FlowStore'; import { ModalStore } from '~/store/modal/ModalStore'; import { LabStore } from '~/store/lab/LabStore'; import { AuthStore } from '~/store/auth/AuthStore'; -import { enableStaticRendering, useStaticRendering } from 'mobx-react-lite'; +import { enableStaticRendering } from 'mobx-react-lite'; export class Store { flow = new FlowStore(); diff --git a/src/utils/providers/AudioPlayerProvider.tsx b/src/utils/providers/AudioPlayerProvider.tsx index ff2c5902..6b2ab02f 100644 --- a/src/utils/providers/AudioPlayerProvider.tsx +++ b/src/utils/providers/AudioPlayerProvider.tsx @@ -1,12 +1,4 @@ -import React, { - createContext, - FC, - useCallback, - useContext, - useEffect, - useRef, - useState, -} from 'react'; +import React, { createContext, FC, useCallback, useContext, useEffect, useRef, useState } from 'react'; import { IFile } from '~/types'; import { getURL } from '~/utils/dom'; import { path } from 'ramda';