Merge pull request #3 from Kosholadka/refactoring/add-new-rules-to-es…

…lint

refactor: add new rules to eslint

.eslintrc.cjs

@@ -5,14 +5,66 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:eslint-comments/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'prettier',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  parserOptions: { project: './tsconfig.json' },
+  plugins: ['react-refresh', 'unused-imports', 'jest', 'react-hooks-addons'],
   rules: {
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
+    'no-void': 0,
+    'react-hooks-addons/no-unused-deps': 'warn',
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: false,
+        checksConditionals: true,
+      },
+    ],
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-floating-promises': ['error'],
+    '@typescript-eslint/await-thenable': ['error'],
+    'require-await': ['error'],
+    'func-style': ['error', 'expression'],
+    'no-duplicate-imports': 'off',
+    'no-undef': 0,
+    'no-shadow': 0,
+    '@typescript-eslint/no-shadow': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    'import/export': 'off',
+    'react/no-unstable-nested-components': 'off',
+    '@typescript-eslint/explicit-function-return-type': 0,
+    'no-catch-shadow': 0,
+    '@typescript-eslint/explicit-module-boundary-types': 0,
+    '@typescript-eslint/no-use-before-define': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/no-empty-interface': 0,
+    '@typescript-eslint/no-var-requires': 0,
+    '@typescript-eslint/consistent-type-imports': 'error',
+    'import/no-named-as-default-member': 0,
+    'import/no-named-as-default': 0,
+    'import/no-useless-path-segments': 1,
+    'import/newline-after-import': 1,
+    'unused-imports/no-unused-imports': 'error',
+    'spaced-comment': ['error'],
+    'no-console': 'warn',
+    'import/no-cycle': [2, { ignoreExternal: true }],
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    react: {
+      version: 'detect',
+    },
   },
 }

src/App.tsx

@@ -52,8 +52,7 @@ const router = createBrowserRouter([
 ])
 
 export const App = () => {
-  useAuth() 
+  useAuth()
 
   return <RouterProvider router={router} />
 }
-

src/components/AddToCartButton.tsx

@@ -1,10 +1,11 @@
 import { BsCart2 } from 'react-icons/bs'
 import { useEffect, useState } from 'react'
 import { RiDeleteBin6Line } from 'react-icons/ri'
+import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai'
+
 import { useCartStore } from '../store/useCartStore'
 import { formatPrice } from '../utilities/formatPrice'
-import { ProductType } from '../store/useProductsStore'
-import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai'
+import type { ProductType } from '../store/useProductsStore'
 
 type Props = {
   product: ProductType

src/components/ProductCard.tsx

@@ -1,9 +1,10 @@
-import { Modal } from './Modal'
 import { useState } from 'react'
-import { LoadingSkeleton } from './LoadingSkeleton'
+
+import { Modal } from './Modal'
 import { AddToCartButton } from './AddToCartButton'
+import { LoadingSkeleton } from './LoadingSkeleton'
 import { formatPrice } from '../utilities/formatPrice'
-import { ProductType } from '../store/useProductsStore'
+import type { ProductType } from '../store/useProductsStore'
 import { useProductDetailsStore } from '../store/useProductDetailsStore'
 
 export const ProductCard = ({ product }: { product: ProductType }) => {
@@ -18,9 +19,9 @@ export const ProductCard = ({ product }: { product: ProductType }) => {
       }
     })
 
-  const handleOpenModalClick = async (id: string) => {
+  const handleOpenModalClick = (id: string) => {
     setIsModalOpen(true)
-    getProductDetails(id)
+    void getProductDetails(id)
   }
 
   return (

src/pages/Cart.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { TfiClose } from 'react-icons/tfi'
+
+import { useCartStore } from '../store/useCartStore'
 import { formatPrice } from '../utilities/formatPrice'
 import emptyCartLogo from '../assets/emptyCartLogo.png'
+import type { CartProduct } from '../store/useCartStore'
 import { AddToCartButton } from '../components/AddToCartButton'
-import { CartProduct, useCartStore } from '../store/useCartStore'
 
 export const Cart = () => {
   const [removingItem, setRemovingItem] = useState<{
@@ -53,7 +55,7 @@ export const Cart = () => {
         <img src={emptyCartLogo} alt="Empty Cart" className="size-32" />
         <p className="font-bold text-2xl">Your Cart is empty.</p>
         <p className="text-md text-slate-600">
-          Looks like you haven't added anything to your cart yet.
+          Looks like you have not added anything to your cart yet.
         </p>
         <Link
           to={`/`}

src/pages/ErrorPage.tsx

@@ -1,21 +1,20 @@
-import { useRouteError } from 'react-router-dom'
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom'
+
+import { logger } from '../utilities/logger'
 
 export const ErrorPage = () => {
   const error = useRouteError()
-  console.error(error)
 
-  const errorMessage =
-    (error as { statusText?: string; message?: string }) || {}
+  logger.error(error)
 
-  return (
-    <div id="error-page">
-      <h1>Oops!</h1>
-      <p>Sorry, an unexpected error has occurred.</p>
-      <p>
-        <i>
-          {errorMessage.statusText ?? errorMessage.message ?? 'Unknown error'}
-        </i>
-      </p>
-    </div>
-  )
+  if (isRouteErrorResponse(error)) {
+    return (
+      <div>
+        <h1>Oops!</h1>
+        <h2>{error.status}</h2>
+        <p>{error.statusText}</p>
+        <p>{error.data}</p>
+      </div>
+    )
+  }
 }

src/pages/Home.tsx

@@ -10,15 +10,15 @@ export const Home = () => {
   }))
 
   useEffect(() => {
-    getProducts()
+    void getProducts()
   }, [getProducts])
 
   if (isLoading) {
     return <p>Loading...</p>
   }
 
   if (isError) {
-    return <p>There was an error loading the users</p>
+    return <p>There was an error loading the products</p>
   }
 
   return <Products />