Add Next.js ESLint (#425)

* Added Next.js eslint

* added eslint to lint-staged

* Added eslint config for prettier

* Fixed eslint issues in multiple files

* Fixed error in linter

components/ui/Modal/Modal.tsx

@@ -27,13 +27,15 @@ const Modal: FC<ModalProps> = ({ children, onClose }) => {
   )
 
   useEffect(() => {
-    if (ref.current) {
-      disableBodyScroll(ref.current, { reserveScrollBarGap: true })
+    const modal = ref.current
+
+    if (modal) {
+      disableBodyScroll(modal, { reserveScrollBarGap: true })
       window.addEventListener('keydown', handleKey)
     }
     return () => {
-      if (ref && ref.current) {
-        enableBodyScroll(ref.current)
+      if (modal) {
+        enableBodyScroll(modal)
       }
       clearAllBodyScrollLocks()
       window.removeEventListener('keydown', handleKey)

components/ui/Rating/Rating.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC, memo } from 'react'
 import rangeMap from '@lib/range-map'
 import { Star } from '@components/icons'
 import cn from 'classnames'
@@ -7,21 +7,19 @@ export interface RatingProps {
   value: number
 }
 
-const Quantity: React.FC<RatingProps> = React.memo(({ value = 5 }) => {
-  return (
-    <div className="flex flex-row py-6 text-accent-9">
-      {rangeMap(5, (i) => (
-        <span
-          key={`star_${i}`}
-          className={cn('inline-block ml-1 ', {
-            'text-accent-5': i >= Math.floor(value),
-          })}
-        >
-          <Star />
-        </span>
-      ))}
-    </div>
-  )
-})
+const Quantity: FC<RatingProps> = ({ value = 5 }) => (
+  <div className="flex flex-row py-6 text-accent-9">
+    {rangeMap(5, (i) => (
+      <span
+        key={`star_${i}`}
+        className={cn('inline-block ml-1 ', {
+          'text-accent-5': i >= Math.floor(value),
+        })}
+      >
+        <Star />
+      </span>
+    ))}
+  </div>
+)
 
-export default Quantity
+export default memo(Quantity)

components/ui/Sidebar/Sidebar.tsx

@@ -16,13 +16,14 @@ const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
   useEffect(() => {
-    if (ref.current) {
-      disableBodyScroll(ref.current, { reserveScrollBarGap: true })
+    const sidebar = ref.current
+
+    if (sidebar) {
+      disableBodyScroll(sidebar, { reserveScrollBarGap: true })
     }
+
     return () => {
-      if (ref && ref.current) {
-        enableBodyScroll(ref.current)
-      }
+      if (sidebar) enableBodyScroll(sidebar)
       clearAllBodyScrollLocks()
     }
   }, [])