(nextjs) fixed eslint warnings

.eslintignore

@@ -0,0 +1,4 @@
+build
+.next
+.husky
+node_modules

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: {

src/components/comment/LocalCommentFormTextarea/index.tsx

@@ -1,9 +1,4 @@
-import React, {
+import React, { forwardRef, KeyboardEventHandler, TextareaHTMLAttributes, useCallback } from 'react';
-  forwardRef,
-  KeyboardEventHandler,
-  TextareaHTMLAttributes,
-  useCallback,
-} from 'react';
 import { Textarea } from '~/components/input/Textarea';
 import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
 import { useRandomPhrase } from '~/constants/phrases';

src/components/common/Anchor/index.tsx

@@ -6,10 +6,10 @@ import { Link } from 'react-router-dom';
 
 interface AnchorProps extends LinkProps {}
 
-const Anchor: VFC<AnchorProps> = ({ ref, href, ...rest }) =>
+const Anchor: VFC<AnchorProps> = ({ ref, href, children, ...rest }) =>
   CONFIG.isNextEnvironment ? (
     <NextLink href={href ?? ''} passHref>
-      <a {...rest} />
+      <a {...rest}>{children}</a>
     </NextLink>
   ) : (
     <Link {...rest} to={href ?? ''} />

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';

src/components/containers/Grid/index.tsx

@@ -32,20 +32,18 @@ const Grid: FC<IProps> = ({
       [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
+      gridTemplateRows: square ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})` : rows,
-        ? `repeat(auto-fill, ${(rows !== 'auto' && rows) || size})`
-        : rows,
       gridAutoRows: rows,
       gridAutoColumns: columns,
       gridRowGap: gap,
-      gridColumnGap: gap
+      gridColumnGap: gap,
     }}
     {...props}
   >

src/components/containers/Group/index.tsx

@@ -31,7 +31,7 @@ const Group: FC<IProps> = ({
         [styles.wrap]: wrap,
         [styles.seamless]: seamless,
       },
-      className,
+      className
     )}
     {...props}
   >

src/components/containers/Panel/index.tsx

@@ -6,15 +6,9 @@ import classNames from 'classnames';
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
   stretchy?: boolean;
-}
+};
 
-const Panel: FC<IProps> = ({
+const Panel: FC<IProps> = ({ className, children, seamless, stretchy, ...props }) => (
-  className,
-  children,
-  seamless,
-  stretchy,
-  ...props
-}) => (
   <div className={classNames(styles.panel, className, { seamless, stretchy })} {...props}>
     {children}
   </div>

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';

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';

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';

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 {

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 { PRESETS } from '~/constants/urls';
-import { RouteComponentProps } from 'react-router';
 import { getURL, getURLFromString } from '~/utils/dom';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { Square } from '~/components/common/Square';

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 {}
 

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,

src/containers/dialogs/EditorDialog/index.tsx

@@ -26,7 +26,7 @@ const EditorDialog: FC<Props> = 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]);
 

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';

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';
 

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();

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 : []
   );
 };

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 = () => {

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';

src/hooks/node/useNodeActions.ts

@@ -41,7 +41,10 @@ export const useNodeActions = (node: INode, update: (node: Partial<INode>) => 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 };
 };

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)
+    ? // eslint-disable-next-line react-hooks/rules-of-hooks
-    : useRouteMatch<{ id: string }>().params.id;
+      (useRouter().query.id as string)
+    : // eslint-disable-next-line react-hooks/rules-of-hooks
+      useRouteMatch<{ id: string }>().params.id;
 };

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';

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();
 

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) {

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();

src/utils/providers/AudioPlayerProvider.tsx

@@ -1,12 +1,4 @@
-import React, {
+import React, { createContext, FC, useCallback, useContext, useEffect, useRef, useState } from 'react';
-  createContext,
-  FC,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
 import { path } from 'ramda';